ITZDABBZZ
Back to tools
Design Toolspublic tool

Design Token Builder

Edit tokens and watch a real interface restyle live — then copy the CSS custom properties.

Format
CSS variables
Tokens
32
Local
100% browser
Output
1068 chars

Live specimen

Built from the tokens below — edit any value and this updates instantly

Buttons

PrimarySecondaryOutlineGhostDelete

Badges

successwarningdestructiveinfo

Form controls

Typography

Heading scale

Body copy sits at the muted foreground so it stays readable without competing.

const tokens = "monospace"

Card

Deploy to production

Ships the current build to the live edge network.

Ready
DeployCancel

Alerts

info — something worth reading.
success — something worth reading.
warning — something worth reading.
destructive — something worth reading.

Colors

16 tokens

Radius & spacing

Corner and scale tokens

1
2
3
4
5
6
7
8

Generated tokens

CSS custom properties, ready to paste

:root {
    --dt-color-background: #12100e;
    --dt-color-foreground: #f5f1ea;
    --dt-color-primary: #7c9a72;
    --dt-color-primary-foreground: #12100e;
    --dt-color-secondary: #1d1a16;
    --dt-color-secondary-foreground: #f5f1ea;
    --dt-color-muted: #1d1a16;
    --dt-color-muted-foreground: #a39c90;
    --dt-color-accent: #c9a227;
    --dt-color-accent-foreground: #12100e;
    --dt-color-border: #2e2a24;
    --dt-color-destructive: #c25b4a;
    --dt-color-destructive-foreground: #f5f1ea;
    --dt-color-success: #6b9b62;
    --dt-color-warning: #c9a227;
    --dt-color-info: #5b83a8;
    --dt-space-1: 0.25rem;
    --dt-space-2: 0.5rem;
    --dt-space-3: 0.75rem;
    --dt-space-4: 1rem;
    --dt-space-5: 1.5rem;
    --dt-space-6: 2rem;
    --dt-space-7: 3rem;
    --dt-space-8: 4rem;
    --dt-radius-none: 0;
    --dt-radius-sm: 0.25rem;
    --dt-radius-md: 0.5rem;
    --dt-radius-lg: 0.75rem;
    --dt-radius-xl: 1rem;
    --dt-radius-full: 9999px;
    --dt-font-sans: Manrope, system-ui, sans-serif;
    --dt-font-mono: JetBrains Mono, monospace;
}