Design systems
Tokens, components and documentation — how a system holds design and code together.
Articles · 6
-
Design handoff
The path of a decision from the layout to the page, what a complete handoff contains, a card the way a developer sees it, tools, files and a checklist — with live examples.
Read
-
What is a design system
Five layers of a design system, what is inside it, one decision that changes everything at once, when it pays off, a site with and without a system and ready systems — with live examples.
Read
-
Components and states
The anatomy of a button, three kinds in six states, eight states and what they show, a field with errors and real states to try — with live examples.
Read
-
Design tokens
What design tokens are, three levels from palette to components, how to name them, one card in three themes, kinds of tokens and code — with live examples.
Read
-
Spacing and grid
A spacing scale on a 4 px base, a card by eye and by the scale, the law of proximity, a grid of 12, 8 and 4 columns and the rhythm of a page — with live examples.
Read
-
Type scale
What a type scale is, eight classic ratios, one page in three scales, fluid sizes with clamp(), line length and spacing — with live examples.
Read