Resources · Build & design

Design framework.

A design requirements specification written to be read by an AI at the start of a project. Where the design constraints fix the engineering, this fixes the design and styling. Its one job is to keep a build inside the boundaries, so the AI derives a solution from the brief and these rules and never speculates or invents its own look. Point an AI at this page for a golf club site or a fintech dashboard and it designs within the same discipline every time.

Updated 24 September 2026·v2.0·Companion to Design constraints

Read this before proposing any design. It is not advice, it is the boundary. Each entry is a concrete rule an AI can obey and a reviewer can check by ID. Where a rule restates an engineering requirement it points at the constraint rather than repeating it. The whole point is that two different projects, briefed by two different people, come out obeying the same discipline, with the brand difference carried by the palette and voice, not by invented structure.

Precedence. The design constraints govern engineering, this governs design. A project brief overrides an entry only by naming it (for example Overrides REG-002). Tags. Ban absolute prohibition · Blocker stops delivery · Ask stop and ask, never invent.

USE

Operating contract

How an AI uses this document.
  • USE-001BlockerRead this framework and the design constraints in full before proposing, generating or changing any design or styling.
  • USE-002Produce nothing outside these boundaries. Every design decision traces to a rule here, to the design constraints, or to a value derived by a procedure here from the project brief.
  • USE-003Cite the entry ID behind a design choice when presenting it, so a reviewer can audit the choice against its source.
  • USE-004The brief supplies the project specifics, this supplies the discipline. When the two conflict and the brief has not named the entry it overrides, treat it as an open question under ANTI-002.
  • USE-005Record every project specific choice, palette, typeface, register, in that project's own brief or CLAUDE.md, so the next session inherits it rather than deriving it afresh.
ANTI

No speculation

The core prohibition. This is why the document exists.
  • ANTI-001BanIntroduce no font, colour, radius, shadow, spacing value, breakpoint, component, icon set, animation or layout pattern that is not defined here or derived by a stated procedure here. No invented defaults.
  • ANTI-002AskWhen a design decision is not covered, stop and ask one question. Never fill the gap with a guess, a placeholder or a house preference.
  • ANTI-003BanDo not reinterpret or restyle an approved token or component. Reuse it exactly as defined, in every place it recurs.
  • ANTI-004Add no decorative flourish for its own sake. Every visible element earns its place from the brief or a rule, or it is removed.
  • ANTI-005AskPresent design decisions as directions to react to, never a single silent pick. Colour and typeface choices are shown as options, not chosen on the AI's own taste.
  • ANTI-006Prefer the smallest, plainest solution that meets the brief. Novelty is not a goal and is not a reason to depart from a rule.
INTAKE

Deriving a design from a brief

The fixed sequence for a new project.
  • INTAKE-001Read the brief, this framework and the constraints. Restate the project in one line, its audience and its register, and confirm them before any visual work.
  • INTAKE-002Fix the register per REG from the brief. If the brief does not state a register, ask (ANTI-002). Do not assume one.
  • INTAKE-003Derive the palette by the COL procedure through the colour tooling, gated on contrast, and present directions. Never assign colours by taste.
  • INTAKE-004Select typography by the TYP procedure. Propose faces from the permitted approach, never an invented pairing or an AI default family.
  • INTAKE-005Assemble every screen from the closed component set in CMP, on the GRID system, with SHP and MOT as defined. A pattern not in the set needs explicit approval before use.
  • INTAKE-006Verify the result against CHK and the constraints gates before delivery. A failure blocks delivery, it is not shipped with a note.
REG

Register & aesthetic direction

  • REG-001The default register is technical product studio, restrained and precise, in the manner of a considered software product rather than a marketing showreel. A project may set another register in its brief.
  • REG-002Restraint over flourish. Whitespace, hierarchy, alignment and contrast carry the design before any decoration is considered.
  • REG-003BanThe AI default cluster is forbidden. No warm cream paper, no terracotta and purple pairing, no purple to pink hero gradient, no glassmorphism, no large corner radii, no stock illustration, no emoji as icons, no faux testimonial cards, no mouse follow effects, no parallax, no auto playing marquees.
  • REG-004BanGradients and shadows are not decorative. Shadow is allowed only where it carries function, a drawer scrim, a dropdown lift, a modal backdrop.
  • REG-005When a direction risks landing in the AI default cluster, choose the more restrained and more considered option, and say why against this rule.
COL

Colour

Chosen by procedure, never invented.
  • COL-001BanNo colour is assigned by taste. A palette is produced with the colour tooling, the colour checklist, its suggest and theme library, and Chroma Studio, then presented as directions.
  • COL-002Name the roles first, page, surface, raised, text, muted, primary, accent, border, focus, semantic success, warning and danger. Everything references a role token, never a raw hex.
  • COL-003BlockerEvery pair clears its WCAG gate, body text 4.5 to 1, large text and non text 3 to 1, verified in both themes where a project ships light and dark. Contrast is measured with a tool, not by eye.
  • COL-004Colour is never the sole carrier of meaning. Every state that uses colour also uses a second cue, an icon, a word, a shape or an underline (constraints 1.4.1).
  • COL-005Keep the palette to roughly four hue families beyond neutrals. Growing past that is a signal to consolidate, not to add another token.
  • COL-006The chosen palette is exported from the tooling and recorded in the project as tokens. The AI does not later nudge a value without saying so and re checking the gate.
TYP

