Skillshare
白色基底、分屏构图与大幅摄影展示。
Duolingo
浅色基底、大字排版与分屏构图。
页面以浅色为基底，搭配深蓝色文字。局部操作控件以黄绿色强调。字体采用 din-round、feather。视觉特点包括大字排版、分屏构图、网格布局、文字主导。适合参考的场景：软件产品首页、服务说明页。
查看原始网站使用规范
建议采用
- 将 #58cc02 用作所有主要操作按钮的填充背景色，以及大尺寸展示标题的颜色
- 将 #a5ed6 用作所有空心/透明边框链接和次级按钮的 2px 边框颜色——这种较浅的绿色边框是系统中最显著的重复元素
- 所有按钮、链接和胶囊控件的圆角半径设置为 12px——这是系统中唯一的圆角值
- 为节标题使用 feather 字体，字号 48-64px，字重 700，字间距 -0.02em；其余内容使用 din-round 字体
- 在所有填充按钮底部添加 2-3px 的深绿色实线边框，以营造可点击的 3D 效果——禁止使用 box-shadow
- 所有 din-round 字体文本使用约 0.053em 的宽字间距——开放、通透的字间距是品牌调性的组成部分
- 每个功能区块都需搭配一张扁平化的卡通插图——系统预期角色艺术作为内容元素，而非装饰
建议避免
- 任何元素均不得使用投影阴影——深度来自实线边框，而非模糊的阴影叠加
- 不得使用渐变——系统仅使用纯色，无渐变过渡
- 不得使用带有背景填充或边框阴影的卡片容器——区块之间仅通过空白间距分隔
- 不要将身体圆角设置在12px以下或以上——系统只有一个圆角值，应统一使用该值
- 不得在正文或小于 32px 的内容中使用 feather 字体——它仅作为超大标题的展示字体
- 不得引入超出绿色、蓝色、深蓝和午夜色系之外的辅助色
- 不得将浅绿色 #a5ed6 用作填充背景——它仅作为边框/轮廓色使用
