What is Design system?

A design system is more than a component library. It is the agreed source of truth for how a product looks and behaves: the decisions (type scale, color roles, spacing, motion), the code that implements them, and the documentation that explains when to use what. Its value is consistency without meetings. When a designer and an engineer both reach for the same Button with the same variants, nobody debates padding again.

What it contains

• Foundations. Principles and the raw decisions: color, typography, spacing, radius, elevation and motion, usually expressed as design tokens.
• Components. A coded component library plus matching design files, covering every state: rest, hover, focus, disabled, loading, invalid and empty.
• Patterns. Recipes that combine components for recurring problems, such as forms with validation, empty states, settings pages and destructive confirmations.
• Guidelines. Content style, accessibility requirements and usage rules, including when not to use something.
• Governance. Who owns it, how changes are proposed, how versions ship and how teams adopt them.

Why it matters

Without a system, every team rebuilds the same controls with small differences, and the differences compound: five grays, three focus styles, dialogs that trap focus and dialogs that do not. A system moves those decisions to one place. Accessibility work is done once and inherited. A rebrand becomes a token change. New engineers ship consistent UI in their first week, because the easiest path is also the correct one.

The cost is real too. A system needs owners, documentation and a change process, or it drifts away from the product and people stop trusting it. Small teams often get most of the benefit by adopting an existing system and adjusting its tokens rather than building one from scratch.

How MiniDev UI approaches it

MiniDev UI is driven by one spec that every component derives from. It fixes the decisions up front: Geist Sans and Geist Mono for type, a near-black ink primary action, a violet brand color spent sparingly, a 4px spacing base, designed focus and disabled states, and one light source that all shadows follow. Colors exist only as semantic tokens, so no component contains a hex value or a palette step. Materials (hairline, glass, metal and paper) are an attribute that redefines those tokens for a page or a subtree:

<html class="dark" data-material="glass">
  <!-- every component inherits the glass tokens -->
</html>

To create a starting point for your own brand, try the brand kit generator.