🎨 STYLE GUIDE

Living catalog of design tokens and shared UI patterns. Use the theme toggle in the header to preview every section across Light, Dark, Forest, and Sunset.

Color Tokens

CSS custom properties defined in themes.css, mapped to Tailwind utilities (bg-bgCard, text-textMuted, etc). Swatches reflect the active theme live.

--bg-main

--bg-card

--bg-hover

--bg-input

--bg-skeleton

--bg-overlay

--text-base

--text-muted

--text-subtle

--border-default

--border-light

--border-input

Typography

Heading 1 — text-3xl font-bold text-textBase

Heading 2 — text-xl font-bold text-textBase

Heading 3 — text-lg font-semibold text-textBase

Body text — text-textBase

Muted / secondary text — text-textMuted text-sm

Subtle / placeholder text — text-textSubtle text-sm

Monospace tag — font-mono text-xs bg-bgSkeleton

Buttons

Form Controls

Text input

Select

Checkbox label

Radio label

Surfaces & Indicators

Cards

Standard card

bg-bgCard rounded-xl shadow border border-borderDefault

Inset / hover surface

bg-bgHover rounded-xl border border-borderLight

Badges

debug-badge Success Warning Error Info

Skeleton loaders

Toast Notification

Floating bottom-island toast (toast.css), driven by process-start / process-end window events from the base layout.

Live Fragment Previews

Real HTMX fragment templates rendered with sample data, so layout regressions surface here before they reach a real page.

fragments/restock_table.html

Item	Category	Cycle	Due	Status	Whole Foods	Trader Joe's	Costco
Organic Bananas Whole Foods: $0.79 Trader Joe's: $0.69 Costco: $0.59	Produce	6d	2026-06-09	🔴 Overdue	$0.79	$0.69	$0.59
2% Milk, 1 Gallon Whole Foods: $4.29 Costco: $3.49	Dairy	9d	2026-06-12	🟠 High	$4.29	—	$3.49
Sourdough Bread Loaf Trader Joe's: $3.99	Bakery	12d	2026-06-18	🟡 Soon	—	$3.99	—
Olive Oil, 1L Costco: $11.99 Whole Foods: $14.49	Pantry	45d	2026-07-20	⚪ Low	$14.49	—	$11.99