Sequence 网站预览
Sequence 网站预览

Sequence

仿佛柔和日光下的API控制台:界面本身就是产品,紫色是唯一具有力量的色彩。

Sequence采用明亮、开发者优先的视觉语言,以白色表面、自信的无衬线字体系统和一种占主导的紫色为基础;紫色是页面上唯一强有力的品牌信号。这种美学像现代API平台:充裕留白、紧凑卡片网格、细线边框和柔和抬升,取代了厚重阴影或戏剧性的深色模式。色彩限量使用:页面大体保持单色,紫色保留给主要操作、标志,以及用于首屏处理和仪表盘行动号召的标志性渐变。绿色、蓝色和粉色装饰点缀出现在产品插画和模型图内部,而非界面附属元素中;它们传达“加密原生”的气质,但不与品牌竞争。组件平面且实用,依靠几何规格——8px按钮圆角、20px卡片圆角、24px柔和阴影——而非装饰来建立节奏和信任。

查看原始网站

使用规范

建议采用

  • 任何屏幕上最重要的唯一操作都使用紫色到靛蓝的渐变(#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按钮不要拉伸到满宽;让它以自然宽度置于无填充链接旁,保持“操作加替代选择”的视觉节奏。