DESIGN.md Generator

Generate a DESIGN.md file for AI coding agents such as Claude Code, Cursor or Stitch. Pick your colors, fonts, spacing and components, then copy or download a file that follows the official DESIGN.md format. Everything runs in your browser.

Start from a presetProduct nameOne-line descriptionPersonality (3 words)AudienceText direction

Primary

Secondary

Neutral

Surface

Text on surface

Error

Latin fontArabic font (optional)Base font size (px)Type scaleSpacing baseCorner radius (px)LayoutMax width (px)Depth

Button Input Card

Do's and Don'ts (one per line, optional)

✓ Text on surface: 17.85:1 (passes WCAG AA)✓ Button text on primary: 5.17:1 (passes WCAG AA)

PrimaryAcme Analytics

---
version: alpha
name: "Acme Analytics"
description: "A B2B SaaS dashboard for data teams"
colors:
  primary: "#2563EB"
  on-primary: "#FFFFFF"
  secondary: "#7C3AED"
  neutral: "#94A3B8"
  surface: "#FFFFFF"
  on-surface: "#0F172A"
  error: "#DC2626"
typography:
  display:
    fontFamily: "Inter"
    fontSize: 2.441rem
    fontWeight: 700
    lineHeight: 1.1
  h1:
    fontFamily: "Inter"
    fontSize: 1.953rem
    fontWeight: 700
    lineHeight: 1.15
  h2:
    fontFamily: "Inter"
    fontSize: 1.563rem
    fontWeight: 600
    lineHeight: 1.2
  h3:
    fontFamily: "Inter"
    fontSize: 1.25rem
    fontWeight: 600
    lineHeight: 1.3
  body-md:
    fontFamily: "Inter"
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: "Inter"
    fontSize: 0.8rem
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "Inter"
    fontSize: 0.8rem
    fontWeight: 600
    lineHeight: 1.2
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 12px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 8px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: 24px
  divider:
    backgroundColor: "{colors.neutral}"
    height: 1px
---

## Overview

Acme Analytics: A B2B SaaS dashboard for data teams.

Personality: technical, calm, precise.

Audience: Product and data teams.

Text direction: Left-to-right.

## Colors

- **Primary (#2563EB):** main actions, links and focus states.
- **Secondary (#7C3AED):** supporting accents; never competes with primary actions.
- **Neutral (#94A3B8):** borders, dividers and muted text.
- **Surface (#FFFFFF):** page and card backgrounds.
- **Error (#DC2626):** errors and destructive actions only.

## Typography

Latin text uses Inter on a 1.25 modular scale from a 16px base.

## Layout

Spacing follows a 8px base unit. Content is placed on a 12-column grid with a maximum width of 1200px.

## Elevation & Depth

Separate surfaces with 1px borders in the neutral color instead of shadows.

## Shapes

Corners use the rounded scale: sm for inputs and chips, md for buttons, lg for cards.

## Components

- **button-primary:** one per view for the main action.
- **input:** always paired with a visible label.
- **card:** groups related content; avoid nesting cards.
- **divider:** 1px neutral rule between sections.

## Do's and Don'ts

- Do use tokens instead of raw values.
- Do keep text contrast at WCAG AA (4.5:1) or higher.
- Don't introduce colors or fonts outside this file.

Check it with the official linter: npx @google/design.md lint DESIGN.md

What is DESIGN.md?

DESIGN.md is a format specification from Google Labs for describing a visual identity to coding agents. Tokens in YAML front matter give agents exact values; markdown prose explains why those values exist and how to apply them.

Read our guide: what DESIGN.md solves and how to write one →

How to use your DESIGN.md

1. Save the file as DESIGN.md in the root of your repository.

2. Point your agent to it, for example with a line in AGENTS.md: “Follow the design system in DESIGN.md.”

3. Validate it with npx @google/design.md lint DESIGN.md, and run the linter in CI when the file changes.

DESIGN.md generator FAQ

What is a DESIGN.md file?

A markdown file that describes a visual identity to coding agents. It combines machine-readable design tokens in YAML front matter with human-readable rationale in ## sections.

Which sections does DESIGN.md use?

Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, and Do’s and Don’ts. Sections can be omitted, but those present must appear in that order.

How do I check that my file is valid?

Run the official linter: npx @google/design.md lint DESIGN.md. It validates structure, catches broken token references and checks WCAG contrast ratios.

Does this tool store or send my data?

No. The generator runs entirely in your browser. Nothing you type is sent to a server or saved.

Is the DESIGN.md format stable?

Not yet. The specification is published by Google Labs as version “alpha”, so details may change. Re-check your file against the latest spec and linter.

Need a full design system, not just the file?

Tremoloo designs product UI and design systems for teams in Saudi Arabia and the GCC, in Arabic and English.

Product design services →

AI product UX design →