Design Tokens Demo

A small, non-invasive showcase of our Tailwind token setup.

Color palette

  • Primary

    bg-primary

  • Foreground

    bg-foreground/10

  • Muted

    bg-muted

  • Success

    bg-success

UI components

Buttons

Inputs

Server-validated error styles demo.

Dialog

Tooltip

Typography

Heading XL — font-bold text-3xl

Heading L — font-semibold text-xl

Body — text-base with default leading

Muted — text-sm

Mono — font-mono text-sm

Font previews

Sans — var(--font-sans)

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Display — var(--font-display)

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Mono — var(--font-mono)

The quick brown fox jumps over the lazy dog.

Spacing

Stack with space-y-2Focus test

Container padding uses token aliases: px-6 and py-6