{
  "name": "KATA Design System",
  "version": "0.1.0",
  "note": "Source of truth for foundations. Runtime CSS lives in tokens.css (semantic --k- tokens); scales defined here are mirrored there. The /design-system/ page renders from this file.",
  "color": {
    "zinc": {
      "50": "#fafafa",
      "100": "#f4f4f5",
      "200": "#e4e4e7",
      "300": "#d4d4d8",
      "400": "#a1a1aa",
      "500": "#71717a",
      "600": "#52525b",
      "700": "#3f3f46",
      "800": "#27272a",
      "900": "#18181b",
      "950": "#09090b"
    },
    "teal": {
      "50": "#effaf9",
      "100": "#d7f2f0",
      "200": "#b0e5e2",
      "300": "#7fd1cd",
      "400": "#3fb3ae",
      "500": "#0e9594",
      "600": "#0b7a78",
      "700": "#0b7372",
      "800": "#0a5c5b",
      "900": "#083f3e"
    },
    "roles": {
      "ink": "#18181b (zinc-900) — primary text, primary actions",
      "ink-2": "#52525b (zinc-600) — secondary text",
      "ink-3": "#a1a1aa (zinc-400) — muted text, placeholders",
      "line": "#e4e4e7 (zinc-200) — hairline borders",
      "accent": "#0e9594 (teal-500) — the single accent: links, success-adjacent highlights, the core of the mark",
      "danger": "#dc2626",
      "amber": "#f59e0b",
      "success": "#34d399 (on dark) — confirmations",
      "core": "#eb471f (vermillion) — the signature: the center of the mark, and the center of active controls (switch knob, radio dot). Never a surface, never text."
    }
  },
  "font": {
    "sans": "Inter, Hiragino Sans, Noto Sans JP, system-ui, sans-serif",
    "mono": "Geist Mono, ui-monospace, monospace",
    "tracking": "headings -0.02em to -0.03em; labels uppercase +0.08em to +0.14em"
  },
  "typeScalePx": {
    "xs": 11,
    "sm": 12.5,
    "base": 13.5,
    "md": 14,
    "lg": 16.5,
    "xl": 19,
    "2xl": 24,
    "3xl": 30,
    "display": 44
  },
  "spacePx": {
    "1": 4,
    "2": 8,
    "3": 12,
    "4": 16,
    "6": 24,
    "8": 32,
    "12": 48,
    "16": 64
  },
  "radiusPx": {
    "sm": 6,
    "md": 8,
    "lg": 12,
    "xl": 16,
    "full": 99
  },
  "heightPx": {
    "sm": 32,
    "md": 38,
    "lg": 44
  },
  "motion": {
    "durationsMs": {
      "fast": 130,
      "base": 180,
      "slow": 220
    },
    "easing": "cubic-bezier(.3,.7,.3,1)",
    "rule": "Fast and small. No bounce, no overshoot. Motion explains a change; it never performs."
  },
  "elevation": {
    "ring": "0 0 0 1px rgba(0,0,0,.07), 0 1px 2px rgba(16,24,40,.05)",
    "focus": "0 0 0 3px rgba(24,24,27,.12)",
    "rule": "Flat by default. Borders before shadows; shadows only for overlays and focus."
  },
  "brand": {
    "vermillion": "#eb471f",
    "usage": "Seal color (the ink of a hanko stamp). Used only in the core of the KATA mark — header logo and favicon. Never in components, never as a UI accent."
  }
}