Statul online a personal vision
100%
RO EN HU

Chapter 3 of 8 · What a design system is~5 minutes

A common set of building blocks, rules and explanations, so that all of the state’s services work the same way

Think of road signs

When you drive in a town you have never been to, you don’t learn again what “Stop” means. The sign has the same shape and the same colour, and stands in the same place as everywhere else. Each town keeps its own name on the sign at the entrance. But the rules are shared.

A design system does the same for websites and apps. The “Submit” button looks the same and sits in the same place. The error message says just as clearly what has happened. The field for the CNP (Romanian personal numeric code) works the same way. You learn once, you use it everywhere.

What it is made of

Imagine a set of building blocks, plus its manual:

  1. The principles. For example: “we write to be understood”, “for absolutely everyone, from day one”.
    • In practice: the principles decide when teams disagree. If someone wants to add a field to a form “just in case”, the rule “we ask only for the data we need” says no. The same principle already appears in Law no. 242/2022 (the Romanian law on data exchange between public IT systems).
      Every extra field is one more reason to give up. The principle cuts what is not necessary.
    • Another example: “usefulness before uniformity”. We use the same solution only where it solves the same problem.
      Different colours and names, the same button, in the same place. Consistent, not identical.
  2. The foundations. Colours, type, spacing. They are chosen so that the text is easy for anyone to read.
    • Colours have names, not just codes (design tokens). A button is not “blue #244C8F” but “the colour of the main action”. If the shade changes, it changes everywhere, from a single place.
      The colour code sits in a single place. The button, the link and the focus outline take it from there.
    • Contrast is calculated, not guessed. The blue of the flag, on white, has a contrast of 12.7 : 1 and reads very well. The yellow of the flag, on white, has only 1.5 : 1. That is why yellow can be an accent, but never the colour of text.

      The blue of the flag on white has a contrast of 12.7 to 1 and is readable. Yellow on white has 1.5 to 1 and is not readable. Yellow on blue has 8.6 to 1 and can be used as an accent.

      The colours of the flag, from Law no. 176/2023. The minimum threshold for normal text is 4.5 : 1.
    • The font has correct ș and ț (with a comma below), ő and ű for Hungarian, Cyrillic letters for Ukrainian, and characters that are easy to tell apart: capital I, lowercase l and the digit 1; capital O and the digit 0. The criteria and specimens are in Choosing a font. Spacing follows an 8-pixel grid, so that pages look tidy on any screen.
      A font that writes Romanian, Hungarian and Ukrainian correctly and clearly tells I, l, o, O and 0 apart. Spacing comes in multiples of 8.
  3. The building blocks. Buttons, fields to fill in, error messages, menus. Each one is built and tested only once, including with people who use programs that read the screen.
    • Every state is thought through in advance (components). A button looks different when it is normal, when you move the mouse over it, when it is pressed, when it cannot be used and when you reach it with the keyboard. The last state is the one most often forgotten on today’s websites.
      The same building block, five states. The last one, the yellow and black outline, shows where you are when you navigate with the keyboard.
    • The tests are public. A building block is declared “stable” only after it passes the tests with the keyboard, with text enlarged to 200–400% and with screen readers that speak Romanian. The results are on a public page, for each building block.
      The public record of a building block: what was tested, and with what. A building block becomes “stable” only after all the checks.
  4. The recipes. How you ask for a Romanian address, how you check a CNP, how you tell people from the start which documents they need.
    • The CNP (pattern). The field checks the 13 digits and the check digit. The message says exactly what is wrong: “The CNP has 13 digits. You entered 12.” In Romanian, the message uses the polite form of address (“dumneavoastră”), as every public service does; in chapter 5 I explain why, and you can try it.
      The same field, the same mistake. The difference is the message: one blocks you, the other tells you what to do.
    • The address. County, then locality, then street, number, block, entrance, flat, plus the option “I live abroad”, for the diaspora.
      The Romanian address, with block, entrance and flat, plus the option for people in the diaspora.
    • “Before you start”. The first page of every service says which documents are needed, how much it costs, how long it takes and who is responsible.
      Everything you need to know, on the first page, not at the end of the form.
  5. The page templates. Whole pages, ready assembled, which an institution can adapt.
    • The “Accessibility” page, already filled in following the official model statement in Decision no. 815/2022 of the Romanian Authority for Digitalisation (ADR), the government agency for digitalisation. The institution only adds its own details.
      The official text is already there. The institution only fills in the marked fields.
    • The town hall website (template), with the five sections required by law (Government Decision (HG) no. 123/2002) and with the “Local Official Gazette” (Monitorul Oficial Local) tab in the first row of the menu.
      The menu required by law, ready built: the five sections, the Local Official Gazette (Monitorul Oficial Local) in first place, the update date on every page.
    • In Italy, almost 6,000 municipalities rebuilt their websites starting from the same model, made available free of charge by the state.
      Italy: each dot stands for 100 municipalities that started from the same website model (2022–2025).
  6. The manual. Explanations, examples and mistakes to avoid, for those who build.
    • Each building block has its own page (documentation): when to use it, when not to, a code example, common mistakes, test results and known limitations.
      Each building block has a page: when to use it, when not to, the code, the tests and the known limitations.
    • An example of a mistake to avoid: a link that just says “Click here”. For someone using a screen reader, a list of “Click here” links says nothing.
      Screen readers can show just the list of links. In the first example, nobody knows where any link leads.
    • In Norway, the manual is a real knowledge portal (Aksel), not just a list of building blocks.
      A knowledge portal, like Aksel in Norway: not just building blocks, but also the reasons behind them.

