Doppler
近黑色基底、圆角卡片与渐变展示。
beehiiv
近黑色基底、渐变展示与细线分隔。
页面以近黑色为基底。字体采用 Clash Grotesk、Satoshi。视觉特点包括渐变展示、细线分隔、扁平表面、网格布局。适合参考的场景：软件产品首页、服务说明页。
查看原始网站使用规范
建议采用
- 展示标题采用Clash Grotesk 700、60-72px和1.00行高，紧凑行距是标志性特征。
- linear-gradient(90deg, #2f39ba, #ff5ec4)仅用于单个词或短语，不用于正文或整个标题。
- 所有边框采用1px #4e4e6c或#acb0e3，深色表面绝不用更粗边框。
- 所有卡片、按钮、输入框和面板采用6px圆角，9999px仅用于聊天小部件胶囊与星级评分装饰元素。
- #060419作为通用页面背景，所有卡片提升至#0d0b28或#141230，深色画布上绝不用浅色卡片。
- 24px及以下所有文字采用Satoshi及其原生0.045em字间距，48px及以上切换为正常字间距的Clash Grotesk。
- Electric Indigo（#2f39ba）和Hot Magenta（#ff5ec4）保持为强调标点，用于图标、渐变和每个区块一张高亮卡片。
建议避免
- 不要引入浅色模式表面、白色卡片或亮度高于#1b0e27的任何背景，深色画布就是品牌识别。
- 不要使用大于14px Google OAuth按钮的彩色填充按钮，CTA系统大部分保持白色或无填充。
- 导航、页眉或区块分隔线不要应用阴影；高度效果仅出现在浮动产品模型和聊天小部件上。
- 矩形组件不要使用6px以外的圆角，混用8px或12px会破坏几何精度。
- 不要添加图片、生活方式摄影或装饰插画，产品UI拼贴本身就是视觉内容。
- 渐变背景面积不要超过单个词或唯一高亮客户评价卡片，过度使用会消耗能量。
- 不要使用超过两个字体家族，Clash Grotesk用于展示，Satoshi用于其他一切，不使用衬线或等宽字体。
