Design tokens & components

Design system showcase: tokens and shadcn-style UI components available in this project.

Design tokens

Colors

Semantic

Primary

Secondary

Accent

Muted

Destructive

Background

Foreground

Error

Warning

Success

Info

Primary scale (100–900) / Secondary scale (100–900) / Accent scale (100–900) — 500 = brand center

primary

secondary

accent

Scales update with theme. Use var(--primary-100) … var(--primary-900) (and secondary, accent).

Palettes 900 → 100

Background, foreground, muted, destructive, info, warning, error, success. Each scale is ordered 900 (darkest) to 100 (lightest), 500 = center.

background (900 → 100)

foreground (900 → 100)

muted (900 → 100)

destructive (900 → 100)

info (900 → 100)

warning (900 → 100)

error (900 → 100)

success (900 → 100)

Typography

Primary (Space Grotesk) / Secondary (Inter) / Mono (IBM Plex Mono)

  • Primary (Space Grotesk)

    The quick brown fox jumps over the lazy dog. 0123456789

  • Secondary (Inter)

    The quick brown fox jumps over the lazy dog. 0123456789

  • Mono (IBM Plex Mono)

    The quick brown fox jumps over the lazy dog. 0123456789

Scale

  • xs — The quick brown fox
  • sm — The quick brown fox
  • base — The quick brown fox
  • lg — The quick brown fox
  • xl — The quick brown fox
  • 2xl — The quick brown fox
  • 3xl — The quick brown fox

Weights

  • light (300)
  • normal (400)
  • medium (500)
  • semibold (600)
  • bold (700)

Spacing

8px grid

Border radius

Shadows

Components

Button

Sizes

Badge

Default
Secondary
Destructive
Outline
Glass

Card

Card title
Card description using design tokens.

Content area. Cards use bg-card, border-border, and shadow.

Primary tint
Optional tinted card.

Styled with primary token.

Compact card with only content.

Input & Textarea

Switch

Progress

Separator

Above

Below

Left
Right

Avatar

CNABLG