DESIGN.md Explained

An explainer on DESIGN.md, described by Google's Stitch team as a plain-text design system document written for AI agents and kept in the repo. The problem it addresses is that an agent asked for a settings screen, an onboarding modal, a dashboard and a pricing page will produce four screens that each look fine alone and read as four different products together — because Figma is mostly invisible to agents and brand PDFs are worse. It places DESIGN.md alongside its neighbours: README.md tells humans what the project is, AGENTS.md tells coding agents how to work in the repo, DESIGN.md tells design and coding agents what the product should look like. The file has two layers — machine-readable YAML for colors, type, radius, spacing, component references and exact component properties, and human-readable markdown for how the interface should feel, which colors do which jobs, how layout behaves, and which component patterns are allowed or banned.