Colors

Semantic neutrals, the ink overlay ramp, and the brand and state color families.

Token grammar#

Neutrals follow {role}(-{purpose})(-{intensity}) where the role is foreground, layer, line, or fill. The intensity ladder is strictly ordered: strong > default (bare) > muted.

layer tokens name places on the elevation ladder; fill tokens are the opaque neutral interaction fills (resting/hover/active/disabled surfaces) — the opaque counterpart of the translucent ink washes.

Color families — primary, accent, secondary, info, success, warning, and danger — share the same intensity ladder as neutrals: -strong (deep shade for readable text and rings) > the bare solid fill > -muted (strong wash) > -soft (soft wash), plus -foreground for text on the solid. The solid interaction pair -hover/-active is opt-in: primary, accent, info, warning, and danger define it; success and secondary do not.

The ink ramp ink-2 … ink-40 is a neutral overlay scale for hairlines, washes, and hover/pressed fills on transparent surfaces — the suffix is the alpha percentage.

Escape hatch: one-off precision values stay as inline oklch() literals. Promote a value to a token only when it repeats across components (rule of three).

Foreground#

Light

Ladder

  1. Light --foreground: --foreground
  2. Light --foreground-muted: --foreground-muted
  3. Light --foreground-hint: --foreground-hint
  4. Light --foreground-disabled: --foreground-disabled

Purpose

  1. Light --foreground-inverse: --foreground-inverse
  2. Light --foreground-link: --foreground-link
  3. Light --foreground-on-frame: --foreground-on-frame
  4. Light --foreground-on-frame-muted: --foreground-on-frame-muted
  5. Light --foreground-on-hud: --foreground-on-hud
  6. Light --foreground-active: --foreground-active
  7. Light --foreground-hover: --foreground-hover

Dark

Ladder

  1. Dark --foreground: --foreground
  2. Dark --foreground-muted: --foreground-muted
  3. Dark --foreground-hint: --foreground-hint
  4. Dark --foreground-disabled: --foreground-disabled

Purpose

  1. Dark --foreground-inverse: --foreground-inverse
  2. Dark --foreground-link: --foreground-link
  3. Dark --foreground-on-frame: --foreground-on-frame
  4. Dark --foreground-on-frame-muted: --foreground-on-frame-muted
  5. Dark --foreground-on-hud: --foreground-on-hud
  6. Dark --foreground-active: --foreground-active
  7. Dark --foreground-hover: --foreground-hover

Layer#

Light

Surface

  1. Light --layer-frame: --layer-frame
  2. Light --layer-sidebar: --layer-sidebar
  3. Light --layer-canvas: --layer-canvas
  4. Light --layer-card: --layer-card
  5. Light --layer-popover: --layer-popover
  6. Light --layer-code: --layer-code
  7. Light --layer-hud: --layer-hud

Overlay

  1. Light --layer-backdrop: --layer-backdrop

Dark

Surface

  1. Dark --layer-frame: --layer-frame
  2. Dark --layer-sidebar: --layer-sidebar
  3. Dark --layer-canvas: --layer-canvas
  4. Dark --layer-card: --layer-card
  5. Dark --layer-popover: --layer-popover
  6. Dark --layer-code: --layer-code
  7. Dark --layer-hud: --layer-hud

Overlay

  1. Dark --layer-backdrop: --layer-backdrop

Fill#

Light

Fills

  1. Light --fill-muted: --fill-muted
  2. Light --fill-strong: --fill-strong
  3. Light --fill-pressed: --fill-pressed

Dark

Fills

  1. Dark --fill-muted: --fill-muted
  2. Dark --fill-strong: --fill-strong
  3. Dark --fill-pressed: --fill-pressed

Line#

Light

Ladder

  1. Light --line-hairline: --line-hairline
  2. Light --line-seam: --line-seam
  3. Light --line-strong: --line-strong

Purpose

  1. Light --line-field: --line-field
  2. Light --line-field-hover: --line-field-hover

Dark

Ladder

  1. Dark --line-hairline: --line-hairline
  2. Dark --line-seam: --line-seam
  3. Dark --line-strong: --line-strong

Purpose

  1. Dark --line-field: --line-field
  2. Dark --line-field-hover: --line-field-hover

Ink ramp#

Light

Ramp

  1. Light --ink: --ink
  2. Light --ink-2: --ink-2
  3. Light --ink-4: --ink-4
  4. Light --ink-6: --ink-6
  5. Light --ink-8: --ink-8
  6. Light --ink-10: --ink-10
  7. Light --ink-16: --ink-16
  8. Light --ink-20: --ink-20
  9. Light --ink-30: --ink-30
  10. Light --ink-40: --ink-40

Dark

Ramp

  1. Dark --ink: --ink
  2. Dark --ink-2: --ink-2
  3. Dark --ink-4: --ink-4
  4. Dark --ink-6: --ink-6
  5. Dark --ink-8: --ink-8
  6. Dark --ink-10: --ink-10
  7. Dark --ink-16: --ink-16
  8. Dark --ink-20: --ink-20
  9. Dark --ink-30: --ink-30
  10. Dark --ink-40: --ink-40

Brand families#

Light

Brand (yellow)

  1. Light --color-brand: --color-brand
  2. Light --brand-strong: --brand-strong
  3. Light --brand-soft: --brand-soft
  4. Light --brand-edge: --brand-edge
  5. Light --brand-hover: --brand-hover
  6. Light --brand-active: --brand-active

Attention (pink)

  1. Light --color-attention: --color-attention
  2. Light --attention-strong: --attention-strong
  3. Light --attention-soft: --attention-soft
  4. Light --attention-hover: --attention-hover
  5. Light --attention-active: --attention-active

