Arc

暖白色基底、衬线字形与渐变展示。
页面以暖白色为基底。字体采用 Marlin Soft SQ、Marlin。视觉特点包括衬线字形、渐变展示、居中构图、产品图像展示。适合参考的场景:效率工具官网、协作产品介绍页。
查看原始网站使用规范
建议采用
- 每个彩色区块的边界都使用扇贝形分隔,绝不采用生硬横线或细边框。
- 展示标题使用 46px 的 Marlin 400/700/800,字间距为 -2.3px。衬线字体的紧密间距,正是编辑语气成立的原因。
- Electric Iris #3139fb 只用于满幅区块背景,绝不用于文字、图标或小型界面元素。
- 衬线标题 Marlin 与无衬线界面 Inter Variable 配对,字体对比承担编辑设计与产品相遇的张力。
- 卡片、按钮和导航项默认使用 8px 圆角;22px 只用于胶囊聊天气泡和偶尔的标签。
- 微型标签和类别标记使用 12px 的 ABC Favorit Mono,字间距为 0.15em。等宽字体的宽间距打破衬线与无衬线模式,并标示元信息。
- 阴影保持最低限度:按钮采用 rgba(0,0,0,0.1) 0px 5px 5px 0px,抬升模型采用 rgba(0,0,0,0.25) 0px 2px 8px 0px。空间组织应交给扇贝分隔与色块。
建议避免
- Electric Iris #3139fb 不要用于 CTA 按钮或交互强调。它属于氛围,而非交互;按钮保持深色。
- 界面组件不要添加渐变。网站未检测到此类渐变,唯一渐变是首屏奶油色至粉色铺陈。
- 卡片或按钮不要使用 0px 或 4px 圆角。最小可见圆角为 8px,锐利直角会破坏手工纸张感。
- 同一行不要搭配两种衬线字体家族。Marlin 和 Marlin Soft SQ 是仅有的衬线;正文与 ABC Oracle 混用可以,但绝不混用两种展示衬线。
- 页面画布不要使用亮白 #ffffff。默认是暖 Oat #fffadd 奶油色,白色只留给模型内部和扇贝凸起。
- 文字或小元素不要采用重投影。阴影只出现在按钮和浏览器模型窗口上。
- 不要将扇贝分隔替换为 SVG 波浪、斜切或直线。半圆扇贝节奏是网站最容易识别的单一特征。