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

Intents

GuidanceColors

An intent-* class points every --intent-* role at one scale, and children inherit it. The semantic utilities read those roles, so the same class draws in any intent. Neutral is set on :root.

Open in all tokens
RoleNeutralBrandBrand secondaryAccentDangerSuccessWarningInfo
Backgrounds
bg-normal
bg-strong
bg-strong-hover
bg-strong-active
bg-inverted
bg-raised
bg-sunken
bg-subtler
bg-subtle
Borders
border-subtler
border-subtle
border-normal
border-strong
border-inverted
Text
text-subtlerAaAaAaAaAaAaAaAa
text-subtleAaAaAaAaAaAaAaAa
text-normalAaAaAaAaAaAaAaAa
text-strongAaAaAaAaAaAaAaAa
text-invertedAaAaAaAaAaAaAaAa
text-on-strongAaAaAaAaAaAaAaAa
Every intent sets the same roles, so any role works under any intent.

69 tokens

Backgrounds

9

Surface roles, read by the bg-* utilities.

  • Light
    var(--color-neutral-1) → oklch(0.991 0.004 var(--accent-hue))
    Dark
    var(--color-neutral-2) → oklch(0.214 0.01 var(--accent-hue))
  • Light
    var(--color-neutral-13) → oklch(0.182 0.015 var(--accent-hue))
    Dark
    var(--color-neutral-13) → oklch(0.991 0.004 var(--accent-hue))
  • Light
    var(--color-neutral-11) → oklch(0.503 0.032 var(--accent-hue))
    Dark
    var(--color-neutral-11) → oklch(0.769 0.028 var(--accent-hue))
  • Light
    var(--color-neutral-12) → oklch(0.24 0.024 var(--accent-hue))
    Dark
    var(--color-neutral-12) → oklch(0.949 0.007 var(--accent-hue))
  • Light
    var(--color-neutral-12) → oklch(0.24 0.024 var(--accent-hue))
    Dark
    var(--color-neutral-12) → oklch(0.949 0.007 var(--accent-hue))
  • Light
    var(--color-neutral-1) → oklch(0.991 0.004 var(--accent-hue))
    Dark
    var(--color-neutral-3) → oklch(0.252 0.016 var(--accent-hue))
  • Light
    var(--color-neutral-2) → oklch(0.982 0.007 var(--accent-hue))
    Dark
    var(--color-neutral-0) → oklch(0.13 0.011 var(--accent-hue))
  • var(--intent-2a) → color-mix(in oklch, var(--color-neutral-9) 6%, transparent)
  • var(--intent-3a) → color-mix(in oklch, var(--color-neutral-9) 11%, transparent)

Text

6

Foreground roles, read by the text-* utilities.

  • Ag
    Light
    var(--color-neutral-10) → oklch(0.609 0.037 var(--accent-hue))
    Dark
    var(--color-neutral-10) → oklch(0.582 0.038 var(--accent-hue))
  • Ag
    Light
    var(--color-neutral-11) → oklch(0.503 0.032 var(--accent-hue))
    Dark
    var(--color-neutral-11) → oklch(0.769 0.028 var(--accent-hue))
  • Ag
    Light
    var(--color-neutral-12) → oklch(0.24 0.024 var(--accent-hue))
    Dark
    var(--color-neutral-12) → oklch(0.949 0.007 var(--accent-hue))
  • Ag
    Light
    var(--color-neutral-13) → oklch(0.182 0.015 var(--accent-hue))
    Dark
    var(--color-neutral-13) → oklch(0.991 0.004 var(--accent-hue))
  • Ag
    Light
    var(--color-neutral-0) → oklch(1 0 0)
    Dark
    var(--color-neutral-0) → oklch(0.13 0.011 var(--accent-hue))
  • Ag
    Light
    var(--color-neutral-0) → oklch(1 0 0)
    Dark
    var(--color-neutral-0) → oklch(0.13 0.011 var(--accent-hue))

Borders

5

