Skip Folio navigation
01 / Folio
Foundations
01
Color
Porcelain
#f7f7f6Graphite
#16161aOxblood
#7d2b1e01 / Porcelain
Material studies
Published
02 / Graphite
Material studies
Published
canvas
#f7f7f6panel
#ffffffinset
#e9e8e4ink
#16161asecondary
#5f5e63line
#d9d8d3edge
#84838abrand
#7d2b1eaction
#7d2b1eon-action
#f7f6f3state
#16161aon-state
#f7f7f6focus
#16161aselection
#7d2b1eon-selection
#f7f6f3error
#c0143csuccess
#22613bfield
#7d2b1eon-field
#f7f6f3Text contrast ≥ 4.5:1. Control edges and focus ≥ 3:1.
02
Typography
A clear line.
A little feeling.
Display
44 to 80px / 1.04 / 400Form, with feeling.
Headline
32 to 48px / 1.1 / 400Form, with feeling.
Title
24 to 28px / 1.25 / 500Form, with feeling.
Subtitle
20px / 1.35 / 500Form, with feeling.
Lede
18px / 1.55 / 400Form, with feeling.
Body
16px / 1.6 / 400Form, with feeling.
Label
14px / 1.4 / 500Form, with feeling.
Caption
13px / 1.5 / 400Form, with feeling.
Code
13px / 1.7 / 400Form, with feeling.
Reading measure: 65ch maximum. Nothing is set below 13px. Bodoni appears only at 32px and above.
03
Space & layout
1 / 4px2 / 8px3 / 12px4 / 16px6 / 24px8 / 32px12 / 48px16 / 64px24 / 96pxContent / two thirdsContext / one third
Touch targets remain at least 44px in both densities.
04
Radius
control / 6pxmedia / 6pxoverlay / 6px05
Mark & icons
24px grid · 1.5px stroke. Name every icon-only control.
06
Composition
Aa
Ready for review
Material studies
6 works, one shared place.