Design tokens (breakpoints, fluid type/space, z-index)

Generated from mcp/patterns.registry.json — do not edit by hand; change the registry and run bun run patterns:build.

Index card — the docs below are the canonical explanation; deep-tier pattern pages additionally carry invariants and emulation notes.

Category: UI Components & Design System · Tier: light · Risk: low — frontend styling only

Centralizes breakpoints, fluid typography/spacing clamp() scales, and z-index values in a single tokens.ts file consumed by the UnoCSS theme so no component hardcodes design values.

When to use: Reach for this when adding or changing a spacing, breakpoint, typography, or stacking-order value that should be shared across the app.

Docs

• docs/blueprint/design/tokens.md (GitHub · GitLab)
• docs/stack/ui/unocss.md (GitHub · GitLab)

Code

• src/lib/styles/tokens.ts (GitHub · GitLab)
• uno.config.ts (GitHub · GitLab)

Proof

• /showcases/ui/tokens

Machine-readable record: ui-design-tokens in mcp/patterns.registry.json.