Colours

Semantic CSS variables mapped to Tailwind utilities (e.g. bg-primary).

Surface

Resolved values update when you switch light / dark.

--background

—

--foreground

—

--card

—

--card-foreground

—

--popover

—

--popover-foreground

—

Brand

Resolved values update when you switch light / dark.

--primary

—

--primary-foreground

—

--secondary

—

--secondary-foreground

—

State

Resolved values update when you switch light / dark.

--muted

—

--muted-foreground

—

--accent

—

--accent-foreground

—

--destructive

—

--destructive-foreground

—

Borders & focus

Resolved values update when you switch light / dark.

--border

—

--input

—

--ring

—

Sidebar

Resolved values update when you switch light / dark.

--sidebar

—

--sidebar-foreground

—

--sidebar-primary

—

--sidebar-primary-foreground

—

--sidebar-accent

—

--sidebar-accent-foreground

—

--sidebar-border

—

--sidebar-ring

—

Charts

Resolved values update when you switch light / dark.

--chart-1

—

--chart-2

—

--chart-3

—

--chart-4

—

--chart-5

—

Typography

Font stacks from theme; body uses font-sans.

Families

Sans

The quick brown fox jumps over the lazy dog.

Serif

The quick brown fox jumps over the lazy dog.

Mono

const shed = 'community';

Size ramp

text-xs — Community Shed

text-sm — Community Shed

text-base — Community Shed

text-lg — Community Shed

text-xl — Community Shed

text-2xl — Community Shed

text-3xl — Community Shed

text-4xl — Community Shed

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Muted supporting copy for descriptions and captions.

Border radius

Theme radii (computed border-radius).

rounded-sm—

rounded-md—

rounded-lg—

rounded-xl—

Shadows

Elevation tokens on card surfaces.

shadow-2xs

shadow-xs

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

shadow-2xl

Components

shadcn/ui primitives using design tokens.

Button

Variants and sizes

Form controls

Accept terms

Fruit

Badge

DefaultSecondaryOutlineDestructive

Alert

Note

Default alert uses background and foreground tokens.

Something went wrong

Destructive state for errors.

Avatar

ABCS

Card with footer

Nested layout and separator

Card body content.

Below the separator.

Overlays

Dialog, dropdown, and tooltip

/design — internal reference