Design System

What is this document?

The Design System turns the Design Constitution into tokens and components: colour tokens with contrast ratios, the type scale, spacing scale, radii and the states of every core component.

Code reads tokens — never raw values — so a brand change is a one-line edit.

Why does it matter?

• Without a design system, AI tools invent a slightly different colour on every screen.
• Buttons stay one size and one style, not five.
• Contrast is verified at the token level.

What's inside?

• Tokens — Colour, type, spacing and radius tokens.
• Components — Buttons, inputs, cards, modals and their states.
• Accessibility — Contrast ratios and focus styles.

How CREAH generates it

CREAH builds this document from your Stage 0 answers and interview. Questions that shape it include:

• Is there an existing brand guide to follow?
• Which corner style suits the brand?
• Light, dark or both?

Example excerpt

## Colour Tokens
--brand-primary     (from your design configuration)
--surface           page background
--text-primary      headings and body
Contrast: --text-primary on --surface ≥ 7:1  ✅ WCAG AAA

## Type Scale
--text-base: 16px / 1.5   --text-lg: 20px / 1.4   --text-xl: 24px / 1.3