Colour
Colours in the Meridian Design System are defined in a Theme and delivered by
the Theme Manager via static properties.
Background
Background colours should be used in pairs to establish visual hierarchy.
| Name | Property | Description | MDS Value |
|---|---|---|---|
| Primary | Primary |
Primary backgrounds contain the product's focal point. The user is doing most of their work on this background. |
|
| Secondary | Secondary |
Secondary backgrounds offer visual rest from primary backgrounds and contain auxiliary elements, such as side navigation. |
|
| Feedback |
Feedback colours reinforce a user action and are used in Feedback background colours are not intended to be used on text, instead use text colours. |
||
| Informational | |||
| Error | |||
| Warning | |||
| Success | |||
| Interactive |
Interactive background colours are used to create interactive components, like buttons. These should not be commonly used by product teams, instead, use UI components for interactive elements. |
||
| Primary | |||
| Secondary | |||
| Destructive | |||
| Affirmative |
Text
...
Generic
Generic colours are not defined in a Theme and instead are provided directly by the Theme Manager. Use the generic colours sparingly and only in cases where a named constant is not available for your use case.
When repeatedly using generic colours, please consider reaching out to Triton about adding a new constant to cover your use case.
Visualisations
...
Typography
…
... coming soon ...
Sound
…
... coming soon ...
Space
…
... coming soon ...