And, very importantly: a team that maintains them. Without one, the set of building blocks grows old and is abandoned.

In practice: each new version has a number (for example 1.2), a note saying what has changed and a deadline by which institutions can adopt it. At least two people, from different organisations, can publish a version, so that the system does not depend on a single person.

Each version has a number, a note on what has changed and a clear deadline for institutions.

It is a product, not a regulation

I believe a design system for the state has to be thought of as a digital product, not as a list of obligations. A product:

Its end customer is the taxpayer: the person who pays for the state’s services and has the right to be able to use them easily.

What it is not

What everyone would gain →

For specialists
  • The layers of the SDGR proposal (the Government of Romania Design System, as I propose it): principles and content → design tokens and themes → trust layer (trust banner, institutional identifier) → components → Romanian service patterns → page templates → website models.
  • Design tokens on four levels: primitive → semantic → component → institution theme. Colours are calibrated on relative luminance, following the USWDS model, so that the difference in grade guarantees contrast.
  • Technology: HTML/CSS and web components, framework-independent, with framework packages only on request. The hypothesis is tested through three integration trials, including on the code of MUD, the Republic of Moldova’s design system (MIT licence).
  • Maturity levels: proposal → experimental → candidate → stable → deprecated.
  • Three domains, three owners: the core (the system team), the service patterns (the team, together with the institutions), the shared services (ROeID, Ghișeul.ro, interoperability: their operators).
  • Licences: EUPL-1.2 for code, CC BY 4.0 for documentation.

What I base this on

The links lead to the public versions of my research documents; the section number (§) takes you straight to the paragraph cited.

Claim Document Where
Product, not regulation; the taxpayer as end customer The full proposal §2
Principles (“for absolutely everyone”, “consistent, not identical”) The full proposal §3
What it is not; three domains The full proposal §4
Layers, tokens, technology, maturity The full proposal §6
The limits: registers, processes The full proposal §1.2
Calibrated colours, the “magic number” The American system (USWDS) §5.2, §8
The architecture families in Europe Design systems in Europe §11
The examples under “What it is made of”: principles, tokens, the 8 px grid, fonts, states and tests, patterns, documentation, versions The full proposal §3, §6.4–§6.8, §8, §9.2, §10.5
“Minimum data”, Law no. 242/2022 What already exists in Romania §11
Contrast of the flag colours (12.7 : 1 and 1.5 : 1) What already exists in Romania §2.1
The “Accessibility” page (ADR Decision 815/2022); the five sections (HG 123/2002); Local Official Gazette What already exists in Romania §5, §6
Italy: almost 6,000 municipalities on the same model EU member states' laws §3.4
Norway: Aksel, a knowledge portal Design systems in Europe §5, §11
The integration trial with MUD What already exists in Romania §13, decision 11