Design System: What is a design system?

What is a design system?

A design system is a living ecosystem that brings together, within a single documented framework, all the elements needed for the consistent design and development of a digital product. It includes design tokens (colours, typography, spacing, shadows, border radii), reusable components (buttons, forms, cards, modals), interaction patterns (navigation, search, pagination) and documentation explaining how and when to use each element.

A design system goes well beyond a simple component library. It embodies the organisation's design principles, accessibility standards and technical conventions. It is both a product (the library itself) and a process (the governance that keeps it up to date).

At KERN-IT, within the KERNWEB division, every major web project starts with the creation of a design system in Figma. Design tokens are then transposed into the TailwindCSS configuration (tailwind.config.js), and components are translated into reusable Django templates in Wagtail CMS. This approach guarantees total fidelity between design and code.

Why a design system matters

A design system is a strategic investment whose benefits manifest across the entire lifecycle of a digital product.

• Guaranteed consistency: each component is defined once with its usage rules. Whether it is the designer, the front-end developer or the content editor in Wagtail, everyone uses the same elements and produces a consistent result.
• Production speed: once the design system is established, creating a new page means assembling existing components. Design and development time is reduced by 30 to 50 % on subsequent iterations.
• Integration quality: specifications are encoded in the system itself. The developer does not have to interpret mockups: spacing, colours and sizes are defined in tokens and in the TailwindCSS configuration.
• Scalability: when the team grows or new pages are added, the design system ensures consistency is maintained without constant oversight from the lead designer.
• Built-in accessibility: accessibility standards (contrast ratios, target sizes, text alternatives) are integrated directly into design system components.

How it works

A design system is composed of several layers that stack to form a complete system.

The foundation layer contains design tokens: the colour palette (primary, secondary, neutral, semantic), the typographic scale (font, sizes, weights, line heights), spacing (4px or 8px scale), border radii, drop shadows and responsive breakpoints. At KERN-IT, these tokens are defined simultaneously in Figma (variables) and in tailwind.config.js.

The component layer contains reusable interface elements, organised according to Atomic Design principles: atoms (buttons, icons, fields), molecules (form groups, list items), organisms (headers, sections, footers). Each component is documented with its variants, states and usage rules.

The pattern layer defines recurring interaction and layout conventions: how a form validates fields, how a search displays results, how pagination works, how errors are communicated to the user.

The documentation layer explains design principles, usage guidelines, dos and don'ts and accessibility best practices. This documentation is essential for the design system to be adopted by the entire team.

Concrete example

KERN-IT creates the design system for the institutional website of a Brussels hospital group. The site comprises over 200 pages spread across medical departments, news, recruitment and practical information.

The design system is built in Figma with a clear structure. The foundation defines three primary colours (healthcare blue, hope green, clinical white), a typographic scale based on the Inter font and an 8px spacing grid. The component layer comprises 45 master components: 15 atoms, 12 molecules and 18 organisms.

Tokens are transposed into the project's tailwind.config.js file. Organisms become StreamField blocks in Wagtail CMS: a "Doctor section" block (photo + name + speciality + appointment booking), a "FAQ" block (question-answer accordion), a "News" block (grid of three recent articles). The hospital's content editors can compose pages by assembling these blocks without technical assistance.

Six months after launch, the hospital's marketing team has created 30 new pages without technical support, and each page perfectly respects the initial design system.

Implementation steps

1. Audit the existing product: inventory all visual elements of the current product. Identify inconsistencies, duplicates and elements not meeting accessibility standards.
2. Define design tokens: establish the colour palette, typographic scale, spacing and other fundamental values in Figma and in tailwind.config.js.
3. Build the components: create each component in Figma with its variants and states. Translate components into Tailwind CSS code and Django templates.
4. Document the rules: write usage guidelines for each component and pattern. Specify dos and don'ts.
5. Integrate with Wagtail: create StreamField blocks matching the design system organisms, enabling content editors to compose consistent pages.
6. Establish governance: define who can modify the design system, what the new component validation process is and how updates are communicated to the team.

Related technologies and tools

• Figma: the central tool where KERN-IT builds and maintains design systems, with variables for tokens and components with variants and properties.
• Tailwind CSS: the CSS framework whose configuration encodes design system tokens, ensuring front-end code respects design specifications.
• Wagtail CMS: the CMS whose StreamField blocks materialise design system components for content editors, closing the design-code-content loop.

Conclusion

A design system is the investment that transforms interface design from a craft effort into an industrialised, consistent process. It ensures that every page, component and interaction meets the same quality standards, regardless of who creates them. At KERN-IT, the KERNWEB division masters the complete chain, from the Figma design system to the Tailwind CSS configuration through to Wagtail StreamField blocks, delivering digital products that combine visual consistency, technical performance and editorial autonomy.