Color tokens

Color tokens are used to maintain consistent color use throughout your app.

There are nine colors used throughout the Graphite Design System: primary, secondary, tertiary, success, warning, danger, light, medium, and dark (currently secondary & tertiary are unused as of yet).

Each color consists of the following properties: a base, contrast, shade, and tint. The base and contrast colors also require a rgb property which is the same color, just in rgb format. The Graphite Design System uses colors with an opacity (alpha) in several components. In order for this to work, those properties must be provided in RGB format. When changing any of the properties that have a variation ending in -rgb, it is important they are also provided in a comma separated format without parentheses.

You could use this Color Generator from Ionic and simply replace --ion with --gr.

Please use this contrast checker for accessiblity.

* Ensure these color tokens have a minimum contrast ratio of 4:5:1 with the background color of your application, because they are used for normal text.

Primary

Secondary

Tertiary

Success

Warning

Danger

Light

Medium

Dark