The format

What is DESIGN.md?

DESIGN.md is an open, single-file format for describing a product's visual identity in a way a coding agent can read and apply. Instead of scattering brand decisions across a codebase, you keep one file that captures the design system — so new screens come out on-brand by default.

Each file is plain Markdown with two parts. A block of YAML frontmatter holds the structured design tokens; the Markdown body below it documents the intent in human-readable prose — how the tokens are meant to be used, with sections like Overview, Colors, Typography, Components, and Do's & Don'ts.

What's inside

• Colors — the palette: surfaces, text, borders, and brand/accent roles.
• Typography — the font family and a type scale of sizes, weights, and line-heights.
• Radius & spacing — corner rounding and spacing steps.
• Components — reusable definitions (buttons, inputs, cards) that reference the tokens, e.g. {colors.primary}.
• Prose — the written guidance that explains how it all fits together.

---
name: Atmospheric Glass
colors:
  background: "#0b1326"
  on-background: "#dae2fd"
  primary: "#ffffff"
typography:
  display-lg: { fontFamily: Inter, fontSize: 84px, fontWeight: "700" }
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
---

## Overview
A frosted-glass identity rendered in Inter…

Why it's useful

Because the tokens are structured and the intent is written down, both people and agents work from the same source of truth. Hand a coding agent a DESIGN.md and it has a concrete brief to build against — no guessing at hex values or type ramps. This previewer is one demonstration: everything you see on the home page is rendered live from an uploaded file's tokens.

DESIGN.md is an open format from Google Labs. This previewer is an independent viewer and is not affiliated with Google.