Design system
A shared set of colors, fonts, spacing, and ready-made components that keeps every screen consistent.
What it is
A design system is the rulebook and parts bin for an app's look: a color palette, a type scale, a spacing scale, and reusable components like buttons, inputs, and cards built to those rules.
With one in place, a new screen looks like it belongs automatically. Without one, every page drifts: slightly different blues, three button styles, random gaps.
Design tokens are the named values inside it, such as "primary color" or "space-4", so changing one value updates everywhere it's used.
How to ask for it
“Every page looks a bit different. Can you make it consistent?”
“Create a small design system before building more screens: CSS variables for 5 brand colors, a type scale, and a spacing scale, plus shared Button, Input, and Card components. Refactor existing pages to use only these.”
"Make it consistent" could mean anything; "design system" names the specific shared tokens and components that produce consistency.
You've seen this in
- GGoogle's Material Design
- SShopify Polaris
- IIBM Carbon