Design tokens

Janine Design System tokens from packages/ui, shown in both themes. Each swatch reads a token, so a missing or wrong mapping shows as an empty or mismatched tile.

Light (default)

Tailwind and shadcn mapping

  • bg-background
  • bg-card
  • bg-popover
  • bg-primary
  • bg-secondary
  • bg-muted
  • bg-accent
  • bg-destructive
  • bg-success
  • bg-warning
  • bg-danger
  • bg-info
  • bg-sidebar
  • bg-ring

Surfaces

  • --bg
  • --surface
  • --surface-sunken
  • --surface-hover
  • --surface-selected
  • --surface-raised
  • --surface-inverse

Text

  • --text
  • --text-secondary
  • --text-muted
  • --text-disabled
  • --text-inverse
  • --text-link

Borders

  • --border
  • --border-strong
  • --border-input
  • --border-action

Action

  • --primary
  • --primary-hover
  • --primary-press
  • --primary-foreground
  • --glow
  • --primary-soft

Status

  • --success
  • --success-bg
  • --warning
  • --warning-bg
  • --danger
  • --danger-bg
  • --info
  • --info-bg
  • --ai-fg
  • --ai-bg

Charts

  • --chart-1
  • --chart-2
  • --chart-3
  • --chart-4
  • --chart-5
  • --chart-6
  • --chart-7
  • --chart-8
  • --metric-human
  • --metric-total

Brand accents

  • --brand-accent-1
  • --brand-accent-2
  • --brand-accent-3
  • --brand-accent-4
  • --brand-accent-5
  • --brand-accent-6
  • --brand-accent-7
  • --brand-accent-8

Type roles

  • display · 18,240 people · 38.2%
  • metric · 18,240 people · 38.2%
  • title · 18,240 people · 38.2%
  • heading · 18,240 people · 38.2%
  • subheading · 18,240 people · 38.2%
  • body · 18,240 people · 38.2%
  • small · 18,240 people · 38.2%
  • overline · 18,240 people · 38.2%
  • mono · 18,240 people · 38.2%
Focus ring

Dark

Tailwind and shadcn mapping

  • bg-background
  • bg-card
  • bg-popover
  • bg-primary
  • bg-secondary
  • bg-muted
  • bg-accent
  • bg-destructive
  • bg-success
  • bg-warning
  • bg-danger
  • bg-info
  • bg-sidebar
  • bg-ring

Surfaces

  • --bg
  • --surface
  • --surface-sunken
  • --surface-hover
  • --surface-selected
  • --surface-raised
  • --surface-inverse

Text

  • --text
  • --text-secondary
  • --text-muted
  • --text-disabled
  • --text-inverse
  • --text-link

Borders

  • --border
  • --border-strong
  • --border-input
  • --border-action

Action

  • --primary
  • --primary-hover
  • --primary-press
  • --primary-foreground
  • --glow
  • --primary-soft

Status

  • --success
  • --success-bg
  • --warning
  • --warning-bg
  • --danger
  • --danger-bg
  • --info
  • --info-bg
  • --ai-fg
  • --ai-bg

Charts

  • --chart-1
  • --chart-2
  • --chart-3
  • --chart-4
  • --chart-5
  • --chart-6
  • --chart-7
  • --chart-8
  • --metric-human
  • --metric-total

Brand accents

  • --brand-accent-1
  • --brand-accent-2
  • --brand-accent-3
  • --brand-accent-4
  • --brand-accent-5
  • --brand-accent-6
  • --brand-accent-7
  • --brand-accent-8

Type roles

  • display · 18,240 people · 38.2%
  • metric · 18,240 people · 38.2%
  • title · 18,240 people · 38.2%
  • heading · 18,240 people · 38.2%
  • subheading · 18,240 people · 38.2%
  • body · 18,240 people · 38.2%
  • small · 18,240 people · 38.2%
  • overline · 18,240 people · 38.2%
  • mono · 18,240 people · 38.2%
Focus ring