About this Service
Every product reaches a point where the same button exists in nine slightly different versions and nobody knows which is correct. This service builds the system that stops that — a documented component library your team designs and builds from, delivered in two weeks.
Packages
• Core — $1,500 / 2 weeks. Foundations plus 20–25 core components.
• Extended — $2,400 / 3 weeks. 40+ components, full documentation, and a pattern library.
Both tiers include 1 design direction, 2 revision rounds, and a developer handoff file.
What You Get
• Foundations — colour, typography, spacing, elevation and radius, defined as scales rather than one-off values
• Figma Variables properly mapped — tokens that support theming and light/dark from day one, not retrofitted later
• Core components with real variants — buttons, inputs, selects, cards, tables, modals, navigation, badges and alerts, each with hover, active, focus, disabled, error and loading states
• Usage documentation — what each component is for, when not to use it, and the rules that keep it consistent
• Developer handoff notes — naming, spacing and behaviour written for engineers, so the system survives implementation
• Auto-layout throughout — components that resize instead of breaking
Who This Is For
• SaaS teams whose UI has drifted feature by feature
• Products hiring their first or second designer who need a shared foundation
• Engineering teams rebuilding a front end who want tokens that map to code
• Agencies standardising delivery across client projects
What You’ll Need to Provide
Access to your product or existing designs. Your brand colours and fonts if they exist. Which components you actually use — a rough list is fine. Your front-end framework, if there is one, so naming can align with it. Missing some of this? That's fine. Send what you have and I'll fill the gaps.
Not Included
Development and coded component libraries, new screen or feature design, brand identity design, user research, and Storybook or code documentation setup. This is the design-side system — the file your team designs from and your engineers build against.
Process
1. Days 1–3 — Audit. Inventory of what exists, what’s duplicated, and what’s genuinely needed.
2. Days 4–5 — Foundations. Colour, type, spacing and tokens agreed before components are built.
3. Days 6–11 — Components. Built with variants, states and auto-layout.
4. Days 12–14 — Documentation and handoff. Usage rules, handoff notes, two revision rounds.
You’re working directly with the designer — no agency overhead, no account manager, no markup. That’s what keeps this priced the way it is.
My work is followed by 33,000+ people on Dribbble. Book with confidence — your payment sits in escrow and is only released when you’re happy with the project outcome.
