What is a design system?

Design system: definition and components

A design system is more than a style guide. The style guide describes what the brand looks like: colors, fonts, imagery. A design system adds ready-made components implemented in code, such as buttons, form fields, tables and messages, rules for spacing and grids, and notes on usage. Design and development draw on the same source, and not every button gets reinvented.

The foundation is design tokens: named values for colors, font sizes, spacing or corner radii. When a token is changed, the look updates everywhere. Components are built from the tokens and defined with their states: normal, hover, focus, disabled and error. That way the look and behavior of all parts can be controlled consistently and traceably.

Benefits and limits

The gain lies in consistency and speed: new pages and features are assembled from existing building blocks instead of being designed and programmed from scratch each time. Accessibility, with sufficient contrast, keyboard operation and visible focus, can be solved cleanly once and then applies everywhere. Changes to the brand look can also be made centrally.

Against this stand effort and upkeep: a design system needs owners, rules for extensions and documentation, otherwise it goes stale. For a small website with few pages it is oversized; a lean set of components and tokens is usually enough there. The effort should be proportionate to the number of applications and people involved.

• Design tokens: colors, typography, spacing, shadows
• Component library in the design tool and in code
• Layout grid and rules for responsive views
• Guidelines for accessibility and usability
• Documentation with examples and usage rules

Real-world example: website, portal and app as one

A mid-sized company has a corporate website, a customer portal and an employee app that were built by different providers at different times. Buttons look different, forms behave differently, and the brand color is in use in three variants. New employees and providers need explaining every time which variant is the right one.

After a design system is introduced, all three applications use the same tokens and components. A new form is built in hours, the interface feels familiar, and a later color change is done in one place instead of in three projects separately. Tests and accessibility checks also only have to be done once per component.

What companies should pay attention to

Start small: with the components that actually appear often, not with a library built in advance. Decide who approves changes, and maintain the documentation too. Typical mistakes are a design system that exists only in the design tool and not in code, a build without accessibility and a lack of buy-in from the team.

Together with the partner agency LOMA DESIGN, Nano Concepts develops design systems for websites, portals and apps, including the components in the technology in use, such as React. That keeps your presence consistent across all channels and projects. In the long run, this saves coordination and prevents uncontrolled growth.