Edge roles, read by the border-* and divide-* utilities.

  • 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))
  • Light
    var(--color-neutral-6) → oklch(0.888 0.022 var(--accent-hue))
    Dark
    var(--color-neutral-6) → oklch(0.347 0.025 var(--accent-hue))
  • Light
    var(--color-neutral-7) → oklch(0.853 0.028 var(--accent-hue))
    Dark
    var(--color-neutral-7) → oklch(0.398 0.031 var(--accent-hue))
  • Light
    var(--color-neutral-9) → oklch(0.645 0.039 var(--accent-hue))
    Dark
    var(--color-neutral-9) → oklch(0.538 0.04 var(--accent-hue))
  • Light
    var(--color-neutral-12) → oklch(0.24 0.024 var(--accent-hue))
    Dark
    var(--color-neutral-12) → oklch(0.949 0.007 var(--accent-hue))

Mark

2

Highlight colours for mark and search matches.

  • Light
    var(--color-neutral-13) → oklch(0.182 0.015 var(--accent-hue))
    Dark
    var(--color-neutral-13) → oklch(0.991 0.004 var(--accent-hue))
  • Ag
    Light
    var(--color-neutral-0) → oklch(1 0 0)
    Dark
    var(--color-neutral-0) → oklch(0.13 0.011 var(--accent-hue))

Semantic utilities

20

The Tailwind classes that read the roles above.

  • Light
    var(--intent-bg-normal) → oklch(0.991 0.004 var(--accent-hue))
    Dark
    var(--intent-bg-normal) → oklch(0.214 0.01 var(--accent-hue))
  • var(--intent-bg-subtler) → color-mix(in oklch, var(--color-neutral-9) 6%, transparent)
  • var(--intent-bg-subtle) → color-mix(in oklch, var(--color-neutral-9) 11%, transparent)
  • Light
    var(--intent-bg-strong) → oklch(0.182 0.015 var(--accent-hue))
    Dark
    var(--intent-bg-strong) → oklch(0.991 0.004 var(--accent-hue))
  • Light
    var(--intent-bg-inverted) → oklch(0.24 0.024 var(--accent-hue))
    Dark
    var(--intent-bg-inverted) → oklch(0.949 0.007 var(--accent-hue))
  • Light
    var(--intent-bg-raised) → oklch(0.991 0.004 var(--accent-hue))
    Dark
    var(--intent-bg-raised) → oklch(0.252 0.016 var(--accent-hue))
  • Light
    var(--intent-bg-sunken) → oklch(0.982 0.007 var(--accent-hue))
    Dark
    var(--intent-bg-sunken) → oklch(0.13 0.011 var(--accent-hue))
  • Light
    var(--intent-mark-bg) → oklch(0.182 0.015 var(--accent-hue))
    Dark
    var(--intent-mark-bg) → oklch(0.991 0.004 var(--accent-hue))
  • Ag
    Light
    var(--intent-text-normal) → oklch(0.24 0.024 var(--accent-hue))
    Dark
    var(--intent-text-normal) → oklch(0.949 0.007 var(--accent-hue))
  • Ag
    Light
    var(--intent-text-subtler) → oklch(0.609 0.037 var(--accent-hue))
    Dark
    var(--intent-text-subtler) → oklch(0.582 0.038 var(--accent-hue))
  • Ag
    Light
    var(--intent-text-subtle) → oklch(0.503 0.032 var(--accent-hue))
    Dark
    var(--intent-text-subtle) → oklch(0.769 0.028 var(--accent-hue))
  • Ag
    Light
    var(--intent-text-strong) → oklch(0.182 0.015 var(--accent-hue))
    Dark
    var(--intent-text-strong) → oklch(0.991 0.004 var(--accent-hue))
  • Ag
    Light
    var(--intent-text-inverted) → oklch(1 0 0)
    Dark
    var(--intent-text-inverted) → oklch(0.13 0.011 var(--accent-hue))
  • Ag
    Light
    var(--intent-text-on-strong) → oklch(1 0 0)
    Dark
    var(--intent-text-on-strong) → oklch(0.13 0.011 var(--accent-hue))
  • Ag
    Light
    var(--intent-mark-text) → oklch(1 0 0)
    Dark
    var(--intent-mark-text) → oklch(0.13 0.011 var(--accent-hue))
  • Light
    var(--intent-border-subtler) → oklch(0.909 0.019 var(--accent-hue))
    Dark
    var(--intent-border-subtler) → oklch(0.312 0.022 var(--accent-hue))
  • Light
    var(--intent-border-subtle) → oklch(0.888 0.022 var(--accent-hue))
    Dark
    var(--intent-border-subtle) → oklch(0.347 0.025 var(--accent-hue))
  • Light
    var(--intent-border-normal) → oklch(0.853 0.028 var(--accent-hue))
    Dark
    var(--intent-border-normal) → oklch(0.398 0.031 var(--accent-hue))
  • Light
    var(--intent-border-strong) → oklch(0.645 0.039 var(--accent-hue))
    Dark
    var(--intent-border-strong) → oklch(0.538 0.04 var(--accent-hue))
  • Light
    var(--intent-border-inverted) → oklch(0.24 0.024 var(--accent-hue))
    Dark
    var(--intent-border-inverted) → oklch(0.949 0.007 var(--accent-hue))

