foundations
Design Tokens (android)
Design Tokens are the platform-specific translations of the JSON values that are the result of the agreed-upon base values
Color
| Component | Example |
|---|---|
color_black_base | #ff000000 |
color_blue_10 | #ffe0f3ff |
color_blue_100 | #ff00283d |
color_blue_20 | #ffade2fe |
color_blue_30 | #ff68c3f5 |
color_blue_40 | #ff2da2e3 |
color_blue_50 | #ff0280c6 |
color_blue_60 | #ff00649c |
color_blue_70 | #ff004c75 |
color_blue_80 | #ff003958 |
color_blue_90 | #ff002d46 |
color_blue_base | #ff0280c6 |
color_blue_dark | #ff00649c |
color_blue_light | #ff2da2e3 |
color_green_10 | #ffe0ffe0 |
color_green_100 | #ff003601 |
color_green_20 | #ffb2f9b4 |
color_green_30 | #ff74eb76 |
color_green_40 | #ff40d342 |
color_green_50 | #ff1ab11d |
color_green_60 | #ff048907 |
color_green_70 | #ff006402 |
color_green_80 | #ff005a02 |
color_green_90 | #ff003b01 |
color_green_base | #ff1ab11d |
color_green_dark | #ff048907 |
color_green_light | #ff40d342 |
color_grey_10 | #fff2f2f2 |
color_grey_100 | #ff1a1a1a |
color_grey_20 | #ffe6e6e6 |
color_grey_30 | #ffcccccc |
color_grey_40 | #ffb3b3b3 |
color_grey_50 | #ff999999 |
color_grey_60 | #ff808080 |
color_grey_70 | #ff666666 |
color_grey_80 | #ff4d4d4d |
color_grey_90 | #ff333333 |
color_grey_base | #ff999999 |
color_grey_dark | #ff808080 |
color_grey_light | #ffb3b3b3 |
color_marketing_10 | #fffffbe6 |
color_marketing_100 | #ff050400 |
color_marketing_20 | #fff9eeb2 |
color_marketing_30 | #fff0df80 |
color_marketing_40 | #ffe1cc55 |
color_marketing_50 | #ffccb534 |
color_marketing_60 | #ffb09a1d |
color_marketing_70 | #ff8a770d |
color_marketing_80 | #ff5e5104 |
color_marketing_90 | #ff302901 |
color_marketing_base | #ffccb534 |
color_marketing_dark | #ffb09a1d |
color_marketing_light | #ffe1cc55 |
color_orange_10 | #fffff4e6 |
color_orange_100 | #ff4d2b00 |
color_orange_20 | #ffffe9c7 |
color_orange_30 | #ffffdea8 |
color_orange_40 | #ffffc066 |
color_orange_50 | #ffffa024 |
color_orange_60 | #ffe98400 |
color_orange_70 | #ffcc7300 |
color_orange_80 | #ffa75e00 |
color_orange_90 | #ff7b4600 |
color_orange_base | #ffffa024 |
color_orange_dark | #ffe98400 |
color_orange_light | #ffffc066 |
color_primary_10 | #ffffe6e6 |
color_primary_100 | #ff4d0000 |
color_primary_20 | #fff8c8c8 |
color_primary_30 | #fff0acac |
color_primary_40 | #ffe37373 |
color_primary_50 | #ffd23e3e |
color_primary_60 | #ffc51111 |
color_primary_70 | #ffb10b0b |
color_primary_80 | #ff950606 |
color_primary_90 | #ff720202 |
color_primary_base | #ffd23e3e |
color_primary_dark | #ffc51111 |
color_primary_light | #ffe37373 |
color_red_10 | #ffffebeb |
color_red_100 | #ff870002 |
color_red_20 | #fffdb5b6 |
color_red_30 | #fff97a7d |
color_red_40 | #fff2494c |
color_red_50 | #ffe92326 |
color_red_60 | #ffdd070b |
color_red_70 | #ffcd0003 |
color_red_80 | #ffb80003 |
color_red_90 | #ffa00003 |
color_red_base | #ffe92326 |
color_red_dark | #ffcd0003 |
color_red_light | #fff97a7d |
color_secondary_10 | #ffe6f3ff |
color_secondary_100 | #ff002140 |
color_secondary_20 | #ffb3d8fb |
color_secondary_30 | #ff82bcf3 |
color_secondary_40 | #ff58a2e8 |
color_secondary_50 | #ff378ad8 |
color_secondary_60 | #ff2074c2 |
color_secondary_70 | #ff105da6 |
color_secondary_80 | #ff064784 |
color_secondary_90 | #ff023361 |
color_secondary_base | #ff2074c2 |
color_secondary_dark | #ff105da6 |
color_secondary_light | #ff378ad8 |
color_tertiary_10 | #ffe6fff5 |
color_tertiary_100 | #ff004027 |
color_tertiary_20 | #ffb3fbdf |
color_tertiary_30 | #ff82f3c8 |
color_tertiary_40 | #ff58e8b1 |
color_tertiary_50 | #ff37d89b |
color_tertiary_60 | #ff20c284 |
color_tertiary_70 | #ff10a66c |
color_tertiary_80 | #ff068454 |
color_tertiary_90 | #ff02613c |
color_tertiary_base | #ff37d89b |
color_tertiary_dark | #ff20c284 |
color_tertiary_light | #ff58e8b1 |
color_text_10 | #ff000000 |
color_text_100 | #ffffffff |
color_text_20 | #ff000000 |
color_text_30 | #ff000000 |
color_text_40 | #ff000000 |
color_text_50 | #ff000000 |
color_text_60 | #ffffffff |
color_text_70 | #ffffffff |
color_text_80 | #ffffffff |
color_text_90 | #ffffffff |
color_text_black_base | #ffffffff |
color_text_blue_10 | #ff000000 |
color_text_blue_100 | #ffffffff |
color_text_blue_20 | #ff000000 |
color_text_blue_30 | #ff000000 |
color_text_blue_40 | #ff000000 |
color_text_blue_50 | #ff000000 |
color_text_blue_60 | #ffffffff |
color_text_blue_70 | #ffffffff |
color_text_blue_80 | #ffffffff |
color_text_blue_90 | #ffffffff |
color_text_blue_base | #ff000000 |
color_text_blue_dark | #ffffffff |
color_text_blue_light | #ff000000 |
color_text_green_10 | #ff000000 |
color_text_green_100 | #ffffffff |
color_text_green_20 | #ff000000 |
color_text_green_30 | #ff000000 |
color_text_green_40 | #ff000000 |
color_text_green_50 | #ff000000 |
color_text_green_60 | #ffffffff |
color_text_green_70 | #ffffffff |
color_text_green_80 | #ffffffff |
color_text_green_90 | #ffffffff |
color_text_green_base | #ff000000 |
color_text_green_dark | #ffffffff |
color_text_green_light | #ff000000 |
color_text_grey_10 | #ff000000 |
color_text_grey_100 | #ffffffff |
color_text_grey_20 | #ff000000 |
color_text_grey_30 | #ff000000 |
color_text_grey_40 | #ff000000 |
color_text_grey_50 | #ff000000 |
color_text_grey_60 | #ff000000 |
color_text_grey_70 | #ffffffff |
color_text_grey_80 | #ffffffff |
color_text_grey_90 | #ffffffff |
color_text_grey_base | #ff000000 |
color_text_grey_dark | #ff000000 |
color_text_grey_light | #ff000000 |
color_text_marketing_10 | #ff000000 |
color_text_marketing_100 | #ffffffff |
color_text_marketing_20 | #ff000000 |
color_text_marketing_30 | #ff000000 |
color_text_marketing_40 | #ff000000 |
color_text_marketing_50 | #ff000000 |
color_text_marketing_60 | #ff000000 |
color_text_marketing_70 | #ff000000 |
color_text_marketing_80 | #ffffffff |
color_text_marketing_90 | #ffffffff |
color_text_marketing_base | #ff000000 |
color_text_marketing_dark | #ff000000 |
color_text_marketing_light | #ff000000 |
color_text_orange_10 | #ff000000 |
color_text_orange_100 | #ffffffff |
color_text_orange_20 | #ff000000 |
color_text_orange_30 | #ff000000 |
color_text_orange_40 | #ff000000 |
color_text_orange_50 | #ff000000 |
color_text_orange_60 | #ffffffff |
color_text_orange_70 | #ffffffff |
color_text_orange_80 | #ffffffff |
color_text_orange_90 | #ffffffff |
color_text_orange_base | #ff000000 |
color_text_orange_dark | #ffffffff |
color_text_orange_light | #ff000000 |
color_text_primary_10 | #ff000000 |
color_text_primary_100 | #ffffffff |
color_text_primary_20 | #ff000000 |
color_text_primary_30 | #ff000000 |
color_text_primary_40 | #ff000000 |
color_text_primary_50 | #ffffffff |
color_text_primary_60 | #ffffffff |
color_text_primary_70 | #ffffffff |
color_text_primary_80 | #ffffffff |
color_text_primary_90 | #ffffffff |
color_text_primary_base | #ffffffff |
color_text_primary_dark | #ffffffff |
color_text_primary_light | #ff000000 |
color_text_red_10 | #ff000000 |
color_text_red_100 | #ffffffff |
color_text_red_20 | #ff000000 |
color_text_red_30 | #ff000000 |
color_text_red_40 | #ff000000 |
color_text_red_50 | #ff000000 |
color_text_red_60 | #ffffffff |
color_text_red_70 | #ffffffff |
color_text_red_80 | #ffffffff |
color_text_red_90 | #ffffffff |
color_text_red_base | #ff000000 |
color_text_red_dark | #ffffffff |
color_text_red_light | #ff000000 |
color_text_secondary_10 | #ff000000 |
color_text_secondary_100 | #ffffffff |
color_text_secondary_20 | #ff000000 |
color_text_secondary_30 | #ff000000 |
color_text_secondary_40 | #ff000000 |
color_text_secondary_50 | #ff000000 |
color_text_secondary_60 | #ffffffff |
color_text_secondary_70 | #ffffffff |
color_text_secondary_80 | #ffffffff |
color_text_secondary_90 | #ffffffff |
color_text_secondary_base | #ffffffff |
color_text_secondary_dark | #ffffffff |
color_text_secondary_light | #ff000000 |
color_text_tertiary_10 | #ff000000 |
color_text_tertiary_100 | #ffffffff |
color_text_tertiary_20 | #ff000000 |
color_text_tertiary_30 | #ff000000 |
color_text_tertiary_40 | #ff000000 |
color_text_tertiary_50 | #ff000000 |
color_text_tertiary_60 | #ff000000 |
color_text_tertiary_70 | #ff000000 |
color_text_tertiary_80 | #ffffffff |
color_text_tertiary_90 | #ffffffff |
color_text_tertiary_base | #ff000000 |
color_text_tertiary_dark | #ff000000 |
color_text_tertiary_light | #ff000000 |
color_text_white_base | #ff000000 |
color_white_base | #ffffffff |
Space
| Component | Example |
|---|---|
space_1 | 2dp |
space_2 | 4dp |
space_3 | 8dp |
space_4 | 12dp |
space_5 | 16dp |
space_6 | 24dp |
space_7 | 32dp |
space_8 | 40dp |
space_9 | 48dp |
space_10 | 64dp |
space_11 | 96dp |
Z-index
| Component | Example |
|---|---|
z_index_100 | tooltip |
z_index_200 | menu |
z_index_300 | popover |
z_index_400 | sticky content |
z_index_500 | sheet |
z_index_600 | modal backdrop |
z_index_700 | modal sheet |
z_index_800 | modal (dialog, alert, page, full screen) |
z_index_900 | toast |
Shadows
| Component | Example |
|---|---|
shadow_0 | none |
shadow_1 | 0 2px 4px 0 rgba(0,0,0,0.12) |
shadow_2 | 0 2px 7px 0 rgba(0,0,0,0.28) |
shadow_3 | 0 7px 14px 0 rgba(0,0,0,0.28) |
shadow_4 | 0 14px 28px 0 rgba(0,0,0,0.28) |
shadow_inset_1 | inset 0 1px 10px 0 rgba(0,0,0,0.24) |
shadow_inset_2 | inset 0 1px 15px 0 rgba(0,0,0,0.28) |
Grid
| Component | Example |
|---|---|
grid_breakpoint_large | 1024dp |
grid_breakpoint_large_max | 1319dp |
grid_breakpoint_medium | 768dp |
grid_breakpoint_medium_max | 1023dp |
grid_breakpoint_small | 375dp |
grid_breakpoint_small_max | 767dp |
grid_breakpoint_x_large | 1320dp |
grid_breakpoint_x_small | - |
grid_breakpoint_x_small_max | 374dp |
grid_gutter | 16dp |
grid_wrap_fluid | calc(100% - 32dp) |
grid_wrap_static | 1200dp |
Typography
Font-family
| Component | Example |
|---|---|
font_family_brand_primary | Aa "Regular" |
font_family_brand_secondary | Aa "Regular" |
font_family_system | Aa "Regular" |
Font-weight
| Component | Example |
|---|---|
font_weight_bold | Aa "Bold" |
font_weight_medium | Aa "Medium" |
font_weight_regular | Aa "Regular" |
Line-height
| Component | Example |
|---|---|
line_height_3_x_large use font.heading, font.paragraph, font.caption instead | Aa 44sp |
line_height_4_x_large use font.heading, font.paragraph, font.caption instead | Aa 48sp |
line_height_large use font.heading, font.paragraph, font.caption instead | Aa 28sp |
line_height_medium use font.heading, font.paragraph, font.caption instead | Aa 24sp |
line_height_small use font.heading, font.paragraph, font.caption instead | Aa 20sp |
line_height_x_large use font.heading, font.paragraph, font.caption instead | Aa 32sp |
line_height_x_small use font.heading, font.paragraph, font.caption instead | Aa 16sp |
line_height_xx_large use font.heading, font.paragraph, font.caption instead | Aa 40sp |
Font-size (type scale)
| Component | Example |
|---|---|
font_size_3_x_large use font.heading, font.paragraph, font.caption instead | Aa 24sp |
font_size_4_x_large use font.heading, font.paragraph, font.caption instead | Aa 28sp |
font_size_5_x_large use font.heading, font.paragraph, font.caption instead | Aa 32sp |
font_size_6_x_large use font.heading, font.paragraph, font.caption instead | Aa 40sp |
font_size_large use font.heading, font.paragraph, font.caption instead | Aa 18sp |
font_size_medium use font.heading, font.paragraph, font.caption instead | Aa 16sp |
font_size_small use font.heading, font.paragraph, font.caption instead | Aa 14sp |
font_size_x_large use font.heading, font.paragraph, font.caption instead | Aa 20sp |
font_size_x_small use font.heading, font.paragraph, font.caption instead | Aa 12sp |
font_size_xx_large use font.heading, font.paragraph, font.caption instead | Aa 22sp |
Font System
| Component | Example |
|---|---|
font_caption_1_line_height | 16sp |
font_caption_1_size | 14sp |
font_caption_2_line_height | 16sp |
font_caption_2_size | 12sp |
font_heading_1_large_line_height | 52sp |
font_heading_1_large_size | 40sp |
font_heading_1_line_height | 44sp |
font_heading_1_size | 32sp |
font_heading_1_weight | "Bold" |
font_heading_2_large_line_height | 40sp |
font_heading_2_large_size | 32sp |
font_heading_2_line_height | 36sp |
font_heading_2_size | 28sp |
font_heading_2_weight | "Bold" |
font_heading_3_large_line_height | 36sp |
font_heading_3_large_size | 28sp |
font_heading_3_line_height | 32sp |
font_heading_3_size | 24sp |
font_heading_3_weight | "Bold" |
font_heading_4_large_line_height | 28sp |
font_heading_4_large_size | 22sp |
font_heading_4_line_height | 28sp |
font_heading_4_size | 22sp |
font_heading_4_weight | "Bold" |
font_heading_5_large_line_height | 24sp |
font_heading_5_large_size | 18sp |
font_heading_5_line_height | 24sp |
font_heading_5_size | 18sp |
font_heading_5_weight | "Bold" |
font_heading_6_large_line_height | 20sp |
font_heading_6_large_size | 16sp |
font_heading_6_line_height | 20sp |
font_heading_6_size | 16sp |
font_heading_6_weight | "Bold" |
font_paragraph_large_line_height | 28sp |
font_paragraph_large_size | 18sp |
font_paragraph_line_height | 24sp |
font_paragraph_size | 16sp |
Border Radius
| Component | Example |
|---|---|
border_radius_0 | 0dp |
border_radius_1 | 2dp |
border_radius_10 | 64dp |
border_radius_11 | 96dp |
border_radius_2 | 4dp |
border_radius_3 | 8dp |
border_radius_4 | 12dp |
border_radius_5 | 16dp |
border_radius_6 | 24dp |
border_radius_7 | 32dp |
border_radius_8 | 40dp |
border_radius_9 | 48dp |
border_radius_fill | 50% |
border_radius_sides | 9999dp |
Overlays
| Component | Example |
|---|---|
overlay_fill | #54000000 |
overlay_gradient_linear_fade_to_bottom | linear-gradient(-180deg, rgba(0, 0, 0, 0.33) 0%, rgba(255, 255, 255, 0) 100%) |
overlay_gradient_linear_fade_to_top | linear-gradient(-180deg, rgba(213, 219, 224, 0) 0%, rgba(0, 0, 0, 0.33) 100%) |
Motion
| Component | Example |
|---|---|
motion_duration_fast | Hover me! 200 |
motion_duration_loop | Hover me! 1200 |
motion_duration_medium | Hover me! 300 |
motion_duration_slow | Hover me! 500 |
Icon
| Component | Example |
|---|---|
icon_large | 28dp |
icon_medium | 24dp |
icon_small | 16dp |
icon_x_large | 32dp |