Skip to content
GitHub Docs Get started
Documentation

Foundations

Colour

Five OKLCH palettes with fixed lightness per step, and semantic colours on top of them. Pick any brand hue: every text, border and focus pair still passes WCAG.

How it works

Every palette has 16 steps, named after their lightness in OKLCH: step 54 is 54 % light in every palette. Only hue and chroma change between palettes, so two steps always have the same contrast, whatever the hue. That is why your brand colour can be anything: the steps it lands on were already checked.

On every build, 226 colour pairs are checked twice: with the current palettes, and across every hue in 5° steps. All 226 pass.

Palettes

The swatches below use the live CSS variables, so they show this site's theme: the accent is the dsgn orange. Use palette steps to build a theme, not in components: components use the semantic colours further down.

Neutral

  1. 14
  2. 18
  3. 22
  4. 26
  5. 30
  6. 38
  7. 46
  8. 54
  9. 64
  10. 70
  11. 76
  12. 85
  13. 90
  14. 94
  15. 97
  16. 99

Accent

  1. 14
  2. 18
  3. 22
  4. 26
  5. 30
  6. 38
  7. 46
  8. 54
  9. 64
  10. 70
  11. 76
  12. 85
  13. 90
  14. 94
  15. 97
  16. 99

Danger

  1. 14
  2. 18
  3. 22
  4. 26
  5. 30
  6. 38
  7. 46
  8. 54
  9. 64
  10. 70
  11. 76
  12. 85
  13. 90
  14. 94
  15. 97
  16. 99

Success

  1. 14
  2. 18
  3. 22
  4. 26
  5. 30
  6. 38
  7. 46
  8. 54
  9. 64
  10. 70
  11. 76
  12. 85
  13. 90
  14. 94
  15. 97
  16. 99

Warning

  1. 14
  2. 18
  3. 22
  4. 26
  5. 30
  6. 38
  7. 46
  8. 54
  9. 64
  10. 70
  11. 76
  12. 85
  13. 90
  14. 94
  15. 97
  16. 99

In CSS each step is --dsgn-<palette>-<step>, for example --dsgn-accent-54.

Semantic colours

Components use 59 semantic colours named by their job: --dsgn-text, --dsgn-surface-raised, --dsgn-accent-solid. Each points at a palette step in light mode and another in dark mode, so the same CSS works in both. Use these in your own CSS too; npx dsgn lint warns about hard-coded colours.

Surfaces

SwatchTokenLightDark
--dsgn-surface-sunkenneutral 94neutral 14
--dsgn-surface-baseneutral 97neutral 18
--dsgn-surface-raisedneutral 99neutral 22

Text

SwatchTokenLightDark
--dsgn-textneutral 22neutral 97
--dsgn-text-mutedneutral 46neutral 70
--dsgn-text-disabledneutral 70neutral 46

Borders and focus

SwatchTokenLightDark
--dsgn-borderneutral 85neutral 30
--dsgn-border-strongneutral 54neutral 54
--dsgn-border-controlneutral 64neutral 54
--dsgn-focusaccent 54accent 70
--dsgn-focus-dangerdanger 54danger 70

Controls

SwatchTokenLightDark
--dsgn-control-trackneutral 94neutral 14
--dsgn-control-track-borderneutral 94neutral 46
--dsgn-control-selectedneutral 99neutral 38
--dsgn-control-solidaccent 54accent 64
--dsgn-control-solid-hoveraccent 46accent 70
--dsgn-control-solid-pressedaccent 38accent 76
--dsgn-control-solid-textneutral 99neutral 14
--dsgn-control-subtleaccent 94accent 26
--dsgn-control-subtle-hoveraccent 90accent 30
--dsgn-control-subtle-pressedaccent 85accent 38
--dsgn-control-textaccent 38accent 85

Neutral

SwatchTokenLightDark
--dsgn-neutral-solidneutral 22neutral 90
--dsgn-neutral-solid-hoverneutral 30neutral 85
--dsgn-neutral-solid-pressedneutral 38neutral 76
--dsgn-neutral-subtleneutral 94neutral 26
--dsgn-neutral-subtle-hoverneutral 90neutral 30
--dsgn-neutral-subtle-pressedneutral 85neutral 38
--dsgn-neutral-textneutral 38neutral 85
--dsgn-neutral-borderneutral 76neutral 38
--dsgn-neutral-solid-textneutral 99neutral 14

Accent

SwatchTokenLightDark
--dsgn-accent-solidaccent 54accent 64
--dsgn-accent-solid-hoveraccent 46accent 70
--dsgn-accent-solid-pressedaccent 38accent 76
--dsgn-accent-subtleaccent 94accent 26
--dsgn-accent-subtle-hoveraccent 90accent 30
--dsgn-accent-subtle-pressedaccent 85accent 38
--dsgn-accent-textaccent 38accent 85
--dsgn-accent-borderaccent 76accent 38
--dsgn-accent-solid-textneutral 99neutral 14

Status

SwatchTokenLightDark
--dsgn-danger-soliddanger 54danger 64
--dsgn-danger-solid-hoverdanger 46danger 70
--dsgn-danger-solid-presseddanger 38danger 76
--dsgn-danger-subtledanger 94danger 26
--dsgn-danger-subtle-hoverdanger 90danger 30
--dsgn-danger-subtle-presseddanger 85danger 38
--dsgn-danger-textdanger 38danger 85
--dsgn-danger-borderdanger 76danger 38
--dsgn-danger-solid-textneutral 99neutral 14
--dsgn-success-solidsuccess 54success 64
--dsgn-success-subtlesuccess 94success 26
--dsgn-success-textsuccess 38success 85
--dsgn-success-bordersuccess 76success 38
--dsgn-success-solid-textneutral 99neutral 14
--dsgn-warning-solidwarning 54warning 64
--dsgn-warning-subtlewarning 94warning 26
--dsgn-warning-textwarning 38warning 85
--dsgn-warning-borderwarning 76warning 38
--dsgn-warning-solid-textneutral 99neutral 14

Your brand colour

A project theme moves the accent palette to your hue and, if you like, tints the greys with it. Lightness per step stays fixed, so the contrast guarantee holds. Chroma is capped to what the guarantee covers: 0.30 for colours, 0.04 for greys. Try it in the theme customizer, or see Make it yours.