SKP
Get in touch

SERVICE 05

DESIGN SYSTEMS.

Component libraries that people actually use instead of working around. Usually the difference is governance and documentation rather than the components themselves.

Typical
6 — 12 weeks
Inputs
Existing product
Output
Library + docs
Success
Adoption, not coverage
Chrome cube dissolving into angular fragments, a design system coming apart into its component parts
Concept render — a system coming apart, and back together

//Why systems get abandoned#

Almost never because the components are badly built. They get abandoned because using one is harder than writing something bespoke. The prop interface doesn't cover a needed variant, so someone copies the file and edits it. The documentation shows the happy path and nothing else. Nobody knows who decides whether a new variant is legitimate, so the safest move is to avoid the system entirely.

//How I build them#

Backwards from real screens. I take the six or eight most important views in the existing product and extract only what they genuinely share, which is always less than the inventory audit suggests. A system built from three real screens and grown on demand beats one built from forty hypothetical components, because every part of it has already proven it's needed.

Tokens come first and stay boring: spacing, type scale, colour with contrast ratios recorded, motion durations and easings as named values. Then components, each documented with its variants, its states, its keyboard behaviour, and — most usefully — a short note on when not to use it and what to reach for instead.

//What you get#

A library, a documentation site that covers failure states rather than just the happy path, and a written governance process: how a variant gets proposed, who approves it, how a breaking change is communicated. The measure of success is adoption rate six months later, not how many components exist.

Fig. 16 — tokens, component api, documentation