DESIGN.md studio

Turn your project's visual language into a file

Choose a theme, preview its core components, and create a usable DESIGN.md for people and agents.

Ready themes

Selected: Heritage — Editorial and dependable; for products that should feel calm and lasting.

Preview mode

DESIGN SYSTEM

A UI with a clear visual language

Changing the theme updates colors, contrast, and the DESIGN.md output together.

Sample cardDefine the language before you build.Font: Ravi · Radius: 18px

Usable output

DESIGN.md

---
version: 1
name: "Heritage"
description: "Editorial and dependable; for products that should feel calm and lasting."
mode: "light"
tone: "Editorial"
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
  accent: "#B8422E"
  background: "#F7F5F2"
  surface: "#FFFFFF"
  text: "#0A0A0A"
  muted: "#5E6266"
  border: "#D9D5CF"
typography:
  fontFamily: "Ravi"
  bodySize: 16px
  bodyLineHeight: 1.7
  headingWeight: 700
radius:
  sm: 4px
  md: 10px
  lg: 18px
spacing:
  unit: 8px
  section: 48px
components:
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.surface}"
    minHeight: 44px
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    rounded: "{radius.lg}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{radius.md}"
accessibility:
  minimumTouchTarget: 44px
  focusIndicator: "2px solid {colors.accent}"
  bodyTextContrast: "AA"
---

This output is generated locally and can be copied, saved, and edited by a person or agent.