Write us on Telegram@Odilient
Design & Delivery

Design Systems Are for People Who Ship Twice

Abdugaffor Odil May 30, 2026 9 min read

A design system is overhead until you have a second surface to build. Here is the point at which it starts paying, and what to buy before you reach it.

A design system is a set of reusable decisions: the colors, the type scale, the spacing, the buttons, the form fields, the rules for how they combine. Built once, used everywhere.

It is also, for a large number of the businesses that are sold one, a waste of money.

A design system is overhead until you have a second surface to build. Its entire economic argument is amortization — you pay once and draw down the cost across many screens, over years, usually across more than one product. If you have one eight-page website and no plans, you have nothing to amortize against, and the money buys you a tidier process rather than a better result.

This article is about where the line actually falls, because both errors are expensive. Buying a design system too early spends budget on infrastructure for a building you are not going to build. Buying it too late means paying to unpick inconsistency that has already spread into the code.

What you are actually buying

The phrase covers four things of very different cost, and people are often sold the fourth when they needed the first.

Design tokens. The raw values, named: brand blue, the type scale, the spacing steps, the border radii, the shadow levels. A short document or a file of variables. Cheap — a few hours — and almost always worth it, even for one site.

A component inventory. Buttons, inputs, cards, tables, alerts, each with its states: default, hover, focus, disabled, loading, error. Moderate cost, and the point at which "consistent" stops being a matter of the designer's memory.

Usage rules. The part everyone skips and the part that actually prevents drift. Not what a button looks like but when to use the primary one, how many are allowed on a screen, what a card means, which things are allowed to move on hover. Without this you get a component library that is used inconsistently, which looks exactly like not having one.

A living library with documentation. Components implemented in code, published, versioned, documented, maintained. This is a product with its own upkeep, and it is the one that only makes sense at genuine scale.

The mistake is treating these as a package. Almost every project benefits from the first. Very few need the fourth.

The honest test: do you ship twice?

Here are the conditions under which a system pays for itself. You need at least two.

More than one surface. A website and an admin panel. A web app and a mobile app. A marketing site and a customer portal. Two surfaces is where shared decisions start compounding instead of just being written down.

More than one person building. The moment two people make interface decisions independently, you are either paying for a system or paying for the divergence. There is no third option; the divergence is just an invoice that arrives later and is harder to read.

A product that keeps growing. Screens added quarterly for years. Each new screen is cheap if the pieces exist and a fresh design exercise if they do not.

A long-lived relationship with the interface. If the whole thing gets redesigned in eighteen months anyway, durability is not worth paying for.

If none of those are true — one site, one designer, a handful of pages, a redesign due when the brand changes — buy the tokens, skip the rest, and spend the money on the words on the page instead. That advice costs us the larger invoice, and we would rather give it than sell you infrastructure you will not use.

What it looks like when it pays

Three of our own builds sit on different sides of this line, which is the clearest way to show it.

BiliMind pays for it. The same Nuxt codebase runs on the web and ships as Capacitor Android and iOS builds. One interface, three places it appears. Every component built once is a component built three times, and every inconsistency avoided is avoided in triplicate. There is no version of that project where separate per-platform design is the cheaper answer.

Bronjoy pays for it, harder. A pnpm monorepo with two Nuxt applications, plus a Filament admin, plus a Telegram Mini App, plus bots — and all of it in three languages, Russian, Uzbek and English. Multilingual is the multiplier people underestimate: every component has to survive text that is 30% longer in one language than another, and every label has to come from one dictionary rather than being written where it is used. Without shared definitions, a button that fits in English and breaks in Russian is not one bug; it is one bug per place the button appears.

WAYU Malaysia is the interesting middle case. A multilingual site in Uzbek, Malay, English and Russian, with a Payload CMS behind it, built in two weeks. At that timeline, a full component library with documentation would have consumed the schedule. What it needed was tokens and a disciplined set of layout rules — enough shared decision-making that four languages and fifteen CMS collections stayed coherent, and not a gram more.

That third example is the one to hold on to. The question is never "system or no system". It is how much system, for this project, at this size.

The cheap 80%: buy the tokens

