Collection of reusable components, patterns, and guidelines ensuring visual and interaction consistency in digital products at scale.
A design system is a collection of reusable components, design tokens, patterns, and documentation enabling consistent product building at scale. It's not just a component library — it includes principles, usage guides, and governance.
| System | Organization |
|---|---|
| Material Design | |
| Fluent | Microsoft |
| Carbon | IBM |
| Primer | GitHub |
| shadcn/ui | Community |
A design system is not a component library — it is a shared language between design and engineering. It reduces repetitive decision-making, guarantees visual consistency, and accelerates development by providing tested, documented primitives.
JavaScript library for building user interfaces through declarative, reusable components, with an ecosystem spanning from SPAs to full-stack applications with Server Components.
Practice of designing and developing digital products usable by all people, including those with visual, auditory, motor, or cognitive disabilities.
Utility-first CSS framework enabling design building directly in markup using atomic classes, eliminating the need to write custom CSS.
Native web standards for creating reusable, encapsulated components that work in any framework or without one.
Discipline focused on optimizing developer productivity, satisfaction, and effectiveness through well-designed tools, processes, and environments.
Boilerplate for creating React libraries with TypeScript, Rollup, Jest, Tailwind CSS, Husky, and npm publishing.
Discipline encompassing every aspect of a person's interaction with a product, system, or service, aiming for usefulness, usability, and satisfaction.