Ragged Edge 网站预览
Ragged Edge 网站预览

Ragged Edge

浅色基底、胶囊形控件与渐变展示。

页面以浅色为基底，搭配近黑色文字。字体采用 ABCDiatypeExpanded-Bold、Grit-Regular。视觉特点包括胶囊形控件、渐变展示、满幅色块、衬线字形。适合参考的场景：设计工作室首页、案例展示页。

查看原始网站

使用规范

建议采用

  • ABCDiatypeExpanded-Bold 只用于 10px 或更大的字号；低于这个大小，扩展字形会难以辨认。
  • Grit-Regular 正文搭配 ABCDiatypeExpanded-Bold 标题；同一内容块中绝不使用两种衬线字体或两种扩展无衬线字体。
  • 180px 区块间距留给主要内容分区；区块内部的分隔使用 80px。
  • 所有导航和按钮表面使用 64px 圆角；正文内容块使用 40–54px。
  • Iris Voltage #516fea 只用于轮廓按钮的 1.5px 边框，绝不用于填充或文字。
  • 任何页面都只让首屏渐变成为唯一彩色表面；后续所有区块保持白色或薄荷色。
  • 首屏展示文字设为 78–82px，字间距 -0.02em，以形成铺满左右边缘的品牌标记效果。

建议避免

  • 不要引入额外强调色；系统 98% 为单色，第二种彩色会破坏纪律。
  • 任何地方都不要添加 box-shadow；深度来自表面色调变化，而不是浮起效果。
  • ABCDiatypeExpanded 不要用于超过 4–5 个词的正文；它是展示字体，不是连续阅读字体。
  • 正文块不要居中；编辑式布局采用左对齐，并留出充足左边距。
  • 任何容器的圆角都不要小于 40px；尖角与胶囊形按钮系统冲突。
  • 不要将 Iris Voltage 放在深色背景上；它在高对比表面上会失去强调角色。
  • 首屏渐变的方向或色标数量不要设在 0deg 以上；定向流动是标志的一部分。

相似设计语言