brandkit

Define or audit a brand kit the way a design lead does, judging it as one coherent system that renders the same intent across the site, the app, social, and decks. Coherence is the deliverable. A second brand blue is the defect, and so is a runaway font or a voice that drifts between channels.

The positioning, the palette, and the voice stay your call. A script owns the rendering: it emits the design tokens and checks WCAG contrast, so the type and spacing ramps and the AA verdicts come out identical on every run. Hand-emitting tokens by keystroke or judging contrast by eye is the anti-pattern this skill removes; see Scripts.

Work through the brand system reference for the structure and the rules, plus the failure modes it catalogs. Pin the strategy before the pixels and name every visual decision as a token, ending on criteria a reviewer can check line by line.

Steps

1. Pin the foundations. State the positioning in one sentence that excludes at least one named competitor, three-to-five personality traits each pinned against an opposite, and the voice on every axis in the reference (formality, energy, warmth, humor, authority) with a say / never-say lexicon. The step is done when positioning names a differentiator a rival cannot claim, every trait carries an opposite, and the voice axes plus lexicon are written.

2. Choose the color system by role. Name each color by its job (brand, accent, neutral scale, background, status) and give each one value per theme. Pair every text-bearing role with a foreground that targets WCAG AA (4.5:1 body, 3:1 large and UI). The step is done when every color has a role and a chosen foreground, and no role carries a second hand-picked value.

3. Choose the type, spacing, radius, and elevation scales. Constrain type to one or two families and pick a base size with a ratio (1.250 is a safe default). Set the spacing base to 4px or 8px, and map radius and elevation to named steps. The script derives the type ramp and the spacing ramp from the base and the ratio in the next step, so record the base, the ratio, and the step counts and let the derivation produce each size. The step is done when type, spacing, radius, and elevation each resolve to a named scale and no value sits off its ramp.

4. Write the decisions into brand.json. Record the chosen colors, the type base and ratio and steps, the spacing base and steps, and the font families in a brand.json matching the spec shape in Scripts. The step is done when brand.json parses as JSON and carries a colors block plus a type_scale block plus a spacing block plus a fonts block.

5. Render the tokens with the script. Run scripts/tokens.py build brand.json <out-dir> to render tokens.css and tokens.json from the spec. A non-zero exit means the spec is malformed; read the boundary message and fix brand.json, then re-run. The step is done when the command exits zero and <out-dir>/tokens.css plus <out-dir>/tokens.json exist.

6. Verify every text pair against AA with the script. Run scripts/tokens.py contrast <foreground> <background> once per text-bearing pairing named in step 2. A non-zero exit marks a pairing that misses AA-normal; re-pick that foreground or background and re-run the same check. The step is done when each text pairing has a recorded ratio and every pairing exits zero on AA-normal.