Design System for the Company Website: At What Size Does It Pay Off?

Do we need a design system for our website? This question usually comes up when multiple agencies have worked on a website, each landing page looks different, or the new careers page doesn’t match the homepage. A design system promises order. But it’s also a product that requires people, time, and maintenance, and for many corporate websites, a simpler approach is sufficient.

For this guide, we reviewed the definitions from the Nielsen Norman Group, the 2026 Design Systems Report by zeroheight, Figma’s study on time savings, and the publicly available design systems from the German Federal Administration (KERN), Deutsche Bahn, Porsche, and Siemens, as well as the new specification for design tokens. At the end, you’ll receive an Excel template that you can use to count how many colors, font sizes, and components your website actually uses today.

In a nutshell (as of October 2026)

A comprehensive design system is worthwhile when multiple teams or agencies are working on several digital offerings over the course of several years. For a single corporate website, a style guide with a well-maintained component library within the website system is usually sufficient. The Nielsen Norman Group notes that design systems are most effective when a company anticipates “years of future, replicable design work.” A dedicated system requires a team: According to zeroheight, among the surveyed companies with 1,000 to 5,000 employees, an average of five people work on it, and 61 percent of the teams feel understaffed. Hardly anyone demonstrates the economic benefits: Only 5 percent of the surveyed teams measure the return on investment. Those who start small first take stock of the current situation and define colors, typefaces, and components before discussing tools.

Three Levels: Style Guide, Component Library, Design System

Not every structure in design is automatically a design system, and distinguishing between the different levels can help with this decision. The Nielsen Norman Group defines a design system as “a complete set of standards intended to manage design at scale using reusable components and patterns.” A style guide is only one part of that: design rules, visual examples, and principles. A component library describes individual elements such as buttons, form fields, or cards.

Our tiered model of organizational structure in design. For most corporate websites, Tier 2 is the goal; Tier 3 is only necessary when there are multiple teams and offerings.

• Level 1, Style Guide: Logo, colors, fonts, visual language, and tone of voice, usually in PDF or on a website. The German federal government’s style guide is a good example of this level: It governs the visual identity but does not contain any code.

• Step 2, Component Library in the website system: Colors and fonts as core styles, plus reusable components such as the header, teaser, form, and footer, which look the same everywhere and can be modified in one place.

• Level 3, Design System: Design tokens, components in the design tool and in the code, documentation, guidelines for contributions, and a team that maintains it all. The KERN UX standard for administration describes itself as “more than a design system.”

How Much Does a Custom Design System Cost?

The biggest expense isn’t the creation of the system, but rather the team that maintains it on an ongoing basis. The Nielsen Norman Group writes: “Creating and maintaining a design system is a time-intensive activity that requires a dedicated team.” The Design Systems Report 2026 by zeroheight, a provider of design system software, reveals the typical size of such teams. The survey included 147 professionals, most of whom worked at companies with more than 1,000 employees and were primarily based in North America and Western Europe.

Average size of design system teams by company size and percentage of teams that feel understaffed. Source: zeroheight Design Systems Report 2026, 147 respondents, vendor study.

83 percent of respondents have a dedicated team for their design system. On average, there are two people in companies with up to 100 employees, four in companies with 100 to 1,000 employees, five in companies with 1,000 to 5,000 employees, and eleven in companies with 5,000 or more employees. Nevertheless, 61 percent say they don’t have enough people to meet their goals. The Nielsen Norman Group reaches the same conclusion in a May 2026 article: “If an organization wants to scale the support a design system offers, it needs to start by properly resourcing the team.”

For a medium-sized company, this means that having its own design system is not a project, but an ongoing task. The Nielsen Norman Group specifies a minimum team size of one person each for interaction design, visual design, and development. Companies that cannot staff these roles on a permanent basis are better off with Level 2. According to the Nielsen Norman Group, among the paths to a design system, “using an existing design system is the lowest-cost approach,” but even a system adopted from elsewhere must be maintained.

What it achieves, and how rarely it is measured

One frequently cited figure is a lab result, and hardly any team measures return on investment. In 2019, the provider Figma had designers complete two tasks of equal complexity—one using a design system and one using only legacy design files. The result: With the design system, they “completed their objective 34% faster than without a design system.” The author himself qualifies this by stating that this is “the maximum time savings one would find in a real-world scenario.” The task involved an app screen, not a website, and the number of participants is not specified.

