Design Tokens
Colors, typography, spacing, and more
Colors
md-sys-color-primary
#6750A4
Primary brand color for key actions and emphasis
md-sys-color-on-primary
#FFFFFF
Text/icons on primary color
md-sys-color-primary-container
#EADDFF
Elevated containers with primary tone
md-sys-color-on-primary-container
#21005D
Text/icons on primary container
md-sys-color-secondary
#625B71
Secondary actions and less prominent UI elements
md-sys-color-on-secondary
#FFFFFF
Text/icons on secondary color
md-sys-color-secondary-container
#E8DEF8
Containers with secondary emphasis
md-sys-color-tertiary
#7D5260
Accent color for contrast with primary and secondary
md-sys-color-error
#B3261E
Error states and destructive actions
md-sys-color-on-error
#FFFFFF
Text/icons on error color
md-sys-color-surface
#FFFBFE
Background for cards, sheets, and menus
md-sys-color-on-surface
#1C1B1F
Text/icons on surface
md-sys-color-surface-variant
#E7E0EC
Alternative surface for differentiation
md-sys-color-outline
#79747E
Borders and dividers
md-sys-color-outline-variant
#CAC4D0
Subtle borders and dividers
Typography
Font Families
Aa Bb Cc
Roboto
'Roboto', 'Noto Sans', sans-serif
Font Sizes
Aa
display-large
57px
Aa
display-medium
45px
Aa
display-small
36px
Aa
headline-large
32px
Aa
headline-medium
28px
Aa
headline-small
24px
Aa
title-large
22px
Aa
title-medium
16px
Aa
title-small
14px
Aa
body-large
16px
Aa
body-medium
14px
Aa
body-small
12px
Aa
label-large
14px
Aa
label-medium
12px
Aa
label-small
11px
Spacing
Base unit: 4px
0
0px
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px
24
96px
Elevation
level0
No elevation, surface level
level1
Low elevation for cards, buttons
level2
Medium elevation for FABs, snackbars
level3
High elevation for menus, dialogs
level4
Higher elevation for navigation drawers
level5
Maximum elevation for modals