Stripe 网站预览
Stripe 网站预览

Stripe

靛蓝墨水账本置于磨砂玻璃上

Stripe 采用近乎单色的金融工具语言:柔和的冷白色画布,搭配深藏青色标题,几乎不使用装饰性界面外围元素,仅用一道鲜明的靛蓝(#533afd)来作为按钮、链接或图标描边,其存在有充分理由。字体严格限定为 sohne-var 字重 300 —— 即使在 56px 的显示尺寸下也保持一致 —— 读来是自信而克制,而非企业式的喧嚣;随着字号增大,字间距被急剧收紧。按钮尺寸较小,采用利落的 4px 圆角,使用紫罗兰色填充或细线紫罗兰色描边。系统完全避免使用阴影;深度来自背景色调的渐变(白色 → #f8fafd → #e5edf5 → 紫罗兰色淡染底色)而非层叠效果。整个界面如同账本或终端:信息密集,分隔线清晰,各区块间留有充足的空白,颜色仅在需要采取行动时出现。

查看原始网站

使用规范

建议采用

  • 仅使用 #533afd 用于主要操作、激活链接及图标笔触 —— 绝对不可用于正文、大面积背景或装饰元素
  • 所有标题和正文文本均设为 sohne-var 字重 300 —— 轻声细语的字重是其标志性特征;除 Stripe 品牌标识外,禁止使用 600 或 700 字重
  • 字间距随字号增大而收紧:26px 及以下为 -0.0100em,32–48px 为 -0.0200em,56px 为 -0.0250em,超过 56px 为 -0.0300em。
  • 所有文本启用 font-feature-settings: 'ss01' on, 'tnum' on —— 表格数字对计量/统计数据块和价格展示至关重要
  • 所有按钮、输入框和卡片均使用 4px 圆角 —— 严禁使用 0px(过于尖锐),严禁使用 胶囊形 形(过于亲和),严禁使用 8px 以上(过于柔软)
  • 各区块间使用 1px #e5edf5 水平分隔线和 96px 垂直间距 —— 不得使用背景色渐变、阴影或卡片容器来分隔内容
  • 每个填充型主要按钮必须配以一个透明描边按钮(淡紫 #b9b9f9 边框)作为其次要操作 —— 严禁单独出现填充按钮

建议避免

  • 卡片、按钮或图片中禁止使用阴影、模糊或任何形式的 CSS 层叠效果 —— 深度来自背景色调变化,绝非来自 box-shadow
  • 禁止引入额外的强调色 —— 系统为单色加一种靛蓝;加入绿色、橙色或粉色会破坏账本风格
  • 禁止在标题中使用粗体或中等粗体字重 —— 显示尺寸下 300 字重是整个字体体系的唯一身份
  • 禁止超出 4px 的圆角 —— 胶囊形按钮、大半径或完全圆形元素会破坏精密工具的质感
  • 禁止大面积使用 #533afd —— 靛蓝应仅以小剂量功能形式出现(按钮、链接、图标笔触);大面积靛蓝背景仅限于为对比设计的特色卡片
  • 禁止正文或标题居中对齐 —— Stripe 文本块始终在列内左对齐;居中仅用于标志和少数孤立的统计数据展示
  • 禁止将 #64748d 或 #50617a 用于超过一句话的文本 —— 这些是用于标签和图注的低饱和度文本色,不可用于段落