Figma's contribution to time savings: 34 percent faster (1), but according to the author, this is the maximum expected savings (2).

In everyday practice, adoption is declining. According to zeroheight, only 5 percent of teams measure return on investment. Usage is measured most frequently (41 percent), while 31 percent measure development speed. Only 7 percent say their system has been fully adopted across all teams, while 22 percent report low adoption rates. And satisfaction with organizational support has dropped from 42 to 32 percent. A design system that isn’t used costs money without bringing any order.

When Does It Pay Off?

There’s no hard-and-fast threshold in terms of employees or pages, but there are clear indicators. Figma sums it up in its guide to enterprise design systems: “One team can keep a design system in their heads. Five teams, each shipping their own product, can’t.” Brad Frost, author of the book *Atomic Design*, responded in 2019 in *Smashing Magazine* to the question of whether every website needs a design system: “I generally think so, yes.” However, for smaller websites, the kind of extensive documentation required for large systems isn’t necessary: “Probably not, for those smaller sites, and that’s fine.” What matters, he says, is that “every single website could benefit from component-driven architecture, design, and development principles.”

We derive six indicators from these sources. The more of them that apply, the more likely it is that Level 3 is warranted:

Six Signs You Need Your Own Design System. Suggested by marschfahrt.de, based in part on insights from the Nielsen Norman Group, Figma, and Brad Frost, and in part on our own assessment.

• Several teams or agencies are working simultaneously on a website, online store, portal, or app.

• Several brands or many countries use the same framework with their own adaptations.

• New pages on a regular basis—such as campaign landing pages every month—that need to be created quickly yet maintain a consistent look and feel.

• In-house development with code that evolves over the years—not just a website builder.

• Accessibility requirements—such as those under the Accessibility Enhancement Act—that are to be ensured at the central level.

• Staff for patient care, with at least some involvement in design and development, and support from management.

If only the first or second criterion applies and you are developing your own applications, an existing open system can serve as the foundation. For a simple website, Level 2 is usually sufficient.

Level 2 in the Website System: The Simple Design System

Modern website systems already come equipped with the tools for Step 2—you just need to use them consistently. In Framer, you define colors and fonts as central styles and build elements as components with variants. Through a workspace’s library, these can be used across multiple projects. If you change a component, according to the Framer Help: “all projects using the component instance (without detaching) can pull the latest updates.” We usually build with Framer, but the necessary tools are available elsewhere as well: Webflow offers variables, components, and shared libraries, while WordPress provides central settings via the theme.json file and reusable block templates.

The difference from a full-fledged design system: The components remain essentially tied to the website system, and there’s usually no separate documentation. For a corporate website with landing pages, a careers page, and a few country-specific versions, this is often just right. One important rule—which is often broken—is this: Don’t copy and modify components for every campaign; instead, create variations within the component itself. Otherwise, after a year, you’ll end up with a lot of buttons that are almost identical again.

Accessibility: Better at the Core, but Not Automatic

A good design system improves the accessibility of all pages at once, but it doesn’t relieve you of the responsibility to test them. The government’s KERN UX Standard states on its accessibility page that the code base of its components meets “at least AA level according to BITV 2.0.” Shortly thereafter, it states: “However, this does not mean that a website developed using these components is automatically accessible.” And: “The responsibility for this lies with the implementation teams, not with KERN.”

The accessibility page in the KERN Design System: Components meet the BITV 2.0 AA standard (1), but the finished website is not automatically accessible (2).

The British GOV.UK Design System says the same thing: “Using the GOV.UK Design System in a service does not immediately make that service accessible.” The advantage is nevertheless obvious. Once you get contrast, focus, labels, and keyboard navigation right in a component, you have them as a foundation across all pages. However, you still need to test how these elements work together on the page. Our guide to the BFSG explains the obligations the Accessibility Enhancement Act imposes on corporate websites.

Role Models from Germany, Available to the Public

You don't have to start from scratch; several large organizations openly share their systems. These can serve as examples of what structure and documentation might look like, and in some cases as a technical foundation:

