# Design systems

Choie builds design systems for web and mobile products: the tokens, components, and rules that keep a product consistent as it grows. Because the same people design and write the code, the system exists in both places from the first week. It is part of a build from $19,000 or of ongoing work from $9,900 a month.

Also called: Design system development, UI component library, Design tokens.

Bought through: Ship it (from $19,000, four to six weeks); Grow it (from $9,900 / month, month to month). Prices are in US dollars, with no tax added on top.

## Who it is for

Teams whose product has started to look and behave differently from one screen to the next, and teams about to build who want to start consistent.

- **Teams building a first version** who want tokens and components in place from day one, so new screens are put together from parts that already exist.
- **Teams with a live product** where every new screen is designed from scratch and the interface has drifted.
- **Products with more than one surface**, such as a web app and a mobile app, that should feel like one product.
- **Teams in larger companies** that need a system for one product line, built in their codebase with their engineers.

## The problems it solves

- **Twelve versions of the same button.** Without shared components, each feature reinvents the basics and the interface drifts. A system gives every screen the same parts.
- **A design file that does not match the code.** A system drawn only in a design tool falls out of step with the product. Here the components are built in code by the people who designed them, so the two stay in step.
- **Every new screen costs as much as the first.** When nothing can be reused, nothing gets cheaper. With a system in place, new work is mostly assembly.
- **Accessibility added late.** Contrast, focus states, and text sizes are cheapest to get right once, in the components, rather than screen by screen.

## What you get

- Design tokens for color, type, spacing, radius, and motion, named once and used in both design and code.
- The components your product uses, built in code with the states they need, such as hover, focus, disabled, loading, and error.
- Plain rules for using them: which component fits which job, and what to avoid.
- The product screens in the scope, built from the system.
- The designs and the source code of the system, yours once each deliverable is paid for.

Each case study on the [work page](https://www.choie.co/work) ends with the visual system behind the product, which shows the kind of decisions a system holds.

## How it runs

A design system is not a separate project that runs before the product. It is built with the product, from the screens that need it.

1. **Start from real screens.** The first critical workflow shows which components the product actually needs. Nothing is built in the abstract.
2. **Set tokens and components once.** They go into the design and into the code at the same time, from the first week.
3. **Grow it with the product.** Every new screen either uses an existing component or adds one on purpose.
4. **Check it in use.** The live link every Friday shows the system working inside the real product, not on a poster.

## Price and timeline

A design system is priced as part of an engagement, not on a separate price list. Prices are in US dollars, with no tax added on top.

- **Inside a build (Ship it).** From $19,000 for four to six weeks. The system is set up for the screens in the scope and used across the whole release.
- **For a live product (Grow it).** From $9,900 a month, month to month. Setting up or cleaning up a system can be the one priority for a month or more.

Teams in larger companies can buy it as a [company project](https://www.choie.co/enterprise), scoped in writing from $19,000. The written scope says what the system covers before work starts.

## When not to hire Choie for this

- **You need a design systems team, not a system.** Running governance and contributions across many product teams for years needs a dedicated in-house team. Choie can set up the system for one product line and hand it to that team.
- **The goal is a component library for its own sake.** A system pays off when it serves a product people use. If there is no product to apply it to yet, start with the product.
- **The product is about to be rebuilt.** Put the system into the rebuild instead of retrofitting code that is about to be replaced.

## Common questions

### What is the difference between a design system and a style guide?

A style guide describes how things should look. A design system also includes the working components in code, with their states and the rules for using them, so the product is built from it rather than checked against it.

### Does an MVP need a design system?

A small one, yes. Tokens and the few components the first workflow needs cost little to set up early and save rework later. A full system that covers every case can wait until the product grows.

### Can you add a design system to a product that is already live?

Yes, usually step by step: tokens first, then the most used components, replacing old ones as screens are touched. That suits a monthly engagement, where it can be the one priority for a while.

### Who owns the design system?

You do, once the fees for each deliverable are paid. That includes the designs and the component code. Third-party fonts and libraries keep their own licenses.

Guides: [Who owns the code when you hire a studio?](https://www.choie.co/guides/who-owns-the-code.md), [How we use AI to build products](https://www.choie.co/guides/ai-accelerated-development.md).

Glossary: [Design system](https://www.choie.co/glossary/design-system.md), [UI design](https://www.choie.co/glossary/ui-design.md), [Design handoff](https://www.choie.co/glossary/design-handoff.md), [Product design](https://www.choie.co/glossary/product-design.md).

Other services: [Product design and UX](https://www.choie.co/services/product-design.md), [Web application development](https://www.choie.co/services/web-app-development.md), [iOS and Android app development](https://www.choie.co/services/mobile-app-development.md), [MVP development](https://www.choie.co/services/mvp-development.md), [One-week coded prototype](https://www.choie.co/services/coded-prototype.md), [Launch sites and measurement](https://www.choie.co/services/launch-sites.md).

HTML: https://www.choie.co/services/design-systems