atelier-foundationslisted

Atelier suite — the design-system engine. Build the token foundation that makes a frontend look coherent and "expensive": a perceptual OKLCH color system (ramps + semantic tokens + accessible dark mode), a modular + fluid type scale, an 8-point spacing scale, and depth (radii, shadows, grain). Outputs ready-to-use CSS custom properties, Tailwind v4 @theme, or W3C/DTCG design tokens. Use this whenever starting any frontend that needs a consistent visual system, when building a color palette / design tokens / theme / dark mode, or when colors, spacing, or sizing feel inconsistent, muddy, or generic. Run after atelier-direction; before building components. (Choosing and setting the actual fonts → atelier-typography; scaffolding and building components → atelier-components.)
luminary19/atelier · ★ 0 · Web & Frontend · score 68

Install: claude install-skill luminary19/atelier

# Atelier — Design-System Foundations The engine of the suite. **"Expensive" is not a trick — it's a system showing through.** Coherent color, spacing, and type tokens are what separate bespoke-looking work from a pile of one-off values. This skill turns a Direction Doc into a real, reusable token system that `atelier-typography` and `atelier-layout` (and your components) consume. > **Inputs:** the Direction Doc from `atelier-direction` (palette mood, type voice, density, light/dark). > **Outputs:** tokens as CSS vars / Tailwind v4 `@theme` / DTCG JSON. Deep reference: > `references/fundamentals-deepdive.md` (§7 color, §8 spacing, §9 tokens). --- ## Token architecture (build in this order) Three tiers, always. This is what makes theming and dark mode trivial later. 1. **Primitive / ramp** — raw values, no meaning: `--blue-50 … --blue-950`, `--space-1 … --space-12`. 2. **Semantic / alias** — intent, *referencing* primitives: `--bg`, `--surface`, `--border`, `--text`, `--text-muted`, `--primary`, `--danger`. **This tier carries the brand and enables theming** — dark mode = remap semantics, never touch components. 3. **Component** (optional) — component-scoped: `--button-bg`, `--card-padding`, referencing semantics. Rule: components consume tier 2/3, **never hard-code a primitive**. Get this right and dark mode is a 20-line remap instead of a rewrite. --- ## 1. Color — build in OKLCH Build the whole color system in **OKLCH**, not HSL/hex. HSL lies about lightness