Coda
奶油纸工作空间：温暖编辑书桌上，粗黑字与唯一橙强调完成全部表达。
Ditto
温暖的羊皮纸上标注的手稿
Ditto 以文字编辑书桌的视觉语言呈现：温暖的羊皮纸奶油底色，近海报尺寸的黑色无衬线字体，以及像有人随手拿起马克笔一样，全副彩笔的高亮色系被涂抹上去。配色表中的每一种颜色都是工具——绿色、黄色、橙色、紫色、蓝色、粉色，均作为连续正文上的标注墨水使用，从不作为装饰性填充。组件设计为短粗且圆润的胶囊形——按钮、标签和导航项全部坍缩为相同的柔软胶囊形态，保持表面简洁，让被标注的文本得以凸显。没有阴影、没有渐变、没有玻璃态——整个视觉身份建立在平面色彩、厚重字体和“有人用马克笔审阅手稿”的隐喻之上。
查看原始网站使用规范
建议采用
- 仅将注释配色（高亮绿色、马克笔黄色、编辑橙色、标注紫色、评论蓝色、便签粉色、橄榄金色、芥末黄）作为连续正文上的墨水或作为小型胶囊贴纸使用——绝不作为区块背景，也不作为卡片填充。
- 主行动项设定为实心黑色 CTA：印度墨水（#000000）填充，白色文字，字重 700，9999px 半径，约 8px 15px 内边距。每页仅出现一次。
- 标题文字使用 ABC Social 字重 700，字号 72–108px，字间距 -0.04em。在大字号下强烈的负字间距是系统的标志性特征——切勿归一化为 1.0em。
- 应用羊皮纸（#f7f5f3）底色，占页面 100%。唯一提升的表面是骨白（#ffffff），用于卡片和产品 UI 框架。
- 在所有三个 ABC Social 变体上激活 "ss07" 风格集。替代字形是品牌身份的一部分，非可选。
- 所有按钮、标签和导航项保持 9999px 半径。为产品截图卡片预留 12px，仅输入框保留 28px。
- 每个注释高亮必须搭配印度墨水文字置于其上——所有与明亮色彩的对比度均达到 AAA 级别（#000000）。
建议避免
- 不要引入彩色 CTA 颜色。该系统没有蓝色、绿色或红色填充按钮——主行动始终是黑色胶囊。
- 不要使用阴影、模糊或玻璃态。所有深度均来自表面对比和 1px 边框。
- 不要添加渐变。整个配色表是平面墨水在平面上的呈现。
- 不要将注释颜色用作装饰性区块底色、首屏背景或卡片填充——一旦脱离标注用途，其意义即消失。
- 不要在同一单词上混合两种注释颜色。每个高亮仅使用一种颜色，永远。
- ABC Social正文不要低于16px。13px说明文字是下限，且只用于采用正字间距的辅助标签。
- 不要将注释高亮拉直为完美矩形——略带不规则的块状形态才是该系统作为标注工具的识别特征，而非 CSS 演示。
