Lattice

近白色基底、大字排版与紧密字距。
页面以近白色为基底。字体采用 Matter。视觉特点包括大字排版、紧密字距、分屏构图、网格布局。适合参考的场景:软件产品首页、服务说明页。
查看原始网站使用规范
建议采用
- 所有主要文本、主要按钮及结构边框均使用 #001f1f(森林墨水)——让单一深色承载整个系统的重量;
- 所有屏幕页面均使用 Parchment #f7f6f2 作为页面背景——绝不以纯白色替代主体画布;
- 为每个产品模块或区块类别分配专属柔和色调(薄荷绿、黄绿、薰衣草、淡粉)作为其特征卡片背景色——色彩编码系统是该设计的标志性特征;
- 每项主要操作均需并列呈现填充与描边按钮:填充森林墨水 + 描边森林墨水,半径为 29px;
- 大写分类标签和微型文字采用11px说明文字字号与0.08em字间距,宽字间距是系统表示“标签/标识”的方式。
- 仅在首屏设备框区域应用径向渐变(薄荷绿→黄绿→青绿)——作为单次使用的氛围元素,不可重复使用为图案;
- 所有卡片和图像的抬升效果均使用柔和的森林绿调阴影堆叠(4% 透明度,负扩散)——最终 1px 环形阴影替代显式边框声明;
建议避免
- 绝不使用纯黑色(#000000)作为文本或 UI 元素——森林墨水 #001f1f 始终是深色结构色,即使对比度相同;
- 绝不将柔和表面色调应用于全页区块——这些色彩仅限于独立的特征卡片和用户评价区块;
- 任何交互元素均不得使用锐利边角(0px 半径)——系统最低要求为 7px,大多数元素为 14–29px;
- 绝不引入超出定义调色板之外的强调色——多色图表系统(深森林、深青、橄榄绿、深紫、姜黄、紫鸢)仅用于数据可视化与插画,绝不用于 UI 表面;
- 绝不使用厚重或高不透明度阴影——整个阴影系统保持在 0.04–0.08 不透明度,以呈现有机、纸张般的抬升感;
- 绝不将彩色按钮(绿色、紫色等)作为主要操作——主要行动号召(CTA)始终为森林墨水填充按钮,无论所在板块上下文;
- 绝不破坏‘徽章 → 标题 → 描述’的章节头部节奏——每个章节均以类别胶囊徽章开启,随后是标题,最后是描述