iOS
Tokens for iOS 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
#ffffff
|
|
color base black |
color
base
black
|
#000000
#000000
|
|
color theme blue 0 |
color
theme
blue
0
|
#e5f5fb
#e5f5fb
|
|
color theme blue 1 |
color
theme
blue
1
|
#ccecf8
#ccecf8
|
|
color theme blue 2 |
color
theme
blue
2
|
#99d9f1
#99d9f1
|
|
color theme blue 3 |
color
theme
blue
3
|
#66c6ea
#66c6ea
|
|
color theme blue 4 |
color
theme
blue
4
|
#4cbce7
#4cbce7
|
|
color theme blue 5 |
color
theme
blue
5
|
#19a9e0
#19a9e0
|
|
color theme blue 6 |
color
theme
blue
6
|
#00a0dd
#00a0dd
|
|
color theme blue 7 |
color
theme
blue
7
|
#0090c6
#0090c6
|
|
color theme blue 8 |
color
theme
blue
8
|
#0080b0
#0080b0
|
|
color theme blue 9 |
color
theme
blue
9
|
#00709a
#00709a
|
|
color theme indigo 0 |
color
theme
indigo
0
|
#edf2ff
#edf2ff
|
|
color theme indigo 1 |
color
theme
indigo
1
|
#dbe4ff
#dbe4ff
|
|
color theme indigo 2 |
color
theme
indigo
2
|
#bac8ff
#bac8ff
|
|
color theme indigo 3 |
color
theme
indigo
3
|
#91a7ff
#91a7ff
|
|
color theme indigo 4 |
color
theme
indigo
4
|
#748ffc
#748ffc
|
|
color theme indigo 5 |
color
theme
indigo
5
|
#5c7cfa
#5c7cfa
|
|
color theme indigo 6 |
color
theme
indigo
6
|
#4c6ef5
#4c6ef5
|
|
color theme indigo 7 |
color
theme
indigo
7
|
#4263eb
#4263eb
|
|
color theme indigo 8 |
color
theme
indigo
8
|
#3b5bdb
#3b5bdb
|
|
color theme indigo 9 |
color
theme
indigo
9
|
#364fc7
#364fc7
|
|
color theme green 0 |
color
theme
green
0
|
#ebfbee
#ebfbee
|
|
color theme green 1 |
color
theme
green
1
|
#d3f9d8
#d3f9d8
|
|
color theme green 2 |
color
theme
green
2
|
#b2f2bb
#b2f2bb
|
|
color theme green 3 |
color
theme
green
3
|
#8ce99a
#8ce99a
|
|
color theme green 4 |
color
theme
green
4
|
#69db7c
#69db7c
|
|
color theme green 5 |
color
theme
green
5
|
#51cf66
#51cf66
|
|
color theme green 6 |
color
theme
green
6
|
#40c057
#40c057
|
|
color theme green 7 |
color
theme
green
7
|
#37b24d
#37b24d
|
|
color theme green 8 |
color
theme
green
8
|
#2f9e44
#2f9e44
|
|
color theme green 9 |
color
theme
green
9
|
#2b8a3e
#2b8a3e
|
|
color theme yellow 0 |
color
theme
yellow
0
|
#fff9db
#fff9db
|
|
color theme yellow 1 |
color
theme
yellow
1
|
#fff3bf
#fff3bf
|
|
color theme yellow 2 |
color
theme
yellow
2
|
#ffec99
#ffec99
|
|
color theme yellow 3 |
color
theme
yellow
3
|
#ffe066
#ffe066
|
|
color theme yellow 4 |
color
theme
yellow
4
|
#ffd43b
#ffd43b
|
|
color theme yellow 5 |
color
theme
yellow
5
|
#fcc419
#fcc419
|
|
color theme yellow 6 |
color
theme
yellow
6
|
#fab005
#fab005
|
|
color theme yellow 7 |
color
theme
yellow
7
|
#f59f00
#f59f00
|
|
color theme yellow 8 |
color
theme
yellow
8
|
#f08c00
#f08c00
|
|
color theme yellow 9 |
color
theme
yellow
9
|
#e67700
#e67700
|
|
color theme red 0 |
color
theme
red
0
|
#fff5f5
#fff5f5
|
|
color theme red 1 |
color
theme
red
1
|
#ffe3e3
#ffe3e3
|
|
color theme red 2 |
color
theme
red
2
|
#ffc9c9
#ffc9c9
|
|
color theme red 3 |
color
theme
red
3
|
#ffa8a8
#ffa8a8
|
|
color theme red 4 |
color
theme
red
4
|
#ff8787
#ff8787
|
|
color theme red 5 |
color
theme
red
5
|
#ff6b6b
#ff6b6b
|
|
color theme red 6 |
color
theme
red
6
|
#fa5252
#fa5252
|
|
color theme red 7 |
color
theme
red
7
|
#f03e3e
#f03e3e
|
|
color theme red 8 |
color
theme
red
8
|
#e03131
#e03131
|
|
color theme red 9 |
color
theme
red
9
|
#c92a2a
#c92a2a
|
|
color theme gray 0 |
color
theme
gray
0
|
#f8f9fa
#f8f9fa
|
|
color theme gray 1 |
color
theme
gray
1
|
#f1f3f5
#f1f3f5
|
|
color theme gray 2 |
color
theme
gray
2
|
#e9ecef
#e9ecef
|
|
color theme gray 3 |
color
theme
gray
3
|
#dee2e6
#dee2e6
|
|
color theme gray 4 |
color
theme
gray
4
|
#ced4da
#ced4da
|
|
color theme gray 5 |
color
theme
gray
5
|
#adb5bd
#adb5bd
|
|
color theme gray 6 |
color
theme
gray
6
|
#868e96
#868e96
|
|
color theme gray 7 |
color
theme
gray
7
|
#495057
#495057
|
|
color theme gray 8 |
color
theme
gray
8
|
#343a40
#343a40
|
|
color theme gray 9 |
color
theme
gray
9
|
#212529
#212529
|