How to Build a Design System from Scratch

Introduction

Building a design system from scratch requires careful planning and a clear understanding of your project needs. This article walks through the key steps involved in creating a minimal, maintainable design system using vanilla CSS.

A good design system provides consistency across pages, speeds up development, and makes it easier for teams to collaborate on the same codebase.

A design system is only as strong as its tokens. Get these right and everything else follows.

Step 1: Define Your Tokens

Design tokens are the foundation of any system. Start with these categories:

1. Colors — primary, secondary, semantic (success, warning, error)
2. Typography — font family, sizes, weights
3. Spacing — consistent scale based on a base unit
4. Shapes — border radius values

Step 2: Build Components

Start with the most commonly used components. These typically include buttons, inputs, cards, and navigation elements.

Each component should follow the same patterns:

• Use design tokens for all values
• Support multiple variants through scoped modifiers
• Work on both light and dark surfaces
• Handle disabled and active states

Step 3: Use Modern CSS

Modern CSS features reduce the need for preprocessors. Use native nesting for scoped styles:

.button {
    display: inline-flex;
    padding: 0.5rem 0.75rem;

    &.primary { background: #000; color: white; }
    &.secondary { background: #eee; color: #000; }

    &:disabled { opacity: 0.5; }
}

The & nesting selector scopes modifiers to their parent component. No BEM naming needed.

Step 4: Document Everything

Split documentation by concern:

Conclusion

A minimal design system does not need to be complex. Start with tokens, build only the components you need, use modern CSS, and document as you go. The result is a lightweight, maintainable system that scales with your project.