Design Systems
A design system is code that happens to describe a brand. Delivered as tokens and components in the repository rather than a file someone has to translate — because the translation step is where systems decay.
A token layer and core component set is a 2–4 week sprint.
A design system is the shared vocabulary a product is built from: colour, type, spacing, and motion defined once as tokens, and the components that consume them. It is only real if it lives in the codebase. A library that exists only in a design tool describes intentions; a library that ships describes the product.
- COLOUR TOKENS
- 4
- TYPEFACES
- 1
- FROM
- €5,000
- DELIVERED IN
- CODE
HOW IT RUNS
WEEK 1 → WEEK 4- WEEK 1
Audit
Every colour, size, and spacing value currently in the codebase, counted. The count is usually the whole argument.
- WEEK 2
Token layer
One source of truth, generated into the format the codebase already uses rather than a second one to maintain beside it.
- WEEK 3
Core components
The twenty or so components that cover most screens, built against the tokens and nothing else.
- WEEK 4
Adoption
The highest-traffic screens migrated, and a CI check so drift is caught on the branch instead of discovered a quarter later.
HOW IT IS BUILT
- Tokens as the source of truth
- Colour, type, spacing, and motion defined once as CSS custom properties and consumed everywhere. When a token moves, every surface moves with it — including generated assets like Open Graph images.
- Components, not screenshots
- The deliverable is the working component, keyboard-accessible and responsive, with its states already handled. A static screen is a picture of a decision, not the decision itself.
- Constraints that hold under pressure
- A system is only real if it survives the deadline. Fewer tokens, held strictly, beat a large palette that gets exceptions carved into it during the first hard sprint.
- Accessibility built in, not audited later
- Focus states, contrast, reduced-motion behaviour, and keyboard paths are part of each component's definition. Retrofitting them across a shipped library costs several times what including them costs.
SHIPPED
Not a capability list — software in market that this work produced.
- MARKDOWN EDITORAMPERSANDA native editor with block-based editing, a saved version of every change, and an AI draft that stays in the margin until asked for. Exports to clean PDF and Word; the source stays plain .md you can still open in twenty years.Tauri · Rust · ReactCASE STUDY
- CALCULATORCALIA hand-written expression engine — lexer, parser, evaluator, no math library — that reads labels, currencies, and units out of ordinary sentences. Live per-line totals, thirty-plus real-time rates, portable .cal files, one engine across Mac, web, and CLI.Tauri · Rust · TypeScriptCASE STUDY
WHAT YOU GET
- Token layer in code — colour, type, spacing, motion, elevation
- Core component library with states, focus, and reduced-motion handled
- Usage documentation written against the code, not a separate spec
- Brand application guidance for surfaces the components do not cover
- Generated assets (icons, OG images) driven from the same tokens
- Tailwind v4
- CSS custom properties
- React
- TypeScript
- Radix primitives
THE ARTIFACT
IS THIS THE RIGHT FIT
- More than one person is building interface and they are diverging
- The brand needs to hold across web, native, and generated assets
- You keep rebuilding the same component slightly differently
- A single-page product where one stylesheet is genuinely sufficient
- A team wanting a design-tool library with no code deliverable
QUESTIONS
Do you deliver in Figma or in code?
In code, as tokens and working components in your repository. Design tool files can accompany it, but the code is the source of truth — the translation step between the two is where systems decay.
Can you work with our existing components?
Usually yes. Most engagements start by auditing what already exists, extracting the tokens implicit in it, and consolidating the three slightly different buttons before adding anything new.
How few tokens is too few?
Fewer than you expect. This site runs on four colour tokens and one typeface. A system that is small enough to hold in your head is one that survives a deadline without exceptions being carved into it.
Got something in this shape?
A scoped sprint starts at €5,000 and runs two to four weeks. Every engagement is priced before work starts.