Halcyon
Halcyon shows the full DESIGN.md spec format: YAML frontmatter with resolved token references, three typefaces with role separation, and a disciplined single-accent palette.
Learn about DESIGN.md Field ReferenceDESIGN.md Examples & Template Gallery
A gallery of curated DESIGN.md files across different verticals and formats. Each card opens a page with a rendered preview, a lint summary, and the full source to copy or download. Nothing is uploaded.
Northwind
Northwind demonstrates the token-table approach: no frontmatter, values in GFM tables, readable as plain Markdown without any tooling.
Dot
Dot is a constraint-first example: one brand color, one typeface, zero decoration. The DESIGN.md body stays under thirty lines.
Fieldstone
Fieldstone is a content-first editorial system with a warm palette and generous line-height. Demonstrates the loose Markdown format for reading platforms.
Learn about Brand Guidelines and DESIGN.mdNocturne
Nocturne is a dark, high-density trading interface. It builds depth from three surface tones instead of shadows, and reserves one signal green for gains and the single primary action.
Learn about Elevation & DepthMarigold
Marigold is a warm commerce brand built on soft, rounded shapes and a single marigold accent, with a berry color held back strictly for sale and urgency.
Learn about ShapesVerdigris
Verdigris is a calm, accessible wellness system in restful sage greens, with body text above a 7:1 contrast ratio and a dedicated focus color for visible keyboard focus.
Learn about ColorsAtmospheric Glass
A glassmorphism weather UI that builds depth from translucent surfaces and blur over a vibrant gradient, with a full Material-style color set. Published verbatim in Google Labs' design.md repository.
Source: google-labs-code/design.md (Apache-2.0)Learn about Elevation & DepthPaws & Paths
A friendly pet-services brand on Golden Retriever orange and Sky Walk blue, with soft shadows, rounded cards, and Plus Jakarta Sans. Published verbatim in Google Labs' design.md repository.
Source: google-labs-code/design.md (Apache-2.0)Learn about ShapesTotality Festival
A cosmic eclipse festival system in obsidian and white-gold, using dark glassmorphism, a cyan counterpoint, and Space Grotesk headers. Published verbatim in Google Labs' design.md repository.
Source: google-labs-code/design.md (Apache-2.0)Learn about Elevation & DepthStart from a template
Need a starting point? The minimal example is the shortest valid DESIGN.md here: copy it or download the .md file, then swap in your own colors and typeface. Want to know why each line is there? Read every line explained in the annotated DESIGN.md examples.
Looking for files based on real websites? The community collection awesome-design-md has 74 of them, and our audit of every file shows how each one fares against the official linter, with a link to render it.
Using these DESIGN.md examples
Each card above is a complete, illustrative DESIGN.md file: a plain-text description of a brand's colors, typography, and components. They are sample files, not real companies, written to show how different design languages read once they are rendered.
Open any example in the DESIGN.md viewer to see it rendered as a navigable brand guideline, then copy the raw file and edit it as a starting point for your own. Nothing is uploaded: the file is parsed entirely in your browser.
The cards marked Official · Google Labs are the canonical example files published in Google Labs' open design.md repository (Apache-2.0), mirrored here verbatim and linked back to their source so you can see the official files rendered. Every other card is an original example written for this gallery. All of them are illustrative sample brands, not real companies, and md-design.io is an independent project, not affiliated with or endorsed by Google.
New to the format? Start with what DESIGN.md is. The DESIGN.md spec guide documents every field, and the guide explains each section in depth.