Validator

Validate your design.md

Paste your design.md content below. We'll check it against the JSON Schema and run WCAG contrast checks.

---
version: "1.0"
name: "My Design System"
description: "Paste your design.md content here to validate"
colors:
  primary: "#171717"
  primary-foreground: "#fafafa"
  secondary: "#f5f5f5"
  secondary-foreground: "#171717"
  accent: "#2563eb"
  accent-foreground: "#ffffff"
  background: "#ffffff"
  surface: "#fafafa"
  border: "#e5e5e5"
  text-primary: "#171717"
  text-secondary: "#525252"
  text-muted: "#a3a3a3"
  success: "#16a34a"
  warning: "#d97706"
  error: "#dc2626"
  info: "#2563eb"
typography:
  headline:
    family: "Geist"
    weight: 600
    use: "Page titles and section headers"
  body:
    family: "Geist"
    weight: 400
    use: "Body text and descriptions"
  scale:
    - { label: "sm", size: "14px", lineHeight: "20px" }
    - { label: "base", size: "16px", lineHeight: "24px" }
    - { label: "lg", size: "18px", lineHeight: "28px" }
    - { label: "xl", size: "20px", lineHeight: "28px" }
spacing:
  base: 4
  scale: [0, 4, 8, 16, 24, 32]
  unit: "px"
rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  lg: "12px"
  full: "9999px"
components:
  button:
    variants:
      - { name: "primary", background: "#171717", text: "#fafafa", radius: "md", weight: 500 }
    sizes:
      - { name: "md", height: "36px", padding: "0 16px", fontSize: "14px" }
  input:
    background: "#ffffff"
    border: "#e5e5e5"
    radius: "md"
    height: "36px"
    focusRing: "#2563eb"
    placeholder: "#a3a3a3"
  card:
    background: "#ffffff"
    border: "#e5e5e5"
    radius: "lg"
    padding: "24px"
---