What is Design System?
A set of shared rules, components, and visual styles that keep every part of a product looking and behaving consistently. It is the source of truth for the whole team.

4 px grid · tokens · type · match
A design system keeps a product...
Write it in your own words in the app.
In real work
Follow our design system. Use the spacing scale (4px base), brand color tokens, and typography styles. No custom values.
In the illustration
Panels from two different workbenches are laid on the master plate; both drop onto the same 4 px grid, match the same token studs and type slots, and the plate's check pin drops: consistent.
Check the onboarding screens in your component library against the design system: list every colour, radius and spacing value that is not a token.
Try it now
The fastest way to learn a word is to use it. Open this line in the agent you already work in and watch what it does. Change the tool to the one you use.
Go further
01Practice
Make it stick
One term a day, a short quiz, and sentence practice that checks your own words.
02Verify
Prove you know it
Pass the quiz and keep it in a Skills Wallet you can share with anyone who needs proof.
03Career
Find the work that uses it
See which roles lean on this vocabulary, and what they pay in year one.





