Colour tokens
Colour tokens define colour for components and global styles.
Colour tokens and accessibility
GC Design System components meet level AA of the
When you use global colour tokens, check if your colour combinations meet standards for accessible colour contrast using
Select colour tokens purposefully
Select global colour tokens based on their purpose and its match to your needs.
Replace hard-coded values in your code with GC Design System colour tokens, like var(--gcds-text-primary) instead of #333333.
Global colour tokens
Use global colour tokens to:
- Design layouts, text colours, and global (or site-wide) styles.
- Communicate the meaning associated with that token. Global tokens are semantic.
- Create new component tokens.
Use global state tokens:
- Apply standard styling for states to your own components.
Text
| Preview | Token name | Contrast ratio | Hex | Purpose |
|---|---|---|---|---|
| --gcds-text-light | 1 | #ffffff | Main light text colour. Use on a background shade of 700 or darker (like --gcds-bg-dark). | |
| --gcds-text-primary | 12.63 | #333333 | Main text colour. Use on a background shade of 50 or lighter (like --gcds-bg-white). | |
| --gcds-text-secondary | 7 | #595959 | Contrast text colour (alternative to primary). Use on a background shade of 50 or lighter (like --gcds-bg-white). |
Link
| Preview | Token name | Contrast ratio | Hex | Purpose |
|---|---|---|---|---|
| --gcds-link-default | 9.16 | #1f497a | Default link colour for links on a white background. | |
| --gcds-link-hover | 5.98 | #1354ec | Hover link colour for links on a white background. | |
| --gcds-link-light | 1 | #ffffff | Main light link colour for links on 700 shade or darker background (like --gcds-color-blue-700). | |
| --gcds-link-visited | 10.77 | #4b248f | Visited link colour for links on a white background. |
Background
| Preview | Token name | Contrast ratio | Hex | Purpose |
|---|---|---|---|---|
| --gcds-bg-dark | 12.63 | #333333 | Main dark background colour. Use with a text shade of 100 or lighter (like --gcds-text-light). | |
| --gcds-bg-light | 1.11 | #f2f2f2 | Light background colour (alternative to white). Use with a text shade of 700 or darker (like --gcds-text-primary). | |
| --gcds-bg-primary | 12.15 | #26374a | Highlight background colour. Use with a text shade of 100 or lighter (like --gcds-text-light). | |
| --gcds-bg-white | 1 | #ffffff | Main background colour. Use with a text shade of 700 or darker (like --gcds-text-primary). |
Border
| Preview | Token name | Contrast ratio | Hex | Purpose |
|---|---|---|---|---|
| --gcds-border-default | 3.36 | #8c8c8c | Default border colour for borders and icons on a white background. |
Danger
| Preview | Token name | Contrast ratio | Hex | Purpose |
|---|---|---|---|---|
| --gcds-danger-background | 6.78 | #b3192e | Danger background colour for background emphasis on a destructive action or critical feedback. | |
| --gcds-danger-border | 6.78 | #b3192e | Danger border colour for borders on white backgrounds emphasizing a destructive action or critical feedback. | |
| --gcds-danger-text | 6.78 | #b3192e | Danger text colour for white backgrounds emphasizing a destructive action or critical feedback. |
Disabled
| Preview | Token name | Contrast ratio | Hex | Purpose |
|---|---|---|---|---|
| --gcds-disabled-background | 1.41 | #d9d9d9 | Disabled background colour. Use sparingly for a disabled interactive element. | |
| --gcds-disabled-text | 3.94 | #808080 | Disabled text colour. Use sparingly for a disabled interactive element. |
Focus
| Preview | Token name | Contrast ratio | Hex | Purpose |
|---|---|---|---|---|
| --gcds-focus-background | 5.98 | #1354ec | Focus background colour, exclusively for focus on an interactive element. | |
| --gcds-focus-border | 5.98 | #1354ec | Focus border colour, exclusively for focus on an interactive element. | |
| --gcds-focus-text | 1 | #ffffff | Focus text colour, exclusively for focus on an interactive element. |
Base colour tokens
Only use base tokens when you've already checked for global tokens and you need something else for building your own components, tokens, or even images.
Use base colour design tokens to:
- Fill a gap when no global tokens are available.
- Design a custom visual, drawing from the full colour palette.
- Support your own components.
- Provide a basis to build (and potentially contribute back) your own tokens.
| Preview | Token name | Contrast ratio | Hex | Purpose |
|---|---|---|---|---|
| --gcds-color-black | 21 | #000000 | ||
| --gcds-color-blue-50 | 1.12 | #ebf2fa | ||
| --gcds-color-blue-100 | 1.29 | #d6e4f5 | ||
| --gcds-color-blue-150 | 1.47 | #c2d7f0 | ||
| --gcds-color-blue-200 | 1.69 | #adcaeb | ||
| --gcds-color-blue-250 | 1.94 | #99bde6 | ||
| --gcds-color-blue-300 | 2.28 | #85afe0 | ||
| --gcds-color-blue-350 | 2.66 | #70a2db | ||
| --gcds-color-blue-400 | 3.12 | #5c95d6 | ||
| --gcds-color-blue-450 | 3.67 | #4788d1 | ||
| --gcds-color-blue-500 | 4.37 | #337acc | ||
| --gcds-color-blue-550 | 5.19 | #2e6eb8 | ||
| --gcds-color-blue-600 | 6.23 | #2962a3 | ||
| --gcds-color-blue-650 | 7.49 | #24568f | ||
| --gcds-color-blue-700 | 9.16 | #1f497a | ||
| --gcds-color-blue-750 | 11.04 | #193d66 | ||
| --gcds-color-blue-800 | 13.2 | #143152 | ||
| --gcds-color-blue-850 | 15.52 | #0f253d | ||
| --gcds-color-blue-900 | 17.86 | #0a1829 | ||
| --gcds-color-blue-muted | 12.15 | #26374a | ||
| --gcds-color-blue-vivid | 5.98 | #1354ec | ||
| --gcds-color-grayscale-50 | 1.11 | #f2f2f2 | ||
| --gcds-color-grayscale-100 | 1.24 | #e6e6e6 | ||
| --gcds-color-grayscale-150 | 1.41 | #d9d9d9 | ||
| --gcds-color-grayscale-200 | 1.6 | #cccccc | ||
| --gcds-color-grayscale-250 | 1.83 | #bfbfbf | ||
| --gcds-color-grayscale-300 | 2.09 | #b3b3b3 | ||
| --gcds-color-grayscale-350 | 2.43 | #a6a6a6 | ||
| --gcds-color-grayscale-400 | 2.84 | #999999 | ||
| --gcds-color-grayscale-450 | 3.36 | #8c8c8c | ||
| --gcds-color-grayscale-500 | 3.94 | #808080 | ||
| --gcds-color-grayscale-550 | 4.74 | #737373 | ||
| --gcds-color-grayscale-600 | 5.74 | #666666 | ||
| --gcds-color-grayscale-650 | 7 | #595959 | ||
| --gcds-color-grayscale-700 | 8.45 | #4d4d4d | ||
| --gcds-color-grayscale-750 | 10.36 | #404040 | ||
| --gcds-color-grayscale-800 | 12.63 | #333333 | ||
| --gcds-color-grayscale-850 | 15.13 | #262626 | ||
| --gcds-color-grayscale-900 | 17.4 | #1a1a1a | ||
| --gcds-color-green-50 | 1.07 | #ebfaf0 | ||
| --gcds-color-green-100 | 1.16 | #d6f5e1 | ||
| --gcds-color-green-150 | 1.25 | #c2f0d3 | ||
| --gcds-color-green-200 | 1.35 | #adebc4 | ||
| --gcds-color-green-250 | 1.46 | #99e6b5 | ||
| --gcds-color-green-300 | 1.58 | #85e0a6 | ||
| --gcds-color-green-350 | 1.71 | #70db97 | ||
| --gcds-color-green-400 | 1.83 | #5cd689 | ||
| --gcds-color-green-450 | 1.96 | #47d17a | ||
| --gcds-color-green-500 | 2.1 | #33cc6b | ||
| --gcds-color-green-550 | 2.57 | #2eb860 | ||
| --gcds-color-green-600 | 3.24 | #29a356 | ||
| --gcds-color-green-650 | 4.11 | #248f4b | ||
| --gcds-color-green-700 | 5.36 | #1f7a40 | ||
| --gcds-color-green-750 | 7.01 | #196636 | ||
| --gcds-color-green-800 | 9.24 | #14522b | ||
| --gcds-color-green-850 | 12.29 | #0f3d20 | ||
| --gcds-color-green-900 | 15.66 | #0a2915 | ||
| --gcds-color-purple-50 | 1.16 | #f0ebfa | ||
| --gcds-color-purple-100 | 1.38 | #e1d6f5 | ||
| --gcds-color-purple-150 | 1.64 | #d3c2f0 | ||
| --gcds-color-purple-200 | 1.99 | #c4adeb | ||
| --gcds-color-purple-250 | 2.42 | #b599e6 | ||
| --gcds-color-purple-300 | 2.97 | #a685e0 | ||
| --gcds-color-purple-350 | 3.71 | #9770db | ||
| --gcds-color-purple-400 | 4.59 | #895cd6 | ||
| --gcds-color-purple-450 | 5.75 | #7a47d1 | ||
| --gcds-color-purple-500 | 7.06 | #6b33cc | ||
| --gcds-color-purple-550 | 8.13 | #602eb8 | ||
| --gcds-color-purple-600 | 9.36 | #5629a3 | ||
| --gcds-color-purple-650 | 10.77 | #4b248f | ||
| --gcds-color-purple-700 | 12.38 | #401f7a | ||
| --gcds-color-purple-750 | 14.11 | #361966 | ||
| --gcds-color-purple-800 | 15.85 | #2b1452 | ||
| --gcds-color-purple-850 | 17.54 | #200f3d | ||
| --gcds-color-purple-900 | 18.96 | #150a29 | ||
| --gcds-color-red-50 | 1.16 | #fce9eb | ||
| --gcds-color-red-100 | 1.37 | #f9d2d7 | ||
| --gcds-color-red-150 | 1.63 | #f5bcc4 | ||
| --gcds-color-red-200 | 1.93 | #f2a6b0 | ||
| --gcds-color-red-250 | 2.31 | #ef8f9c | ||
| --gcds-color-red-300 | 2.74 | #ec7988 | ||
| --gcds-color-red-350 | 3.22 | #e96375 | ||
| --gcds-color-red-400 | 3.75 | #e64d61 | ||
| --gcds-color-red-450 | 4.31 | #e2364d | ||
| --gcds-color-red-500 | 4.76 | #df2039 | ||
| --gcds-color-red-550 | 5.66 | #c91d34 | ||
| --gcds-color-red-600 | 6.78 | #b3192e | ||
| --gcds-color-red-650 | 8.2 | #9c1628 | ||
| --gcds-color-red-700 | 9.85 | #861322 | ||
| --gcds-color-red-750 | 11.79 | #70101d | ||
| --gcds-color-red-800 | 14.04 | #590d17 | ||
| --gcds-color-red-850 | 16.27 | #430a11 | ||
| --gcds-color-red-900 | 18.38 | #2d060b | ||
| --gcds-color-white | 1 | #ffffff | ||
| --gcds-color-yellow-50 | 1.06 | #fef7e7 | ||
| --gcds-color-yellow-100 | 1.14 | #fcefcf | ||
| --gcds-color-yellow-150 | 1.22 | #fbe7b6 | ||
| --gcds-color-yellow-200 | 1.31 | #fade9e | ||
| --gcds-color-yellow-250 | 1.4 | #f9d686 | ||
| --gcds-color-yellow-300 | 1.49 | #f7ce6e | ||
| --gcds-color-yellow-350 | 1.59 | #f6c655 | ||
| --gcds-color-yellow-400 | 1.7 | #f5be3d | ||
| --gcds-color-yellow-450 | 1.81 | #f4b625 | ||
| --gcds-color-yellow-500 | 1.95 | #f2ad0d | ||
| --gcds-color-yellow-550 | 2.4 | #da9c0b | ||
| --gcds-color-yellow-600 | 3 | #c28b0a | ||
| --gcds-color-yellow-650 | 3.85 | #aa7909 | ||
| --gcds-color-yellow-700 | 5.01 | #916808 | ||
| --gcds-color-yellow-750 | 6.6 | #795706 | ||
| --gcds-color-yellow-800 | 8.89 | #614505 | ||
| --gcds-color-yellow-850 | 11.82 | #493404 | ||
| --gcds-color-yellow-900 | 15.35 | #302303 |
Note: Code elements take American spelling for "colour" and "grey".
Help us improve
Have questions or a request? Give feedback on our contact form.
Something's wrong? Raise it through GitHub with an