Design System
A component library and the documentation and rollout that make anyone actually use it.
5 categories19 tasks242h - 484h estimated
Use this templateFree to start · No credit card
A design system is only half component library. The other half - documentation, governance and rollout - is what makes anyone use it, and it is the half that vanishes from most quotes. This template prices both in 19 tasks across Audit & Foundations, Component Design, Implementation, Documentation and Rollout.
Systems fail in adoption, not construction. An audit of what already exists, tokens the whole team agrees on, usage documentation with real examples, and the migration of at least one live product are the tasks that decide whether the system becomes infrastructure or shelfware. They are all here as priced line items, so the client sees that a component without documentation is half a deliverable.
Start from this breakdown, then make it yours: one click copies every category and task into your workspace, where designers and engineers can edit the scope and hours in the same document at the same time - which is, not coincidentally, how a design system should be built too.
What's in this estimate
Audit & Foundations | Estimated time (h) |
|---|---|
Interface audit of existing products Every button, input and shade currently in production. Usually a shock. | 8.0 - 16.0 |
Colour, type and spacing scales The foundations everything else is derived from. | 8.0 - 16.0 |
Accessibility and contrast rules Contrast, focus, motion and the target level agreed in writing. | 6.0 - 12.0 |
Icon set A consistent icon set at the sizes the products use. | 8.0 - 20.0 |
| Hours | 30.0 - 64.0 |
Component Design | Estimated time (h) |
|---|---|
Core components Buttons, inputs, selects, checkboxes and every state each one has. | 20.0 - 40.0 |
Navigation and layout components Headers, sidebars, tabs, breadcrumbs and the grid. | 12.0 - 24.0 |
Feedback components Alerts, toasts, modals, empty states and loading treatments. | 12.0 - 20.0 |
Data display components Tables, lists, cards and pagination. | 12.0 - 24.0 |
| Hours | 56.0 - 108.0 |
Implementation | Estimated time (h) |
|---|---|
Library scaffolding and build Package setup, build output, versioning and publishing. | 10.0 - 20.0 |
Design tokens and theming Tokens shared between design and code, and the theming layer over them. | 10.0 - 20.0 |
Component implementation Building the components properly, accessibility included rather than added. | 60.0 - 120.0 |
Dark mode or theme variants A second theme, which is where the token work proves itself. | 12.0 - 24.0 |
Unit and visual regression tests The safety net that lets anyone change a shared component. | 16.0 - 32.0 |
| Hours | 108.0 - 216.0 |
Documentation | Estimated time (h) |
|---|---|
Storybook setup Storybook, deployed somewhere the whole team can reach it. | 8.0 - 16.0 |
Usage guidelines per component When to use each component and when not to. The part that gets skipped. | 12.0 - 24.0 |
Contribution guide How a designer or engineer proposes and lands a change. | 4.0 - 8.0 |
| Hours | 24.0 - 48.0 |
Rollout | Estimated time (h) |
|---|---|
Pilot migration of one product area Proving the system against real screens before rolling it wider. | 16.0 - 32.0 |
Team workshop and handover Getting the team using it, which is the only measure that matters. | 4.0 - 8.0 |
Versioning and release process Semver policy, changelog and how breaking changes are communicated. | 4.0 - 8.0 |
| Hours | 24.0 - 48.0 |
19
242.0 - 484.0
Make it your estimate
One click copies all 19 tasks into your workspace - then edit the hours with your team to fit the project in front of you.
Use this template