Steep 网站预览
Steep 网站预览

Steep

暖色纸张上,以衬线字体呈现的数据分析。

Steep 以编辑风格呈现数据分析 — 衬线字体 Signifier 的标题浮现在近单色的白色画布上,而一个温暖的桃色点缀(#fbe1d1)突显于整体近乎无色的系统中。页面如同产品杂志的版面:大号斜体展示文字,充足的留白,24px 半径的柔和边缘卡片,以及扁平贴合表面的胶囊形控件。组件显得安静而轻盈 — 阴影极淡,边框为细线,色彩仅用于功能强调(桃色提示卡片、深棕色标签置于桃色背景上)。产品展示元素(区域表格、激活图表、AI 创作器)以浮空物件的形式环绕标题呈现,而非嵌套在仪表盘壳体中。

查看原始网站

使用规范

建议采用

  • 使用 Signifier 400 权重,字号 44/64/90px 用于所有展示和标题文本;在这些尺寸下,绝不将无衬线字体进行替换
  • 每页最多使用一次桃色 #fbe1d1 卡片表面,且仅用于编辑性强调 — 视为罕见的点缀,而非背景
  • 所有按钮的圆角半径设为 9999px,所有内容卡片设为 24px;这两个数值是系统的结构圆角
  • 每组填充胶囊按钮(#17191c)必须配对一个透明描边胶囊按钮(#17191c 边框,透明填充)作为同一行的次要操作
  • 在达到 500 字重之前,使用 Sohne 半步字重(430、450、480)构建正文层级 — 该尺度比标准 400/500/700 更精细
  • 在 90px 展示文字上设置字间距 -0.025em,在 64/44px 标题上为 -0.015em,在 26/18px Sohne 上为 -0.009em — 较大字号的紧致字间距是该设计的排版特征
  • 保持 4px 基础单位:组件内边距使用 4/8/12/16/20/24px,区块间距使用 80px

建议避免

  • 除桃色与棕色外,禁止使用任何有色彩的配色 — 系统本意为 97% 无彩色,引入蓝色、绿色或紫色将破坏编辑性的克制
  • 在 Signifier 字体中禁止使用粗体(600+)或中粗(500)字重 — 所有尺寸的衬线字体保持 400 字重,这种克制是其标志性特征
  • 内容卡片(中性卡片或桃色强调卡片)禁止添加阴影 — 仅浮空的产品元素可获得视觉抬升
  • 卡片的圆角半径不得低于 16px,按钮的圆角半径不得低于 9999px — 该系统不包含锐角或中等圆角
  • 静态文本链接禁止添加下划线 — 箭头后缀(→)承载链接的交互暗示;下划线仅在悬停时出现
  • 不要将桃色 #fbe1d1 卡片放在非白色的区块背景上;它下方需要 Paper White 或 Card Mist,才能呈现暖色叠在中性色上的效果。
  • 禁止在非桃色背景上使用 #5d2a1a 棕色(Sienna Brown) — 该色仅用于桃色卡片和图表线条的墨色,绝不可用于白色背景上的正文