Design tokens are the single source of truth for visual decisions across a product. They encode color, spacing, typography, and motion into named variables that components consume.
Why tokens matter
Without tokens, a change to the primary brand color requires hunting through hundreds of files. With tokens, one variable update propagates everywhere — from buttons to alerts to navigation bars.
Tokens also bridge the gap between design tools and code. A designer names a color surface-brand in Figma; a developer uses var(--surface-brand) in CSS. They speak the same language.
Practical examples
Consider a component that needs a background, a border, and text. Instead of hardcoding #1a56db, #e1effe, and #1e429f, the component references --color-primary, --surface-primary-subtle, and --text-primary-strong. When the brand evolves, the palette changes — the component does not.
Token categories
Color — brand, semantic, and neutral palettes
Spacing — a consistent scale from 2px to 64px
Typography — font sizes, weights, and line heights
Radius — from sharp corners to fully rounded
Shadow — elevation levels for depth and hierarchy
Motion — easing curves and duration steps
Most of the quotes found on the Internet were probably generated by an AI.
The content_image() function renders an img with loading="lazy" by default, and wraps it in a figure element when a caption is provided.
Without caption — a plain img, full-width.
With caption — wrapped in a figure with a figcaption.
A figure with a figcaption — use it to credit sources or add context to visual content.
Media with text
Image occupying one third of the layout.
Use content--media to place an image and text side by side. The image takes one third of the width, the text two thirds.
This layout suits pull quotes, illustrated definitions, or any short editorial block where the image reinforces the copy without dominating it.
Drop cap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Meta bar
Understanding design tokens
Design tokens are the single source of truth for visual decisions across a product. They encode color, spacing, typography, and motion into named variables that components consume.
The other way, when the first one fails: the question, then a value copied in one click, or a link. Right under what it stands in for, aligned with it.
Cannot scan? Type this key in the app:JBSWY3DPEHPK3PXPJBSWY3DPEHPK3PXP
