Neutral ramp
Every grey is the ink at a stated opacity. The number under each swatch is its contrast on white.
100 #2C2E32
13.60:1
90 #414347
9.91:1
80 #56585B
7.14:1
70 #6B6D70
5.19:1
60 #808284
3.86:1
50 #959698
2.96:1
40 #ABABAD
2.29:1
30 #C0C0C1
1.82:1
20 #D5D5D6
1.47:1
10 #EAEAEA
1.20:1
8 #EEEEEF
1.16:1
7 #F0F0F1
1.14:1
5 #F4F5F5
1.09:1
Semantic pairs
Wash then ink. These never move with the palette.
success
info
warning
danger
decorative
neutral
selected
Type
Figtree. Line height equals the size for UI text.
display 20/20/600 - The quick brown fox
title 18/18/600 - The quick brown fox
heading 16/16/600 - The quick brown fox
body 14/14/500 - The quick brown fox
bodyStrong 14/14/600 - The quick brown fox
prose 14/20/400 - The quick brown fox
crumb 13/13/500 - The quick brown fox
label 12/12/600 - The quick brown fox
small 12/12/500 - The quick brown fox
Buttons
Every designType against every colorScheme, drawn by the theme. A gap here is a gap in the theme.
_default
_outlined
_text
_iconButton
_iconPrimaryButton
_fabButton
_fabButtonMini
Inputs
38px tall, r8px, label above.
_default
_outlined
_filled
_editOnReq
Shape and elevation
The radius ladder is 0 / 4 / 6 / 8 plus pills; three named shadows.
straight 0px
tight 4px
slight 6px
round 8px
very 12px
extra 16px
full 9999px
one
two
mobile
card
bar
rail
low
medium
high
Chrome
The measured numbers every page shares.
rail, expanded
200px
rail, collapsed
54px
top bar
60px
nav item
180x34, pitch 39
control height
34px
input height
38px
table row
48px
table header band
36px
page gutter
30px
detail gutter
14px
icon
14px, Material Symbols Rounded