> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibely.sh/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# DESIGN.md

> A design system document, auto-generated from your designs. Great for handoff.

`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:

```markdown theme={null}
# 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](/docs/design/react-export) look for when mapping designs to tokens.