Coda

白色基底、紧密字距与大字排版。
页面以白色为基底,搭配近黑色文字。字体采用 Calibre-R、Inter。视觉特点包括紧密字距、大字排版、细线分隔、产品图像展示。适合参考的场景:效率工具官网、协作产品介绍页。
查看原始网站使用规范
建议采用
- 所有展示标题使用 Calibre-R 或替代 Manrope 800,52–72px,字间距 -0.035em 至 -0.045em。
- 主要行动按钮锚定 #000000 实色填充、白色 Inter 600 文字、8px 圆角、1.5px 内嵌 #212121 阴影。
- 目标为品牌介绍或转化漏斗顶部时,以满幅 #fff6ec 首屏条带开场。
- 产品通过跨区块边界重叠的浏览器外框样机展示,由柔双层 rgba(0,0,0,0.06) 阴影叠层锚定。
- #ee5a29 留给单词强调、眉题或小图标强调,绝不用填充或大表面。
- 卡片、按钮和图片统一默认 8px 圆角,12px 只用于大型行动入口。
- Inter 400/600 承载每个功能标签,正文字重绝不超过 700。
建议避免
- 不要引入第二彩色强调,系统单色加唯一余烬橙。
- 内容卡片不要用柔模糊投影,浮起只能是硬 8px/8px 黑偏移或双层 rgba 叠层,无中间方案。
- 正文或副标题不要用 Calibre-R,它只属于 38px 及以上,只用字重 700。
- 主要按钮不要用 9999px 胶囊圆角,8px 是系统默认。
- 白卡片不要无可见边框或阴影地直接放在奶油条带上,明度差过于微小。
- 主要文字不要用浅灰 #8e8e8、#aeaeae,它们只留给占位和禁用状态。
- 不要打破 4px 间距网格,所有内边距、间隙、外边距都取 4 / 8 / 12 / 16 / 20 / 24 / 32。