DESIGN.md viewer and linter
Runs in your browserPaste or drop a DESIGN.md file to see it rendered as a navigable brand guideline and checked against the official lint rules. This is a renderer, not a generator, and your file is never uploaded or stored.
What the viewer shows
The viewer turns the YAML tokens and Markdown sections of a DESIGN.md into a brand guideline you can scroll and navigate, in the order the spec defines. New to the format? Read what DESIGN.md is first.
- Colors as swatches with hex values and a WCAG contrast badge against white.
- Typography as live specimens: family, size, weight, line height, and letter spacing for every type token.
- Spacing drawn to scale, corner radii previewed, and components grouped with their hover, pressed, and disabled variants.
- Prose sections as written: Overview, Do's and Don'ts split into two columns, Accessibility, Icons, Voice and Tone, and any custom section.
- Diagnostics: every lint finding with its rule id and a link to the page that explains the fix.
Checks it runs
Linting uses the official @google/design.md 0.4.0 linter, bundled to run in the browser, so the findings match what npx @google/design.md lint reports on the command line.
- Errors:
broken-ref(a token reference that does not resolve). - Warnings:
missing-primary,contrast-ratio(component text below WCAG AA),orphaned-tokens,missing-typography,section-order,unknown-key,token-like-ignored. - Info:
token-summary,missing-sections,omitted-rules.
Token groups a file leaves out on purpose with the omitted key show up as intentionally omitted, with the stated reason, instead of as an empty section.
Files it accepts
- Spec-format DESIGN.md files: YAML frontmatter plus Markdown sections, as described in the field reference.
- Loose Markdown design docs: headings such as Colors, Typography, or Spacing, with hex values and sizes in tables or lists.
- DTCG token files in JSON, the W3C Design Tokens format.
Drop a .md, .markdown, or .json file, pick one from disk, or paste the text and press Cmd+Enter. Want a starting point? Open one of the examples.
Frequently asked questions
Is my DESIGN.md uploaded anywhere?
No. Parsing, linting, and rendering all run inside your browser tab. The file is never sent to a server and nothing is stored after you close the page. The one outside request is Google Fonts: when your file names a typeface Google hosts, the type specimens load it from there, which shares the font name, never the file.
Does the viewer generate a DESIGN.md for me?
No. It renders and checks a file you already have. To write one from scratch, follow how to create a DESIGN.md file; to compare tools that generate one, see DESIGN.md tools compared.
Why does my file show warnings if it still renders?
Warnings are advisory. The file renders, but the linter points out problems an AI coding agent would inherit, such as a missing primary color, text that fails WCAG AA contrast, or tokens no component uses. Each finding links to a page that explains the fix.
Which version of the spec does it follow?
It runs @google/design.md 0.4.0, the same version the guide documents. The changelog lists what changed in each release.