An 8pt Spacing Scale for Long-Form Article Layouts
Seven spacing steps from one 8px base cover a whole article page:...
Tag
Design Tokens articles and design guides
Tokens are the boring plumbing that makes a design system hold together, and we love the boring plumbing. Articles here trace the whole path: naming your color and spacing primitives, structuring semantic aliases, syncing Figma variables to code, and shipping JSON through Style Dictionary so designers and engineers stop arguing about hex values. We get into modes, theming, and the naming conventions that survive a rebrand. This is for design system leads and front-end folks who want one source of truth instead of a spreadsheet nobody trusts. Get the token layer right and everything above it gets calmer.
Articles, guides and tutorials tagged Design Tokens (15 in total), newest first.
Latest Design Tokens articles
Safari Technology Preview 249: Nine New CSS Features
Safari Technology Preview 249 lists nine new CSS features, from @function and...
Accessibility Tokens: Baking Contrast Into Design Systems
How to bake contrast and accessibility directly into design tokens instead of...
Easing Curves: The Shape, Not the Word, in Motion UI
What a cubic-bezier can and cannot draw, why linear() exists, what Material...
Design System Governance: Versioning and Changelogs
A practical guide to semantic versioning for design systems: breaking token changes,...
Dashboard Dark Mode: Patterns That Survive Real Use
Dashboard dark mode patterns that survive real use: chart color tokens, shadow-free...
Type Scale Systems: A Modular Approach for Products
A modular type scale, built on a ratio like 1.25 Major Third,...
Multi-Brand Theming: One Design System, Many Brands
Run several brands off one component library with layered design tokens and...
Design Tokens: Style Dictionary and Figma, Explained
How Style Dictionary turns Figma design tokens into CSS, iOS, and Android...
How to Implement Dark Mode in UI Design the Right Way
Dark mode isn't a color swap. Here's how to implement it in...
Figma Variables vs Design Tokens: What Goes Where Now
Figma variables and design tokens explained: what each term means, where they...
Figma Components: Variants, Auto Layout, and Slots
Master figma components with variants, auto layout, and the slots pattern. Learn...
The Designer to Developer Handoff Playbook in Figma
A practical guide to the designer to developer handoff: Figma Dev Mode,...
Design Tokens From Figma to CSS and Tailwind in Code
Design tokens move from Figma variables to CSS and Tailwind. Token tiers,...
How to Build a Design System in Figma Step by Step
How to build a design system in Figma with tokens, components, and...