一句话定义
FIGO 结构编辑式：先让关系变清楚，再让视觉留下辨识度。
这套风格不是一组好看的颜色，也不是把通用“高级感”模板贴到页面上。它用稳定的层级、留白、网格和状态信号，让读者先看见对象、关系、证据与边界；品牌辨识度来自持续一致的结构和判断方式。
一、权威与适用边界
| 来源 | 在本规范中的角色 | 不承担什么 |
|---|---|---|
| 《菲戈与OPC品牌共同原则》 | 决定品牌必须同时建立独特认知与信任 | 不规定具体像素和组件 |
| 当前站点代码与正式品牌资产 | 决定已落地的颜色、字体、布局与 X 识别 | 不替代品牌原则 |
| Premium Showcase 历史包 | 提供流式字号、克制阴影、响应式矩阵等方法证据 | 不是当前品牌权威，不复制其 SaaS 内容 |
本规范适用于个人首页、项目、文章、知识阅读与后续同域页面。业务事实、专业规则和知识正文仍由各自的正式来源决定，网页只是派生阅读界面。
二、五条视觉原则
1．清楚优先
每个屏幕先回答一个主要问题。标题、摘要、状态、正文与下一步之间必须有可见层级。
2．结构可见
网格、序号、边线、目录和状态标签用于揭示关系，不作为装饰。只有关系需要被看见时才增加视觉元素。
3．现实有边界
知识页必须展示版本、状态、来源和适用边界。候选、待核实与当前有效使用不同状态信号，不能靠语气模糊。
4．克制但不冷漠
大留白、深色文字与纸张表面构成理性基础；蓝色用于行动与可信信号，紫色只作少量认知强调。
5．辨识来自一致
X 品牌图形、结构编辑式排版、双语微标签和“清楚—结构—现实”长期共同出现。禁止通过不断更换风格制造新鲜感。
三、基础设计令牌
色彩
| 令牌 | 值 | 作用 |
|---|---|---|
| Canvas | #f5f7fb | 全站背景，降低纯白眩光 |
| Paper | #ffffff | 卡片、正文和可读表面 |
| Ink | #0d1e32 | 主要文字与深色区域 |
| Muted | #5f7084 | 次级信息，不能承担关键边界 |
| Line | rgba(13, 30, 50, 0.11) | 网格、分隔与卡片边线 |
| Blue | #2563eb | 链接、焦点、当前状态与主要行动 |
| Purple | #7c3aed | 少量认知强调，不单独承担状态含义 |
| Pale Blue | #eef3ff | 代码、表头和弱提示背景 |
颜色比例建议：中性色占主要面积，蓝色只出现在关键动作与信号，紫色不超过蓝色的视觉用量。大面积蓝紫渐变、霓虹光晕和装饰性彩色卡片不属于本风格。
字体
- 正文：系统无衬线字体栈，优先保证中文清晰和跨设备稳定。
- 数据、状态、英文微标签：等宽字体栈。
- 首页主标题：
clamp(52px, 6.5vw, 92px)，紧凑字距。 - 内页主标题：
clamp(48px, 7vw, 80px)。 - 正文：16—18px，行高 1.65—1.85；长文阅读宽度不超过 720px。
- 英文微标签不是翻译全文，只用来标记结构层级。
空间与形状
- 页面内容宽度：最大 1180px；桌面两侧至少 28px，移动端至少 19px。
- 大章节垂直间距：88—130px。
- 卡片内边距：22—42px，随内容密度调整。
- 常用圆角：11px、16px、26px；同一组件族只使用一个层级。
- 阴影：只用于需要从背景中浮起的重点表面，采用低透明度大扩散阴影。
四、布局语法
首页与项目页
采用宽内容壳、非对称双栏和大标题。视觉图形必须帮助说明当前实践或结构，不用无意义插画填空。
知识入口
先展示“怎样读”，再展示知识卡片。每张卡固定包含：
- 类别与顺序；
- 当前状态；
- 标题与一句摘要；
- 版本、生效日期和预计阅读时间；
- 当前边界；
- 明确的阅读入口。
知识正文
正文采用“标题区—来源状态区—目录—正文—返回入口”五段结构。桌面目录吸附在正文左侧，移动端折叠到正文上方；表格允许横向滚动，不能挤压为不可读窄列。
文章与知识的区别
- 文章表达已经形成的长期思考，按发布时间组织。
- 知识为解决问题而组织，按对象、状态和学习顺序进入。
- 同一正文只保留一个公开地址；知识入口可以链接既有文章，避免复制。
五、组件规则
导航
主导航只保留长期入口。桌面展示文字导航，移动端保留品牌与主要行动；后续入口增多时应设计明确的移动导航，不缩小成难以点击的密集文字。
按钮与链接
- 主要按钮：深色底、白字，用于页面唯一的主要行动。
- 次要按钮：纸张底、细边线，用于平行动作。
- 文本链接：蓝色或带箭头，文案必须说明去向。
- 所有可交互元素必须有明显的键盘焦点。
卡片
卡片默认使用细边线和纸张背景。只有当前最重要内容可以使用深色或强调色。悬停效果最多包含轻微上移、边线变化或阴影变化中的两种。
状态
- 当前有效：蓝色信号，表示可作为当前入口。
- 分层核验：紫色信号，表示不同来源或时期必须区分。
- 办理前复核：琥珀色信号，表示实际操作前必须确认。
- 候选待验证：灰蓝信号，表示模型或课程结构尚未通过现实迁移。
状态颜色必须与文字标签同时出现，不能只靠颜色传达。
六、内容呈现合同
任何正式知识页面至少回答：
- 这是什么；
- 当前版本和状态是什么；
- 来源是什么；
- 哪些内容可直接使用；
- 哪些内容待核实或只适用于特定条件；
- 读完后应形成什么能力或行动。
不得隐藏不确定性，不用“专业感”包装未经核验的公司口径，不在知识页提供超出财富顾问职责或当前授权的操作承诺。
七、响应式与可访问性
- 核心检查宽度：360、600、820、1024、1440、1920px。
- 820px 以下，双栏内容改为单栏；长文目录改为折叠式。
- 600px 以下，主标题、卡片间距和操作区收紧，但正文不得低于可读字号。
- 支持
prefers-reduced-motion，减少动画时关闭平滑滚动和过渡。 - 正文、状态与按钮保持足够对比度；图标不能替代文字。
- 触控目标建议不小于 40px 高。
八、历史参考的取舍
从 Premium Showcase 保留：1180px 内容宽度、流式字号、精确间距、克制边线与阴影、响应式验收矩阵。
与现站点合并：X 品牌识别、纸张与网格背景、深墨色、蓝紫信号、结构编辑式长文排版。
明确删除：SaaS 定价表、虚构客户数据、通用仪表盘、占据主视觉的大面积蓝紫渐变，以及与当前内容无关的“高级感”组件。
九、变更与验收
新增页面先复用令牌和既有组件；只有真实问题无法解决时才增加新令牌或组件。修改本规范时，先归档旧版，再更新固定入口。
每次发布至少验证：
- 页面主问题能否在首屏识别；
- 版本、状态、来源和边界是否同时可见；
- 360px 与桌面宽度是否可读；
- 键盘焦点、减少动画和表格滚动是否正常；
- 同一知识是否只存在一个公开正文地址；
- 页面是否仍然服务真实内容，而不是展示设计本身。