If you take one thing from this, take this. For almost any project, small ones included, insist on a written set of design tokens at the start. It costs hours, not weeks.

Color. Not "blue" — the exact values, named by role rather than by appearance. surface, text-primary, text-muted, border, accent, and the semantic set: success, warning, danger. Naming by role is what lets the same system produce a light and a dark theme without redesigning anything.

Type scale. A fixed set of sizes with their weights and line heights, and the rule that nothing uses a size outside the set. This single constraint eliminates the most common form of visual drift, which is fourteen slightly different heading sizes accumulated over two years.

Spacing scale. A small set of steps — 4, 8, 12, 16, 24, 32, 48, 64 — and the rule that all gaps come from it.

Radii, borders, shadows. Two or three of each, used by meaning: a shadow that means "floating above", a border that means "separate object".

That document is the difference between a site that can be extended by someone else and one that has to be reverse-engineered first. It goes in the handover, and it is the reason a new page added in year three still looks like it belongs.

Where design systems go wrong

Three failure modes, all common, all expensive.

The system that nobody uses. Built, documented, published, ignored — because it was made by a design team without the people who build screens daily. A system is adopted or it is decoration.

The system with no usage rules. Every component exists and nothing says when to use which. Two designers produce two incompatible screens from the same library and both are technically compliant.

The system that cannot say no. Every exception gets added as a new variant until there are eleven button styles and choosing one is harder than designing one. A system's value is in what it forbids; a library that absorbs every request is a costume for inconsistency.

There is a fourth, subtler one worth naming in 2026: a system that makes everything look competent and identical. Polish is no longer scarce, and a site assembled from tasteful defaults now signals nothing at all. We made that argument separately in everything looks the same now, and it matters here because a design system solves consistency, which is a real problem, and does nothing whatever for distinctiveness, which is a different one.

What to ask for, by project size

Your situationWhat to buyRoughly
One site, under 12 pagesDesign tokens, writtenHours
Site plus admin panelTokens plus component inventoryDays
Product with a roadmapTokens, components, usage rules1–2 weeks
Multiple surfaces, multiple buildersAll of it, maintainedOngoing

Our digital product design service starts at $299 and runs one to three weeks, and the deliverables list names UI kit and design system, design tokens and handoff, and accessibility built in. For a small site, most of that budget should go to research and interface, and the token document takes an afternoon. For a platform, the ratio inverts.

The thing to avoid is paying for the ratio that suits the supplier rather than the project.

Tell us what you need. You get a fixed price and a delivery date back — free, and with no obligation to proceed.

Frequently asked questions

Can I buy an off-the-shelf design system instead?

Yes, and for internal tools it is often the right answer — an established component library gets you accessible, tested components immediately. The trade-off is that your product looks like every other product using it. For an admin panel nobody outside your company sees, that is a fine trade. For your public storefront, it is the thing you were trying to avoid.

Does a design system make the build cheaper?

Not the first build. It makes the second, third and tenth screens cheaper, and it makes changes cheaper — a color or spacing change applied once rather than hunted down in forty places. If there is no second screen and no change, there is no saving.

Who should own it after handover?

You should, in editable form: the Figma file with components intact and the token definitions in the code. Ownership of the definitions is what matters. If the system lives only inside your supplier's tooling, you have rented consistency rather than bought it.

Our site is already inconsistent. Is it too late?

No, and the cheapest entry point is an audit rather than a rebuild. Collect every color, size and spacing value actually in use — the list is usually shocking and self-evidently wrong — then define the small set that should have existed and migrate toward it as pages get touched. A system adopted gradually is worth far more than one introduced with a rewrite.

Does accessibility come with it?

Only if it is built in deliberately. A design system is an excellent place to solve accessibility once — focus states, contrast ratios, touch target sizes, form labeling — because solving it in the component means every use of the component inherits it. That is a genuine argument for having one, and we put it alongside the legal case for accessibility rather than treating it as a matter of taste.

Let's Talk

Reading about it is the easy part

If this is a problem you're actually trying to solve, tell us about it. We'll tell you what we'd do, what it costs and how long it takes.

Free consultation No commitment Fast reply