Agentic AI Design System

Give this capture brief to your connected coding or design agent. Review the returned JSON, then import it below. The brief preserves the complete capture schema.

You are auditing an existing product to extract its design system as structured data.

SOURCE
- Inside a codebase: read the real stylesheets, design tokens, and theme files; where possible, measure computed styles in the running app.
- On a live site: inspect computed styles on representative pages (landing, list, detail, form) in BOTH light and dark themes if they exist.
- If a Figma MCP server is connected: pull published variables, text styles, and effect styles, then reconcile them against what actually ships.

MEASURE
- Color summary: the brand primary, accent, and base neutral; semantic success/warning/danger/info; and the real background + primary text colors for dark and light themes. Hex only.
- Complete color foundation: capture every published or computed ramp; all semantic shades; every light/dark surface, text role, border, focus ring, interactive state, and alert token; categorical/sequential/diverging data-viz palettes; glow/effect colors; theme tint settings; token names; and explicit overrides. Preserve real values rather than regenerating them from the primary color.
- Color evidence: inspect variables/tokens first, then representative computed states including default, hover, active/pressed, selected, disabled, focus-visible, links, alerts, overlays, and inverse surfaces. Capture both themes. Omit only values that genuinely do not exist.
- Typography: the actual font-family stacks for headings, body, and code; the base body size in px; the closest modular scale ratio (1.125, 1.2, 1.25, or 1.333); and the weights in use.
- Spacing: the base spacing rhythm (4 or 8 px), how many scale steps appear, container max-width, grid column count, and responsive breakpoints in px.
- Shape: small/medium/large corner radii in px, border widths, and the box-shadow for each elevation level 0–4 (level 0 is "none").
- Motion: fast/base/slow transition durations in ms, the dominant easing (standard, decelerate, spring, or linear), and whether prefers-reduced-motion is honored.
- Guardrails: only if the product documents agent/personalization rules ,  otherwise omit the "guardrails" key entirely.

OUTPUT
Return ONLY one JSON object, no markdown fences, no commentary, no text before or after ,  matching this schema exactly (comments explain each field; do not include comments in your output):

