Design System

Interactive component playground & theme customization.

Seed Colors

The 8 semantic color tokens that seed the entire theme. Each value is in OKLch color space.

primary

#18181b

oklch(0.21 0.006 285.885)

secondary

#f4f4f5

oklch(0.967 0.001 286.375)

accent

#f4f4f5

oklch(0.967 0.001 286.375)

destructive

#e7000b

oklch(0.577 0.245 27.325)

muted

#f4f4f5

oklch(0.967 0.001 286.375)

background

#ffffff

oklch(1 0 0)

foreground

#09090b

oklch(0.141 0.005 285.823)

border

#e4e4e7

oklch(0.92 0.004 286.32)

These CSS custom properties are derived from the seed colors above and applied as Tailwind utility classes.

bg-primary

bg-secondary

bg-accent

bg-destructive

bg-muted

bg-background

text-foreground

border-border