Theme catalog

Live tokens and components for reviewing and extending the Stack Effect theme.

Spectral Signal · Precision Mono

Stack Effect theme catalog

Palette

Foundation

Background

--background

Foreground

--foreground

Card

--card

Popover

--popover

Border

--border

Input

--input

Interaction

Primary

--primary

Primary ink

--primary-foreground

Secondary

--secondary

Muted

--muted

Accent

--accent

Focus ring

--ring

Semantic

Success

--success

Warning

--warning

Destructive

--destructive

Info

--info

Muted ink

--muted-foreground

Accent ink

--accent-foreground

Code and data

Inline code

--code

Code block

--code-block

Chart 1

--chart-1

Chart 2

--chart-2

Chart 3

--chart-3

Chart 4

--chart-4

Chart 5

--chart-5

Typography

Heading 1

2.488rem / 700

Compose with confidence.

Heading 2

2.074rem / 700

Compose with confidence.

Heading 3

1.728rem / 600

Compose with confidence.

Heading 4

1.44rem / 600

Compose with confidence.

Heading 5

1.2rem / 500

Compose with confidence.

Heading 6

1rem / 500

Compose with confidence.

Body

1rem / 1.7

Readable technical prose stays sans-serif and within a 72ch measure.

Components

Button variants

<Button variant="…" />

Button sizes

<Button size="sm" />

Input states

<Input aria-invalid />

Status rows

bg-success · bg-warning

Blueprint resolved

Conflict needs a decision

Apply failed

Dry run — no files written

Code surface

bg-code-block · rounded-sm

● Selection resolved
Blueprint · 6 modules
Plan · 18 files

Compact result

border · bg-card · rounded-md

Plan ready18 files

Usage rules

Signal

Primary marks action, focus, active location, or execution.

Shape

rounded-sm controls · rounded-md containers · pills for status only.

Depth

Tonal surfaces and borders first; no ambient dark-mode shadows.

Color

Use semantic tokens in components; never paste palette values.

Canonical source: apps/docs/DESIGN.md.