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.
Nothing leaves your browser.
Your brand guidelines stay yours. Everything runs client-side, with no server calls and no accounts required.
Zero uploads
Your DESIGN.md file is never sent anywhere. The parser runs as JavaScript in the same tab, with no network calls.
Verifiable in your browser
Open the Network tab and drop in your file: zero outbound requests. Parsing is JavaScript in your tab, nothing leaves it.
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 Write a DESIGN.md
A practical method for writing a DESIGN.md: what to include, what to cut for token budget, and how to pass all nine lint rules, 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.3), but it also handles loose Markdown sections and plain color blocks. The closer to the spec, the more sections it renders.
Yes. Once rendered, use your browser's address bar to copy the URL, or send your team the raw DESIGN.md file and have them drop it into the tool themselves.
Open your browser's Network tab before dropping in a file. You will see zero outbound requests. 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.