Design System
ELI5 — The Vibe Check
A LEGO set for your UI — a collection of reusable components, colors, typography, and rules that keep your entire app looking consistent. Instead of every page being a unique snowflake, a design system makes sure buttons look like buttons everywhere. Material Design, Ant Design, and your company's custom one are all design systems.
Real Talk
A design system is a comprehensive collection of reusable components, design tokens, patterns, and guidelines that ensure visual and functional consistency across products. It typically includes a component library, documentation, design tokens (colors, spacing, typography), and usage guidelines.
When You'll Hear This
"Check the design system before building a new component — it probably already exists." / "We need a design system or every page will look different."
Related Terms
Component
A component is a self-contained LEGO brick for your UI.
CSS Variables
CSS Variables (officially called Custom Properties) let you store values in CSS and reuse them everywhere.
Storybook
Storybook is like a showroom for your UI components.
Tailwind
Tailwind is a CSS framework where instead of writing CSS files you add utility classes directly to your HTML.