Themes
Color styles (also known as tokens) are color values that work for both Light and Dark themes, and additional themes that may be developed later (e.g. High Contrast). They act as a single source of truth to serve a variety of design use cases.
Below is our list of color styles, expressed as variables (in Figma) and tokens (in code theme.json). The variables below are separated into two distinct groups:
- Generic - colors that are commonly found and used throughout the portal interface
- Semantic - component-specific color sets tailored to suit a component and its usage
Generic Tokens
Text
All colors associated with text.
|
Light value / Dark value |
Token |
Description |
|---|---|---|
slate.800 / navy.100 |
color.text.primary |
Use for all prominent headings and body text that the user needs to read. |
slate.600 / navy.300 |
color.text.secondary |
Use for areas of secondary-level text or where a differentiation from primary is required. |
slate.500 / navy.400 |
color.text.tertiary |
Use for supportive areas of text or where a differentiation from primary and secondary is required. |
black / white |
color.text.inverse |
Use for text that is on a darker or inverse background. |
slate.300 / navy.600 |
color.text.disabled |
Use for all instances of text in a disabled state. |
blue.500 / blue.400 |
color.text.selected |
Use for text in selected states, such as tabs and drop downs. |
blue.500 / blue.300 |
color.text.link.default |
Use as the default state for all links and inline linkable text (e.g. hyperlinks). |
blue.500 / blue.300 |
color.text.info |
Use for informative text or to communicate something is informative. |
green.500 / green.300 |
color.text.success |
Use for text to communicate a favourable outcome, such as input field success messaging. |
yellow.400 / yellow.200 |
color.text.warning |
Use for text to emphasise caution. |
red.500 / red.300 |
color.text.danger |
Use for critical text, such as input field error messaging. |
purple.500 / purple.300 |
color.text.feature |
Use for text to emphasise change or something new. |
Icons
All colors associated with icons.
|
Light value / Dark value |
Token |
Description |
|---|---|---|
slate.800 / navy.100 |
color.icon.primary |
Use to support text that uses the same primary color value. |
slate.600 / navy.300 |
color.icon.secondary |
Use to support text that uses the same secondary color value. |
slate.400 / navy.400 |
color.icon.tertiary |
Use to support text that uses the same tertiary color value. |
black / white |
color.icon.inverse |
Use to support text that uses the same inverse color value or for stand-alone icons on inverse background colors. |
slate.300 / navy.600 |
color.icon.disabled |
Use to support text that uses the same disabled color value. |
blue.600 / blue.300 |
color.icon.selected |
Use for icons in selected states, such as tabs and dropdowns. |
blue.500 / blue.300 |
color.icon.link.default |
Use as the default state for all links and inline linkable icons. |
blue.500 / blue.400 |
color.icon.info |
Use for informative text or to communicate something is informative. |
green.500 / green.400 |
color.icon.success |
Use for icons to communicate a favourable outcome, such as input field success messaging. |
yellow.400 / yellow.300 |
color.icon.warning |
Use for icons to emphasise caution. |
red.500 / red.400 |
color.icon.danger |
Use for critical icons, such as input field error messaging. |
purple.400 / purple.400 |
color.icon.feature |
Use for icons to emphasise change or something new. |
Border
All colors associated with borders.
|
Light value / Dark value |
Token |
Description |
|---|---|---|
slate.200 / navy.700 |
color.border.primary |
Use as the default for all borders. |
slate.100 / navy.800 |
color.border.secondary |
Use when needing to define a subtle divisional border. |
slate.300 / navy.600 |
color.border.tertiary |
Use when needing to define a strong divisional border. |
slate.500 / navy.400 |
color.border.bold |
Use for borders when stronger defined contrasts are required. |
slate.700 / navy.200 |
color.border.inverse.primary |
Use for borders on neutral inverse background colors. |
slate.700 / navy.100 |
color.border.inverse.secondary |
Use for more subtle borders on neutral inverse background colors. |
slate.300 / navy.600 |
color.border.disabled |
Use for all instances of border in a disabled state. |
blue.500 / blue.400 |
color.border.selected |
Use for borders in selected states, such as tabs and dropdowns. |
blue.500 / blue.300 |
color.border.link.default |
Use as the underline for all links and inline linkable text (e.g. hyperlinks). |
blue.500 / blue.400 |
color.border.info |
Use for informative objects that have a border. |
green.500 / green.400 |
color.border.success |
Use for successful objects that have a border. |
yellow.400 / yellow.300 |
color.border.warning |
Use for warning objects that have a border. |
red.500 / red.400 |
color.border.danger |
Use for danger objects that have a border. |
purple.500 / purple.400 |
color.border.feature |
Use for feature objects that have a border. |
Background
All colors associated with backgrounds.
|
Light value / Dark value |
Token |
Description |
|---|---|---|
white / navy.900 |
color.background.primary |
Use as the default for all backgrounds. |
slate.100 / navy.800 |
color.background.secondary |
Use when needing to define a subtle divisional background. |
slate.200 / navy.700 |
color.background.tertiary |
Use when needing to define a subtle divisional background with differing hover and pressed states. |
white / navy.800 |
color.background.quartery |
Use for backgrounds that require stronger contrast differentiation in dark theme (i.e. Dialog) with differing hover and pressed states. |
white / black |
color.background.bold |
Use for backgrounds when stronger defined contrasts are required. |
slate.900 / white |
color.background.inverse.primary |
Use for backgrounds when contrast differentiation is required (i.e. Tooltip, Snackbar). |
slate.700 / navy.300 |
color.background.inverse.secondary |
Use for backgrounds when more subtle contrast differentiation is required. |
slate.200 / navy.700 |
color.background.disabled |
Use for all instances of backgrounds in a disabled state. |
blue.500 / blue.400 |
color.background.selected |
Use for backgrounds in selected states, such as tabs and dropdowns. |
blue.100 / blue.700 |
color.background.info |
Use for informative objects that have a background. |
green.100 / green.700 |
color.background.success |
Use for successful objects that have a background. |
yellow.100 / yellow.600 |
color.background.warning |
Use for warning objects that have a background. |
red.100 / red.700 |
color.background.danger |
Use for danger objects that have a background. |
purple.100 / purple.700 |
color.background.feature |
Use for feature objects that have a background. |
Semantic Tokens
Semantic theme tokens are mapped to our UI components and composition. If you have questions regarding semantic tokens, please contact the Frontend Foundations Team.