Design Systems

Public design systems are the best free study material in interface design, and some are also production libraries you can adopt. Each reviewed page here separates what you can reuse from what you can only learn from: the component code license (often MIT or Apache 2.0), the separate terms that usually cover fonts, icons, brand assets and the guideline text itself, and any rule that limits use to the vendor's own platform.

Pages also record how each system is implemented today, because the documentation and the shipped library rarely match one to one: which frameworks have first-party packages, which are community ports, which libraries are deprecated or archived, and how the token layer is organised. Version numbers and package names were checked against npm and the projects' repositories on the dates given on each page.

Use this category to choose a foundation, or to borrow a pattern with clear rights. If you are building your own system instead, the guide to building a design system from scratch walks through tokens, components and governance, and the accessible color guide covers the contrast checks no system can do for you.

Before adopting one, answer four questions against the entry pages. Does the system ship a first-party library for your framework, or only guidelines and community ports? Does its license let you use the components in a product that has nothing to do with the vendor? Are the fonts and icons it references covered by the same license, or by separate asset terms? And is the library you would install actively maintained, or archived in favour of a newer implementation? Several well-known systems answer at least one of these differently from what their reputation suggests, which is why each page records the answer and the date we checked it.

11 reviewed entries with license notes read at the source.