Design
Design system
A design system is the set of reusable elements a site is built from: type scale, spacing, colours, components and the rules for combining them. It is what keeps page fifty consistent with page one.
Without a system, every new page is designed from scratch and drifts from the last one. Buttons acquire six slightly different heights. Headings vary in size for no reason. The site looks less coherent every month, and nobody can point to the moment it went wrong. A system prevents the drift by making the consistent choice the easy one.
In Webflow a design system is concrete rather than a document: variables for colour and spacing, a type scale applied through classes, and components with properties that expose exactly the variation an editor is allowed. An editor adding a page assembles it from those parts, and cannot accidentally invent a seventh button.
The system does not need to be large. A handful of type sizes, a spacing scale, two or three button variants and a dozen components cover most business websites. It needs to be used, which is the part that requires discipline rather than tooling.
Building a design system in WebflowDesign