Stripe

白色基底、宽松留白与网格布局。
页面以白色为基底,搭配深蓝色文字。局部操作控件以蓝色强调。字体采用 sohne-var。视觉特点包括宽松留白、网格布局、文字主导、大幅摄影展示。适合参考的场景:产品介绍页、品牌展示页。
查看原始网站使用规范
建议采用
- 仅使用 #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 用于超过一句话的文本 —— 这些是用于标签和图注的低饱和度文本色,不可用于段落