One design system instead of five versions of the same button

A design system is a shared set of interface components and rules for using them, drawn on by the designers and developers of one product or several. It consists of foundations (colours, typography, spacing and design tokens, meaning the named values every component uses), a component library and documentation. With it, the same button is not built five times.

A design system costs from PLN 12,000 net. The amount grows with the scale of the product: it depends on the number of components and on whether the system should cover code as well. We give the exact quote and scope after a short audit of the current state of the interface.

The time needed to create a design system depends on the number of components and on whether the system covers code. We give a date together with the quote, after a short audit of the current state. The system is built in four stages: audit, foundations, components and documentation, and after each one the team decides whether the work continues.

A design system consists of foundations, a component library and documentation. The foundations are colours, typography, spacing and design tokens. The library is ready to use in design files and, if the system covers code, in code as well. The documentation describes when to reach for which component and how to add new ones.

A design system is needed when every new feature looks slightly different and a fix in one place does not reach the others. This applies to products that several people or teams work on, and to companies with several products or brands. For one small product and one designer, a consistent UX/UI design is enough.

A UX/UI design describes a specific product, a component library is a collection of ready-made elements, and a design system combines the library with rules and documentation. Without rules a library drifts apart quickly, because every team adds its own variants. A design system says when to use which component and how to add new ones.

Yes, a design system can cover code as well, not only design files. The coded components are prepared by the Squares team or by the client's team working from our documentation. The scope in code affects the price and the timeline, so the decision is made after the audit of the current state, before the quote.

Yes. At NoHo Group one design system replaced four separate templates: Luca, Camping, The Bird and Cocks & Cows share the same components, each brand has its own visual layer, and a change reaches all the sites at once. In the Daily Effect app the same set of components supports two colour variants and light and dark mode.

After the project ends, the client's team maintains the design system, using the documentation that describes how to add new components. When the team lacks people for this, further development is taken on by UX packages, from PLN 5,000 net for 20 hours, or by the DesignOps service. In the Diagnosis, Design, Development, Optimisation process this is the Optimisation stage.

We need access to the current design files and the product, because the work starts with counting the variants of the same elements. The rules, meaning colours, typography, spacing and tokens, are agreed together with the team. We work remotely, a light NDA is signed before the audit of the current state, and stages can be ordered under a framework agreement.