Foundations setup
Colours, typography, spacing and icons chosen together, so you build the right way from the start.
Most contrast and target-size failures are decided before the first screen is drawn — in the palette, the type scale and the spacing grid. Getting these right once saves fixing them on every screen later.
What's covered
- Colour. A full palette built from your chosen brand colour. Tints and shades with contrast pre-calculated, and approved pairings for text, icons and UI components against WCAG 2.2 AA.
- States. Focus, error, success and disabled states that don't rely on colour alone.
- Typography. Legible typefaces, minimum sizes, and a type scale and line heights that hold up at 200% zoom, iOS Dynamic Type and Android font scaling.
- Spacing. A spacing scale that keeps touch targets and the gaps between them big enough by default, in line with WCAG and iOS / Android guidance.
- Icons. An icon style that stays legible at small sizes, and rules for when an icon needs a visible text label.
How it runs
- 01
Kick-off: brand, product and platforms
- 02
I draft the foundations
- 03
Review session with your team
- 04
Final tokens and usage guide
You walk away with
- Foundation tokens: colour, type, spacing, icon rules
- A colour pairing matrix showing which combinations pass
- A short usage guide your designers can follow without second-guessing