{
  "name": "Example Design System",
  "version": "1.0",
  "colors": {
    "primary": {
      "50": "#f0f9ff",
      "100": "#e0f2fe",
      "200": "#bae6fd",
      "300": "#7dd3fc",
      "400": "#38bdf8",
      "500": "#0ea5e9",
      "600": "#0284c7",
      "700": "#0369a1",
      "800": "#075985",
      "900": "#0c4a6e"
    },
    "secondary": {
      "50": "#f5f3ff",
      "100": "#ede9fe",
      "200": "#ddd6fe",
      "300": "#c4b5fd",
      "400": "#a78bfa",
      "500": "#8b5cf6",
      "600": "#7c3aed",
      "700": "#6d28d9",
      "800": "#5b21b6",
      "900": "#4c1d95"
    },
    "neutral": {
      "50": "#fafafa",
      "100": "#f4f4f5",
      "200": "#e4e4e7",
      "300": "#d4d4d8",
      "400": "#a1a1aa",
      "500": "#71717a",
      "600": "#52525b",
      "700": "#3f3f46",
      "800": "#27272a",
      "900": "#18181b"
    },
    "semantic": {
      "success": "#10b981",
      "warning": "#f59e0b",
      "error": "#ef4444",
      "info": "#3b82f6"
    },
    "surface": {
      "background": "#ffffff",
      "foreground": "#18181b",
      "card": "#fafafa",
      "cardBorder": "#e4e4e7"
    }
  },
  "typography": {
    "fontFamilies": {
      "heading": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
      "body": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
      "mono": "'JetBrains Mono', 'Courier New', monospace"
    },
    "scale": {
      "h1": {
        "size": "3.5rem",
        "weight": "700",
        "lineHeight": "1.2",
        "letterSpacing": "-0.02em"
      },
      "h2": {
        "size": "2.5rem",
        "weight": "700",
        "lineHeight": "1.3",
        "letterSpacing": "-0.01em"
      },
      "h3": {
        "size": "2rem",
        "weight": "600",
        "lineHeight": "1.4",
        "letterSpacing": "0"
      },
      "h4": {
        "size": "1.5rem",
        "weight": "600",
        "lineHeight": "1.4",
        "letterSpacing": "0"
      },
      "h5": {
        "size": "1.25rem",
        "weight": "500",
        "lineHeight": "1.5",
        "letterSpacing": "0"
      },
      "body": {
        "size": "1rem",
        "weight": "400",
        "lineHeight": "1.6",
        "letterSpacing": "0"
      },
      "bodyLarge": {
        "size": "1.125rem",
        "weight": "400",
        "lineHeight": "1.6",
        "letterSpacing": "0"
      },
      "bodySmall": {
        "size": "0.875rem",
        "weight": "400",
        "lineHeight": "1.5",
        "letterSpacing": "0"
      },
      "caption": {
        "size": "0.75rem",
        "weight": "400",
        "lineHeight": "1.4",
        "letterSpacing": "0.01em"
      }
    }
  },
  "spacing": {
    "unit": "8px",
    "scale": {
      "0": "0",
      "1": "0.25rem",
      "2": "0.5rem",
      "3": "0.75rem",
      "4": "1rem",
      "5": "1.25rem",
      "6": "1.5rem",
      "8": "2rem",
      "10": "2.5rem",
      "12": "3rem",
      "16": "4rem",
      "20": "5rem",
      "24": "6rem",
      "32": "8rem"
    }
  },
  "shadows": {
    "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
    "md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
    "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
    "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
  },
  "borderRadius": {
    "none": "0",
    "sm": "0.25rem",
    "md": "0.5rem",
    "lg": "0.75rem",
    "xl": "1rem",
    "2xl": "1.5rem",
    "full": "9999px"
  },
  "components": {
    "button": {
      "primary": {
        "background": "primary.600",
        "text": "#ffffff",
        "hover": "primary.700",
        "active": "primary.800",
        "padding": "spacing.3 spacing.6",
        "borderRadius": "md",
        "fontWeight": "500"
      },
      "secondary": {
        "background": "neutral.200",
        "text": "neutral.900",
        "hover": "neutral.300",
        "active": "neutral.400",
        "padding": "spacing.3 spacing.6",
        "borderRadius": "md",
        "fontWeight": "500"
      },
      "ghost": {
        "background": "transparent",
        "text": "primary.600",
        "hover": "primary.50",
        "active": "primary.100",
        "padding": "spacing.3 spacing.6",
        "borderRadius": "md",
        "fontWeight": "500"
      }
    },
    "card": {
      "background": "surface.card",
      "border": "1px solid",
      "borderColor": "surface.cardBorder",
      "padding": "spacing.6",
      "borderRadius": "lg",
      "shadow": "md"
    },
    "input": {
      "background": "#ffffff",
      "border": "1px solid",
      "borderColor": "neutral.300",
      "focusBorder": "primary.500",
      "padding": "spacing.3 spacing.4",
      "borderRadius": "md",
      "fontSize": "body.size"
    }
  },
  "layout": {
    "maxWidth": {
      "sm": "640px",
      "md": "768px",
      "lg": "1024px",
      "xl": "1280px",
      "2xl": "1536px"
    },
    "breakpoints": {
      "mobile": "320px",
      "tablet": "768px",
      "desktop": "1024px",
      "wide": "1440px"
    },
    "grid": {
      "columns": 12,
      "gutter": "spacing.6"
    }
  },
  "animation": {
    "duration": {
      "fast": "150ms",
      "normal": "250ms",
      "slow": "350ms"
    },
    "easing": {
      "default": "cubic-bezier(0.4, 0, 0.2, 1)",
      "in": "cubic-bezier(0.4, 0, 1, 1)",
      "out": "cubic-bezier(0, 0, 0.2, 1)",
      "inOut": "cubic-bezier(0.4, 0, 0.2, 1)"
    }
  }
}