Export formats

Every design system in designdrop exports to five formats. DESIGN.md is the source of truth; the rest are derivations the editor can re-generate at any time.

DESIGN.md

The canonical format. Markdown with frontmatter metadata + structured token sections + a "Patterns" section at the end. AI agents read this directly. Humans read it directly.

---
name: stripe
version: 1.0.0
description: Developer-first SaaS. Vibrant gradients, minimal chrome.
---
 
## Colors
- primary: #635BFF
- ink: #0A2540
- accent: #00D4FF
- bg: #F6F9FC
...

Use this format whenever you can — it's the only one with the Patterns context an AI agent needs.

tokens.css

CSS custom properties wrapped in :root and (when present) [data-theme="dark"]. Drop into any stack.

:root {
  --color-primary: #635bff;
  --color-ink: #0a2540;
  /* ... */
}

theme.css (Tailwind v4)

A @theme block compatible with Tailwind v4's CSS-first config. Drop into your globals.css:

@import 'tailwindcss';
 
@theme {
  --color-primary: #635bff;
  --color-ink: #0a2540;
  /* ... */
}

tokens.dtcg.json

W3C Design Tokens Community Group format. Use when handing off to design tools (Figma plugin, Style Dictionary, Specify) or non-web stacks (iOS / Android via Style Dictionary's transforms).

{
  "color": {
    "primary": { "$value": "#635BFF", "$type": "color" },
    "ink": { "$value": "#0A2540", "$type": "color" }
  }
}

tokens.json

A flat key-value bag for tools that don't speak DTCG. Useful as a fallback or for ad-hoc tooling.

{
  "color.primary": "#635BFF",
  "color.ink": "#0A2540"
}

Round-trip

Every format round-trips cleanly to DESIGN.md. The CLI's validate --emit regenerates all derived files from a DESIGN.md, so your repo can keep just the markdown and emit the rest at build time.