Android Tokens
Tokens for Android development.
UI Color Aliases
UI colors are aliases for base color values to simplify and create a common usage pattern.
| Description | Token | Example |
|---|---|---|
ui primary darkerPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_primary_darker
Mapped to: {color.theme.blue.9.value}
|
|
ui primary darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_primary_dark
Mapped to: {color.theme.blue.7.value}
|
|
ui primary basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_primary_base
Mapped to: {color.theme.blue.6.value}
|
|
ui primary lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_primary_light
Mapped to: {color.theme.blue.5.value}
|
|
ui primary lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_primary_lighter
Mapped to: {color.theme.blue.1.value}
|
|
ui primary lightestPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_primary_lightest
Mapped to: {color.theme.blue.0.value}
|
|
ui success darkerPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_success_darker
Mapped to: {color.theme.green.9.value}
|
|
ui success darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_success_dark
Mapped to: {color.theme.green.7.value}
|
|
ui success basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_success_base
Mapped to: {color.theme.green.6.value}
|
|
ui success lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_success_light
Mapped to: {color.theme.green.5.value}
|
|
ui success lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_success_lighter
Mapped to: {color.theme.green.1.value}
|
|
ui success lightestPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_success_lightest
Mapped to: {color.theme.green.0.value}
|
|
ui warning darkerPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_warning_darker
Mapped to: {color.theme.yellow.9.value}
|
|
ui warning darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_warning_dark
Mapped to: {color.theme.yellow.7.value}
|
|
ui warning basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_warning_base
Mapped to: {color.theme.yellow.6.value}
|
|
ui warning lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_warning_light
Mapped to: {color.theme.yellow.5.value}
|
|
ui warning lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_warning_lighter
Mapped to: {color.theme.yellow.1.value}
|
|
ui warning lightestPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_warning_lightest
Mapped to: {color.theme.yellow.0.value}
|
|
ui error darkerPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_error_darker
Mapped to: {color.theme.red.9.value}
|
|
ui error darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_error_dark
Mapped to: {color.theme.red.7.value}
|
|
ui error basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_error_base
Mapped to: {color.theme.red.6.value}
|
|
ui error lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_error_light
Mapped to: {color.theme.red.5.value}
|
|
ui error lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_error_lighter
Mapped to: {color.theme.red.1.value}
|
|
ui error lightestPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_error_lightest
Mapped to: {color.theme.red.0.value}
|
|
ui default darkerPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_default_darker
Mapped to: {color.theme.gray.9.value}
|
|
ui default darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_default_dark
Mapped to: {color.theme.gray.7.value}
|
|
ui default basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_default_base
Mapped to: {color.theme.gray.6.value}
|
|
ui default lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_default_light
Mapped to: {color.theme.gray.5.value}
|
|
ui default lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_default_lighter
Mapped to: {color.theme.gray.1.value}
|
|
ui default lightestPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_ui_default_lightest
Mapped to: {color.theme.gray.0.value}
|
|
font darkPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_font_dark
Mapped to: {color.theme.gray.9.value}
|
Sample Text
|
font basePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_font_base
Mapped to: {color.theme.gray.8.value}
|
Sample Text
|
font lightPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_font_light
Mapped to: {color.theme.gray.7.value}
|
Sample Text
|
font lighterPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_font_lighter
Mapped to: {color.theme.gray.6.value}
|
Sample Text
|
font whitePlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_font_white
Mapped to: {color.base.white.value}
|
Sample Text
|
font errorPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_font_error
Mapped to: {color.ui.error.base.value}
|
Sample Text
|
font successPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_font_success
Mapped to: {color.ui.success.base.value}
|
Sample Text
|
font warningPlaceholder comment lorem ipsum dolor sit amet, consectetur adipiscing elit. |
color_font_warning
Mapped to: {color.ui.warning.base.value}
|
Sample Text
|
Additional Colors
Base and theme colors used to generate the core UI colors are also available.
| Description | Token | Value | Example |
|---|---|---|---|
color base white |
color_base_white
|
#ffffff
|
|
color base black |
color_base_black
|
#000000
|
|
color theme blue 0 |
color_theme_blue_0
|
#e5f5fb
|
|
color theme blue 1 |
color_theme_blue_1
|
#ccecf8
|
|
color theme blue 2 |
color_theme_blue_2
|
#99d9f1
|
|
color theme blue 3 |
color_theme_blue_3
|
#66c6ea
|
|
color theme blue 4 |
color_theme_blue_4
|
#4cbce7
|
|
color theme blue 5 |
color_theme_blue_5
|
#19a9e0
|
|
color theme blue 6 |
color_theme_blue_6
|
#00a0dd
|
|
color theme blue 7 |
color_theme_blue_7
|
#0090c6
|
|
color theme blue 8 |
color_theme_blue_8
|
#0080b0
|
|
color theme blue 9 |
color_theme_blue_9
|
#00709a
|
|
color theme indigo 0 |
color_theme_indigo_0
|
#edf2ff
|
|
color theme indigo 1 |
color_theme_indigo_1
|
#dbe4ff
|
|
color theme indigo 2 |
color_theme_indigo_2
|
#bac8ff
|
|
color theme indigo 3 |
color_theme_indigo_3
|
#91a7ff
|
|
color theme indigo 4 |
color_theme_indigo_4
|
#748ffc
|
|
color theme indigo 5 |
color_theme_indigo_5
|
#5c7cfa
|
|
color theme indigo 6 |
color_theme_indigo_6
|
#4c6ef5
|
|
color theme indigo 7 |
color_theme_indigo_7
|
#4263eb
|
|
color theme indigo 8 |
color_theme_indigo_8
|
#3b5bdb
|
|
color theme indigo 9 |
color_theme_indigo_9
|
#364fc7
|
|
color theme green 0 |
color_theme_green_0
|
#ebfbee
|
|
color theme green 1 |
color_theme_green_1
|
#d3f9d8
|
|
color theme green 2 |
color_theme_green_2
|
#b2f2bb
|
|
color theme green 3 |
color_theme_green_3
|
#8ce99a
|
|
color theme green 4 |
color_theme_green_4
|
#69db7c
|
|
color theme green 5 |
color_theme_green_5
|
#51cf66
|
|
color theme green 6 |
color_theme_green_6
|
#40c057
|
|
color theme green 7 |
color_theme_green_7
|
#37b24d
|
|
color theme green 8 |
color_theme_green_8
|
#2f9e44
|
|
color theme green 9 |
color_theme_green_9
|
#2b8a3e
|
|
color theme yellow 0 |
color_theme_yellow_0
|
#fff9db
|
|
color theme yellow 1 |
color_theme_yellow_1
|
#fff3bf
|
|
color theme yellow 2 |
color_theme_yellow_2
|
#ffec99
|
|
color theme yellow 3 |
color_theme_yellow_3
|
#ffe066
|
|
color theme yellow 4 |
color_theme_yellow_4
|
#ffd43b
|
|
color theme yellow 5 |
color_theme_yellow_5
|
#fcc419
|
|
color theme yellow 6 |
color_theme_yellow_6
|
#fab005
|
|
color theme yellow 7 |
color_theme_yellow_7
|
#f59f00
|
|
color theme yellow 8 |
color_theme_yellow_8
|
#f08c00
|
|
color theme yellow 9 |
color_theme_yellow_9
|
#e67700
|
|
color theme red 0 |
color_theme_red_0
|
#fff5f5
|
|
color theme red 1 |
color_theme_red_1
|
#ffe3e3
|
|
color theme red 2 |
color_theme_red_2
|
#ffc9c9
|
|
color theme red 3 |
color_theme_red_3
|
#ffa8a8
|
|
color theme red 4 |
color_theme_red_4
|
#ff8787
|
|
color theme red 5 |
color_theme_red_5
|
#ff6b6b
|
|
color theme red 6 |
color_theme_red_6
|
#fa5252
|
|
color theme red 7 |
color_theme_red_7
|
#f03e3e
|
|
color theme red 8 |
color_theme_red_8
|
#e03131
|
|
color theme red 9 |
color_theme_red_9
|
#c92a2a
|
|
color theme gray 0 |
color_theme_gray_0
|
#f8f9fa
|
|
color theme gray 1 |
color_theme_gray_1
|
#f1f3f5
|
|
color theme gray 2 |
color_theme_gray_2
|
#e9ecef
|
|
color theme gray 3 |
color_theme_gray_3
|
#dee2e6
|
|
color theme gray 4 |
color_theme_gray_4
|
#ced4da
|
|
color theme gray 5 |
color_theme_gray_5
|
#adb5bd
|
|
color theme gray 6 |
color_theme_gray_6
|
#868e96
|
|
color theme gray 7 |
color_theme_gray_7
|
#495057
|
|
color theme gray 8 |
color_theme_gray_8
|
#343a40
|
|
color theme gray 9 |
color_theme_gray_9
|
#212529
|