Colors

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

GitHub

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#

Brutal

Intensity

  1. Brutal --foreground-strong: --foreground-strong
  2. Brutal --foreground: --foreground
  3. Brutal --foreground-muted: --foreground-muted

Purpose

  1. Brutal --foreground-hint: --foreground-hint
  2. Brutal --foreground-icon: --foreground-icon
  3. Brutal --foreground-placeholder: --foreground-placeholder
  4. Brutal --foreground-disabled: --foreground-disabled
  5. Brutal --foreground-inverse: --foreground-inverse
  6. Brutal --foreground-active: --foreground-active
  7. Brutal --foreground-hover: --foreground-hover

Elegant light

Intensity

  1. Elegant light --foreground-strong: --foreground-strong
  2. Elegant light --foreground: --foreground
  3. Elegant light --foreground-muted: --foreground-muted

Purpose

  1. Elegant light --foreground-hint: --foreground-hint
  2. Elegant light --foreground-icon: --foreground-icon
  3. Elegant light --foreground-placeholder: --foreground-placeholder
  4. Elegant light --foreground-disabled: --foreground-disabled
  5. Elegant light --foreground-inverse: --foreground-inverse
  6. Elegant light --foreground-active: --foreground-active
  7. Elegant light --foreground-hover: --foreground-hover

Elegant dark

Intensity

  1. Elegant dark --foreground-strong: --foreground-strong
  2. Elegant dark --foreground: --foreground
  3. Elegant dark --foreground-muted: --foreground-muted

Purpose

  1. Elegant dark --foreground-hint: --foreground-hint
  2. Elegant dark --foreground-icon: --foreground-icon
  3. Elegant dark --foreground-placeholder: --foreground-placeholder
  4. Elegant dark --foreground-disabled: --foreground-disabled
  5. Elegant dark --foreground-inverse: --foreground-inverse
  6. Elegant dark --foreground-active: --foreground-active
  7. Elegant dark --foreground-hover: --foreground-hover

Layer#

Brutal

Surface

  1. Brutal --layer-canvas: --layer-canvas
  2. Brutal --layer-canvas-muted: --layer-canvas-muted
  3. Brutal --layer-panel: --layer-panel
  4. Brutal --layer-popover: --layer-popover
  5. Brutal --layer-inset: --layer-inset
  6. Brutal --layer-card: --layer-card
  7. Brutal --layer-hud: --layer-hud
  8. Brutal --layer-hud-foreground: --layer-hud-foreground

Overlay

  1. Brutal --layer-backdrop: --layer-backdrop

Elegant light

Surface

  1. Elegant light --layer-canvas: --layer-canvas
  2. Elegant light --layer-canvas-muted: --layer-canvas-muted
  3. Elegant light --layer-panel: --layer-panel
  4. Elegant light --layer-popover: --layer-popover
  5. Elegant light --layer-inset: --layer-inset
  6. Elegant light --layer-card: --layer-card
  7. Elegant light --layer-hud: --layer-hud
  8. Elegant light --layer-hud-foreground: --layer-hud-foreground

Overlay

  1. Elegant light --layer-backdrop: --layer-backdrop

Elegant dark

Surface

  1. Elegant dark --layer-canvas: --layer-canvas
  2. Elegant dark --layer-canvas-muted: --layer-canvas-muted
  3. Elegant dark --layer-panel: --layer-panel
  4. Elegant dark --layer-popover: --layer-popover
  5. Elegant dark --layer-inset: --layer-inset
  6. Elegant dark --layer-card: --layer-card
  7. Elegant dark --layer-hud: --layer-hud
  8. Elegant dark --layer-hud-foreground: --layer-hud-foreground

Overlay

  1. Elegant dark --layer-backdrop: --layer-backdrop

Fill#

Brutal

Interaction fills

  1. Brutal --fill-muted: --fill-muted
  2. Brutal --fill-strong: --fill-strong

Elegant light

Interaction fills

  1. Elegant light --fill-muted: --fill-muted
  2. Elegant light --fill-strong: --fill-strong

Elegant dark

Interaction fills

  1. Elegant dark --fill-muted: --fill-muted
  2. Elegant dark --fill-strong: --fill-strong

Line#

Brutal

Ladder

  1. Brutal --line-strong: --line-strong
  2. Brutal --line: --line
  3. Brutal --line-muted: --line-muted

Purpose

  1. Brutal --line-hairline: --line-hairline
  2. Brutal --line-field: --line-field
  3. Brutal --line-field-hover: --line-field-hover

Elegant light

Ladder

  1. Elegant light --line-strong: --line-strong
  2. Elegant light --line: --line
  3. Elegant light --line-muted: --line-muted

