Background fills for elements like input fields, containers, etc. excluding screen background colors.
| Semantic Token |
Primitive Token (Reference) |
Color Preview |
| Surface.Neutral.Dark |
{Color.Neutral.dark} |
|
| Surface.Neutral.Light |
{Color.Neutral.light} |
|
| Surface.Primary.50 |
{Color.Blue.50} |
|
| Surface.Primary.400 |
{Color.Blue.400} |
|
| Surface.Primary.500 |
{Color.Blue.500} |
|
| Surface.Primary.600 |
{Color.Blue.600} |
|
| Surface.Secondary.50 |
{Color.Gray.50} |
|
| Surface.Secondary.100 |
{Color.Gray.100} |
|
| Surface.Secondary.200 |
{Color.Gray.200} |
|
| Surface.Secondary.300 |
{Color.Gray.300} |
|
| Surface.Secondary.500 |
{Color.Gray.500} |
|
| Surface.Secondary.700 |
{Color.Gray.700} |
|
| Surface.Secondary.800 |
{Color.Gray.800} |
|
| Surface.Secondary.900 |
{Color.Gray.900} |
|
| Surface.Status.Soft.Negative |
{Color.Red.50} |
|
| Surface.Status.Soft.Positive |
{Color.Green.50} |
|
| Surface.Status.Soft.Warning |
{Color.Orange.50} |
|
| Surface.Status.Negative |
{Color.Red.600} |
|
| Surface.Status.Positive |
{Color.Green.600} |
|
All border elements in capture, input field borders, etc.
| Semantic Token |
Primitive Token (Reference) |
Color Preview |
| Border.accent |
{Color.Blue.500} |
|
| Border.negative |
{Color.Red.600} |
|
| Border.primary |
{Color.Gray.100} |
|
| Border.secondary |
{Color.Gray.300} |
|
| Border.success |
{Color.Green.600} |
|
| Border.tertiary |
{Color.Gray.500} |
|
| Border.warn |
{Color.Orange.500} |
|
| Semantic Token |
Primitive Token (Reference) |
Color Preview |
| Text.Body.invert |
{Color.Neutral.light} |
|
| Text.Body.primary |
{Color.Gray.800} |
|
| Text.Body.secondary |
{Color.Gray.500} |
|
| Text.Body.tertiary |
{Color.Gray.300} |
|
| Text.Brand.Accent |
{Color.Blue.500} |
|
| Text.Brand.Special |
{Color.Purple.500} |
|
| Text.Status.Negative |
{Color.Red.600} |
|
| Text.Status.Success |
{Color.Green.600} |
|
| Text.Status.Warning |
{Color.Orange.500} |
|
| Semantic Token |
Primitive Token (Reference) |
Color Preview |
| Icon.accent |
{Color.Blue.500} |
|
| Icon.invert |
{Color.Neutral.light} |
|
| Icon.negative |
{Color.Red.600} |
|
| Icon.primary |
{Color.Gray.500} |
|
| Icon.secondary |
{Color.Gray.800} |
|
| Icon.success |
{Color.Green.600} |
|
| Icon.warning |
{Color.Orange.500} |
|