Typography

  • TYP-001The family is a per project decision, one face for display and one for body, or a single well chosen family. Propose options and let the brief owner react. Do not settle a pairing silently.
  • TYP-002BanNo AI default typefaces. Avoid Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, IBM Plex as a reflex, and JetBrains Mono as a reflex. Choose something considered, or reuse a face the project has already approved.
  • TYP-003BanFonts are self hosted as subsetted woff2 from the project, under a licence that permits it. No Google Fonts, no CDN, enforced by font-src 'self' (constraints TYP-002).
  • TYP-004Set a type ramp and line heights from the brief's density, and hold prose measure near 68 characters, hard capped at 78. Use tabular figures in data and metadata.
  • TYP-005Never introduce a third face, or a weight the chosen faces do not ship, to solve a layout problem. Solve it with size, weight and space within the set.
GRID

Layout & space

  • GRID-001BanSpacing sits on an 8px baseline, every dimension a multiple of 4, edge cases on 4. No arbitrary pixel gaps.
  • GRID-002Use one spacing scale as tokens, from 2 through 96, and apply it by rule, label to input, field to field, section to section. Do not hand pick a one off gap.
  • GRID-003Layouts are responsive and mobile first, usable at 320px with no two dimensional scroll, and legible at 200 percent zoom (constraints 1.4.10, 1.4.4).
  • GRID-004Content width is capped so lines stay readable. The DOM order matches the visual order, so a screen reader and a keyboard follow the page as seen.
SHP

Shape & depth

  • SHP-001BanCorner radius has a 4px ceiling, 0 for dividers and editorial edges, 2px for inputs and buttons, 4px for cards, drawers and modals. Never exceed it.
  • SHP-002Borders come from a small weight set, a hairline default, a fine emphasis, a stronger weight for focus rings only. Structural borders that group meet 3 to 1.
  • SHP-003Elevation is expressed by surface lightness step first, and by a functional shadow only where a layer genuinely floats. Depth is not decoration.
MOT

Motion

  • MOT-001BanMotion signals a state change only. No ambient, looping or attention seeking animation.
  • MOT-002Durations and easing come from a fixed token set, a quick tier for hover and focus, a considered tier for drawers and dropdowns, a deliberate tier for page transitions, with one shared easing curve.
  • MOT-003BlockerHonour prefers-reduced-motion. A colour or state shift replaces the animation, the interface still works (constraints 2.3.3).
CMP

Components

A closed set, each with a full state grammar.
  • CMP-001Build from the defined component set, buttons, inputs and the field grammar, tables, cards, drawer and nav, status pills, notifications, tooltips, popovers, modals. Compose screens from these.
  • CMP-002AskA pattern not in the set is proposed and approved before it is built. It is not invented mid build.
  • CMP-003BlockerEvery interactive component ships its full state grammar, default, hover, focus visible, active, loading, success, error, disabled, plus empty or filled and selected or current. Nothing ships with fewer states.
  • CMP-004Buttons are three variants only, primary once per view, secondary as the default, ghost for tertiary. Destructive is a secondary treatment in the danger colour, never a filled red button.
  • CMP-005Notifications share one visual grammar across persistent and transient, differing only in position and dwell. Do not design a bespoke alert per message.
  • CMP-006Reach for a semantic HTML element before a custom component. Add ARIA only where semantics cannot express the pattern (constraints UI-001).
  • CMP-007BanEvery dynamic anchor side rail, the on this page navigation, uses the one shared rail component and its styling, driven by the shared scroll spy. Do not restyle a rail per page or invent a second rail treatment.
ICN

Icons & imagery

  • ICN-001BanOne icon set at one weight across the whole project, self hosted. No mixing sets, no fill and stroke mixed, no emoji standing in for icons.
  • ICN-002Icons that carry meaning meet 3 to 1 and pair with a label. Decorative icons are marked aria-hidden. Icon only controls carry an accessible name.
  • ICN-003Imagery is chosen from what the brief supplies. Do not invent stock photography or illustration to fill space. Text over an image gets a scrim so it holds its ratio everywhere.
CON

Content & voice

  • CON-001BanNo placeholder or lorem content. Use real content from the brief, and where it is missing, ask for it rather than invent it.
  • CON-002Voice is British English, calm and direct, matched to the project register. Copy is honest, no invented claims, statistics, quotes or endorsements.
  • CON-003Locale is set once, UK dates, 24 hour time, the project currency and timezone, and used consistently.
A11Y

Accessibility

WCAG 2.2 AA, by reference.
  • A11Y-001BlockerEvery surface meets WCAG 2.2 AA. The full requirements live in the constraints A11Y and CMP groups and are treated as design inputs, not a later audit.
  • A11Y-002Every input has a real label, focus is always visible at 3 to 1, targets are at least 24 by 24px, and the whole interface is operable by keyboard with a skip link first.
  • A11Y-003Respect prefers-color-scheme where the project ships more than one theme, prefers-contrast and prefers-reduced-motion. Re run every contrast check in each theme.
CHK

Design sign-off

True before a design is accepted.
  • CHK-001Every colour, type, spacing, radius, motion and component choice traces to an entry here or to a value derived by a procedure here. Nothing is unattributable.
  • CHK-002The palette passes its contrast gates in every theme, verified with a tool.
  • CHK-003No entry in REG-003 or the constraints ban index is present.
  • CHK-004Every interactive component carries its full state grammar and a second non colour cue on each state.
  • CHK-005The engineering gates in the design constraints pass, Observatory, ASVS and WCAG, before delivery.
  • CHK-006Every open design question was asked and answered. Nothing was invented to avoid asking.

v2.0 · 24 September 2026. Refactored into an AI readable design requirements specification. It is read on demand at the start of a project, sits beside the engineering design constraints, and exists to keep an AI inside the boundaries so it derives a design from the brief and these rules rather than inventing its own.