One source of truth. Consistent UI at any scale.
A growing product without a design system accumulates inconsistency at a rate that eventually makes every new feature slower and worse than the last. The button in the marketing site doesn't match the button in the app. The spacing rules exist in someone's head. New designers copy patterns from wherever looks right. By the time the inconsistency is obvious to everyone, it's embedded in thousands of screens. We build design systems that become the single source of truth for your entire product surface — components, tokens, documentation, and the governance processes that keep it coherent as your team and product grow.
What's included
- Token-based design system (colour, typography, spacing, radius)
- Full component library in Figma
- Component documentation with usage rules
- Storybook implementation for developers
- Accessibility built into every component
- Governance process for system evolution
How we deliver
- 1Design system audit (existing products)
- 2Token architecture & naming conventions
- 3Figma component library with variants
- 4Usage documentation & contribution guide
- 5Storybook component library
- 6Design system governance process
Technologies we use
- Figma
- Figma Variables
- Storybook
- Zeroheight
- Chromatic
- Tailwind CSS
- Radix UI
- shadcn/ui
Why Origin for Design System Development
Token architecture first, components second
A component library without a token layer breaks the moment you change a brand colour. We build the primitive and semantic token layer before a single component is drawn.
Figma and code in sync — not two separate realities
Storybook and Chromatic keep the coded components honest against the Figma source. A design change triggers a visual regression check. Drift is caught before it ships.
Accessibility built into every component
WCAG 2.2 AA contrast ratios, focus states, keyboard navigation, and ARIA attributes are part of the component spec — not a compliance retrofit six months later.
Industries we serve
“We had 14 different button styles across our product. Origin built us a design system and Storybook in eight weeks. New features now take half the design time and look consistent on the first try.”
Frequently asked questions
- When does a company actually need a design system?
- When inconsistency is costing you time or quality. Signals: new screens look slightly different from old ones, designers are copying components from wherever looks right, developers are rebuilding the same component in slightly different ways across the codebase, or a brand refresh requires updating the same button colour in forty places. If you're experiencing any of these, the cost of not having a system now outweighs the cost of building one.
- What's the difference between a design system and a component library?
- A component library is a collection of UI components. A design system is a component library plus a token layer (the named values for colours, spacing, typography, and radii that components reference), usage guidelines that explain when and how to use each component, and a governance process for how the system evolves. The library is the output; the system is the infrastructure. We build systems, not just libraries.
- How do you handle theming and dark mode?
- We architect the token layer with semantic tokens that sit between primitive values and component usage. A primitive token is `--blue-500: #0095da`. A semantic token is `--color-primary: var(--blue-500)`. Components reference semantic tokens. Switching themes means reassigning semantic tokens — a single change propagates across the entire product. We implement this in both Figma Variables and the code token layer simultaneously.
- How do the Figma components stay in sync with the coded components?
- Through Storybook as the reference implementation. Every component in Figma has a corresponding Storybook story that designers and developers can reference. We use Chromatic for visual regression testing — if a code change breaks a component's appearance, it's caught before merge. The source of truth for behaviour is Storybook; the source of truth for visual design is Figma. Both are kept in sync through design review in PRs.
- Can you build a design system on top of our existing product?
- Yes — a retrofit design system is harder than building from scratch, but it's the more common situation. We start with an audit: catalogue every unique component, colour, and text style currently in use, identify the intended pattern vs. the actual pattern, and find the gaps. We then define the system incrementally — starting with the most-used components and the token layer — and migrate screens to the system over time rather than doing a big-bang replacement.