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.

Name Property Description
Base --gr-color-primary The main color that all variations are derived from
Base (rgb) --gr-color-primary-rgb The base color in red, green, blue format
Contrast --gr-color-primary-contrast The opposite of the base color, should be visible against the base color
Contrast (rgb) --gr-color-primary-contrast-rgb The contrast color in red, green, blue format
Shade --gr-color-primary-shade A slightly darker version of the base color
Tint --gr-color-primary-tint A slightly lighter version of the base color

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.


Token Value Example
--gr-color-primary * #1079b2
--gr-color-primary-rgb * 16, 121, 178
--gr-color-primary-contrast #ffffff
--gr-color-primary-contrast-rgb 255, 255, 255
--gr-color-primary-shade #0d6696
--gr-color-primary-tint #1499e1


Token Value Example
--gr-color-secondary #051f2c
--gr-color-secondary-rgb 5, 31, 44
--gr-color-secondary-contrast #ffffff
--gr-color-secondary-contrast-rgb 255, 255, 255
--gr-color-secondary-shade #000000
--gr-color-secondary-tint #0a415c


Token Value Example
--gr-color-tertiary #0c4a6e
--gr-color-tertiary-rgb 12, 74, 110
--gr-color-tertiary-contrast #ffffff
--gr-color-tertiary-contrast-rgb 255, 255, 255
--gr-color-tertiary-shade #083249
--gr-color-tertiary-tint #106393


Token Value Example
--gr-color-success #0fbe78
--gr-color-success-rgb 15, 190, 120
--gr-color-success-contrast #000000
--gr-color-success-contrast-rgb 0, 0, 0
--gr-color-success-shade * #057f4e
--gr-color-success-tint #12e28f


Token Value Example
--gr-color-warning #fbbc4e
--gr-color-warning-rgb 251, 188, 78
--gr-color-warning-contrast #051f2c
--gr-color-warning-contrast-rgb 5, 31, 44
--gr-color-warning-shade * #9e6400
--gr-color-warning-tint #fdd187


Token Value Example
--gr-color-danger * #e60017
--gr-color-danger-rgb * 230, 0, 23
--gr-color-danger-contrast #ffffff
--gr-color-danger-contrast-rgb 255, 255, 255
--gr-color-danger-shade #cc0014
--gr-color-danger-tint #ff1f35


Token Value Example
--gr-color-light #f4f5f8
--gr-color-light-rgb 244, 245, 248
--gr-color-light-contrast #051f2c
--gr-color-light-contrast-rgb 5, 31, 44
--gr-color-light-shade #d7d8da
--gr-color-light-tint #f9fafb


Token Value Example
--gr-color-medium * #5e6c78
--gr-color-medium-rgb * 94, 108, 120
--gr-color-medium-contrast #ffffff
--gr-color-medium-contrast-rgb 255, 255, 255
--gr-color-medium-shade #48535b
--gr-color-medium-tint #81909c


Token Value Example
--gr-color-dark #02131b
--gr-color-dark-rgb 2, 19, 27
--gr-color-dark-contrast #ffffff
--gr-color-dark-contrast-rgb 255, 255, 255
--gr-color-dark-shade #000000
--gr-color-dark-tint #222428