Dub Links

温暖的日出映照在单色建筑之上
Dub 展示了一种温暖自信的 SaaS 风格:近单色界面以柔和的奶油到白色渐变为主导,搭配一个鲜明的橙色点缀,使每个操作都显得被激活。系统通过宽敞的空白区域和紧凑的 4px 网格实现呼吸感,将 Inter 的实用精度与 Satoshi 的圆润显示字符在标题中结合。表面保持哑光和明亮,搭配细线边框和轻柔阴影——深度来自细微的色调变化和抬升,从不使用厚重的面板。主要的行动号召(CTA)始终是黑色胶囊形按钮,旁边配有橙色火焰微点缀,形成结构中性与品牌温暖之间的对比。组件应感觉快速且实用:4px 和 8px 圆角占主导,胶囊形按钮承载行动号召,卡片是平铺的白色矩形,背景为略带暖意的底色。
查看原始网站使用规范
建议采用
- 所有矩形按钮和输入框使用 8px 圆角,标签和导航 CTA 使用 9999px 圆角
- 导航项、按钮文字及细微强调部分使用 Inter 500 字重;保留 600-700 字重用于小标题
- 使用 Satoshi 500 字重、40-48px 字号用于章节标题展示——绝不低于 40px
- 将 Ink Black(#0a0a0a)作为主要 CTA 与 Ember Orange(#ea580c)作为产品内操作进行配对,明确主次关系
- 使用 Geist Mono 用于短 URL、点击数及任何技术数据展示
- 保持章节间距在 80px 以上,以维持空旷、舒展的节奏
- 所有分隔线和输入框静止状态使用 1px 细线 Mist(#e5e5e5)边框
建议避免
- 单个页面内每个操作使用 Ember Orange(#ea580c)不得超过一次——过度使用会削弱其影响力
- 不要使用厚重的阴影——系统仅使用轻柔的 1-6px 抬升效果
- 不要将 Satoshi 用于正文或 UI 标签——它仅限于 40px 及以上显示用途
- 不要给卡片添加实色背景填充;表面只能保持白色或浅淡染色。
- 不要为主要 CTA 或功能卡片使用 4px 圆角——显著元素的最小圆角应为 8px 和 12px
- 不要引入新的色彩——色彩体系为单色 + 橙色 + 蓝色辅助色
- 不要在产品表面使用装饰性渐变——暖色渐变仅限首屏区域氛围使用