Ukraine’s internet provider map in Diia
By Maryna Protsevska4 min read
Groundhog Day: how a design system saves projects from endless revisions
September 1, 2026
Sound familiar?
It’s a classic trap for growing digital products: every new feature takes so long to agree on and build that it feels like launching a whole new startup from scratch. Without a design system, even the smallest update turns into Groundhog Day.
Designers redraw every button by hand across dozens of mockups, while developers write the same styles from scratch again and again. All it takes is one person missing a small detail — and the project spirals into an endless loop of revisions and iterations.
The result: a burned-out team, a chaotic interface
and sprawling, tangled code that keeps getting more expensive to maintain.
Design system
A single “rulebook” for managers, designers and developers — an interactive kit for building your product
What’s inside a design system?
- 1
Styles — the colors, fonts, spacing and tone of voice of the product
- 2
UI Kit — ready-made design components
- 3
UI Library — ready-made components in code
- 4
Documentation — agreed rules and guidelines for using every element
The benefits of a design system
- 30–40% budget savings on development time
- Higher trust in the service
- A consistent, cohesive look
- Faster, easier changes
- Easier adoption of the WCAG accessibility standard
- An intuitive interface
- A recognizable, documented style
- Better alignment between teams
- Faster onboarding for new specialists
Why is building without a design system so expensive?
Up to 60% of a developer’s and a designer’s time often goes to pure routine: building the same buttons, input fields, cards and pop-ups over and over, page after page.
A design system automates that routine. Working with components starts to feel like assembling a construction kit — and that cuts time to market (how long it takes to ship a product or a new feature) by 30–40%.
What makes a design system work?
What sets a design system apart from a simple collection of elements is that it’s a precise engineering kit where everything is connected.
Ions and atoms are the fundamental, indivisible particles of an interface. On their own they carry little functional value, but everything else is built on them.
Molecules are simple working interface elements that perform a specific function.
Organisms are combinations of molecules and atoms.
Templates are the reusable “skeleton” of a page.
Pages are the final interfaces assembled from these elements
- 1/ ions
- 2/ atoms
- 3/ molecules
- 4/ organisms
- 5/ templates
- 6/ pages
Design system structure, illustrated with the atomic design of the Diia Portal
Documentation
Documentation is the set of guidelines and rules that helps designers and developers work in one interface style. The more detailed and clear it is, the more cohesive and well thought out the product will look.
Documentation should cover:
- Component parts (ions, atoms). Icons, text, buttons, etc.;
- Technical parameters (tokens). Exact sizes, spacing, corner radii, font styles, colors;
- Component states. Functional and visual;
- Scalability and behavior. How the component behaves in different situations and interacts with the user;
- Usage rules and context. How the component should — and shouldn’t — be used;
- Copywriting. Rules and recommendations for writing interface text;
- Accessibility (WCAG). Which WCAG version applies and which criteria need attention;
- Connection to code. How designers and developers work together;
Example of tokens, molecules and component usage rules from the GOV.UK design system
User trust
Trust in a product matters — especially when it handles sensitive user data, as in GovTech, MedTech and FinTech: banking details, medical records or other sensitive personal data. Users may be afraid of making a mistake or, when they lack information, worry that something has happened to their data.
When the design is cohesive and recognizable, and the elements are intuitive to use, users feel that the system is safe and predictable. This matters even more for less tech-savvy users.
How does a design system build an emotional connection with a service?
A design system governs not only how a service looks, but also how it talks to people. Clear hints, thorough instructions and human-centered error messages are as much a part of the system as button colors. When every piece of interface text follows one standard (no bureaucratese or piles of dry technical terms), users feel confident and in control.
A design system also makes it easier to keep one style and product philosophy — especially when several teams or contractors work on the product. And when it’s time to modernize the service, the design system makes that stage easier and more coherent.
Design systems and inclusivity
WCAG
The international standard for digital accessibility
This standard defines how to make websites and apps usable for people with disabilities (visual, hearing, motor or cognitive impairments) — and it improves the user experience for everyone.
Governments and large businesses can’t ignore people with disabilities, especially during the war, as the number of veterans with disabilities keeps growing.
Following WCAG means accounting for accessibility in both design and development, so that people with different impairments can comfortably read pages and easily use screen readers.
WCAG is already mandatory for all digital services in Europe, and Ukraine is introducing it too. It will soon be a prerequisite for launching public services — and, eventually, every service in Ukraine.
Building WCAG requirements into your design system is a cost-effective way to make your product accessible to every user while spending fewer resources
Take this article with you
Save it as a handy PDF
to reread later or share with your team
to reread later or share with your team
What does it take to implement a design system?
1
Requirements and goals
Defining goals. Auditing and analyzing existing products
2
Research
Analyzing competitors and other design systems
Design system
3
Building UI components
Developing core components. Defining styles
4
Documentation
Writing detailed documentation for every component. Defining a system of semantic classes
5
Building SPA components
Developing each component in React/Angular/Vue
6
Testing and optimization
Checking responsiveness across devices. Optimizing performance
7
Rollout and support
Rolling the design system out across the project. Fixing bugs
Turn ideas
and complex challenges
into working solutions
Discuss your product’s challenges directly
with our team of experts.
Leave your contact details and a short question — we’ll get back to you with concrete next steps.
More projects and articles
Digital solutions already working for people. Every case is a story of turning complex processes into simple, clear services
Coming soon
Narcotic drug licensing in Diia
Coming soon
Building the “Heroes of the Districts” crowdfunding platform
Coming soon
Services for mothers in Diia
Coming soon
EcoSystem: greenhouse gas emissions control
Coming soon
NGO registration in Diia
Coming soon
Services for everyone: why WCAG is becoming mandatory for Ukrainian digital services
Coming soon
Preschool education licensing in Diia
Coming soon
Marriage application in Diia