DESIGN SYSTEMS & STYLE GUIDES
The discipline behind everything else you ship.
Tokens, components, and documentation — so design decisions get made once, correctly, instead of re-litigated every sprint.
02 —— WHO IT'S FOR
Who it’s for / not for
For you if
- Your product or brand is already in motion, and inconsistency — three button styles, colors drifting, engineers guessing — is starting to cost you speed
- You want your team, or your future self, to stop re-deciding the same design questions every sprint
- You’re too small for the full component library but still want tokens and core components documented properly — that’s exactly what the Style Guide tier is for
Not for you if
- You don’t have a product or brand built yet — start with Website Design & Build or Brand Identity Design first
- You want the components coded, not just designed — this is a design and documentation deliverable, not engineering implementation
- You need one-off marketing pages, not a reusable system
03 —— WHAT'S INCLUDED
What’s included
Included
- An audit of your existing UI or brand assets
- Documented design tokens — color, type, spacing
- Typography and color specification with defined usage rules
- Core component set (Style Guide) or full component library (Design System)
- Figma handoff file
- Usage documentation
- 2 rounds of revisions
- Source files and full ownership on final payment
Not included
- Engineering implementation — a coded component library
- Ongoing maintenance as your product grows (see the Design Care Plan)
- Brand identity work from scratch (pairs with Brand Identity Design if you need it)
04 —— PACKAGES
Packages
Style Guide
10 daysTokens, type, color, and core components — the entry point if you’re too small for a full library.
deposit $800 now, $800 on delivery
- Design tokens
- Core components
- Figma handoff
- 2 revision rounds
Recommended
Design System
4 weeksA full component library with Figma handoff and documentation, built to scale.
deposit $2,300 now, $2,300 on delivery
- Full component library
- Design tokens
- Usage documentation
- Figma handoff
- 2 revision rounds
05 —— HOW THIS RUNS
How this one runs
-
Audit
A look at your existing UI or brand, cataloguing what’s inconsistent and what’s worth keeping.
-
Token & component definition
Colors, type, spacing, and components get defined once, correctly.
-
Documentation
Usage rules written down, so the system survives past the moment it’s handed over.
-
Handoff & walkthrough
The Figma library and docs are yours, with a walkthrough of how to use them.
06 —— SELECTED WORK
Selected work
07 —— DELIVERABLES & FORMATS
Deliverables & formats
- 01 Figma library file — components, variants, and states
- 02 Token reference — color, type, and spacing values, documented for design and development use
- 03 Usage documentation (PDF) — when to use which component, and why
- 04 Component inventory — a full list of what’s built, mapped to where it’s used
08 —— FAQ
FAQ
We’re too small for a whole design system.
That’s exactly what the Style Guide tier is — tokens, type, color, and core components only, not the full library. It’s the entry point, not a scaled-down promise.
Does this include coded components?
No — this is a design and documentation deliverable. Your engineering team implements from the Figma library and the documentation; the production code isn’t written here.
Who maintains this once our product keeps changing?
You do, using the documentation — or the Design Care Plan ($290/month) covers ongoing changes if you’d rather not build that capacity in-house.
We already have a brand identity — does this replace it?
No, it builds on it. A design system documents how your existing brand and UI get used consistently; it doesn’t create a new mark or identity from scratch.