Overview

This page showcases core design tokens and base components using Tailwind CSS and shadcn/ui.

Default Badge

Secondary Badge

Destructive Badge

Typography

Headings

H1 / Display

H2 / Page Title

H3 / Section Title

H4 / Subsection

H5 / Heading

H6 / Eyebrow

Text Styles

Body / Default text size and leading.

Muted / Secondary text, captions, helper copy.

Links: Example link

Code: const x = 'token'

Colors

Background

background

Text

foreground

Foreground

foreground

Text

background

Card

card

Text

card-foreground

Popover

popover

Text

popover-foreground

Primary

primary

Text

primary-foreground

Secondary

secondary

Text

secondary-foreground

Muted

muted

Text

muted-foreground

Accent

accent

Text

accent-foreground

Destructive

destructive

Text

destructive-foreground

Border

border

Text

foreground

Ring

ring

Text

background

Spacing

Scale

Token	Example	Class
0		`p-0`
1		`p-1`
2		`p-2`
3		`p-3`
4		`p-4`
6		`p-6`
8		`p-8`
10		`p-10`
12		`p-12`
16		`p-16`
20		`p-20`
24		`p-24`
32		`p-32`