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 ReferenceOpen in toolExamples Gallery
Curated DESIGN.md files across different verticals and formats. Click any card to open the example live in the tool and explore its tokens, colors, and typography without uploading anything.
Northwind
Northwind demonstrates the token-table approach: no frontmatter, values in GFM tables, readable as plain Markdown without any tooling.
Open in toolDot
Dot is a constraint-first example: one brand color, one typeface, zero decoration. The DESIGN.md body stays under thirty lines.
Open in toolFieldstone
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.mdOpen in toolNocturne
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 & DepthOpen in toolMarigold
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 ShapesOpen in toolVerdigris
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 ColorsOpen in toolAtmospheric Glass
Atmospheric Glass is an official Google Labs example: a glassmorphism weather UI that builds depth from translucent surfaces and blur over a vibrant gradient, with a full Material-style color set.
Learn about Elevation & DepthOpen in toolPaws & Paths
Paws & Paths is an official Google Labs example: a friendly pet-services brand on Golden Retriever orange and Sky Walk blue, with soft shadows, rounded cards, and Plus Jakarta Sans.
Learn about ShapesOpen in toolTotality Festival
Totality Festival is an official Google Labs example: a cosmic eclipse festival system in obsidian and white-gold, using dark glassmorphism, a cyan counterpoint, and Space Grotesk headers.
Learn about Elevation & DepthOpen in toolUsing 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 are the example design systems published in the Google Labs design.md repository (Apache-2.0), mirrored here so you can see the canonical files rendered. The others are written for this gallery. All of them are illustrative sample brands, not real companies.
New to the format? The DESIGN.md spec guide documents every field, and the guide explains each section in depth.