Skip to main content

Foundations

6 pages

Reach for them through resolvePalette() in @elabs-ai/components-charts rather than naming steps by hand.

2 examples

Each swatch is theme-reactive: it fills from var(--token), so switching the toolbar theme recolors the entire page.

4 examples

The stacked elevation ramp (shadow-2xs → shadow-2xl) and its hairline-ring variant (shadow-ring-*) for floating surfaces, plus shadow-hairline for a bare 1px edge.

4 examples

Opt-in drafting-paper grounds — bg-dot-grid (dot field), bg-paper (dots + construction rules + tooth) and the existing bg-grid-paper (engineering grid).

4 examples

The spacing scale (standard Tailwind 0.25rem step) and the token-backed radius scale (rounded-* ← --radius).

2 examples

How data-theme + semantic tokens give one component set any number of looks — the two reference themes (light, dark), a theme you author yourself, plus the orthogonal decoration / density / motion dials.

9 examples