• KERN UX Standard: An open-source design system for public administration, launched by Hamburg and Schleswig-Holstein. According to the state government of Schleswig-Holstein, the IT Planning Council will incorporate KERN into its product portfolio effective January 1, 2027.

• DB UX Design System: Deutsche Bahn components and design tokens for web interfaces; code licensed under the Apache 2.0 License.

• Porsche Design System: Design tokens, components, and guidelines; according to the accessibility statement, based on WCAG 2.2 AA; source code licensed under the Apache 2.0 License.

• Siemens iX: “Siemens Industrial Experience,” components and samples, code licensed under the MIT License.

Whether and how you may use the code is governed by the respective license. The companies' brand image is not included. A third-party system is a suitable technical foundation, especially if you are developing your own applications anyway.

Design Tokens: The specification is now stable

Anyone who defines colors, spacing, and fonts as design tokens can exchange them between tools, and a stable specification for this has been available since October 2025. The Design Tokens Community Group at the W3C published the“Design Tokens Format Module 2025.10”on October 28, 2025. A token is defined there as “information associated with a human-readable name, at a minimum a name/value pair”—for example, a name like “Primary Color” with a color value. Important to note: According to the text itself, the specification is “not a W3C Standard nor is it on the W3C Standards Track,” but rather a report from a Community Group.

For Level 2, you don't need any special tools. All you need to do is create colors and fonts in the website system with descriptive names, such as "Standard Text" instead of "Gray 3." If you switch to Level 3 later, you can use these names as tokens.

Here's how to get started: count first, then decide

Before you start talking about tools, take stock of what your website is currently using. In our experience, an inventory can reveal within a few hours to a few days whether there’s an organizational problem and how big it is. Our Excel template for the inventory walks you through four steps:

• Listing Colors: Every color that appears on the website, along with its location and purpose

• Recording Fonts: Fonts, Sizes, and Weights by Page Type

• List the components: buttons, teasers, forms, headers, along with the number of variations you find

• Determine: for each group, how many variations you actually need

The analysis shows where you have the most uncontrolled growth and how many variants can be eliminated. A completed example with fictitious values is included.

Excerpt from the completed example with fictitious values: variants found for each component, target values, and savings.

Frequently Asked Questions

Most questions revolve around effort, tools, and responsibility.

Is a Figma file enough for a design system?

For Level 1 and as a foundation for Level 2, yes. However, a complete design system also lives in the code or within the website system. A Figma library that no one implements on the website won't create consistent pages.

Who should be held responsible?

One person with clear responsibility, even if working part-time. Figma writes: “A part-time owner with clear standards and a short review queue is better than an elaborate governance structure that nobody has time to manage.”

Can we adopt someone else's design system?

The code, yes—depending on the license—but not the brand identity. For a standard corporate website, this is rarely necessary. For your own portals or applications, an open system like KERN, DB UX, or Siemens iX can save a lot of work.

How long does it take to set up?

In our estimation, a status assessment takes anywhere from an afternoon to a few days; Phase 2 is best implemented as part of the next relaunch. A complete system is never truly finished; like a product, it requires ongoing maintenance.

What Has Changed and What That Means for You

Standards and role models have become significantly more mature since the fall of 2025.

October 28, 2025: The first stable specification for design tokens is released. In the future, those who create tokens will be able to transfer them more easily between tools.

2026: zeroheight’s fifth Design Systems Report highlights small, often understaffed teams and a lack of metrics. Plan your staffing before you start building.

July 1, 2026: Schleswig-Holstein announces that the IT Planning Council will take over KERN effective January 1, 2027. For companies that work with government agencies, KERN can serve as a point of reference.

Date of this version: October 31, 2026.

Conclusion

A design system isn’t a project—it’s a product with its own team—and it only pays off when multiple teams benefit from it over the course of several years. For most corporate websites, a consistently maintained component library within the website system is the right approach: centralized colors and fonts, a small number of components with variations, and one person in charge. Organizations with multiple brands, countries, teams, and proprietary applications should consider implementing a full-fledged system and plan for the necessary staff right from the start.

Download the Excel template for the inventory check and start by counting your buttons. If you find more than a handful, take a look at how we build corporate websites using reusable components.