Skip to main content
DESIGN.md is a markdown document that describes the design system your generated designs use — colours, typography, spacing, component patterns, and the overall mood. It’s auto-generated from whatever’s on your canvas. You can hand it to a developer, paste it into a brief, or just keep it as living documentation that stays in sync with your designs.

​
When you get one

A DESIGN.md is generated automatically every time you:
  • Export to React — saved into the project at DESIGN.md (alongside the code)
  • Build a design — saved into the resulting Web App project
  • Download a design — included in the zip
You can also generate one manually: right-click any design → Generate DESIGN.md — preview it and copy to clipboard.

​
What’s in it

A real DESIGN.md looks like this: 
# Design System — Acme Platform

## Mood & Personality
Premium, confident, technically sophisticated. Reads like Linear and Notion
had a child.

## Colors
- **Background**: Deep slate (#0a0a0a) — primary canvas
- **Surface**: Slate 900 (#0f172a) — cards, panels
- **Primary**: Electric indigo (#6366f1) — CTAs, active states, links
- **Text Primary**: White (#ffffff) — headlines
- **Text Secondary**: Slate 400 (#94a3b8) — body, supporting copy

## Typography
- **Display**: Space Grotesk (700, 48–72px) — hero headlines
- **Body**: Inter (400, 16px, 1.6 line-height) — paragraphs
- **Mono**: JetBrains Mono — code, numbers, technical labels

## Spacing & Layout
- Section padding: py-20 md:py-32
- Content max-width: max-w-6xl
- Card padding: p-6 md:p-8

## Component Patterns
- Cards: bg-surface border border-white/[0.06] rounded-xl
- Buttons: bg-primary text-white rounded-lg px-6 py-3
- Inputs: bg-white/[0.04] border border-white/[0.08] rounded-md

## Animations & Interactions
- Entrance: fade up, 600ms cubic-bezier(0.16, 1, 0.3, 1)
- Hover cards: -translate-y-1 + shadow glow
- Page transitions: cross-fade, 300ms
It covers six sections every time: mood, colours, typography, spacing, components, animations.

​
Why it’s useful

Handoff. Drop it into a designer-to-developer brief. The developer has the entire design system in one file, with the exact hex values and class names — no eyeballing. Consistency across sessions. Come back next week, prompt for a new page, paste the DESIGN.md into the prompt. The new page picks up the same colours, fonts, and patterns. Documentation that stays current. Regenerate after major design changes — the markdown updates to match what’s actually on the canvas, not what was true three weeks ago.

​
Updating an existing DESIGN.md

Regenerating with an existing DESIGN.md present treats it as a base — the new one is an update, not a fresh rewrite. New designs add their tokens; unchanged ones stay put. This is the right call when your design has evolved but you don’t want to start the documentation from scratch.

​
Editing by hand

DESIGN.md is just markdown. Edit it like any other file. The only convention that matters: keep the six section headings (## Colors, ## Typography, etc.) — that’s what tools like the React export look for when mapping designs to tokens.