Composite example, not a single client
What a design system project looks like, start to finish
You want to know how this works before you commit. Fair. This page walks a typical engagement: first contact, audit, foundations, rollout, and handover. Real phases, real milestones, real deliverables. Names and details are blended from several projects so you can see the shape without breaching an NDA.
The call
The situation that triggers the call
A Series B SaaS company, about 80 people, 4 designers and 12 engineers across 3 squads. Web app plus marketing site. Fresh funding, hiring fast, and the UI is fragmenting faster than the team can ship features.
- What hurts
- Three different button styles in production. Tokens live in Figma but not in code. New engineers ask in Slack how to build a form. Design and engineering argue about "done" on every sprint.
- What you want
- One governed system. Figma and the repo in parity. A path new hires can follow without tribal knowledge. Velocity that goes up, not down, as you scale.
- Who's involved
- Head of Design (buyer), VP Engineering (sponsor), one overwhelmed design-system person on the side, squad leads who need to keep shipping.
- Why now
- Post-funding scale. A rebrand landed unevenly. Leadership already believes a system is needed. They tried an internal initiative that stalled at 12 components and no adoption plan.
The ladder
From first message to a system teams actually use
Most clients climb a clear ladder. You can stop after any phase. The audit fee credits toward a build if you keep going.
-
00
First contact
Day 1, free
Health Check, a short email, or a 30-minute consult. I listen more than I pitch. You leave with concrete observations whether or not we work together.
-
01
Design System Audit
Weeks 1 to 2, €2,500 to €4,500
Fixed-scope diagnostic across design, code, and process. You get a prioritized, costed roadmap and a live readout with design and engineering in the room.
-
02
Foundations Sprint
Weeks 3 to 10, €12,000 to €25,000
Tokens, core components, docs starter, and the Figma and code connection. The usable base your squads build on. Milestone payments, visible progress every two weeks.
-
03
Build and rollout
Weeks 11 to 20, €25,000+
Expanded library, documentation site, governance model, and production implementation across more surfaces. Optional. Many teams pause here and run with the foundations.
-
04
Fractional partner or handover
Month 6 onward, €5,000 to €10,000 a month, or exit
Light retainer for governance, new components, and design QA on pull requests. Or a clean handover to your future hire with docs, rituals, and a backlog they can run.
Phase 00
First contact
Low friction by design. You should know within 30 minutes if there's a fit, and what the honest next step is.
- Health Check (2 minutes, no email): instant score and a tailored read
- Free consult (30 minutes): I diagnose, you talk, we qualify together
- Proposal within 24 hours if we proceed: 2 to 3 options, fixed prices
If it's not a fit, I'll say so. Pre-product teams, no engineering buy-in, or "we need cheap screens" are honest nos, with a referral where I can.
What I ask on the call
Team shape (designers, engineers, squads). Where the system lives today. What triggered the conversation. A recent example of inconsistency biting you. What "great" looks like in 6 months. Who else needs to be on board.
What you get before paying
Two or three genuinely useful observations. No semantic token layer, which is why theming is painful. Engineers rebuilding buttons because the Figma and code link is broken. No strings attached.
Phase 01
Design System Audit, weeks 1 to 2
You need a map before you build. The audit answers three questions: where you stand, what inconsistency is costing you, and what to fix first.
- Deliverable
Audit report
Findings ranked by severity with evidence: screenshots, code refs, Figma links.
- Deliverable
Inconsistency inventory
How many button variants, token drift points, parity gaps. Counted, not guessed.
- Deliverable
Prioritized roadmap
Phased plan with effort bands and a cost frame. What ships in 30, 60, and 90 days.
Audit milestones
| When | Milestone | You get |
|---|---|---|
| Day 1 | Kickoff | Access to Figma, the repo, and Storybook. Alignment on scope and contacts in design and engineering. |
| Days 2 to 5 | Deep dive | 40-point checklist across 6 lenses: tokens, components, parity, docs, governance, accessibility. |
| Days 6 to 8 | Analysis | Draft findings, inconsistency inventory, cost-of-inaction estimate. |
| Days 9 to 10 | Readout | Live session with design and engineering. Questions. Recording and the final report. |
Payment: 50% on signing, 50% on readout. Fee credited toward a Foundations Sprint if you start within 60 days.
Phase 02
Foundations Sprint, weeks 3 to 10
This is where design intent starts surviving handoff. Tokens, a governed core component set, docs your team trusts, and React, TypeScript, and Tailwind in parity with Figma.
Scope in this example
- Primitive and semantic tokens (color, spacing, type, radius, elevation)
- About 15 core components: Button, Input, Select, Checkbox, Radio, Switch, Badge, Alert, Card, Modal, Tabs, Table primitives, Tooltip, Avatar, icon system
- States that matter: default, hover, focus, disabled, error, loading where it applies
- Storybook with usage docs and do and don't examples
- Token pipeline: Figma variables into code (Style Dictionary or the equivalent you already run)
- Adoption guide: how squads contribute, review, and ship with the system
Governed, not squad three's button
// one source of truth, Figma and code
export const tokens = {
color: {
action: 'var(--color-action)',
surface: 'var(--color-surface)',
},
spacing: { md: '1rem' },
radius: { md: '0.625rem' },
}
Foundations milestones (8 weeks)
| Week | Milestone | Deliverable | Payment |
|---|---|---|---|
| 3 | Kickoff and token architecture | Token spec, naming conventions, Figma variable structure | 30% deposit |
| 4 to 5 | Core components v1 | Button, Input, form controls, Card, Alert in Figma and code | No payment |
| 6 | Midpoint review | Storybook live, 8 components at parity, squad demo | 30% |
| 7 to 8 | Extended set and docs | Table primitives, Modal, Tabs, usage docs, contribution guide | No payment |
| 9 | Pilot adoption | One squad ships a real feature using only system components | No payment |
| 10 | Handover | Enablement session, backlog for phase 3, recorded walkthrough | 40% final |
A mediocre system that's adopted beats a beautiful one that's ignored. I build for adoption from day one.
Phase 03 / optional
Build and rollout, weeks 11 to 20
Foundations get you moving. Rollout gets you to fuller coverage: more surfaces, a docs site, governance rituals, and the adoption program that makes the system stick.
- Expanded library
- Data table (sort, filter, pagination), date picker, combobox, navigation patterns, empty states, skeleton loaders. Built for your product, not a generic kit.
- Documentation site
- Searchable docs with live examples. An onboarding path for designers and engineers. Migration guides from legacy patterns. View the Nexus UI docs.
- Governance
- Contribution model, RFC template, office hours, design QA on pull requests. A clear owner and an escalation path.
- Rollout
- Squad-by-squad migration plan. A deprecation timeline for one-off components. Metrics: adoption, parity, time to ship a new screen.
Rollout milestones (example)
| Week | Milestone | Outcome |
|---|---|---|
| 11 to 12 | Library expansion | Data table and navigation patterns in Figma and code |
| 13 to 14 | Docs site v1 | Public or internal docs with search and a live Storybook embed |
| 15 to 16 | Squad 2 and 3 migration | Two more squads shipping on system components only |
| 17 to 18 | Marketing site alignment | Shared tokens across the app and marketing surfaces |
| 19 to 20 | Governance live, then handover | RFC process running, owner trained, 90-day backlog documented |
Phase 04
Handover or fractional partner
The goal is a system your team runs. Two clean exits.
- Path A. Clean handover
- You're hiring a design-systems lead. I document rituals, transfer the backlog, pair for 2 to 4 weeks, and step back. You own it.
- Path B. Fractional partner
- About 4 to 8 days a month: governance, new components, design QA on pull requests, roadmap grooming. €5,000 to €10,000 a month. A bridge until your hire starts, or a longer stay if it fits.
Metrics at month 6 in this example
- 1
- governed Button in production, down from 7 or more
- 15+
- core components in Figma and code at parity
- 3/3
- squads shipping features on system components
- ~40%
- faster screen assembly for new engineers (self-reported)
- 0
- Slack threads asking which button to use
- 1
- clear system owner, with a contribution model that runs
These numbers are illustrative for a composite project. Your audit will quantify the starting point and set targets you can actually hit.
Phase 05
Making the system legible to coding agents
If an agent cannot read your token names and component props, it invents a new button. We wire up machine-readable guidelines, Code Connect, and CI checks so Cursor and Claude use the system you already built.
- Machine-readable contract (MCP and guidelines)
- Published component specs, prop names, and anti-patterns that coding agents read before they write a line of JSX.
- Checks in CI, not in Slack
- Lint rules that catch raw hex values, unmapped tokens, and invented props on the pull request, before a human reviewer has to point them out.
The week
What it's like week to week
You work directly with me. A senior design engineer, 16+ years, enterprise-scale experience. Not an account manager. Not a junior team.
- Communication
- Async in Slack or Teams. A weekly 30-minute sync with your sponsor. A Loom when something needs a walkthrough. A reply within one business day.
- Checkpoints
- Reviews every two weeks. Design and engineering on the same call. No big-bang reveal at the end.
- Access I need
- Figma libraries, the repo and Storybook, a staging environment, one design contact and one engineering contact who can unblock quickly.
- Your time
- About 2 to 4 hours a week: reviews, decisions, pilot squad coordination. Less during the audit, more during adoption weeks.
- Tools
- Figma, React, TypeScript, Tailwind, Storybook. Token pipeline via Style Dictionary or your existing setup. I meet you where you are.
- How I use AI
- AI speeds production work: parity checks, docs drafts, repetitive refactors. Judgment, strategy, and adoption stay human. That's why a fixed price works.
Investment summary (planning anchors, not a quote)
Audit €2,500 to €4,500. Foundations €12,000 to €25,000. Rollout €25,000 and up. Fractional €5,000 to €10,000 a month. All net of VAT. Milestone payments on builds. The audit is credited toward follow-on work. Every proposal ties price to the cost of inconsistency we quantify together.
Questions
What prospects usually ask
Is this timeline realistic for our size?
It's calibrated for a product company of about 20 to 200 people, with more than one squad. Smaller teams may move faster. Larger rollouts may need another phase. The audit sets an honest timeline for your context.
Can we skip straight to the Foundations Sprint?
Sometimes, if you've already done serious internal discovery and both design and engineering agree on the problem. Most teams benefit from the audit first. It de-risks the build and gives leadership a shared picture.
What if we only want the audit?
That's a valid outcome. You get a roadmap your team can execute internally. No pressure to continue. The audit is designed to stand alone.
Do you work with our existing stack?
Yes. React, TypeScript, and Tailwind are my default production stack, and the principles transfer. Tokens, components, governance, and adoption matter more than the framework name.
How is this different from hiring an agency?
Agencies rarely own production code or adoption. I live in the seam between Figma and the repo. One senior person, direct access, built for a system your team actually uses.
Next step
Want to map this to your product?
Take the free Health Check, or get a 30-minute consult. Tell me the team shape and what's hurting. I'll give you honest next steps: an audit, a smaller first step, or not yet.