Pipe

近黑色基底、大幅摄影展示与扁平表面。
页面以近黑色为基底,搭配白色文字。字体采用 Suisse。视觉特点包括大幅摄影展示、扁平表面、分屏构图、网格布局。适合参考的场景:支付服务首页、金融科技产品介绍页。
查看原始网站使用规范
建议采用
- #e2572c Ember只用于主要操作背景,以及标题中唯一用于品牌强调的词;绝不要用于正文、边框或装饰。
- 展示标题设为80px、0.70行高和-0.56px字间距,实现雕塑般、刻凿般的效果。
- 抬升通过#000000 → #1a1a1a表面色阶变化和Fog细线边框传达,绝不用box-shadow。
- 卡片和图像采用16px圆角,按钮采用8px,9999px只用于胶囊标签。
- 14px或更小的文字都应用+0.0060em字间距,以确保深色背景上的易读性。
- 每个首屏分区都以16px圆角的满幅编辑式照片作为锚点,让图像承担颜色和插画没有承担的视觉分量。
- 分区间距保持64-80px,以维持舒适、编辑式的节奏。
建议避免
- 不要引入第二种彩色;单一强调色系统是品牌标志性的克制。
- 任何组件都不要采用box-shadow;抬升只通过表面色调表达。
- 展示文字的行高不要高于1.0;紧密的0.70设定让标题具有刻凿感。
- 不要使用超过一种字重,即400;系统不提供加粗,应改用字号和颜色对比。
- 主要操作按钮不要采用#ffffff或#1a1a1a等中性色填充;Ember是唯一的CTA填充色。
- 不要在#1a1a1a上使用#808080交互文字;较小字号下,其对比度低于AA要求,Steel只留给#000000上的非交互弱化标签。
- 正文或标题不要居中;系统整体都采用左对齐。