Skip to content
delta

Create a design system from a brand brief

Palette and type proposed step by step with approval gates, written to the tokens only, then a style guide page to check the result.

Recipe
Build the design system for this site from the brief below. Do not build any pages yet. Brief: [describe the business, the audience, three adjectives for the feel, and any colours or typefaces that are fixed] Steps: 1. Run get-design-context and read notes.md and the current tokens. Tell me whether the site still has the seed tokens or an existing design. 2. Propose a palette: one action colour, one ink, one surface, and their derived tints and shades. Show contrast ratios for ink on surface and on-action on action. Wait for my approval. 3. Propose type: a display face and a text face from the Font Manager catalog, with the size ramp and leading. Wait for my approval. 4. Write the approved values into the tokens with update-tokens. Do not write literal colours or sizes anywhere else. 5. Record the decisions and the reasons in notes.md: what the palette is for, what must not change, and anything you rejected. 6. Create a page at /style-guide/ that shows every token in use: colours with their names, the type ramp, spacing, radius, and the button states. At the end, list the tokens you changed and the snapshot id so I can restore if needed.