UX/UI Design Guidelines

Guidelines your team, and its AI tools, can build from.

Written rules for how a product looks and behaves, usable by designers, developers and AI tools.

UX/UI guidelines are the written decisions about how a product looks and behaves: type, colour, spacing, components, and when to use each one. Without them, every designer and developer decides again, and the same button ends up built five slightly different ways.

We build guidelines as a design system: in Figma for designers, mapped to code for developers. The Design Systems page covers the full approach.

What’s in them

Three layers

Each layer is written so the next person can use it without asking.

Foundations

Colour, type scale, spacing, grid and motion timing, stored as named design tokens, so “primary” means the same thing in Figma and in code.

Components

Buttons, forms, navigation, tables and charts, with every size and state defined, including disabled, loading and error. Colour contrast is checked for accessibility.

Patterns and guidance

How components combine into pages and flows, with accessibility requirements, writing guidance and when to choose one pattern over another.

Why it matters more now

Written for AI tools as well as people

AI coding tools now write a growing share of front-end code. Where the guidelines say nothing, they make it up: an off-shade of the brand colour, a sixth button style, margins that wander. So we write guidelines models can follow, with tokens in machine-readable formats, components documented as instructions, and project context files that point AI tools at the system.

We start by auditing what already exists, since organizations often have guidelines in pieces across files and people’s heads. And we plan for an owner and a simple way to propose changes, because guidelines nobody looks after drift back into one-offs.