DESIGN.md Preview
Preview your own file

DESIGN.md to CSS variables

Turn a DESIGN.md into CSS custom properties: one :root block with your palette, color roles, fonts, type scale, spacing and radii. Works with any stack. Free, in your browser.

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 CSS variables.
  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}"
---
tokens.css 
/* Your Brand: generated from DESIGN.md by designmdpreview.com, a free tool by Township (township.agency) */
:root {
  /* Palette */
  --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;

  /* Roles */
  --background: #FAFAFA;
  --foreground: #18181B;
  --muted: #6E6E70;
  --surface: #FFFFFF;
  --border: #DADADB;
  --accent: #2F6FEB;
  --accent-foreground: #FAFAFA;
  --primary: #2F6FEB;
  --primary-foreground: #FFFFFF;

  /* Type */
  --font-display: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --text-h1: 2.5rem;
  --weight-h1: 700;
  --leading-h1: 1.1;
  --tracking-h1: -0.02em;
  --text-h2: 1.5rem;
  --weight-h2: 600;
  --leading-h2: 1.25;
  --text-body-md: 1rem;
  --weight-body-md: 400;
  --leading-body-md: 1.6;
  --text-label: 0.75rem;
  --weight-label: 600;
  --tracking-label: 0.06em;
  --text-mono: 0.875rem;
  --weight-mono: 400;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;

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

What maps to what

In your DESIGN.mdBecomesUse it as
colors.accent--color-accentvar(--color-accent)
typography.h1--text-h1, --weight-h1, --leading-h1, --tracking-h1font-size: var(--text-h1)
typography (headings, body, mono)--font-display, --font-body, --font-monofont-family: var(--font-body)
spacing.md--space-mdpadding: var(--space-md)
rounded.md--radius-mdborder-radius: var(--radius-md)
Roles (background, text, primary)--background, --foreground, --primarybackground: var(--background)

Using the output

Paste the output into any stylesheet, then use the values anywhere with var(), for example color: var(--color-ink) or border-radius: var(--radius-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