RoadieRoadie
  • Home
  • Foundations
  • Tokens
  • Components
  • Charts
  • Widgets
  • Appearance
HomeFoundationsComponents
Appearance

Tokens

  • Reference

    • All tokens

  • Color

    • Color scales
    • Intents
    • Data visualisation
    • Emphasis and states

  • Type, shape and depth

    • Typography
    • Shape and layout
    • Elevation and layering

  • Motion and utilities

    • Motion
    • Component utilities

Data visualisation

GuidanceData visualisation·Colors

Every chart colour comes from palette.ts in core and is checked for colour-blind separation in CI. Use the CSS variables in dashboards and @oztix/roadie-core/dataviz where a renderer can’t read CSS.

Open in all tokens
Check (worst ΔE)LightDarkTarget
Adjacent, colour-blind12.610.68 or more
Any of the first five, colour-blind12.29.68 or more
Adjacent, normal vision28.221.715 or more
Slots under 3:1 on the page2, 4, 6, 8NoneNever carry text

Categorical

8

  • Light
    oklch(0.604 0.178 266)
    Dark
    oklch(0.84 0.079 262)
    Contrast
    4.0:1 light, 10.7:1 dark
  • Light
    oklch(0.735 0.184 353.4)
    Dark
    oklch(0.731 0.184 342.3)
    Contrast
    2.6:1 light, 6.7:1 dark
  • Light
    oklch(0.484 0.062 199.8)
    Dark
    oklch(0.577 0.094 186)
    Contrast
    6.3:1 light, 4.2:1 dark
  • Light
    oklch(0.82 0.14 74)
    Dark
    oklch(0.779 0.123 80)
    Contrast
    1.8:1 light, 8.6:1 dark
  • Light
    oklch(0.46 0.178 305)
    Dark
    oklch(0.566 0.187 298.2)
    Contrast
    7.8:1 light, 3.5:1 dark
  • Light
    oklch(0.655 0.153 141.4)
    Dark
    oklch(0.9 0.153 152.7)
    Contrast
    3.0:1 light, 13.7:1 dark
  • Light
    oklch(0.46 0.16 6)
    Dark
    oklch(0.567 0.162 1.5)
    Contrast
    7.8:1 light, 3.6:1 dark
  • Light
    oklch(0.745 0.117 226.8)
    Dark
    oklch(0.761 0.106 235.4)
    Contrast
    2.2:1 light, 8.3:1 dark

Small sets

5

  • Light
    var(--chart-1) → oklch(0.604 0.178 266)
    Dark
    var(--chart-1) → oklch(0.84 0.079 262)
  • Light
    var(--chart-2) → oklch(0.735 0.184 353.4)
    Dark
    var(--chart-2) → oklch(0.731 0.184 342.3)
  • Light
    var(--chart-1) → oklch(0.604 0.178 266)
    Dark
    var(--chart-1) → oklch(0.84 0.079 262)
  • Light
    var(--chart-2) → oklch(0.735 0.184 353.4)
    Dark
    var(--chart-2) → oklch(0.731 0.184 342.3)
  • Light
    var(--chart-3) → oklch(0.484 0.062 199.8)
    Dark
    var(--chart-3) → oklch(0.577 0.094 186)

Sequential

