{
  "color": {
    "blue": {
      "500": {
        "$type": "color",
        "$value": "#2b59ff",
        "$description": "Brand blue. 5.28:1 on white."
      },
      "600": {
        "$type": "color",
        "$value": "#1f47d9",
        "$description": "Deeper blue for pressed and hover states."
      }
    },
    "green": {
      "600": {
        "$type": "color",
        "$value": "#3f9b2b",
        "$description": "Green. 3.54:1 on white."
      }
    },
    "yellow": {
      "400": {
        "$type": "color",
        "$value": "#f3c60d",
        "$description": "Yellow. 1.63:1 on white."
      }
    },
    "neutral": {
      "0": {
        "$type": "color",
        "$value": "#ffffff",
        "$description": "White. Card, panel and button surfaces."
      },
      "50": {
        "$type": "color",
        "$value": "#f5f5f5",
        "$description": "Off-white. The page behind every block."
      },
      "200": {
        "$type": "color",
        "$value": "#e3e3e3",
        "$description": "Light grey. Hairline borders and dividers."
      },
      "500": {
        "$type": "color",
        "$value": "#8a8a8a",
        "$description": "Mid grey. 3.45:1 on white."
      },
      "700": {
        "$type": "color",
        "$value": "#5c5c5c",
        "$description": "Dark grey. 6.69:1 on white."
      },
      "950": {
        "$type": "color",
        "$value": "#161616",
        "$description": "Near-black. 18.1:1 on white."
      }
    },
    "semantic": {
      "ink": {
        "$type": "color",
        "$value": "#161616",
        "$description": "Primary text. Headings, body copy, stat figures."
      },
      "star": {
        "$type": "color",
        "$value": "#f3c60d",
        "$description": "Rating stars. 1.63:1 on white, below AA — the deliberate contrast bug the demo shows the audit catching."
      },
      "brand": {
        "$type": "color",
        "$value": "#2b59ff",
        "$description": "Brand mark and eyebrow labels. Same value as accent, kept separate so a rebrand can move one without the other."
      },
      "faint": {
        "$type": "color",
        "$value": "#8a8a8a",
        "$description": "Tertiary text. 3.45:1 on white, below AA — a finding the demo keeps."
      },
      "muted": {
        "$type": "color",
        "$value": "#5c5c5c",
        "$description": "Secondary text. Section intros and card copy."
      },
      "accent": {
        "$type": "color",
        "$value": "#2b59ff",
        "$description": "Primary action. Buttons, links, active states."
      },
      "border": {
        "$type": "color",
        "$value": "#e3e3e3",
        "$description": "Hairline borders, dividers and card outlines."
      },
      "ground": {
        "$type": "color",
        "$value": "#f5f5f5",
        "$description": "Page background behind the blocks."
      },
      "success": {
        "$type": "color",
        "$value": "#3f9b2b",
        "$description": "Positive state and upward metrics. 3.54:1 on white, below AA — a finding the demo keeps."
      },
      "surface": {
        "$type": "color",
        "$value": "#ffffff",
        "$description": "Raised surfaces: cards, panels, secondary buttons."
      },
      "accent-hover": {
        "$type": "color",
        "$value": "#1f47d9",
        "$description": "Hover fill for a primary action."
      },
      "accent-contrast": {
        "$type": "color",
        "$value": "#ffffff",
        "$description": "Text and icons on an accent fill."
      }
    }
  },
  "layout": {
    "container": {
      "$type": "dimension",
      "$value": "1180px",
      "$description": "Max content width. Six blocks centre their content in it; the gallery widens it by 112px so its scroller bleeds past the edge."
    }
  },
  "shadow": {
    "soft": {
      "$type": "shadow",
      "$value": {
        "blur": "2px",
        "color": "rgba(0, 0, 0, 0.06)",
        "offsetX": "0",
        "offsetY": "1px"
      },
      "$description": "The only elevation in the system. Cards, badges and secondary buttons."
    }
  },
  "spacing": {
    "0": {
      "$type": "dimension",
      "$value": "0px",
      "$description": "Explicit zero. Every block resets heading, paragraph and list margins."
    },
    "4": {
      "$type": "dimension",
      "$value": "4px",
      "$description": "Hairline offset. Gallery caption inset and title margin."
    },
    "8": {
      "$type": "dimension",
      "$value": "8px",
      "$description": "Tight gap. Icon-to-label, badge internals, stat figure to label."
    },
    "12": {
      "$type": "dimension",
      "$value": "12px",
      "$description": "Gap between adjacent controls: hero button row, FAQ question row, footer legal links."
    },
    "16": {
      "$type": "dimension",
      "$value": "16px",
      "$description": "Card grid gap, and the margin from a heading to the paragraph under it."
    },
    "20": {
      "$type": "dimension",
      "$value": "20px",
      "$description": "Eyebrow-to-heading margin, header row padding, nav link gap."
    },
    "24": {
      "$type": "dimension",
      "$value": "24px",
      "$description": "Card and panel interior padding. Feature cards, FAQ items, CTA button."
    },
    "32": {
      "$type": "dimension",
      "$value": "32px",
      "$description": "Section side padding on the narrow blocks (hero, closing CTA) and the stats column gap."
    },
    "36": {
      "$type": "dimension",
      "$value": "36px",
      "$description": "Heading block rhythm in the hero, plus the header nav group gap."
    },
    "40": {
      "$type": "dimension",
      "$value": "40px",
      "$description": "Gap between large adjacent regions: gallery cards, stacked columns below 900px."
    },
    "48": {
      "$type": "dimension",
      "$value": "48px",
      "$description": "Space before a grid or column set. Features intro to grid, footer columns."
    },
    "56": {
      "$type": "dimension",
      "$value": "56px",
      "$description": "The standard section side padding. Seven of the eight blocks use it."
    },
    "64": {
      "$type": "dimension",
      "$value": "64px",
      "$description": "Stats block rhythm: the row gap and the margin below the intro."
    },
    "72": {
      "$type": "dimension",
      "$value": "72px",
      "$description": "Footer top padding and the gap between its link columns."
    },
    "80": {
      "$type": "dimension",
      "$value": "80px",
      "$description": "Hero top padding and the FAQ two-column gap."
    },
    "96": {
      "$type": "dimension",
      "$value": "96px",
      "$description": "The standard section vertical padding. Features, FAQ, gallery, CTA panel and the hero's lower edge."
    }
  },
  "typography": {
    "stack": {
      "inter": {
        "$type": "fontFamily",
        "$value": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
        "$description": "Inter, falling back to the system UI face. Loaded at 400, 500 and 600."
      },
      "cal-sans": {
        "$type": "fontFamily",
        "$value": "'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
        "$description": "Cal Sans, falling back to Inter then the system UI face. One weight only — 400."
      },
      "ibm-plex-mono": {
        "$type": "fontFamily",
        "$value": "'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace",
        "$description": "IBM Plex Mono, falling back to the system monospace face. Loaded at 300 and 400."
      }
    },
    "font-family": {
      "body": {
        "$type": "fontFamily",
        "$value": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
        "$description": "Body copy, UI labels and buttons. The document default."
      },
      "mono": {
        "$type": "fontFamily",
        "$value": "'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace",
        "$description": "Uppercase eyebrow labels, card titles and metadata."
      },
      "display": {
        "$type": "fontFamily",
        "$value": "'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
        "$description": "Display headings. Every block's h1 and h2."
      }
    }
  },
  "border-radius": {
    "card": {
      "$type": "dimension",
      "$value": "14px",
      "$description": "Cards and panels: feature cards, FAQ items."
    },
    "pill": {
      "$type": "dimension",
      "$value": "999px",
      "$description": "Fully rounded. Every button and the pill badge."
    }
  }
}