Refero

白色基底、衬线字形与胶囊形控件。
页面以白色为基底,搭配蓝色文字。字体采用 Title (custom serif)、Base-Variable (custom sans)。视觉特点包括衬线字形、胶囊形控件、网格布局、产品图像展示。适合参考的场景:设计作品集、创意服务介绍页。
查看原始网站使用规范
建议采用
- 所有展示标题均使用 Title 衬线字体 400 字重(字号范围 36–64px),字间距为 -0.02em——禁止使用粗体或半粗体。
- 主要按钮填充使用 #000000 背景与 #f7f8fb 文字,圆角半径为 9999px;这是系统中唯一的实色操作元素。
- 为功能/展示卡片应用 64px 圆角,以形成标志性的胶囊卡片形状——此类容器禁止使用标准 8–16px 的圆角。
- 使用 rgba(12,41,126,0.07) 0px 0px 0px 1px inset 作为提升表面的阴影令牌——永远不要使用外扩的下落阴影。
- 所有 UI 元素的配色保持无彩色,仅通过语义状态引入色彩(错误 #a10214,警告 #7c4b01,成功 #02a745),以及卡片背景的结构性强调色调 rgba(55,80,155,0.04)。
- 所有 Base-Variable 基础变量 UI 文字均需应用负字间距:在 13px 缩放时为 -0.026em,到 25px 时为 -0.015em——宽松的字间距永远不正确。
- 所有低调边框、占位文本及辅助图标均使用 #777d90——这是系统的主力中灰。
建议避免
- 禁止在 UI 按钮填充或背景渲染中引入彩色强调色(蓝色、紫色、绿色)——系统在非语义状态下的色彩表达是刻意保持无色的。
- 禁止将 Title 衬线字体使用在小于 36px 的场景中——该字体仅为展示用途;所有正文与 UI 文字均使用 Base-Variable 字体。
- 禁止使用阴影或抬升光环(box-shadow: 0 4px 24px ...)——唯一允许的阴影是内嵌的淡蓝色环形 rgba(12,41,126,0.07)。
- 主要容器面板或模态对话框的圆角半径禁止低于 20px——系统整体偏好大半径设计。
- Base-Variable 字体的字重禁止设置为 400 或以下——最小字重为 500,以维持紧凑、自信的笔画密度。
- 禁止使用 #9fa5ba 或更浅的灰色作为正文文字颜色——这些仅用于边框和透明描边控件;正文文字的最低标准为 #777d90。
- 同一层级的按钮风格禁止叠加使用——每个操作组仅允许一个黑色胶囊按钮和一个透明描边按钮,禁止添加第三个层级。