9

  • Light
    oklch(0.97 0.032 85)
    Dark
    oklch(0.26 0.04 285)
    Contrast
    1.1:1 light, 1.1:1 dark
  • Light
    oklch(0.889 0.095 75.6)
    Dark
    oklch(0.323 0.115 291.3)
    Contrast
    1.4:1 light, 1.3:1 dark
  • Light
    oklch(0.8 0.136 57.5)
    Dark
    oklch(0.395 0.175 303.8)
    Contrast
    1.9:1 light, 1.7:1 dark
  • Light
    oklch(0.7 0.191 26.3)
    Dark
    oklch(0.482 0.212 325.6)
    Contrast
    2.9:1 light, 2.4:1 dark
  • Light
    oklch(0.615 0.22 5)
    Dark
    oklch(0.57 0.215 350)
    Contrast
    4.2:1 light, 3.5:1 dark
  • Light
    oklch(0.531 0.228 343.8)
    Dark
    oklch(0.657 0.205 15.6)
    Contrast
    6.0:1 light, 5.0:1 dark
  • Light
    oklch(0.438 0.219 312.5)
    Dark
    oklch(0.745 0.163 43.8)
    Contrast
    8.9:1 light, 7.3:1 dark
  • Light
    oklch(0.355 0.19 294.4)
    Dark
    oklch(0.833 0.125 66.3)
    Contrast
    12.2:1 light, 10.2:1 dark
  • Light
    oklch(0.28 0.14 285)
    Dark
    oklch(0.92 0.086 85)
    Contrast
    15.3:1 light, 13.8:1 dark

Diverging

9

  • Light
    oklch(0.4 0.2 268)
    Dark
    oklch(0.76 0.123 262)
    Contrast
    9.9:1 light, 8.1:1 dark
  • Light
    oklch(0.55 0.118 235.8)
    Dark
    oklch(0.685 0.14 232)
    Contrast
    4.7:1 light, 6.3:1 dark
  • Light
    oklch(0.7 0.115 212.5)
    Dark
    oklch(0.59 0.104 213.5)
    Contrast
    2.6:1 light, 4.4:1 dark
  • Light
    oklch(0.835 0.061 200)
    Dark
    oklch(0.473 0.069 205)
    Contrast
    1.6:1 light, 2.7:1 dark
  • Light
    oklch(0.865 0.076 60)
    Dark
    oklch(0.503 0.099 32)
    Contrast
    1.5:1 light, 2.8:1 dark
  • Light
    oklch(0.78 0.135 54)
    Dark
    oklch(0.63 0.145 41)
    Contrast
    2.1:1 light, 4.7:1 dark
  • Light
    oklch(0.69 0.178 43.5)
    Dark
    oklch(0.732 0.158 56)
    Contrast
    3.0:1 light, 7.0:1 dark
  • Light
    oklch(0.6 0.2 30)
    Dark
    oklch(0.83 0.145 74)
    Contrast
    4.3:1 light, 10.2:1 dark
  • Light
    var(--color-neutral-3) → oklch(0.955 0.011 var(--accent-hue))
    Dark
    var(--color-neutral-6) → oklch(0.347 0.025 var(--accent-hue))
    Contrast
    1.1:1 light, 1.5:1 dark

Status

4

  • Light
    var(--color-success-11) → oklch(0.508 0.09 183.645)
    Dark
    var(--color-success-9) → oklch(0.732 0.129 185.089)
    Contrast
    5.5:1 light, 7.8:1 dark
  • Light
    var(--color-warning-11) → oklch(0.576 0.118 82.642)
    Dark
    var(--color-warning-9) → oklch(0.841 0.172 86.226)
    Contrast
    4.4:1 light, 10.6:1 dark
  • Light
    var(--color-brand-secondary-11) → oklch(0.569 0.155 42)
    Dark
    var(--color-brand-secondary-9) → oklch(0.753 0.155 42)
    Contrast
    4.8:1 light, 7.5:1 dark
  • Light
    var(--color-danger-11) → oklch(0.569 0.181 28.264)
    Dark
    var(--color-danger-9) → oklch(0.709 0.184 28.37)
    Contrast
    4.9:1 light, 6.3:1 dark

Highlight

2

  • Light
    #0086da
    Dark
    oklch(var(--chart-highlight-lc) var(--accent-hue))
    Contrast
    3.9:1 light, 10.8:1 dark
  • Light
    0.604 0.178
    Dark
    0.84 0.079

Data greys