{
  "tool": "agentic-design-system",
  "version": 2,
  "identity": {
    "name": "",                                  // the product or design-system name
    "logo_notes": ""                             // how the logo is used (placement, clearspace, dark/light variants); "" if unknown
  },
  "color": {
    "primary": "#000000",                        // dominant brand / primary-action color
    "accent": "#000000",                         // secondary emphasis color
    "neutral": "#000000",                        // the base gray the UI is built on
    "semantic": {
      "success": "#000000",
      "warning": "#000000",
      "danger": "#000000",
      "info": "#000000"
    },
    "surfaces": {
      "dark":  { "surface": "#000000", "text": "#ffffff" },   // dark-theme background + primary text
      "light": { "surface": "#ffffff", "text": "#000000" }    // light-theme background + primary text
    }
  },
  "color_system": {                              // OPTIONAL only when exact color tokens can be inspected
    "source": "design-system-color",
    "version": 1,
    "profile": {
      "id": "product",                           // closest behavior: product | enterprise | soft | modern | neon | high-contrast
      "label": "Captured product color system",
      "description": "Evidence-based tokens captured from the running product"
    },
    "configuration": {
      "seed_color": "#000000",
      "accent_color": "#000000",
      "accent_strategy": "custom",
      "neutral_temperature": "brand",            // brand | warm | cool
      "neutral_tint_pct": 8,
      "ramp_steps": 9,                           // 5 | 7 | 9 | 11; use the nearest supported size
      "token_naming": "semantic",                // fifty | numeric | semantic | component
      "light_mode_tint": { "color": "#000000", "strength": 0 },
      "dark_mode_tint": { "color": "#000000", "strength": 0 }
    },
    "ramps": {
      "names": ["subtlest", "subtle", "soft", "muted", "default", "bold", "strong", "stronger", "strongest"],
      "primary": ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000", "#000000", "#000000", "#000000"],
      "accent": ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000", "#000000", "#000000", "#000000"],
      "neutral": ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000", "#000000", "#000000", "#000000"]
    },
    "semantics": {
      "success": { "soft": "#000000", "light": "#000000", "base": "#000000", "bold": "#000000", "strong": "#000000" },
      "warning": { "soft": "#000000", "light": "#000000", "base": "#000000", "bold": "#000000", "strong": "#000000" },
      "danger":  { "soft": "#000000", "light": "#000000", "base": "#000000", "bold": "#000000", "strong": "#000000" },
      "info":    { "soft": "#000000", "light": "#000000", "base": "#000000", "bold": "#000000", "strong": "#000000" }
    },
    "themes": {
      "dark": {
        "surfaces": { "bg": "#000000", "surface1": "#000000", "surface2": "#000000", "surface3": "#000000", "overlay": "#000000", "scrim": "#000000cc", "inverse": "#000000" },
        "text": [
          { "id": "strong", "label": "Text strong", "hex": "#000000", "surface": "#000000" },
          { "id": "soft", "label": "Text soft", "hex": "#000000", "surface": "#000000" },
          { "id": "muted", "label": "Text muted", "hex": "#000000", "surface": "#000000" },
          { "id": "faint", "label": "Text faint", "hex": "#000000", "surface": "#000000" },
          { "id": "inverse", "label": "Text inverse", "hex": "#000000", "surface": "#000000" },
          { "id": "on-primary", "label": "Text on primary", "hex": "#000000", "surface": "#000000" },
          { "id": "on-accent", "label": "Text on accent", "hex": "#000000", "surface": "#000000" }
        ],
        "borders": { "strong": "#000000", "soft": "#000000", "hairline": "#000000", "divider": "#000000", "focusRing": "#000000" },
        "states": {
          "primary": { "base": "#000000", "hover": "#000000", "active": "#000000", "disabled": "#000000", "selected": "#000000", "link": "#000000" },
          "accent":  { "base": "#000000", "hover": "#000000", "active": "#000000", "disabled": "#000000", "selected": "#000000", "link": "#000000" }
        },
        "alerts": [
          { "id": "success", "label": "Success", "tint": "#000000", "border": "#000000", "text": "#000000" },
          { "id": "warning", "label": "Warning", "tint": "#000000", "border": "#000000", "text": "#000000" },
          { "id": "danger", "label": "Danger", "tint": "#000000", "border": "#000000", "text": "#000000" },
          { "id": "info", "label": "Info", "tint": "#000000", "border": "#000000", "text": "#000000" }
        ]
      },
      "light": {                                 // same complete surfaces, text, borders, states, and alerts shape as dark
        "surfaces": {}, "text": [], "borders": {}, "states": {}, "alerts": []
      }
    },
    "dataviz": {
      "categorical": ["#000000"],
      "sequential": ["#000000"],
      "diverging": ["#000000"]
    },
    "effects": {
      "glowPrimaryColor": "#000000",
      "glowAccentColor": "#000000",
      "glowFocusColor": "#000000",
      "glowPrimary": "none",
      "glowAccent": "none",
      "glowFocus": "none"
    },
    "custom_overrides": {},                      // token-path → exact hex for captured exceptions
    "token_count": 0                             // count the color tokens actually supplied above
  },
  "typography": {
    "heading_font": "",                          // full stack, e.g. "Poppins, system-ui, sans-serif"
    "body_font": "",                             // full stack for body text
    "mono_font": "",                             // full stack for code
    "base_px": 16,                               // body font-size in px (number, not "16px")
    "scale_ratio": 1.25,                         // 1.125 | 1.2 | 1.25 | 1.333
    "weights": [400, 600, 700]                   // font weights actually used
  },
  "spacing": {
    "base_unit_px": 8,                           // 4 or 8
    "scale_steps": 6,                            // how many spacing steps the system uses
    "container_max_px": 1200,
    "grid_columns": 12,
    "breakpoints_px": { "sm": 640, "md": 768, "lg": 1024, "xl": 1280 }
  },
  "shape": {
    "radius_px": { "sm": 4, "md": 8, "lg": 16 }, // corner radii; pill/full is implied
    "border_px": { "thin": 1, "thick": 2 },
    "elevation": [                               // box-shadow per level 0–4; keep level 0 as "none"
      "none",
      "0 1px 2px rgba(0,0,0,0.10)",
      "0 4px 10px rgba(0,0,0,0.12)",
      "0 12px 24px rgba(0,0,0,0.16)",
      "0 24px 48px rgba(0,0,0,0.22)"
    ]
  },
  "motion": {
    "duration_ms": { "fast": 120, "base": 200, "slow": 320 },
    "easing": "standard",                        // "standard" | "decelerate" | "spring" | "linear"
    "respect_reduced_motion": true
  },
  "guardrails": {                                // OPTIONAL ,  include only if documented
    "adaptable_axes": ["density", "variants"],   // any of: density, tone, variants, emphasis, order
    "max_layout_deviation_pct": 25,
    "color_policy": "tints",                     // "locked" | "tints" | "free"
    "archetypes": ["power", "newcomer"],         // any of: power, newcomer, a11y, lowband, admin
    "hard_rules": ["nav", "legal", "focus", "contrast", "ident", "exit"]
  }
}

RULES
- Every color is a hex string like "#0f66d0". Convert rgb()/hsl() to hex.
- Alpha colors use eight-digit hex like "#0f66d080".
- The compact "color" summary and the complete "color_system" must agree. The complete foundation is the source of truth.
- Use identical arrays and token objects for both themes; do not replace missing light-theme evidence with dark-theme values.
- If a color_system section is available, include every observed token even when its value looks redundant.
- Numbers are plain numbers, never strings with units.
- If you cannot measure a field, omit it ,  never invent values.
- Output nothing but the JSON object.