Shopify
近黑色基底、大幅摄影展示与胶囊形控件。
Slack
白色基底、产品图像展示与圆角卡片。
页面以白色为基底。局部操作控件以紫色强调。字体采用 Salesforce-Avant-Garde、Salesforce-Sans。视觉特点包括产品图像展示、圆角卡片、渐变展示、大字排版。适合参考的场景：SaaS 产品官网、功能介绍页。
查看原始网站使用规范
建议采用
- 仅使用#611f69作为填充型CTA，禁止用作首屏或大面积背景填充；将#481a54保留用于这些场景。
- 使用Salesforce-Avant-Garde设置64-96px的展示标题，并搭配-0.012em字间距；这种压缩的宽体形式正是Slack首屏具有建筑感的关键。
- 在白色画布标题内的单个关键词上应用黑色到#ba01ff的渐变填充——禁止用于整个标题或正文内容。
- 所有卡片和内容表面统一使用16px圆角；搭配1px薰衣草色（#eac8fe）边框，而非厚重阴影，作为默认卡片状态。
- 仅将32px环境阴影（rgba(0,0,0,0.1) 0px 0px 32px 0px）用于产品截图卡片和浮动叠加层——禁止用于静态内容卡片。
- 通过交替使用白色画布与#481a54深色首屏条带来营造节奏感；在无全反转过渡时，使用#f9f0ff作为更柔和的中等色调。
- 眉题标签设为12px/700，采用大写和0.057em字间距；这是“New Feature（新功能）”和区块分类的标签模式。
建议避免
- 禁止在主要CTA按钮上使用胶囊圆角（999px）——Slack的填充型操作始终为矩形，且边角为4px。
- 禁止在产品截图卡片上使用薰衣草色（#eac8fe）边框——此类卡片需使用白色或透明背景，以便嵌入的UI能自然呼吸。
- 禁止在白色背景的正文内容中使用Vivid Violet（#9602c7）或Iris Light（#d17dfe）——对比度过低；仅保留用于深色区域强调和仅限卡片场景。
- 禁止在营销页CTA中混入Channel Blue（#1264a3）——该蓝色应出现在Slack产品UI截图中，而非营销界面。
- 禁止在深色首屏条带内的文字添加阴影；条带本身已提供足够对比度。
- 禁止在UI表面（按钮、卡片、输入框）使用渐变填充——渐变仅限文字，为装饰性用途。
- 正文字号不得低于 14px 或高于 18px；16px/1.5 的字号/行高组合（lineHeight）是营销与功能文案保持可读性的工作标准。
