Design system concepts for AI-built interfaces
The building blocks behind a good AI-built brand: a DESIGN.md the agent follows, and the semantic color tokens that make light and dark modes coherent.
31 guides in this topic.
How to generate a DESIGN.md (and what it is)
A DESIGN.md is the written design brief your AI coding agent follows so it stops building generic UI. Here is what belongs in one, and how to generate a complete, exportable DESIGN.md from a real design system.
Updated 2026-08-04
Semantic color tokens explained
Semantic color tokens use role names like background, primary, muted, and border instead of hue names. See all 28 roles in a live light and dark example.
Updated 2026-08-03
Interface guidelines an AI agent can actually follow
Packaging Apple's HIG, Material, or your own house rules as agent-readable guidance: what survives the translation from human design doc to agent instruction, what doesn't, and why platform guidelines alone still produce generic UI.
Updated 2026-07-27
Font pairings for SaaS: what a product typeface has to do
Every SaaS font list recommends the same faces. Here is why, what a typeface actually has to survive in a dense product UI (tabular numerals, real weight separation, small-size legibility) and when a second family earns its place.
Updated 2026-07-27
Atomic design in the agent era: which parts still hold
Atomic design solved a 2013 problem: giving humans a shared vocabulary for interface parts. An agent already has the vocabulary and lacks the judgement. Which parts of the methodology survive that, and which were always scaffolding.
Updated 2026-07-27
Design system vs component library: the difference that costs money
A component library is code you can install. A design system is the set of decisions that made that code look the way it does. Confusing them is why teams install shadcn, ship a generic product, and cannot work out what went wrong.
Updated 2026-07-27
Design token naming: the three-tier system, and where it breaks
Primitive, semantic, component. The three-tier convention is close to universal and most teams still end up with tokens nobody uses. Why that happens, how to name each tier, and the test that tells you a name is wrong before it ships.
Updated 2026-07-27
Design system governance when most commits are not human
Governance models were designed around the assumption that a person requests a change and a person reviews it. When an agent writes forty screens between reviews, contribution processes stop being the bottleneck and enforcement becomes the whole job.
Updated 2026-07-27
Figma to code: why the output is visually right and structurally wrong
Design-to-code tools reproduce what a frame looks like. They cannot reproduce what it means, because a Figma frame does not contain that. What actually transfers, what does not, and the naming decision that closes most of the gap.
Updated 2026-07-27
Avenir font pairings that hold up, with free stand-ins you can ship
What actually pairs with Avenir, rendered live instead of screenshotted. Plus the Google Fonts that stand in for it when the license doesn't travel, and complete systems built on those pairings.
Updated 2026-08-03
Caslon font pairings: what works with the original workhorse serif
The sans-serifs and monos that pair with Caslon, rendered live in free Caslon revivals you can actually ship. When in doubt, use Caslon; when pairing it, read this first.
Updated 2026-08-03
Proxima Nova font pairings, and what to ship when you can't license it
The serifs and monos that pair with Proxima Nova, rendered live with the free faces that stand in for it. The internet's default font deserves a partner that isn't a default.
Updated 2026-08-03
Gilroy font pairings that work, with the free faces that stand in
What pairs with Gilroy's rounded geometry, rendered live with free Google Fonts stand-ins. Plus which of the free weights you can actually build a product on.
Updated 2026-08-03
Brand guidelines examples worth stealing from (and what they all miss)
Eight public brand guidelines that actually teach you something, what separates a working document from a pretty PDF, and why the next generation of guidelines has to be executable by machines, not just read by designers.
Updated 2026-08-04
Shadcn design system generators compared
Compare shadcn theme generators, broader design systems, and coding-agent handoffs by inspecting their documented outputs and exported artifacts.
Updated 2026-08-03
AI UI review checklist
A pre-ship checklist for AI-generated UI: observable acceptance criteria, realistic states, issue routing, and a copyable review record.
Updated 2026-08-03
Google Stitch design system handoff
Assign rule authority in Google Stitch, diagnose inconsistent screens, test one controlled change, and verify the DESIGN.md and code handoff.
Updated 2026-08-03
Brand kit for web developers
How to turn brand assets into a handoff a developer can implement: ownership boundaries, an intake record, a public kit example, and acceptance checks.
Updated 2026-08-03
Webflow design system: who owns what
Map authority across Webflow variables, classes, components, and breakpoints, then verify one controlled change the way you would review a pull request.
Updated 2026-08-03
Shadcn typography: who owns the font
Where each shadcn typography decision lives: font packages, theme aliases, roles, component code, or DESIGN.md, with a real font swap traced through.
Updated 2026-08-03
Storybook design system documentation
Document a design system in Storybook without letting stories become policy: an authority map, a story coverage matrix, and one controlled change.
Updated 2026-08-03
Design token deprecation strategy
Deprecate design tokens without breaking consumers: map dependencies, pick the replacement shape, migrate layer by layer, remove behind a hard gate.
Updated 2026-08-03
FlutterFlow design system: theme to export
Give every FlutterFlow design decision one home, from theme values through components to exported Flutter code, and verify app and export separately.
Updated 2026-08-03
Design system contribution guidelines
Size design system reviews by reach, not diff length: classify the change, name what must move and what must not, and record the decision.
Updated 2026-08-03
Shadcn design tokens: :root to bg-primary
Trace a shadcn token from :root through @theme inline to bg-primary, then see what apply --preset really rewrites, with tested diffs and partial apply.
Updated 2026-08-03
How to validate DTCG design tokens: what a validator pass proves
Validate DTCG design tokens with a reproducible process that covers the published specification target, validator scope, controlled fixtures, generated artifacts, named consumers, and a bounded approval decision.
Updated 2026-09-06
Font fallback stack for product UI: choose by role, script, and failure mode
Choose and test product UI fallback fonts by role, script, and environment. Includes a requirements matrix, valid CSS examples, controlled failure tests, and accept, revise, or block criteria.
Updated 2026-09-07
Component tokens vs semantic tokens: when to add a component layer
Decide whether a component token creates a useful contract or needless maintenance. Compare scopes, trace an alias path, run a two-change propagation test, and record the boundary.
Updated 2026-09-07
CSS light-dark() with design tokens: preserve semantic roles and theme control
Use CSS light-dark() with semantic design tokens while preserving system preference, explicit app choice, nested theme scopes, fallbacks, and testable control.
Updated 2026-09-08
Tailwind CSS v4 design tokens: map external semantic roles to @theme
Map external semantic design tokens into Tailwind CSS v4 without duplicating raw values. Includes valid @theme examples, runtime dependencies, mode checks, an ownership worksheet, and an acceptance record.
Updated 2026-09-09
Penpot design tokens: what is native, what is shared, and what still needs verification
A practical Penpot token adoption guide that separates native capability from project evidence, maps ownership across six layers, and provides intake and controlled-change records with clear acceptance criteria.
Updated 2026-09-09