Sequence 网站预览
Sequence 网站预览

Sequence

白色基底、大字排版与细线分隔。

页面以白色为基底,搭配近黑色文字。局部操作控件以紫色强调。字体采用 TWK Lausanne、Moderat Serif。视觉特点包括大字排版、细线分隔、衬线字形、居中构图。适合参考的场景:支付服务首页、金融科技产品介绍页。

查看原始网站

使用规范

建议采用

  • 仅将紫罗兰脉冲(#a565ff)用于每屏唯一的主行动号召(CTA);绝不用于正文、静止状态的图标或大面积填充。
  • 所有标题字号在 24px 及以上时,均使用 TWK Lausanne 字重 300;仅将 Moderat Serif 保留用于 40–46px 的展示型标题。
  • 为所有卡片、分隔符、输入框和标签设置 1px 的 Ash(#e5e7eb)边框——这是系统的结构线。
  • 为所有按钮、导航项和标签应用 9999px 的胶囊半径;卡片使用 8px,输入框和小型交互元素使用 4px。
  • 每个区块均锚定在白色或近白色背景上;深度来自细线边框和分层阴影堆叠,而非彩色填充。
  • 在构建带有色调的提示或高亮状态时,搭配使用薰衣草晕染(#ebebff)与鸢尾发光(#e0c9ff)——切勿将二者作为大面积背景填充。
  • 保持区块间距为 80px,卡片内边距为 24px;仅在密集网格单元或产品金属表面时降为 16px。

建议避免

  • 不要引入任何新的色彩——系统为单色灰阶,加上精确的一处紫罗兰强调色和一个语义性的绿色。
  • 不要在小于 40px 时使用 Moderat Serif,或用于除 h1 展示标题之外的任何场景;否则将失去其编辑分量。
  • 不要为大内容区域设置彩色背景;氛围深度来自柔和的蓝紫径向渐变晕染,而非实色填充。
  • 不要使用厚重的阴影;系统依赖于 1px 的细线环和紧密控制的偏移阴影,绝不用模糊的堆叠式高亮。
  • 不要将正文文本设置在小于 12px;任何面向用户的文本最小 TWK Lausanne 字号为 12px,舒适默认值为 14px。
  • 不要将靛蓝墨水(#5e5cff)用作按钮背景——它属于链接和次级文本颜色,而非操作填充。
  • 不要将按钮或标签圆角设为 8px;它们必须为胶囊形(9999px)以维持与 8px 卡片半径的对比度。