The design kit — brand bible and design tokens as structured data — step 8 of 10

The kit grows a screen wing — design tokens

Somewhere around deliverable #40, the campaign brief stops asking for images. The launch needs a landing page. The client wants the email template refreshed to match. There's an in-app banner. This is the half of the trade the occupational handbooks now file under web and digital interface design, and it lands on the same desk as the posters — yours.

The brand kit can't answer a screen's questions. motifs and banned tell a prompt what to render; a screen asks what exact size body text is, how far the card sits from the edge, and which color the signup button wears on every page it appears. The interface answer is the same move you just made with the brand bible — structure it — applied to different fields. That's a design token file. Run the editor:

• color roles — the palette again, but promoted from names to jobs: background, text, accent. A screen never asks whether terracotta is nice; it asks what accent resolves to. One role, one hex, every screen — the difference between a brand and five subtly different terracottas doing "primary."
• type scale — a ramp of sizes with a real ratio between steps. Two sizes 2px apart aren't two hierarchy levels; they're one level with a rendering bug. If a step doesn't visibly out-rank the one below it, it has no reason to exist.
• space scale — every margin and padding a multiple of one base unit. An 18 in a 4px-grid world isn't a creative choice; it's a typo that will get pasted into forty screens.

The three arguments from the top of this lesson transfer without edits. Tokens compile — into CSS variables, into Figma styles, into the prompt when you ask a model for a mockup ("background #FAF3E7, accent #C8553D, 4px spacing grid" beats "make it on-brand"). Tokens validate — grid, ratio, and contrast are all checkable by script before a screen ships. Tokens version — when the rebrand lands, accent changes in one place and every surface follows.

And the contrast machinery you built two drills ago comes along whole, with one new fact: WCAG 2.1 AA sets a second floor of 3:1 for UI components (the non-text contrast rule) alongside the 4.5:1 body-text floor. Terracotta failed body text at 3.95:1 — but 3.95 clears 3:1, so it can draw a button it isn't allowed to caption. Same script, two thresholds, and the receipt for both before the client's accessibility audit runs it for you.

Next drill: the token audit — grid, scale, and both contrast floors, pass or reject.