Interactive lab
This Page's Style Guide
Every color, type size, spacing value, and stacking layer on this page comes from one small system. This sheet condenses that system into a single reference. Download it as a PNG to keep or remix.
The full sheet
Color, Type, Spacing, Z-Index
Webpage Anatomy Style Guide
Color
coral
#FF6B5B
#FF6B5B
pink
#FF3D9A
#FF3D9A
teal
#00BFA5
#00BFA5
sun
#FFD23F
#FFD23F
ink
#22182B
#22182B
paper
#FFF9F2
#FFF9F2
Type Scale
Aa H1 Fredoka
Aa H2 Fredoka
Aa Body Nunito
Aa Mono Space Mono
Spacing (8pt grid)
Z-Index
1 → 10 → 100 → 1000
content → dropdown → sticky nav → modal
webpage-anatomy · generated from this page