Your DESIGN.md is just text until you can see it.
No uploads, no account, no build step. It renders what you wrote, not what an AI guesses.
---name: Halcyoncolors: primary: "#2D5BFF" ink: "#0E1726" teal: "#12B5A6"--- ## Colors## Typography
Colors, with roles and real contrast.
Every color is shown in its role, paired with text, and checked for WCAG contrast so you can trust it before it ships. The same parser that powers the tool runs right here, on your machine.
Your file never leaves your browser.
Your brand guidelines stay yours. Parsing, linting, and rendering run client-side, with no uploads and no accounts.
Zero uploads
Your DESIGN.md file is never sent anywhere. The parser and the official linter run as JavaScript in the same tab.
Verifiable in your browser
Open the Network tab and drop in your file: nothing is uploaded. The only outside request is Google Fonts, for typefaces your file names, and it never includes the file.
DESIGN.md vs the alternatives.
One plain-text file your repo, your team, and your AI agents can all read, and that renders to something a human can actually see.
| DESIGN.md THIS | JSON tokens (DTCG) | Figma guideline | |
|---|---|---|---|
| Lives in your repo | |||
| Human and AI readable | ~ | ||
| Renders to a visual guideline | |||
| No vendor lock-in | |||
| Works in code review / PR workflows |
See it for real brands.
Browse ready-made DESIGN.md examples and see what the rendered output looks like.
Understand the format.
Start with the essentials: what DESIGN.md is and how to write one for your project.
DESIGN.md
How to Create a DESIGN.md File
A practical method for creating a DESIGN.md file: what to include, what to cut for token budget, and how to pass every lint rule, with a worked example.
Read articleDESIGN.md
What Is DESIGN.md?
DESIGN.md is Google's open Apache-2.0 format for encoding a brand's visual identity in a plain-text file, readable by both humans and AI agents.
Read articleQuestions, answered.
No account, no login, no sign-up. Open the tool, drop in your file, and see it rendered.
Not strictly. The tool reads Google's DESIGN.md spec (v0.4), but it also handles loose Markdown sections and plain color blocks. The closer to the spec, the more sections it renders.
Yes. In the viewer, Copy share link puts the whole file into the link's # fragment, which browsers never send to a server. For a file on GitHub, share the viewer link with its ?url= address instead.
Open your browser's Network tab before dropping in a file. No request carries your file. The only outside request is Google Fonts, for typefaces your file names. Parsing runs entirely as JavaScript in your tab.
See your DESIGN.md as a real guideline.
Drop in a file or paste it. The render is instant, private, and yours.