Foundations
Gradients
Gradients, also known as colour transitions, are often used to provide realism, increase colour contrast, or to create the illusion of content fading into an interface or image.
Overview
Gradient foundations consist of ‘base’ and ‘inverse’ styles.
Base
Dark when used in a light theme
'Base' gradient tokens fade elements into the interface background
Inverse
Light when used in a dark theme
'Inverse' gradient tokens fade elements into a dark background in a light theme
| Gradient | Token | Value |
|---|
Accessibility considerations
When using gradients, ensure important UI elements like text and icons are legible without compromising the aesthetic.
Iconography
Icons reinforce interactions and can provide additional context through visual cues.
Iconography
Icons reinforce interactions and can provide additional context through visual cues.