Imagine a website where every button looks slightly different. One has rounded corners, another has sharp ones. One is blue, another navy. One has a shadow, another does not.

This is not a hypothesis — it is the reality of most websites that evolve without a system.

What Is a Design System?

A design system is a collection of rules, components, and styles that define the visual language of a project. It can be simple (a few CSS variables and typography) or complex (a full component library with documentation).

For Modulo CMS, we chose a middle approach:

Colors as CSS variables:

--c-primary: #6366f1;
--c-accent:  #a855f7;
--c-text:    #09090b;
--c-muted:   #71717a;
--c-border:  #e4e4e7;

Border radius consistent: --radius: 12px

Typography: Inter, system-ui, sans-serif — no external fonts for speed

Shadows: only where needed, always the same pattern

Why It Saves Time

When you have a design system, every design decision is a question of "should I use --c-primary or --c-accent?" not "what shade of blue was it?"

When changing a brand color, you change one line of CSS and the change is reflected everywhere. Without a system, you would be searching for #6366f1 across the entire codebase.

Component Library in the Admin Panel

For the admin panel, we use Vuetify 3 — a complete design system for Vue 3. Vuetify has hundreds of components: tables, forms, dialogs, navigation. All are themeable — you can change the theme and the entire admin adapts.

This is the power of a component library: you do not need to reinvent the wheel. You focus on functionality, not on styling every button.

Public Web: Custom CSS

The Modulo CMS public web uses plain CSS with variables. No framework, no external dependency. The reason: the public web must be fast and lightweight. Tailwind, Bootstrap, and Vuetify all add kilobytes that visitors have to download.

With CSS variables, we achieve consistency without the overhead.

Typography: The Foundation That Gets Overlooked

Most websites focus too much on colors and forget about typography. Yet 90% of the web is text.

Our rules:

  • H1 heading: clamp(1.75rem, 4vw, 2.5rem) — responsive without media queries
  • Line-height for text: 1.8 — space for comfortable reading
  • Letter-spacing for headings: -0.04em — tighter, more modern
  • Font-weight: 900 for headings, 500 for body text, 700 for labels

Spacing: Rule of Eights

All margins are multiples of 8px: 8, 16, 24, 32, 48, 64. Never 7, 9, or 13. This makes the design rhythmic and consistent, even if no one looks at it directly.

Conclusion: System Before Code

If you are starting a new project, invest the first few hours in defining the system: colors, fonts, spacing, border radius, shadows. These decisions will save days of work later.

In Modulo CMS, the design system is part of the project from the very first commit. When we add a new module, the new page looks consistent — without any extra effort.