5

  • Light
    color-mix(in oklch, var(--color-neutral-9) 10%, transparent)
    Dark
    color-mix(in oklch, var(--color-neutral-11) 9%, transparent)
    Contrast
    3.3:1 light, 8.4:1 dark
  • Light
    var(--color-neutral-8) → oklch(0.794 0.038 var(--accent-hue))
    Dark
    var(--color-neutral-9) → oklch(0.538 0.04 var(--accent-hue))
    Contrast
    1.9:1 light, 3.5:1 dark
  • Light
    var(--color-neutral-8) → oklch(0.794 0.038 var(--accent-hue))
    Dark
    var(--color-neutral-8) → oklch(0.489 0.041 var(--accent-hue))
    Contrast
    1.9:1 light, 2.8:1 dark
  • Light
    var(--color-neutral-9) → oklch(0.645 0.039 var(--accent-hue))
    Dark
    var(--color-neutral-10) → oklch(0.582 0.038 var(--accent-hue))
    Contrast
    3.3:1 light, 4.1:1 dark
  • Light
    var(--color-neutral-5) → oklch(0.909 0.019 var(--accent-hue))
    Dark
    var(--color-neutral-5) → oklch(0.312 0.022 var(--accent-hue))
    Contrast
    1.3:1 light, 1.3:1 dark

Chart ink

5

  • Ag
  • Ag

Tailwind utilities

