Services / Design systems / Components
Design As a System.
Tokens / Components / Governance / Code
The same rules in the design file and in the code.
01 / The principleWhy bother
Fewer decisions / made twice
Consistency
without sameness.
A design system is the list of decisions you don’t want to make again, like type sizes, spacing, how a button behaves and what an error looks like. Written down in code, it lets a site grow without starting to look like three different sites.
02 / FoundationsOne source of truth
Defined once, used everywhere.
The actual DECO CODE design language
The tokens fix what never changes. Components carry the behaviour. Page templates give each kind of content its own layout, and none of them can switch accessibility off.
Built to Stand Apart.
03 / Component libraryFive examples
Nothing invented twice.
01 / Typography
A type scale.
Sizes, letter spacing and line length, set once and used by every page.
02 / The O-mark
A point of focus.
Marks a step, a selected item or a milestone. Never decoration.
03 / Inputs
Labelled inputs.
A label that stays visible, feedback in words, and a focus ring you can see.
04 / Data
Made readable.
Tables and filters that still work on a phone.
05 / States
Every outcome.
Loading, empty, error, success and disabled.
04 / From Figma to productionDocumentation / Tokens / Testing
Tokens and foundations.
One versioned file for colour, spacing, type and breakpoints.
Components and patterns.
Components with the right HTML and every interaction state designed.
Documentation and QA.
Examples, the awkward cases, accessibility notes and screenshot tests.
Maintain and evolve.
Someone deciding what gets added, so the system doesn’t sprawl.
Design / Code / Beyond
Built to Evolve.
The point is that the site still looks like itself after the fiftieth new page.
Start a project