{
  "color": {
    "blue": {
      "300": {
        "$type": "color",
        "$value": "#7fa8ff",
        "$description": "Light blue, hsl(221 100% 75%). 8.17:1 on blue 950, which is the only place it is used."
      },
      "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."
      },
      "950": {
        "$type": "color",
        "$value": "#0b0f17",
        "$description": "Near-black with a blue cast, hsl(220 35% 7%). Not on the pure-grey neutral ramp, which is why it sits with the blues. The system's only dark surface."
      }
    },
    "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."
      },
      "25": {
        "$type": "color",
        "$value": "#f9f9f9",
        "$description": "Off-white, one step lighter than 50 (L* 97.9 vs 96.5). Used once, by the hero background."
      },
      "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."
      },
      "300": {
        "$type": "color",
        "$value": "#d4d4d4",
        "$description": "Light grey one step darker than 200 (L* 84.9 vs 90.2). Used once, by the features section top rule."
      },
      "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."
      },
      "border-alt": {
        "$type": "color",
        "$value": "#d4d4d4",
        "$description": "A second border value, used once: the features section top rule. One step darker than --border (#e3e3e3 to #d4d4d4, a delta of 5.3 in L*), which lifts that rule from 1.18:1 to 1.36:1 against the section's own background. Reads as drift, not intent; held at its measured value until that is decided."
      },
      "ground-alt": {
        "$type": "color",
        "$value": "#f9f9f9",
        "$description": "A second page background, used once: the hero. One step lighter than --ground (#f5f5f5 to #f9f9f9, a delta of 1.4 in L*) and it overrides .dot-grid's own background-color: var(--ground) in the same cascade. Reads as drift, not intent; held at its measured value until that is decided."
      },
      "dark-accent": {
        "$type": "color",
        "$value": "#7fa8ff",
        "$description": "Accent on --dark-ground: the highlighted span in the stats heading. 8.17:1 there, where --accent would be 3.63:1 and fail AA — which is why the dark context carries its own accent role instead of reusing the light one."
      },
      "dark-ground": {
        "$type": "color",
        "$value": "#0b0f17",
        "$description": "Dark section background: the inverted counterpart to --ground, and the system's only dark context. One block uses it, the stats block. White text on it is 19.18:1."
      },
      "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": {
    "body": {
      "copy": {
        "$type": "typography",
        "$value": {
          "fontSize": "15px",
          "fontFamily": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
          "fontWeight": 400,
          "lineHeight": 1.6
        },
        "$description": "Body / Copy — feature card body and the footer tagline. Same 1.6 rhythm as Body / Lead, three steps smaller."
      },
      "lead": {
        "$type": "typography",
        "$value": {
          "fontSize": "18px",
          "fontFamily": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
          "fontWeight": 400,
          "lineHeight": 1.6
        },
        "$description": "Body / Lead — section intro copy in four blocks: features, gallery, FAQ and closing CTA. The most-used text style in the system."
      }
    },
    "mono": {
      "tagline": {
        "$type": "typography",
        "$value": {
          "fontSize": "12px",
          "fontFamily": "'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace",
          "fontWeight": 300,
          "lineHeight": 1.6,
          "letterSpacing": "0.06em"
        },
        "$description": "Mono / Tagline — .mono.stats__tagline, uppercase. The only mono text that declares a line height, because it is the only mono text that wraps; six single-line labels share its family, size, weight and tracking."
      }
    },
    "size": {
      "12": {
        "$type": "dimension",
        "$value": "12px",
        "$description": "Mono label size. Every uppercase label in the system: eyebrows, card titles, trend lines, footer column titles, the footer legal bar and the stats tagline."
      },
      "14": {
        "$type": "dimension",
        "$value": "14px",
        "$description": "Small control label. .btn--sm, the header's two buttons."
      },
      "15": {
        "$type": "dimension",
        "$value": "15px",
        "$description": ".btn's own label size, and the body size of feature card copy and the footer tagline."
      },
      "18": {
        "$type": "dimension",
        "$value": "18px",
        "$description": "Lead paragraph size (four section intros) and .btn--lg's label."
      },
      "44": {
        "$type": "dimension",
        "$value": "44px",
        "$description": "Section heading. Features, gallery and FAQ."
      },
      "48": {
        "$type": "dimension",
        "$value": "48px",
        "$description": "Feature card figure."
      },
      "56": {
        "$type": "dimension",
        "$value": "56px",
        "$description": "Closing-CTA panel heading."
      },
      "64": {
        "$type": "dimension",
        "$value": "64px",
        "$description": "Stats figure, on the dark surface."
      },
      "72": {
        "$type": "dimension",
        "$value": "72px",
        "$description": "Hero headline. The largest type in the system."
      }
    },
    "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."
      }
    },
    "metric": {
      "card": {
        "$type": "typography",
        "$value": {
          "fontSize": "48px",
          "fontFamily": "'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
          "fontWeight": 400,
          "lineHeight": 1,
          "letterSpacing": "0"
        },
        "$description": "Metric / Card — the feature card figure, .display.features__stat. Same treatment as Metric / Statement, one step down."
      },
      "statement": {
        "$type": "typography",
        "$value": {
          "fontSize": "64px",
          "fontFamily": "'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
          "fontWeight": 400,
          "lineHeight": 1,
          "letterSpacing": "0"
        },
        "$description": "Metric / Statement — the stats figures, .display.stats__value, on the dark surface. Display face at line height 1 because the content is numerals on one line."
      }
    },
    "control": {
      "large": {
        "$type": "typography",
        "$value": {
          "fontSize": "18px",
          "fontFamily": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
          "fontWeight": 500,
          "lineHeight": 1
        },
        "$description": "Control / Large — .btn--lg, the hero's two buttons. Size from the modifier, weight and line height from .btn."
      },
      "small": {
        "$type": "typography",
        "$value": {
          "fontSize": "14px",
          "fontFamily": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
          "fontWeight": 500,
          "lineHeight": 1
        },
        "$description": "Control / Small — .btn--sm, the header's two buttons. Size from the modifier, weight and line height from .btn."
      },
      "default": {
        "$type": "typography",
        "$value": {
          "fontSize": "15px",
          "fontFamily": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
          "fontWeight": 500,
          "lineHeight": 1
        },
        "$description": "Control / Default — .btn's own label size. Declared but never rendered: all five buttons in the catalog carry .btn--sm, .btn--lg or a block override."
      }
    },
    "display": {
      "hero": {
        "$type": "typography",
        "$value": {
          "fontSize": "72px",
          "fontFamily": "'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
          "fontWeight": 400,
          "lineHeight": 1.08,
          "letterSpacing": "0"
        },
        "$description": "Display / Hero — the hero headline, .display.hero__heading. The only 1.08 line height in the system."
      },
      "panel": {
        "$type": "typography",
        "$value": {
          "fontSize": "56px",
          "fontFamily": "'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
          "fontWeight": 400,
          "lineHeight": 1.1,
          "letterSpacing": "0"
        },
        "$description": "Display / Panel — the closing-CTA panel headline, .display.closing-cta__heading."
      },
      "section": {
        "$type": "typography",
        "$value": {
          "fontSize": "44px",
          "fontFamily": "'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
          "fontWeight": 400,
          "lineHeight": 1.1,
          "letterSpacing": "0"
        },
        "$description": "Display / Section — the section headline in features, gallery and FAQ. The most-used display step, three blocks."
      }
    },
    "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."
    }
  }
}