Skillshare
白色基底、分屏构图与大幅摄影展示。
Duolingo
白色基底、单栏阅读排版与几何图形。
页面以白色为基底，搭配深灰色文字。字体采用 feather、duolingo-sans。视觉特点包括单栏阅读排版、几何图形、摄影展示。适合参考的场景：产品介绍页、品牌展示页。
查看原始网站使用规范
建议采用
- 使用#58cc02用于所有需要体现‘进步’或‘开始’的标题或行动号召（CTA）——这是唯一被允许用于大字号文本的饱和色。
- 将显示标题设置为48-64px，使用feather 700字体，字间距-0.0200em；这种圆润的字重是品牌调性。
- 为每个按钮和胶囊控件设置12px圆角，并搭配#afafaf或彩色的2px实线边框——带边框的按钮是核心元素，而非退而求其次的方案。
- 在导航标签和语言胶囊中使用15px的全大写，字间距0.0530em；切勿将其用于正文内容。
- 正文保持#777777，字号17px/500——中灰色是默认配色，以便彩色元素能突出表现。
- 仅使用#1cb0f6（Spark Blue）用于交互链接和带边框的次要行动号召；它是绿色的‘好奇’伙伴。
- 将各区块设计为纯白背景，配图浮于文本旁；仅在页脚区域和显示标题中引入#58cc02。
建议避免
- 正文段落中不要使用彩色文本——正文保持在#777777或#4b4b4b，以便绿色标题主导整个页面。
- 不要使用锐角；即使是小标签和胶囊控件也使用12px圆角。
- 不要引入渐变、阴影或玻璃效果——Duolingo的界面表面是扁平的贴纸式填充，搭配粗边框。
- 不要在小于48px的尺寸下使用feather字体；它仅用于展示场景。副标题19-32px使用duolingo-sans 700。
- 不要在无对比测试的情况下将行动号召按钮置于彩色背景上——绿色背景上的绿色或蓝色背景上的蓝色将完全消失。
- 不要将次级配色（粉红、紫色、吉祥物插画色）用于UI界面元素；这些颜色仅存在于角色艺术中。
- 不要将绿色扩展到小尺寸UI文本中；#58cc02仅用于标题、行动号召填充和页脚区域，不用于正文或链接文本。
