What is a design system?

This page is a short animated film about design systems, with sound. A brand decides a colour; the colour becomes a scale, then the other palettes; a typeface, a shape and dozens of other decisions follow. Every value gets a job, the jobs are written down as design tokens in the W3C format, and designers get them in their tools while developers get them in code. The tokens become a button, then every component, in light and in dark, with its icons and illustrations, and a check that it works for everyone: pale grey text next to text that is easy to read, text made twice as big that still fits, and an error message that stays clear once the colours are gone. Each component gets its page on the company's docs site: the live button, a do and a don't, its code and its props. Components make blocks, blocks make templates, templates become pages, pages make a product, and the same button is written in nine technologies. The product lands in its users' hands on a laptop, a tablet and a phone, then among dozens of products, or hundreds, on the same system. Then one decision changes and every screen follows. The system it builds is a neutral one in the spirit of shadcn/ui; add your company's name and colour to the address, for example ?name=Northwind&color=2563EB, and the same film shows yours.