DESIGN.md validator

The YAML frontmatter, the required primary color, that colors are written in a color format (hex, rgb, hsl, oklch, a color name and the like), font sizes and radii in px, em or rem, typography properties, component properties and their token references (including references left unquoted, which YAML does not read as text), the omitted list, duplicate or out-of-order sections, and the contrast between each component's text and background colors against the WCAG AA minimum of 4.5:1. Errors make the file invalid; warnings flag things worth fixing.

No. Validation runs entirely in your browser: the text you paste or the file you pick is never sent to our servers. The only requests the preview makes are for font stylesheets: our server fetches them from Google Fonts, and they carry just the font family names from your typography tokens.

Google's DESIGN.md format as used by Stitch and published in the google-labs-code/design.md repository. The validator applies the same rules Design Extractor uses to check every DESIGN.md it generates, plus a contrast check on component colors.

A reference such as "{colors.brand}" has to name a token that exists in the frontmatter, here a brand entry under colors. Add the missing token or point the reference at one that exists. Keep references in quotes: YAML reads an unquoted {colors.brand} as a mapping, not as text.

Yes. Google's open-source command-line tool checks a file in your pipeline: run npx @google/design.md lint DESIGN.md. It prints a JSON report and exits with code 1 when it finds errors, so the job fails on a broken file. Its rule set overlaps with this page but some severities differ.