Tokens, components and the rules for putting them together, in one source your designers and developers both read. Change the accent once and it changes everywhere, because nothing on the site keeps its own copy of it. Try it below.
10of 10components read these three linesChange a token and watch who follows.
Colour, type, spacing, radius and motion as named values, each with a line saying what it is for. A token nobody can explain ends up used for the wrong thing.
Hover, focus, disabled, error and empty, drawn and built. The happy path is the easy tenth of a component.
Which surface a section sits on, which step of the type scale a heading takes, how wide a column may run. Correct parts still make ugly pages without these.
A page showing how to call it and what it looks like in every state, so nobody guesses from a list of properties.
This site runs on five durations and five easings, and nothing else. A millisecond value typed by hand into a component counts as a bug here, not a style.
Automated checks that catch a hard-coded colour, a duplicated rule or a component drifting from its specimen, so the system survives the people who did not build it.
Nobody decides to abandon a design system. It happens one shortcut at a time: a colour typed by hand because the token was hard to find, a button copied instead of reused, a new page built from the old page instead of from the parts. A year later the system describes a site that no longer exists.
Tokens live where the build reads them: Webflow variables and the code, not a PDF. If the build does not read it, it is a poster, not a system.
Every value is named once. A new shade needs a name and a reason, so it gets added on purpose or not at all.
Checks run against the specimens, so a copy that starts to diverge gets caught while it is still one copy and not twelve.
The system behind this site holds fifty-seven components on three typefaces, and twelve automated checks stand guard over it.
A design system that lives only in Figma is a drawing of one. The same names have to exist in the design file, in Webflow variables and in any custom code, or the three drift apart the first time someone is in a hurry.
One name per decision, in all three places. If the designer calls it Coral 500 and the build calls it brand red, someone will pick the wrong one on a Friday afternoon, and nobody will notice until it is on forty pages.
Every rule is written down with its reason. A rule without a reason gets broken by the first person who cannot see why it exists. In our own system, the rules sit next to the measurement that produced them.
From $2,000
Above that, the number comes from three things.
blago.studio
The system this page is built with
Not screenshots. Each tile is the real component, rendered here with the same code the rest of the site uses. The page around it is assembled from the same parts, the same tokens and the same motion table.
UpBRO
The studio’s own product, with its own design system
Structural rules moved from this system into UpBRO by written letters: the focus ring, the motion table, the column widths. Colours, typefaces and the logo stayed UpBRO’s own. That split is the point of a system: the rules travel, the brand does not have to.
Usually yes, just a smaller one. One site still has buttons in a dozen places and headings on forty pages. The system is what keeps the forty-first page looking like it belongs to the first.
Yes, and that is the most common start. We collect every colour, size, radius and component actually in use, then reduce them to the set the site needs. The audit usually finds several shades of the same brand colour, each typed by hand somewhere.
Yes. Tokens become Webflow variables, components become Webflow components with properties, and class names follow one convention so the Designer stays readable for whoever opens it next.
Both, under the same names. A system that lives in one place is either a drawing or a codebase, and the gap between the two is exactly where inconsistency comes from.
Your team, with the documentation and the checks we leave behind. If you keep us on a retainer, changes to the system go through the same checks as the first version did.