Brand ramp

  1. Light --brand-50: --brand-50
  2. Light --brand-100: --brand-100
  3. Light --brand-200: --brand-200
  4. Light --brand-300: --brand-300
  5. Light --brand-400: --brand-400
  6. Light --brand-500: --brand-500
  7. Light --brand-600: --brand-600
  8. Light --brand-700: --brand-700
  9. Light --brand-800: --brand-800
  10. Light --brand-900: --brand-900
  11. Light --brand-950: --brand-950

Attention ramp

  1. Light --attention-50: --attention-50
  2. Light --attention-100: --attention-100
  3. Light --attention-200: --attention-200
  4. Light --attention-300: --attention-300
  5. Light --attention-400: --attention-400
  6. Light --attention-500: --attention-500
  7. Light --attention-600: --attention-600
  8. Light --attention-700: --attention-700
  9. Light --attention-800: --attention-800
  10. Light --attention-900: --attention-900
  11. Light --attention-950: --attention-950

Dark

Brand (yellow)

  1. Dark --color-brand: --color-brand
  2. Dark --brand-strong: --brand-strong
  3. Dark --brand-soft: --brand-soft
  4. Dark --brand-edge: --brand-edge
  5. Dark --brand-hover: --brand-hover
  6. Dark --brand-active: --brand-active

Attention (pink)

  1. Dark --color-attention: --color-attention
  2. Dark --attention-strong: --attention-strong
  3. Dark --attention-soft: --attention-soft
  4. Dark --attention-hover: --attention-hover
  5. Dark --attention-active: --attention-active

Brand ramp

  1. Dark --brand-50: --brand-50
  2. Dark --brand-100: --brand-100
  3. Dark --brand-200: --brand-200
  4. Dark --brand-300: --brand-300
  5. Dark --brand-400: --brand-400
  6. Dark --brand-500: --brand-500
  7. Dark --brand-600: --brand-600
  8. Dark --brand-700: --brand-700
  9. Dark --brand-800: --brand-800
  10. Dark --brand-900: --brand-900
  11. Dark --brand-950: --brand-950

Attention ramp

  1. Dark --attention-50: --attention-50
  2. Dark --attention-100: --attention-100
  3. Dark --attention-200: --attention-200
  4. Dark --attention-300: --attention-300
  5. Dark --attention-400: --attention-400
  6. Dark --attention-500: --attention-500
  7. Dark --attention-600: --attention-600
  8. Dark --attention-700: --attention-700
  9. Dark --attention-800: --attention-800
  10. Dark --attention-900: --attention-900
  11. Dark --attention-950: --attention-950

State families#

Light

inactive

  1. Light --color-inactive: --color-inactive
  2. Light --color-inactive-foreground: --color-inactive-foreground

info

  1. Light --color-info: --color-info
  2. Light --color-info-strong: --color-info-strong
  3. Light --color-info-muted: --color-info-muted
  4. Light --color-info-soft: --color-info-soft
  5. Light --color-info-hover: --color-info-hover
  6. Light --color-info-active: --color-info-active

success

  1. Light --color-success: --color-success
  2. Light --color-success-foreground: --color-success-foreground
  3. Light --color-success-strong: --color-success-strong
  4. Light --color-success-muted: --color-success-muted
  5. Light --color-success-soft: --color-success-soft

warning

  1. Light --color-warning: --color-warning
  2. Light --color-warning-foreground: --color-warning-foreground
  3. Light --color-warning-strong: --color-warning-strong
  4. Light --color-warning-muted: --color-warning-muted
  5. Light --color-warning-soft: --color-warning-soft
  6. Light --color-warning-hover: --color-warning-hover
  7. Light --color-warning-active: --color-warning-active

danger

  1. Light --color-danger: --color-danger
  2. Light --color-danger-foreground: --color-danger-foreground
  3. Light --color-danger-strong: --color-danger-strong
  4. Light --color-danger-muted: --color-danger-muted
  5. Light --color-danger-soft: --color-danger-soft
  6. Light --color-danger-hover: --color-danger-hover
  7. Light --color-danger-active: --color-danger-active

Dark

inactive

  1. Dark --color-inactive: --color-inactive
  2. Dark --color-inactive-foreground: --color-inactive-foreground

info

  1. Dark --color-info: --color-info
  2. Dark --color-info-strong: --color-info-strong
  3. Dark --color-info-muted: --color-info-muted
  4. Dark --color-info-soft: --color-info-soft
  5. Dark --color-info-hover: --color-info-hover
  6. Dark --color-info-active: --color-info-active

success

  1. Dark --color-success: --color-success
  2. Dark --color-success-foreground: --color-success-foreground
  3. Dark --color-success-strong: --color-success-strong
  4. Dark --color-success-muted: --color-success-muted
  5. Dark --color-success-soft: --color-success-soft

warning

  1. Dark --color-warning: --color-warning
  2. Dark --color-warning-foreground: --color-warning-foreground
  3. Dark --color-warning-strong: --color-warning-strong
  4. Dark --color-warning-muted: --color-warning-muted
  5. Dark --color-warning-soft: --color-warning-soft
  6. Dark --color-warning-hover: --color-warning-hover
  7. Dark --color-warning-active: --color-warning-active

danger

  1. Dark --color-danger: --color-danger
  2. Dark --color-danger-foreground: --color-danger-foreground
  3. Dark --color-danger-strong: --color-danger-strong
  4. Dark --color-danger-muted: --color-danger-muted
  5. Dark --color-danger-soft: --color-danger-soft
  6. Dark --color-danger-hover: --color-danger-hover
  7. Dark --color-danger-active: --color-danger-active