cd /news/developer-tools/design-md-anatomy-how-tokens-and-pro… · home topics developer-tools article
[ARTICLE · art-41661] src=dev.to ↗ pub= topic=developer-tools verified=true sentiment=· neutral

DESIGN.md Anatomy: How Tokens and Prose Work Together

A developer introduced DESIGN.md, a file format that pairs YAML front matter with machine-readable design tokens and a markdown body containing human-readable rationale. The format aims to give AI agents both precise values and contextual rules for applying design systems. A free cheat sheet and a full guide are available.

read2 min views1 publishedJun 27, 2026

A DESIGN.md has two parts: YAML front matter with machine-readable design tokens, and a markdown body with human-readable rationale. Tokens give an agent exact values; prose gives it the rules. Pairing them is the format's core insight.

The front matter holds your colors, typography, spacing, rounded corners and components as typed values. It opens and closes with three dashes:

---
colors:
  primary: "#1A1C1E"
  surface: "#FFFFFF"
spacing:
  sm: 8px
  md: 16px
---

This gives the agent precise values to use directly.

Below the front matter is the rationale, in canonical sections:

## Overview
A calm, focused reading environment. The UI recedes so content leads.

## Colors
Warm neutrals carry the interface. The accent is reserved strictly
for interactive elements - never decorative.

A hex value tells the agent what a color is. Only prose can tell it that this color is the sole interaction driver and must never be used decoratively.

Is the front matter required? In principle optional, but in practice it is the heart of the file.

Can I use only prose? You can, but you lose precise values. The format is designed for both.

Tokens are the values; prose is the meaning. A DESIGN.md works because it carries both in one file the agent reads together.

Free starter: The format, a complete annotated example, and the core idea are on a free cheat sheet: DESIGN.md Quick-Start Cheat Sheet

Go deeper: The full guide covers the entire format — the token schema, the CLI in depth, accessibility, Tailwind and DTCG export, agent integration, and a complete walkthrough: DESIGN.md: The Complete Guide to Design Systems for AI Agents

Do you write rationale in your design docs, or just list the tokens? Curious how teams handle the 'why' in the comments.

── more in #developer-tools 4 stories · sorted by recency
── more on @design.md 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/design-md-anatomy-ho…] indexed:0 read:2min 2026-06-27 ·