Phase 02 - Shape
Phase 02 - Shape
Design System:
Decided once, applied everywhere.
A design system turns the identity into a working tool. Components, templates and patterns are documented and structured so your team and your suppliers can produce on-brand without asking first. The system carries the work that would otherwise start from scratch every time.
A design system turns the identity into a working tool. Components, templates and patterns are documented and structured so your team and your suppliers can produce on-brand without asking first. The system carries the work that would otherwise start from scratch every time.
Definition line
A design system is a complete set of standards for managing design at scale: reusable components, templates and layout rules, documented in one place. It contains the style guide but is more than it.
A design system is a complete set of standards for managing design at scale: reusable components, templates and layout rules, documented in one place. It contains the style guide but is more than it.
A design system is a complete set of standards for managing design at scale: reusable components, templates and layout rules, documented in one place. It contains the style guide but is more than it.
Scope
What is included
Problem List
This is for you if
Every layout has to go through one person.
Without templates exactly one person approves everything, and that person is the bottleneck for everyone else.
Every new supplier needs the same briefing again.
What you explained on the last project you explain again on the next, because it is written down nowhere.
Templates exist, but everyone has their own.
Three versions of the same deck are in circulation and nobody can say which one is current.
Small changes cost far more than they should.
A new colour or a new button has to be updated in thirty places one by one, and one always gets missed.
"A design system is not judged by how good it looks, but by how often someone works around it."
"A design system is not judged by how good it looks, but by how often someone works around it."
"A design system is not judged by how good it looks, but by how often someone works around it."
Frequently Asked
Frequently Asked
Questions
Questions
What is a design system?
A design system is a complete set of standards for managing design at scale: reusable components, templates and layout rules, documented and named in one place.
What separates it from a folder of files is two things. First, the parts are named, so everyone uses the same word for the same element and the misunderstandings between design, marketing and development disappear.
Second, they are documented, meaning it says when to use what and when not to. A library without that explanation gets used wrongly just as often as no library at all. So the documentation is not an appendix at the end but part of the system, and it is the part that shows the quality.
A third point usually gets missed: a system is also made of decisions about what does not exist. If there are only three button sizes, a fourth never appears, and that is what holds a brand together over years.
Framer is a web builder for creative pros. Be sure to check out framer.com to learn more.
A design system is a complete set of standards for managing design at scale: reusable components, templates and layout rules, documented and named in one place.
What separates it from a folder of files is two things. First, the parts are named, so everyone uses the same word for the same element and the misunderstandings between design, marketing and development disappear.
Second, they are documented, meaning it says when to use what and when not to. A library without that explanation gets used wrongly just as often as no library at all. So the documentation is not an appendix at the end but part of the system, and it is the part that shows the quality.
A third point usually gets missed: a system is also made of decisions about what does not exist. If there are only three button sizes, a fourth never appears, and that is what holds a brand together over years.
What is the difference between a design system and a style guide?
A style guide describes how something should look. A design system supplies the finished parts. The style guide is one component of the system, not the same thing.
In practice you notice the difference in effort. With a style guide someone looks up how wide a margin should be and rebuilds it themselves, every time, slightly differently each time. With a system they take the finished part and the margin is right. With us the style guide comes out of the corporate identity and the system builds on it.
The technical bridge between the two is called design tokens: colour, spacing and type stored as values rather than as descriptions, so the same colour in the design file and in the code really is the same. Which of the two you need depends on who produces. If that is only us, a style guide is enough. As soon as other people produce too, your team, an agency, a developer, every description becomes a matter of interpretation, and then the finished part is cheaper than the explanation.
Framer is a web builder for creative pros. Be sure to check out framer.com to learn more.
A style guide describes how something should look. A design system supplies the finished parts. The style guide is one component of the system, not the same thing.
In practice you notice the difference in effort. With a style guide someone looks up how wide a margin should be and rebuilds it themselves, every time, slightly differently each time. With a system they take the finished part and the margin is right. With us the style guide comes out of the corporate identity and the system builds on it.
The technical bridge between the two is called design tokens: colour, spacing and type stored as values rather than as descriptions, so the same colour in the design file and in the code really is the same. Which of the two you need depends on who produces. If that is only us, a style guide is enough. As soon as other people produce too, your team, an agency, a developer, every description becomes a matter of interpretation, and then the finished part is cheaper than the explanation.
We already have templates. Isn't that enough?
If your templates get used, are current and nobody has to ask first, then it is enough. Check that before spending money. The answer often looks different once you actually look.
The typical state is a folder of templates from several different years, three of which get used while the rest are out of date. That is not a template problem but a maintenance problem: nobody owns it, so everything ages at once. A system does not solve that by itself, but it makes updating cheap, because one change happens in one place instead of thirty. And it makes visible what exists at all, which with a folder that grew over years is often half the work already.
A simple step before starting a project: send someone outside marketing the link to the template folder and ask them to build a deck. Wherever they get stuck is the real gap, and it is rarely where people expect it to be.
Framer is a web builder for creative pros. Be sure to check out framer.com to learn more.
If your templates get used, are current and nobody has to ask first, then it is enough. Check that before spending money. The answer often looks different once you actually look.
The typical state is a folder of templates from several different years, three of which get used while the rest are out of date. That is not a template problem but a maintenance problem: nobody owns it, so everything ages at once. A system does not solve that by itself, but it makes updating cheap, because one change happens in one place instead of thirty. And it makes visible what exists at all, which with a folder that grew over years is often half the work already.
A simple step before starting a project: send someone outside marketing the link to the template folder and ask them to build a deck. Wherever they get stuck is the real gap, and it is rarely where people expect it to be.
At what point does a design system pay off?
When several people or several suppliers produce the same things regularly. The threshold is not company size but repetition: the same formats, several times a month, from changing hands.
At three productions a month with one person doing everything, a system costs more than the situation it replaces. At twenty productions across four people it usually pays back within a year, and not through design time but through the coordination that disappears.
The second trigger is turnover: new colleagues, a new agency, a new channel. Every time somebody new has to start, you either pay for a briefing or you have a system. There is also a small version. If the full scope does not add up but the weekly decks hurt, you build that one set of templates properly and leave the rest. That is not half a system but a complete one for a single format, and it can be extended later.
Framer is a web builder for creative pros. Be sure to check out framer.com to learn more.
When several people or several suppliers produce the same things regularly. The threshold is not company size but repetition: the same formats, several times a month, from changing hands.
At three productions a month with one person doing everything, a system costs more than the situation it replaces. At twenty productions across four people it usually pays back within a year, and not through design time but through the coordination that disappears.
The second trigger is turnover: new colleagues, a new agency, a new channel. Every time somebody new has to start, you either pay for a briefing or you have a system. There is also a small version. If the full scope does not add up but the weekly decks hurt, you build that one set of templates properly and leave the rest. That is not half a system but a complete one for a single format, and it can be extended later.
Want to learn more about us? Check out our entire FAQ!
Want to learn more about us? Check out our entire FAQ!
Interested in Content Marketing?
Check out our most recent articles!
Interested in Content Marketing?
Check out our most recent articles!
How Handwerk Businesses Actually Find Azubis: 5 Steps
Finding Azubis and skilled workers in Handwerk: why job ads alone don't work and which five steps actually bring applications.
AI Search Is Here. SEO Isn't Dead. Here's What Matters.
43% of Germans use ChatGPT. Search is quietly changing under everyone's feet. Here's what's real, what's hype, and what your business should actually do about it.
Why Your Handwerk Website Isn't Doing Its Job
94% of German Handwerk businesses have a website. Only 3 of 500 audited sites came close to actually doing their job. Here's what "it works for us" is really costing you.
Framer vs. WordPress vs. TYPO3
Framer or WordPress for your Handwerk business? An honest comparison on cost, maintenance, and SEO. Plus when Webflow or TYPO3 actually makes sense.
How Handwerk Businesses Actually Find Azubis: 5 Steps
Finding Azubis and skilled workers in Handwerk: why job ads alone don't work and which five steps actually bring applications.
AI Search Is Here. SEO Isn't Dead. Here's What Matters.
43% of Germans use ChatGPT. Search is quietly changing under everyone's feet. Here's what's real, what's hype, and what your business should actually do about it.
Why Your Handwerk Website Isn't Doing Its Job
94% of German Handwerk businesses have a website. Only 3 of 500 audited sites came close to actually doing their job. Here's what "it works for us" is really costing you.
How Handwerk Businesses Actually Find Azubis: 5 Steps
Finding Azubis and skilled workers in Handwerk: why job ads alone don't work and which five steps actually bring applications.
AI Search Is Here. SEO Isn't Dead. Here's What Matters.
43% of Germans use ChatGPT. Search is quietly changing under everyone's feet. Here's what's real, what's hype, and what your business should actually do about it.
Why Your Handwerk Website Isn't Doing Its Job
94% of German Handwerk businesses have a website. Only 3 of 500 audited sites came close to actually doing their job. Here's what "it works for us" is really costing you.
Framer vs. WordPress vs. TYPO3
Framer or WordPress for your Handwerk business? An honest comparison on cost, maintenance, and SEO. Plus when Webflow or TYPO3 actually makes sense.
Content that converts
(and doesn’t suck).
Let’s talk.
Content that converts
(and doesn’t suck).
Let’s talk.
Content that converts
(and doesn’t suck).
Let’s talk.
Nikkan & Soli Managing Directors
Nikkan & Soli Managing Directors
Nikkan & Soli Managing Directors