Purpose

  1. Elegant light --line-hairline: --line-hairline
  2. Elegant light --line-field: --line-field
  3. Elegant light --line-field-hover: --line-field-hover

Elegant dark

Ladder

  1. Elegant dark --line-strong: --line-strong
  2. Elegant dark --line: --line
  3. Elegant dark --line-muted: --line-muted

Purpose

  1. Elegant dark --line-hairline: --line-hairline
  2. Elegant dark --line-field: --line-field
  3. Elegant dark --line-field-hover: --line-field-hover

Ink ramp#

Brutal

Ramp

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

Elegant light

Ramp

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

Elegant dark

Ramp

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

Brand families#

Brutal

Primary slots

  1. Brutal --color-primary: --color-primary
  2. Brutal --primary-strong: --primary-strong
  3. Brutal --primary-soft: --primary-soft
  4. Brutal --primary-edge: --primary-edge
  5. Brutal --primary-hover: --primary-hover
  6. Brutal --primary-active: --primary-active

Accent slots

  1. Brutal --color-accent: --color-accent
  2. Brutal --accent-strong: --accent-strong
  3. Brutal --accent-soft: --accent-soft
  4. Brutal --accent-hover: --accent-hover
  5. Brutal --accent-active: --accent-active

Primary ramp

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

Accent ramp

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

Secondary ramp

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

Elegant light

Primary slots

  1. Elegant light --color-primary: --color-primary
  2. Elegant light --primary-strong: --primary-strong
  3. Elegant light --primary-soft: --primary-soft
  4. Elegant light --primary-edge: --primary-edge
  5. Elegant light --primary-hover: --primary-hover
  6. Elegant light --primary-active: --primary-active

Accent slots

  1. Elegant light --color-accent: --color-accent
  2. Elegant light --accent-strong: --accent-strong
  3. Elegant light --accent-soft: --accent-soft
  4. Elegant light --accent-hover: --accent-hover
  5. Elegant light --accent-active: --accent-active

Primary ramp

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

Accent ramp

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

Secondary ramp

  1. Elegant light --color-secondary: --color-secondary
  2. Elegant light --secondary-50: --secondary-50
  3. Elegant light --secondary-100: --secondary-100
  4. Elegant light --secondary-200: --secondary-200
  5. Elegant light --secondary-300: --secondary-300
  6. Elegant light --secondary-400: --secondary-400
  7. Elegant light --secondary-500: --secondary-500
  8. Elegant light --secondary-600: --secondary-600
  9. Elegant light --secondary-700: --secondary-700
  10. Elegant light --secondary-800: --secondary-800
  11. Elegant light --secondary-900: --secondary-900
  12. Elegant light --secondary-950: --secondary-950

Elegant dark

Primary slots

  1. Elegant dark --color-primary: --color-primary
  2. Elegant dark --primary-strong: --primary-strong
  3. Elegant dark --primary-soft: --primary-soft
  4. Elegant dark --primary-edge: --primary-edge
  5. Elegant dark --primary-hover: --primary-hover
  6. Elegant dark --primary-active: --primary-active

Accent slots

  1. Elegant dark --color-accent: --color-accent
  2. Elegant dark --accent-strong: --accent-strong
  3. Elegant dark --accent-soft: --accent-soft
  4. Elegant dark --accent-hover: --accent-hover
  5. Elegant dark --accent-active: --accent-active

Primary ramp

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

Accent ramp

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

Secondary ramp

  1. Elegant dark --color-secondary: --color-secondary
  2. Elegant dark --secondary-50: --secondary-50
  3. Elegant dark --secondary-100: --secondary-100
  4. Elegant dark --secondary-200: --secondary-200
  5. Elegant dark --secondary-300: --secondary-300
  6. Elegant dark --secondary-400: --secondary-400
  7. Elegant dark --secondary-500: --secondary-500
  8. Elegant dark --secondary-600: --secondary-600
  9. Elegant dark --secondary-700: --secondary-700
  10. Elegant dark --secondary-800: --secondary-800
  11. Elegant dark --secondary-900: --secondary-900
  12. Elegant dark --secondary-950: --secondary-950

State families#

Brutal

inactive

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

info

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

success

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

warning

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

danger

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

Elegant light

inactive

  1. Elegant light --color-inactive: --color-inactive
  2. Elegant light --color-inactive-foreground: --color-inactive-foreground

info

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

success

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

warning

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

danger

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

Elegant dark

inactive

  1. Elegant dark --color-inactive: --color-inactive
  2. Elegant dark --color-inactive-foreground: --color-inactive-foreground

info

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

success

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

warning

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

danger

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