What is a design system?
A design system is the shared set of rules and parts a team uses to design and build a product or website consistently: design tokens such as colours, type and spacing, reusable components like buttons and cards, and guidelines for using them. It keeps every new page in line with the rest of the site.
What is inside
Tokens hold the basic values, so a change to a colour or spacing step updates everywhere. Components combine tokens into reusable pieces with variants and states. Documentation explains when to use each one and why.
In the design file and in the build
The same tokens and components should exist in the design file and on the live site. In Framer, components and styles carry over from design to the published site directly; in code they become CSS variables and components.
Why it pays off
New pages go faster, the brand stays consistent as the site grows, and accessibility rules such as colour contrast from WCAG are solved once in the components rather than page by page.