Hue

1

  • var(--accent-hue, 247) → 247

Raw steps

14

The active intent's 14 scale steps, for states a role doesn't cover.

  • Light
    var(--color-neutral-0) → oklch(1 0 0)
    Dark
    var(--color-neutral-0) → oklch(0.13 0.011 var(--accent-hue))
  • Light
    var(--color-neutral-1) → oklch(0.991 0.004 var(--accent-hue))
    Dark
    var(--color-neutral-1) → oklch(0.178 0.011 var(--accent-hue))
  • Light
    var(--color-neutral-2) → oklch(0.982 0.007 var(--accent-hue))
    Dark
    var(--color-neutral-2) → oklch(0.214 0.01 var(--accent-hue))
  • Light
    var(--color-neutral-3) → oklch(0.955 0.011 var(--accent-hue))
    Dark
    var(--color-neutral-3) → oklch(0.252 0.016 var(--accent-hue))
  • Light
    var(--color-neutral-4) → oklch(0.931 0.014 var(--accent-hue))
    Dark
    var(--color-neutral-4) → oklch(0.284 0.018 var(--accent-hue))
  • 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))
  • Light
    var(--color-neutral-6) → oklch(0.888 0.022 var(--accent-hue))
    Dark
    var(--color-neutral-6) → oklch(0.347 0.025 var(--accent-hue))
  • Light
    var(--color-neutral-7) → oklch(0.853 0.028 var(--accent-hue))
    Dark
    var(--color-neutral-7) → oklch(0.398 0.031 var(--accent-hue))
  • 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))
  • Light
    var(--color-neutral-9) → oklch(0.645 0.039 var(--accent-hue))
    Dark
    var(--color-neutral-9) → oklch(0.538 0.04 var(--accent-hue))
  • Light
    var(--color-neutral-10) → oklch(0.609 0.037 var(--accent-hue))
    Dark
    var(--color-neutral-10) → oklch(0.582 0.038 var(--accent-hue))
  • Light
    var(--color-neutral-11) → oklch(0.503 0.032 var(--accent-hue))
    Dark
    var(--color-neutral-11) → oklch(0.769 0.028 var(--accent-hue))
  • Light
    var(--color-neutral-12) → oklch(0.24 0.024 var(--accent-hue))
    Dark
    var(--color-neutral-12) → oklch(0.949 0.007 var(--accent-hue))
  • Light
    var(--color-neutral-13) → oklch(0.182 0.015 var(--accent-hue))
    Dark
    var(--color-neutral-13) → oklch(0.991 0.004 var(--accent-hue))

Alpha steps

4

Translucent steps that read on any surface.

  • color-mix(in oklch, var(--color-neutral-9) 6%, transparent)
  • color-mix(in oklch, var(--color-neutral-9) 11%, transparent)
  • color-mix(in oklch, var(--color-neutral-9) 17%, transparent)
  • color-mix(in oklch, var(--color-neutral-9) 23%, transparent)

Intent utilities

8

Point every role at one scale; children inherit it.

Previous page← Color scalesNext pageData visualisation →