design-systemlisted

# Design system Two jobs, and which one you are doing depends on what already exists. Read the design system section of `.claude/project-profile.md` first. - **The profile records a design system** → your job is **enforcement**. Skip to the second half. - **It does not** → your job is **establishing one**, then recording it in the profile so every other skill stops guessing. A note on where the value is. Most design system advice is about authoring: pick a scale, name your tokens, three layers. That part is a good afternoon of work and it is not what fails. What fails is six months later, when a third of the codebase uses the tokens, a third uses hardcoded values that happen to match, and a third uses hardcoded values that used to match. Nobody violated the system on purpose. It just was never possible to violate it **loudly**. So: establish quickly, enforce seriously. ## Establishing ### Layers ``` primitive ──▶ semantic ──▶ component --blue-600 --color-primary --button-bg ``` Primitives are raw values with no opinion. Semantics say what a value is **for**. Component tokens exist only when a component needs to diverge from the semantic layer, which is rarer than it looks; reach for one when you catch yourself overriding a semantic token in one place. The layer that earns its keep is the middle one. `--color-primary` survives a rebrand; `--blue-600` used directly in forty components does not. ### What a token has to be able to express This is the tr