Lyssna

白色基底、居中构图与产品图像展示。
页面以白色为基底,搭配深青色文字。局部操作控件以青绿色强调。字体采用 grenette、mint。视觉特点包括居中构图、产品图像展示、衬线字形、满幅色块。适合参考的场景:工作流工具首页、产品功能说明页。
查看原始网站使用规范
建议采用
- 使用 grenette(Source Serif 4)字重 400 专用于 46px 及以上标题——绝不使用粗体,其字重即为它的特征。
- 使用 #006e75 填充按钮作为每页唯一的主行动元素——深青色按钮是设计中的唯一脉动点。
- 将 #b9ffe8 用作章节或卡片的强调表面——mint 色调是品牌的标志性配色,每页必须至少出现一次。
- 元素之间使用 1px #e5e7eb 细线边框和色彩对比分隔,绝不使用阴影。
- 按钮、输入框和小 UI 元素使用 8px 圆角;卡片、图片和大产品表面使用 24px 圆角。
- 所有首屏和区块内容均居中对齐——Lyssna 的布局对称且基于列结构,而非非对称。
- 使用三色强调系统(mint #b9ffe8、米色 #fffded、粉红 #ffc3e6)作为产品卡片背景,依次循环三种颜色。
建议避免
- 绝不使用阴影作为主要的层级提升方式——设计为平面,仅使用细线边框。
- 绝不使用粗体的 grenette 衬线字体——它仅限字重 400;强调来自尺寸,而非字重。
- 绝不在一个视口内放置超过一个 #006e75 填充按钮——深青色行动必须唯一且明确。
- 绝不使用彩色边框包裹卡片或图片——边框始终为 #e5e7eb 细线或不存在。
- 绝不将 grenette 用于正文、说明文字或 UI 元素——它仅作为展示字体,专用于 46px 以上的标题。
- 绝不左对齐首屏或区块标题——Lyssna 全篇采用居中编辑布局。
- 绝不使用纯黑色(#000000)——设计中最深的色调是 #061d29,一种冷调近黑,有效软化对比强度。