46

  • +3 more
    Light
    var(--chart-1) → oklch(0.604 0.178 266)
    Dark
    var(--chart-1) → oklch(0.84 0.079 262)
    Contrast
    4.0:1 light, 10.7:1 dark
  • +3 more
    Light
    var(--chart-2) → oklch(0.735 0.184 353.4)
    Dark
    var(--chart-2) → oklch(0.731 0.184 342.3)
    Contrast
    2.6:1 light, 6.7:1 dark
  • +3 more
    Light
    var(--chart-3) → oklch(0.484 0.062 199.8)
    Dark
    var(--chart-3) → oklch(0.577 0.094 186)
    Contrast
    6.3:1 light, 4.2:1 dark
  • +3 more
    Light
    var(--chart-4) → oklch(0.82 0.14 74)
    Dark
    var(--chart-4) → oklch(0.779 0.123 80)
    Contrast
    1.8:1 light, 8.6:1 dark
  • +3 more
    Light
    var(--chart-5) → oklch(0.46 0.178 305)
    Dark
    var(--chart-5) → oklch(0.566 0.187 298.2)
    Contrast
    7.8:1 light, 3.5:1 dark
  • +3 more
    Light
    var(--chart-6) → oklch(0.655 0.153 141.4)
    Dark
    var(--chart-6) → oklch(0.9 0.153 152.7)
    Contrast
    3.0:1 light, 13.7:1 dark
  • +3 more
    Light
    var(--chart-7) → oklch(0.46 0.16 6)
    Dark
    var(--chart-7) → oklch(0.567 0.162 1.5)
    Contrast
    7.8:1 light, 3.6:1 dark
  • +3 more
    Light
    var(--chart-8) → oklch(0.745 0.117 226.8)
    Dark
    var(--chart-8) → oklch(0.761 0.106 235.4)
    Contrast
    2.2:1 light, 8.3:1 dark
  • +3 more
    Light
    var(--chart-pair-1) → oklch(0.604 0.178 266)
    Dark
    var(--chart-pair-1) → oklch(0.84 0.079 262)
  • +3 more
    Light
    var(--chart-pair-2) → oklch(0.735 0.184 353.4)
    Dark
    var(--chart-pair-2) → oklch(0.731 0.184 342.3)
  • +3 more
    Light
    var(--chart-trio-1) → oklch(0.604 0.178 266)
    Dark
    var(--chart-trio-1) → oklch(0.84 0.079 262)
  • +3 more
    Light
    var(--chart-trio-2) → oklch(0.735 0.184 353.4)
    Dark
    var(--chart-trio-2) → oklch(0.731 0.184 342.3)
  • +3 more
    Light
    var(--chart-trio-3) → oklch(0.484 0.062 199.8)
    Dark
    var(--chart-trio-3) → oklch(0.577 0.094 186)
  • +3 more
    Light
    var(--chart-heat-0) → oklch(0.97 0.032 85)
    Dark
    var(--chart-heat-0) → oklch(0.26 0.04 285)
    Contrast
    1.1:1 light, 1.1:1 dark
  • +3 more
    Light
    var(--chart-heat-1) → oklch(0.889 0.095 75.6)
    Dark
    var(--chart-heat-1) → oklch(0.323 0.115 291.3)
    Contrast
    1.4:1 light, 1.3:1 dark
  • +3 more
    Light
    var(--chart-heat-2) → oklch(0.8 0.136 57.5)
    Dark
    var(--chart-heat-2) → oklch(0.395 0.175 303.8)
    Contrast
    1.9:1 light, 1.7:1 dark
  • +3 more
    Light
    var(--chart-heat-3) → oklch(0.7 0.191 26.3)
    Dark
    var(--chart-heat-3) → oklch(0.482 0.212 325.6)
    Contrast
    2.9:1 light, 2.4:1 dark
  • +3 more
    Light
    var(--chart-heat-4) → oklch(0.615 0.22 5)
    Dark
    var(--chart-heat-4) → oklch(0.57 0.215 350)
    Contrast
    4.2:1 light, 3.5:1 dark
  • +3 more
    Light
    var(--chart-heat-5) → oklch(0.531 0.228 343.8)
    Dark
    var(--chart-heat-5) → oklch(0.657 0.205 15.6)
    Contrast
    6.0:1 light, 5.0:1 dark
  • +3 more
    Light
    var(--chart-heat-6) → oklch(0.438 0.219 312.5)
    Dark
    var(--chart-heat-6) → oklch(0.745 0.163 43.8)
    Contrast
    8.9:1 light, 7.3:1 dark
  • +3 more
    Light
    var(--chart-heat-7) → oklch(0.355 0.19 294.4)
    Dark
    var(--chart-heat-7) → oklch(0.833 0.125 66.3)
    Contrast
    12.2:1 light, 10.2:1 dark
  • +3 more
    Light
    var(--chart-heat-8) → oklch(0.28 0.14 285)
    Dark
    var(--chart-heat-8) → oklch(0.92 0.086 85)
    Contrast
    15.3:1 light, 13.8:1 dark
  • +3 more
    Light
    var(--chart-diverge-pos-4) → oklch(0.4 0.2 268)
    Dark
    var(--chart-diverge-pos-4) → oklch(0.76 0.123 262)
    Contrast
    9.9:1 light, 8.1:1 dark
  • +3 more
    Light
    var(--chart-diverge-pos-3) → oklch(0.55 0.118 235.8)
    Dark
    var(--chart-diverge-pos-3) → oklch(0.685 0.14 232)
    Contrast
    4.7:1 light, 6.3:1 dark
  • +3 more
    Light
    var(--chart-diverge-pos-2) → oklch(0.7 0.115 212.5)
    Dark
    var(--chart-diverge-pos-2) → oklch(0.59 0.104 213.5)
    Contrast
    2.6:1 light, 4.4:1 dark
  • +3 more
    Light
    var(--chart-diverge-pos-1) → oklch(0.835 0.061 200)
    Dark
    var(--chart-diverge-pos-1) → oklch(0.473 0.069 205)
    Contrast
    1.6:1 light, 2.7:1 dark
  • +3 more
    Light
    var(--chart-diverge-0) → oklch(0.955 0.011 var(--accent-hue))
    Dark
    var(--chart-diverge-0) → oklch(0.347 0.025 var(--accent-hue))
    Contrast
    1.1:1 light, 1.5:1 dark
  • +3 more
    Light
    var(--chart-diverge-neg-1) → oklch(0.865 0.076 60)
    Dark
    var(--chart-diverge-neg-1) → oklch(0.503 0.099 32)
    Contrast
    1.5:1 light, 2.8:1 dark
  • +3 more
    Light
    var(--chart-diverge-neg-2) → oklch(0.78 0.135 54)
    Dark
    var(--chart-diverge-neg-2) → oklch(0.63 0.145 41)
    Contrast
    2.1:1 light, 4.7:1 dark
  • +3 more
    Light
    var(--chart-diverge-neg-3) → oklch(0.69 0.178 43.5)
    Dark
    var(--chart-diverge-neg-3) → oklch(0.732 0.158 56)
    Contrast
    3.0:1 light, 7.0:1 dark
  • +3 more
    Light
    var(--chart-diverge-neg-4) → oklch(0.6 0.2 30)
    Dark
    var(--chart-diverge-neg-4) → oklch(0.83 0.145 74)
    Contrast
    4.3:1 light, 10.2:1 dark
  • +3 more
    Light
    var(--chart-status-good) → oklch(0.508 0.09 183.645)
    Dark
    var(--chart-status-good) → oklch(0.732 0.129 185.089)
    Contrast
    5.5:1 light, 7.8:1 dark
  • +3 more
    Light
    var(--chart-status-warning) → oklch(0.576 0.118 82.642)
    Dark
    var(--chart-status-warning) → oklch(0.841 0.172 86.226)
    Contrast
    4.4:1 light, 10.6:1 dark
  • +3 more
    Light
    var(--chart-status-serious) → oklch(0.569 0.155 42)
    Dark
    var(--chart-status-serious) → oklch(0.753 0.155 42)
    Contrast
    4.8:1 light, 7.5:1 dark
  • +3 more
    Light
    var(--chart-status-critical) → oklch(0.569 0.181 28.264)
    Dark
    var(--chart-status-critical) → oklch(0.709 0.184 28.37)
    Contrast
    4.9:1 light, 6.3:1 dark
  • +3 more
    Light
    var(--chart-highlight) → #0086da
    Dark
    var(--chart-highlight) → oklch(var(--chart-highlight-lc) var(--accent-hue))
    Contrast
    3.9:1 light, 10.8:1 dark
  • +3 more
    Light
    var(--chart-context) → oklch(0.794 0.038 var(--accent-hue))
    Dark
    var(--chart-context) → oklch(0.538 0.04 var(--accent-hue))
    Contrast
    1.9:1 light, 3.5:1 dark
  • +3 more
    Light
    var(--chart-band) → color-mix(in oklch, var(--color-neutral-9) 10%, transparent)
    Dark
    var(--chart-band) → color-mix(in oklch, var(--color-neutral-11) 9%, transparent)
    Contrast
    3.3:1 light, 8.4:1 dark
  • +3 more
    Light
    var(--chart-median) → oklch(0.794 0.038 var(--accent-hue))
    Dark
    var(--chart-median) → oklch(0.489 0.041 var(--accent-hue))
    Contrast
    1.9:1 light, 2.8:1 dark
  • +3 more
    Light
    var(--chart-other) → oklch(0.645 0.039 var(--accent-hue))
    Dark
    var(--chart-other) → oklch(0.582 0.038 var(--accent-hue))
    Contrast
    3.3:1 light, 4.1:1 dark
  • +3 more
    Light
    var(--chart-missing) → oklch(0.909 0.019 var(--accent-hue))
    Dark
    var(--chart-missing) → oklch(0.312 0.022 var(--accent-hue))
    Contrast
    1.3:1 light, 1.3:1 dark
  • +3 more
    Light
    var(--chart-grid)
    Dark
    var(--chart-grid) → oklch(0.312 0.022 var(--accent-hue))
  • +3 more
    Light
    var(--chart-axis)
    Dark
    var(--chart-axis) → oklch(0.398 0.031 var(--accent-hue))
  • +3 more
    Light
    var(--chart-label)
    Dark
    var(--chart-label) → oklch(0.769 0.028 var(--accent-hue))
  • +3 more
    Light
    var(--chart-value)
    Dark
    var(--chart-value) → oklch(0.991 0.004 var(--accent-hue))
  • +3 more
    Light
    var(--chart-gap)
    Dark
    var(--chart-gap) → oklch(0.214 0.01 var(--accent-hue))
Previous page← IntentsNext pageEmphasis and states →