Semantic Tokens (Old Version)
Surface
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} |
Border
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} |
Text
| 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} |
Icon
| 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} |
Updated 3 months ago
Did this page help you?