Design System

Design System

A factory for brand identities. Given a short brief, it produces a complete, unique design system in the house DNA: a token file, a Tailwind config, a brand rules doc the agent obeys, a storybook, and a human spec. The opposite of a template: the DNA (method and quality bar) stays constant, the output (palette, type, shape, mood) is different every time.

It is the piece that kills the generic look at the source. The fluid skill handles motion, the detector catches slop after the fact, this gives each project an identity from line one.

Built from four hand-made systems: MVP "Liquid Glass" (the structural template), LeCoffre (the delivery format), PLR @plr/ui, and Vigie.

When to use

• Starting a new client site or product and you need its visual identity defined.
• Producing or extending design tokens (color, type, spacing, radii, shadows, motion).
• You want a tokens.css + Tailwind config + brand CLAUDE.md + storybook for a project.
• An existing UI feels generic and needs a committed identity.

The two halves

A system here is DNA (constant) plus brand (variable). Get both right.

• The DNA is the house method and quality bar. It never changes. See reference/dna.md.
• The brand is what makes this system unlike any other: palette, type, shape, surface, mood. Derived per project from the brief. This is where you must NOT converge.

init: the workflow

1. Gather the brief (ask only what is missing):

   • Brand name and sector/positioning.
   • Personality, pick an extreme: institutional/refined, editorial, luxury, playful/energetic, techy/precise, brutalist/raw, organic/warm. Half-measures read as generic.
   • Light, dark, or both (auto).
   • Surface treatment: flat, soft (subtle shadow/relief), or glass (liquid, translucent).
   • One anchor or constraint: an existing logo color, a reference you admire, a competitor you must NOT resemble.

2. Derive the brand variables (commit, do not hedge):

   • Start from the database: pick a palette from data/palettes.md (100+ committed palettes), a type pairing from data/type-pairings.md (50+ distinctive pairings), a style direction from data/styles.md, and a layout archetype from data/layouts.md that fit the brief. Adapt the exact values; never improvise a generic default, and never default to the split-hero-plus-three-cards skeleton. Two clients in the same sector get different picks, including a different page shape. For motion reach into data/motion-presets.md, for any data display into data/chart-types.md, and for the build pick a stack from data/tech-stacks.md.
   • Color: one dominant brand hue + one sharp accent + semantic (success/warn/danger) + tuned neutrals. Never pure black. See reference/color.md.
   • Type: a distinctive display font paired with a refined body font, self-hosted. Never Inter/Roboto/Arial as the primary. See reference/typography.md.
   • Shape: a radii scale (sharp 4 to 8, rounded 12 to 22, or pill) chosen to match the personality.
   • Surface/relief: flat, soft-shadow, or glass tokens.
   • Motion: the house easings, already in the template (--ease-out, --spring, --ease-in-out), shared with fluid.

3. Map to light/dark tokens: decide which tokens invert (bg, surface, text, glass, tints, on-tint) and which hold (brand hues, accent). See reference/color.md.

4. Emit the files from templates/ (fill the {{placeholders}}):

   • tokens.css: the source of truth (CSS variables + base classes).
   • tailwind.config.js: same tokens for Tailwind/TanStack sites (omit for CSS-pur projects).
   • CLAUDE.md: the brand rules the agent obeys on every UI task.
   • storybook.html: a live showcase of every token and base component.
   • DESIGN_SYSTEM.md: the human-readable spec. Put them in a <project>/design-system/ folder (the LeCoffre pattern).

5. Wire it: load the fonts, import tokens.css (or extend Tailwind), and from then on every color/space/radius is var(--token), never a raw value.

Stack note (light/dark strategy)

• App with auto theme (like MVP): light by default, dark via @media (prefers-color-scheme: dark). CSS pur, no Tailwind needed.
• Vitrine site with a theme toggle (like LeCoffre, TanStack/Tailwind): dark via :root[data-theme="dark"] / .dark, plus the tailwind.config.js.

The template carries both, keep the one you use.

Anti-generic rules (non negotiable)

• Commit to ONE dominant color and ONE sharp accent. Timid, evenly spread palettes read as generic. Ration the brand: a thin accent beats a full wash.
• Never the purple-on-white gradient. Never Inter/Roboto/Arial as the primary font. Never pure black, use a tuned near-black.
• Every color, space, radius, shadow goes through a token. No raw hex on text or surface.
• Bespoke SVG over stock icons, zero decorative emoji. (MVP runs a 3-tier icon system: glossy 3D for large elements, duotone gradient-sheen inline, bespoke SVG art for brand marks.)
• Keyboard accessibility is part of premium: a global :focus-visible ring, defined with :where() so components can override.
• Vary every system. Two projects must never share a palette or a type pairing. Do not default to the same fonts each time.
• Distinctive does not mean loud. Refined minimal and bold maximal both work; intentionality is the bar.

Output checklist

• One dominant + one accent, committed, not a timid spread.
• Distinctive type pairing, self-hosted, no generic primary.
• Full token set: color (light + dark), type scale, base-8 spacing, radii, shadows, motion.
• Light and dark both resolve through tokens, both tested.
• No raw hex on text/surface, no #000, no emoji.
• Global :focus-visible, and a reduced-motion path (CSS and JS).
• tokens.css + (tailwind.config.js) + CLAUDE.md + storybook.html + DESIGN_SYSTEM.md emitted.
• Distinct from the last system produced (different palette and type).
• Run the fluid detector on the result.

Database (pick from these first)

• data/palettes.md: 100+ committed palettes by sector and mood (dominant + accent + neutrals).
• data/type-pairings.md: 50+ distinctive display + body + mono pairings, never Inter primary.
• data/styles.md: 53 aesthetic directions with their token tendencies.
• data/layouts.md: 14 page-shape archetypes (bento, centered editorial, index, full-bleed, single column, broken grid, maximalist type, lineup, sidebar, poster, and more). Pick one per page, vary across pages so two never share a silhouette.
• data/motion-presets.md: ready-to-use motion recipes in the house easings (reveals, hovers, press, overlays, ambient).
• data/chart-types.md: 32 chart and data-viz types, which one answers which question, with house data-viz defaults.
• data/tech-stacks.md: 10 curated build stacks by project type, each wired back to the house tokens and motion.

Reference

• reference/rules.md: the hard rules (locks, hero discipline, layout honesty, bans). Read before shipping.
• reference/dna.md: the constant house DNA.
• reference/typography.md: choosing a distinctive type pairing.
• reference/color.md: building a committed palette and the light/dark token map.
• reference/glass.md: liquid-glass and surface recipes (the actual CSS, plus the shimmer button and card).
• reference/icons.md: the 3-tier bespoke icon system, with code.
• templates/: tokens.css, tailwind.config.js, CLAUDE.md, storybook.html.