DESIGN.md Preview
Preview your own file

DESIGN.md to Tailwind

Turn a DESIGN.md into a Tailwind v4 @theme block: your colors, fonts, type sizes, spacing and radii become Tailwind utilities. Free, in your browser, no sign-up.

Convert your fileTry it with the template

How it works

  1. Paste or drop your DESIGN.md into DESIGN.md Preview.
  2. Open the Export tab and pick Tailwind.
  3. Copy or download the result. Nothing is uploaded; it all runs in your browser.

Example: the DESIGN.md template, converted

DESIGN.md (frontmatter)
---
version: alpha
name: Your Brand
description: One line on how the product should feel.
colors:
  primary: "#2F6FEB"
  on-primary: "#FFFFFF"
  surface: "#FAFAFA"
  surface-container: "#FFFFFF"
  on-surface: "#18181B"
  on-surface-variant: "#71717A"
  outline: "#E4E4E7"
  error: "#B42318"
  on-error: "#FFFFFF"
  success: "#1F7A45"
  on-success: "#FFFFFF"
typography:
  h1:
    fontFamily: Inter
    fontSize: 2.5rem
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  h2:
    fontFamily: Inter
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: 1.25
  body-md:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontFamily: Inter
    fontSize: 0.75rem
    fontWeight: 600
    letterSpacing: 0.06em
  mono:
    fontFamily: JetBrains Mono
    fontSize: 0.875rem
    fontWeight: 400
rounded:
  sm: 6px
  md: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    padding: 12px
  button-primary-hover:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: 12px
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 24px
  input:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: 12px
  caption:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface-variant}"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-success}"
    rounded: "{rounded.full}"
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-error}"
    rounded: "{rounded.full}"
---
theme.css 
/* Your Brand: generated from DESIGN.md by designmdpreview.com, a free tool by Township (township.agency) */
@import "tailwindcss";

@theme {
  --color-background: #FAFAFA;
  --color-foreground: #18181B;
  --color-muted: #6E6E70;
  --color-border: #DADADB;
  --color-accent: #2F6FEB;
  --color-accent-foreground: #FAFAFA;
  --color-primary-foreground: #FFFFFF;
  --color-primary: #2F6FEB;
  --color-surface-container: #FFFFFF;
  --color-surface: #FAFAFA;
  --color-on-surface: #18181B;
  --color-on-surface-variant: #71717A;
  --color-outline: #E4E4E7;
  --color-error: #B42318;
  --color-success: #1F7A45;

  --font-display: "Inter", sans-serif;
  --font-sans: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --text-h1: 2.5rem;
  --text-h2: 1.5rem;
  --text-body-md: 1rem;
  --text-label: 0.75rem;
  --text-mono: 0.875rem;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-full: 9999px;
}

What maps to what

In your DESIGN.mdBecomesUse it as
colors.accent--color-accentbg-accent, text-accent, border-accent
typography.h1.fontSize--text-h1text-h1
typography (headings, body, mono)--font-display, --font-sans, --font-monofont-display, font-sans, font-mono
spacing.md--spacing-mdp-md, gap-md, m-md
rounded.md--radius-mdrounded-md
Roles (background, text, primary)--color-background, --color-foreground, --color-primarybg-background, text-foreground, bg-primary

Using the output

Paste the output into your main CSS file in place of @import "tailwindcss". Tailwind v4 reads the @theme block and generates utilities like bg-accent, text-ink, text-h1 and rounded-md.

It reads Google-style YAML frontmatter, markdown token tables, named hex values in prose and CSS variables, so messy files usually convert too. Preview the file first to check the colors and type came through right.

Related

Last updated