Payments
近白色基底、圆角卡片与紧密字距。
Healthy Together
深色基底、胶囊形控件与圆角卡片。
页面以深色为基底。字体采用 Inter。视觉特点包括胶囊形控件、圆角卡片、大字排版、紧密字距。适合参考的场景：软件产品首页、服务说明页。
查看原始网站使用规范
建议采用
- 所有展示类标题使用 Inter 700 字重，-0.05em 字间距——在大字号下紧致的字间距是该系统的排版特征
- 每个页面区块必须锚定于 #101722 午夜墨水、#f9f0ff 薰衣草淡粉或 #4541fe 电紫鸢尾——禁止使用纯白作为满幅底色
- 所有卡片设置 42px 圆角，所有按钮和标签设置 9999px 圆角——这两个圆角定义了系统的柔和感
- 仅在首屏使用粉到紫渐变带（linear-gradient(270deg, #4541fe 40%, #fe0f83)）作为单一装饰性元素
- CTA 按钮设定为 14px 或 16px Inter 600，9999px 胶囊圆角，垂直内边距 10–14px
- 保持 24px 卡片内边距和 16px 元素间距作为基础节奏单位
- 将电紫鸢尾 #4541fe 保留用于单个高亮区块和 CTA 填充——稀缺性带来冲击力
建议避免
- 不要引入第二套字体——该系统设计为单字体系统
- 不要在卡片上使用方形或小圆角（4–8px）——42px 圆角是实现柔软触感的不可妥协项
- 不要使用 #ffffff 作为满幅页面底色——所有背景必须为午夜、薰衣草或电紫鸢尾色
- 不要将渐变带应用在按钮、文本或非首屏元素上——它仅作为首屏的单次笔触
- 不要单独使用 #fe0f83 玫瑰红作为填充——它仅作为渐变终点与电紫鸢尾配对存在
- 不要为卡片添加厚重的阴影——系统最多使用 rgba(23,73,77,0.15) 0 20px 30px 提供轻微浮起感
- 不要在可见视口内同时出现超过两种表面温度（深色+强调，或浅色+强调）
- 不要在正文部分使用大于 1.40 的行高，或在展示类内容中使用大于 1.10 的行高——压缩的垂直节奏至关重要
