Design system

Nielsen Norman Group defines a design system as a complete set of standards intended to manage design at scale using reusable components and patterns. In practice it has three layers:

• Design tokens. Named values for color, typography, spacing, radius, shadow and motion, such as --color-surface or --space-4. Tokens let a design decision live in one place and flow into every component. The W3C Design Tokens Community Group works on a standard format for exchanging them between tools.
• Components. Buttons, inputs, cards and navigation built once from those tokens, in both design files and code.
• Guidelines. When to use which component, how to write labels, what spacing goes where, and accessibility rules.

A style guide or a component library alone isn't a design system. Each is one layer of it.

Without one, every screen re-decides its own colors, sizes and button styles, and the product drifts. A design system makes the consistent choice the easy choice. Designers and developers share one vocabulary, new screens are faster to build, and a brand change becomes a token change instead of a hunt through every file. The cost is upkeep: a system nobody maintains drifts from the product it describes.

A design system matters even more when an AI model writes the interface. A model given no constraints picks plausible defaults, and those defaults vary from one prompt to the next. A model given tokens and rules can follow them on every screen. Explicit tokens and written rules turn "make it look like the rest of the app" into an instruction the model can actually check its work against.

On the Business plan, you can attach a design system to a Vibely web project, and the agent builds within it. Three curated systems ship with Vibely: Editorial Monocle, Modern Minimal and Warm Craft. Each one is a written design spec, a usage guide, a manifest and a tokens.css file that the agent pastes into the project as is, so the colors and type in your app are the system's real values. You can also turn an existing web project into your workspace's own design system (Settings → Design systems → Create from project), so new projects start from the same look.