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.