Articles
Design systems, design-dev workflows, and automated design token extraction.
Building Your First Design System
You inherit a brand guide, fifteen years of legacy UIs, and a request to build a coherent design system. How do you actually read a brand guide, derive UI states from one or two brand colours, set up a modular type scale, and decide what whitespace means for this product? A practical walkthrough.
DESIGN.md Is a Good Idea with a Low Ceiling
DESIGN.md is a readable hint, not a token. It works for prototypes and solo projects. Real design systems need structured, machine-readable token schemas that survive across tools, platforms, and team sizes.
Brand, Design System, Component Library: Two Ways to Read the Same Hierarchy
The same hierarchy diagram - brand, design guidelines, design system, component library - tells completely different stories depending on who is reading it. A consultant, a developer, a visual designer, and a marketing lead all see a different centre of gravity.
Design-Dev Workflows That Pay Off
Modern design and development workflows are not about picking the fanciest tool. They are about shared understanding, a common end goal, and a workflow that fits the team you actually have.
Three Mindsets, One Product
Designers, developers, and business stakeholders all think about UI differently. This article looks at why that gap persists and how a token-first approach helps close it.
Run Your First Extraction
Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.
I Built Dembrandt: Extract Any Website's Design System in Seconds
Technical deep-dive on the motivation, architecture, and methodology behind Dembrandt. How headless browser automation turns manual DevTools work into a single CLI command.