Design system

Download Markdown ↓

Read the confirmed website brief and reuse decisions already made. Do not restart the business interview.

Use the brief, audience, existing identity and available platform to make a small set of deliberate decisions.

Choose a readable type approach using fonts actually available with appropriate rights. Define the roles of page title, section heading, body text, captions and labels. Limit unnecessary variation and test long text.

Define the roles of background, surface, body text, muted text, accent and important states. Check readable contrast and avoid using color as the only signal.

Set a simple spacing scale, content width and section rhythm. Make phone layouts fit the content rather than shrinking a desktop composition. Keep interactive targets comfortable to use.

Specify consistent buttons, links, form fields, focus treatment, error messages, loading feedback and disabled states. Labels must remain understandable without relying on placeholders or icon recognition alone.

Use imagery, border, corner and shadow treatments that support the chosen direction. Add motion only for a useful purpose and provide a reduced-motion path.

Record a compact design specification that the visual lead can apply. Verify the choices in the actual pages; a token list alone does not prove a usable design. Reuse established decisions instead of creating a second conflicting identity.

If a required capability is missing, follow tool setup. Read these instructions as text when persistent skill registration is unavailable. Keep business-specific notes in the project, not in this reusable bundle.

Plain-text instructions