Sequence 网站预览
Sequence 网站预览

Sequence

白色基底、网格布局与渐变展示。

页面以白色为基底,搭配深蓝色文字。局部操作控件以紫色强调。字体采用 Inter。视觉特点包括网格布局、渐变展示、插画元素、细线分隔。适合参考的场景:区块链项目介绍页、生态网站首页。

查看原始网站

使用规范

建议采用

  • 任何屏幕上最重要的唯一操作都使用紫色到靛蓝的渐变(#6c00f6 → #4f46e5);每个视图中绝不要将其用于超过一个CTA。
  • 卡片圆角设为20px,并为每个抬升表面使用24px的弥散柔和阴影,以维持单一、一致的深度语言。
  • 每个主要CTA旁都配一个Midnight Slate颜色、类似“Read docs →”的无填充次级链接,使紫色渐变保持稀少,并成为明确的信号。
  • 分区和首屏标题采用Inter 700字重、32–52px;卡片标题采用600字重、18–20px;正文采用400字重、14–16px。
  • 每个功能卡片标题上方都放置一个小型紫色胶囊标签,在各页面建立一致的眉题模式。
  • 分区纵向间距使用40–64px,同级元素之间使用8px,让布局舒适而自信,始终不显拥挤。
  • 绿色(#00d492)、蓝色(#51a2ff)和粉色(#fb64b6)只保留给产品模型插画,绝不要用于界面附属元素、边框或文字。

建议避免

  • 不要将紫色渐变用于次级按钮、徽章或图标;这会削弱主要操作的分量。
  • 正文或边框不要使用#000000;文字采用Midnight Slate(#0f172b),边框采用Silver(#e5e7eb),让系统保持柔和,而非生硬。
  • 不要引入新的圆角数值;卡片为20px,按钮为8px,标签为4px,混用其他数值会破坏几何秩序。
  • 不要给按钮、输入框或图标添加浓重投影;深度只保留给完整卡片。
  • 除品牌渐变和深色客户评价横带之外,不要在卡片或背景上用渐变装饰;平面表面能使系统保持易读。
  • 不要在白色背景上放置绿色、蓝色或粉色文字;这些颜色只用于插画,无法满足正文的对比度要求。
  • 首屏上的CTA按钮不要拉伸到满宽;让它以自然宽度置于无填充链接旁,保持“操作加替代选择”的视觉节奏。