Duolingo Design

DuolingoDesign

https://duolingo.com/

Duolingo Sans stack / Feather display stack

Within the sampled Chinese-language public pages, Duolingo pairs white/light-gray surfaces with saturated #58cc02 green actions, blue secondary links, navy Super sections, rounded 12–16px controls, and hard 2–4px shadows. Duolingo Sans carries UI text while Feather appears at large display sizes; Courses contributes catalog link cards and a language select, and Super contributes dark navy subscription/marketing panels.

Duolingo

https://duolingo.com/

Playful high-contrast education brand built on green actions, rounded type, and saturated illustration

Within the sampled Chinese-language public pages, Duolingo pairs white/light-gray surfaces with saturated #58cc02 green actions, blue secondary links, navy Super sections, rounded 12–16px controls, and hard 2–4px shadows. Duolingo Sans carries UI text while Feather appears at large display sizes; Courses contributes catalog link cards and a language select, and Super contributes dark navy subscription/marketing panels.

Color Palette

基础

Typography

Type Scale

42 个层级
duolingo-sans 15px / 22px · 70015px · 700
设计语言 Aa Bb 012
duolingo-sans 13px / 16px · 70013px · 700
设计语言 Aa Bb 012
duolingo-sans 17px / 20px · 50017px · 500
设计语言 Aa Bb 012
duolingo-sans 15px / 20px · 70015px · 700
设计语言 Aa Bb 012
duolingo-sans 17px / 20.4px · 70017px · 700
设计语言 Aa Bb 012
duolingo-sans 13.008px / 15.6096px · 60013.008px · 600
设计语言 Aa Bb 012
duolingo-sans 15px / 20px · 50015px · 500
设计语言 Aa Bb 012
duolingo-sans 15px / 15px · 70015px · 700
设计语言 Aa Bb 012
duolingo-sans 15px / 18px · 70015px · 700
设计语言 Aa Bb 012
duolingo-sans 19px / 20px · 70019px · 700
设计语言 Aa Bb 012
duolingo-sans 17px / 24px · 50017px · 500
设计语言 Aa Bb 012
duolingo-sans 15px / normal · 70015px · 700
设计语言 Aa Bb 012
duolingo-sans 19px / 26.6px · 70019px · 700
设计语言 Aa Bb 012
feather 48px / normal · 70048px · 700
设计语言 Aa Bb 012
duolingo-sans 17px / 19.89px · 50017px · 500
设计语言 Aa Bb 012
duolingo-sans 49.3px / 57.681px · 70049.3px · 700
设计语言 Aa Bb 012
duolingo-sans 17px / 20px · 70017px · 700
设计语言 Aa Bb 012
duolingo-sans 14px / 17px · 70014px · 700
设计语言 Aa Bb 012
duolingo-sans 13.008px / 19.512px · 40013.008px · 400
设计语言 Aa Bb 012
feather 36px / normal · 70036px · 700
设计语言 Aa Bb 012
duolingo-sans 17px / 25.5px · 50017px · 500
设计语言 Aa Bb 012
duolingo-sans 19px / 20px · 50019px · 500
设计语言 Aa Bb 012
duolingo-sans 16px / 22.4px · 70016px · 700
设计语言 Aa Bb 012
duolingo-sans 15px / 20px · 70015px · 700
设计语言 Aa Bb 012
duolingo-sans 13px / 18.2px · 70013px · 700
设计语言 Aa Bb 012
feather 64px / normal · 70064px · 700
设计语言 Aa Bb 012
feather 44px / 47.52px · 70044px · 700
设计语言 Aa Bb 012
feather 62px / 66.96px · 70062px · 700
设计语言 Aa Bb 012
duolingo-sans 17px / 24px · 70017px · 700
设计语言 Aa Bb 012
duolingo-sans 32px / normal · 70032px · 700
设计语言 Aa Bb 012
duolingo-sans 24px / 36px · 70024px · 700
设计语言 Aa Bb 012
duolingo-sans 19px / 30px · 50019px · 500
设计语言 Aa Bb 012
duolingo-sans 19px / 28.5px · 70019px · 700
设计语言 Aa Bb 012
duolingo-sans 15px / 17.25px · 70015px · 700
设计语言 Aa Bb 012
duolingo-sans 24px / 31.92px · 50024px · 500
设计语言 Aa Bb 012
duolingo-sans 17px / 19.55px · 40017px · 400
设计语言 Aa Bb 012
duolingo-sans 24px / 26px · 70024px · 700
设计语言 Aa Bb 012
duolingo-sans 19px / 28.5px · 50019px · 500
设计语言 Aa Bb 012
feather 36px / normal · 70036px · 700
设计语言 Aa Bb 012
feather 44px / 47.52px · 70044px · 700
设计语言 Aa Bb 012
feather 62px / 66.96px · 70062px · 700
设计语言 Aa Bb 012
duolingo-sans 24px / 40px · 70024px · 700
设计语言 Aa Bb 012

Fonts

Primary
Weight400, 500, 600, 700
Sizes15px, 13px, 17px, 13.008px, 19px, 49.3px, 14px, 16px, 32px, 24px
Secondary
Weight700
Sizes48px, 36px, 64px, 44px, 62px

Spacing & Shape

Spacing

序号ValuePreview
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

Border Radius

ElementValuePreview
radius-16px
radius-12px
radius-2px
radius-50-percent
radius-14px
radius-13px

Elevation

NameValue
shadow-gray-2px
shadow-white-40-4px
shadow-green-4px
shadow-ambient
shadow-white-80-4px
shadow-white-50-4px
shadow-white-50-2px

Guidelines

Do

  • Use white or very light neutral surfaces as the base for learning/content areas.
  • Reserve #58cc02 green for primary actions, success/energy moments, and key marketing headings; support it with the darker #58a700 hard shadow.
  • Keep controls friendly and legible: 12–16px radii, 44–50px desktop heights, and uppercase 15px/700 button text with letter spacing.
  • Use Duolingo Sans for UI/body text and Feather for oversized display headings.
  • Use deep navy surfaces to distinguish Super subscription sections from the free-product marketing flow.

Don't

  • Do not infer a global spacing grid from individual computed padding/margin values; the sample includes component-specific dimensions.
  • Do not treat OneTrust cookie-consent styling as core Duolingo product styling.
  • Do not claim a visible keyboard focus treatment: the captured focus target has outline-style none, with only outline offset changing.
  • Do not generalize hover/focus observations to expanded menus, cookie-preference dialogs, or authenticated learning states.

NotionDesign

https://www.notion.com/

查看下一个品牌