Shopify
近黑色基底、大幅摄影展示与胶囊形控件。
Surfshark
白色基底、圆角卡片与紧密字距。
页面以白色为基底，搭配近黑色文字。字体采用 Inter。视觉特点包括圆角卡片、紧密字距、单栏阅读排版、产品图像展示。适合参考的场景：SaaS 产品官网、功能介绍页。
查看原始网站使用规范
建议采用
- 仅使用 Inter，展示或正文不引入第二种字体。
- 遵循三色强调规则：青绿只用于品牌身份、珊瑚用于转化、黄色只用于有时限的促销。
- 标准按钮采用 12px 圆角，功能卡片采用 48px；两种圆角定义体系个性。
- 保持深色→浅色→深色分区节奏：#16191c 面板与 #ffffff/#f9f9f9 分区交替，间距为 64px。
- 展示标题使用 60px Inter，700 字重、-1.5px letter-spacing；大尺寸的紧凑字间距必须遵循。
- 每个视图的唯一主要操作使用 #fa3556 填充珊瑚按钮，辅助操作改用 #16191c 深色按钮，避免 CTA 竞争。
- 有优惠时，在导航上方放黄色促销横幅锚定页面，不移到首屏折叠线以下。
建议避免
- #1ebfbf 不作为按钮填充；青绿用于品牌、图标和行内强调文字，而非转化表面。
- 卡片不添加阴影；体系靠背景对比与 48px 圆角表达抬升，而非投影。
- border-radius 不超出 8、12、32、48、64、96px 尺度，中间值会破坏视觉语言。
- 同一视口不放两个珊瑚 CTA；每个视图只有一个珊瑚按钮，其余为深色或幽灵式。
- 黄色 #ffc200 不用于促销横幅之外；扩散到功能块会削弱紧迫性信号。
- 不使用衬线、展示或装饰字体；Inter 的多种字重覆盖完整层级。
- 营销页面正文不低于 16px；14px 是最低值，且只用于说明文字和微型文案。
