Your first design system

If your project doesn't have an existing brand to extract from, start in the editor. You'll author a DESIGN.md from scratch, validate it, and export it as DESIGN.md / CSS / Tailwind / DTCG JSON.

Open the editor

Sign in at app.designdrop.app, click New design, and pick From scratch. You'll get a blank canvas with sensible defaults: an editorial type ramp, an indigo primary, and a 4 / 8 / 12 / 16 px spacing scale.

Pick the four anchor decisions

Every design system pivots around four anchors. Set these first; everything else falls out of them.

1. Primary color. Pick the one color that defines the brand. The editor surfaces WCAG contrast against light and dark backgrounds in real time — aim for AA (4.5:1 against body text).
2. Sans-serif stack. One stack for body and headings is fine. Mixing only pays off when you have a strong editorial reason.
3. Base font size. 16 px is the safe default. Increase to 17–18 px for editorial, drop to 14 px only for dense dashboards.
4. Radius scale. Brutalist (0–4 px), Functional (4–12 px), or Soft (12–24 px). Pick a personality and stay in it.

Validate as you go

The right rail runs the validator continuously. It catches:

• Contrast failures at AA + AAA.
• Empty token slots that downstream consumers will choke on.
• Dark theme inconsistencies (e.g., light theme has a muted token but dark doesn't).
• Tailwind / DTCG conformance issues that would block export.

Save and export

Hit Save to persist the design to your workspace, then Export for the format you need. DESIGN.md is the source of truth; CSS / Tailwind / DTCG are derived and round-trip cleanly via designdrop validate.

What's next

Once you've shipped one design system, the real work is keeping agents on-brand as the system evolves. The Editor reference covers token-level workflows; the Export guides cover per-tool integration.