Wizcamp

Design System

Explore colors, tokens, and theming system

Color Tokens

All colors use HSL values and automatically adapt to light/dark mode. Click the copy icon to copy the CSS variable name.

Background
--background

Foreground
--foreground

Card
--card

Card Foreground
--card-foreground

Popover
--popover

Popover Foreground
--popover-foreground

Primary
--primary

Primary Foreground
--primary-foreground

Secondary
--secondary

Secondary Foreground
--secondary-foreground

Muted
--muted

Muted Foreground
--muted-foreground

Accent
--accent

Accent Foreground
--accent-foreground

Destructive
--destructive

Destructive Foreground
--destructive-foreground

Border
--border

Input
--input

Ring
--ring

Border Radius

Border radius values are calculated from the base --radius variable.

None

0px

SM

calc(var(--radius) - 4px)

MD

calc(var(--radius) - 2px)

LG

var(--radius)

XL

calc(var(--radius) + 4px)

Full

9999px

Typography Scale

text-xs

The quick brown fox jumps over the lazy dog

text-sm

The quick brown fox jumps over the lazy dog

text-base

The quick brown fox jumps over the lazy dog

text-lg

The quick brown fox jumps over the lazy dog

text-xl

The quick brown fox jumps over the lazy dog

text-2xl

The quick brown fox jumps over the lazy dog

text-3xl

The quick brown fox jumps over the lazy dog

text-4xl

The quick brown fox jumps over the lazy dog

Spacing Scale

1
4px
2
8px
4
16px
6
24px
8
32px
12
48px
16
64px
20
80px
24
96px

Shadow Scale

shadow-sm

Subtle elevation

shadow-md

Medium elevation

shadow-lg

High elevation

Customization

To customize the design system, edit the CSS variables in your global CSS file:

@theme {
  --color-background: 0 0% 100%;
  --color-foreground: 222.2 84% 4.9%;
  --color-primary: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
}