{
  "name": "Equestrianism",
  "version": 1,
  "color": {
    "themes": [
      {
        "id": "light",
        "name": "Light"
      },
      {
        "id": "dark",
        "name": "Dark"
      }
    ],
    "tokens": [
      {
        "name": "parchment-50",
        "value": "#faf6ee",
        "usage": "Parchment neutral ramp (page grounds, hairlines). Components reference the semantic aliases, not the ramps. Page, lightest."
      },
      {
        "name": "parchment-100",
        "value": "#f4eee0",
        "usage": "Parchment neutral ramp (page grounds, hairlines). Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "parchment-200",
        "value": "#eae1cd",
        "usage": "Parchment neutral ramp (page grounds, hairlines). Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "parchment-300",
        "value": "#dacdb2",
        "usage": "Parchment neutral ramp (page grounds, hairlines). Components reference the semantic aliases, not the ramps. Hairline on light, disabled."
      },
      {
        "name": "stone-400",
        "value": "#938770",
        "usage": "Stone neutral ramp. Components reference the semantic aliases, not the ramps. Darkened from #a99c84 so marks and control edges hold 3:1 on parchment and white."
      },
      {
        "name": "stone-500",
        "value": "#766955",
        "usage": "Stone neutral ramp. Components reference the semantic aliases, not the ramps. Darkened from #857863 so it holds 4.5:1 as muted text on every light ground."
      },
      {
        "name": "stone-600",
        "value": "#5f5645",
        "usage": "Stone neutral ramp (muted and secondary text). Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "ink-700",
        "value": "#3a342a",
        "usage": "Warm ink ramp (text and dark grounds). Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "ink-800",
        "value": "#262019",
        "usage": "Warm ink ramp (text and dark grounds). Components reference the semantic aliases, not the ramps. Raised dark surface."
      },
      {
        "name": "ink-900",
        "value": "#17130e",
        "usage": "Warm ink ramp (text and dark grounds). Components reference the semantic aliases, not the ramps. Near-black, warm — primary text & dark bg."
      },
      {
        "name": "racing-900",
        "value": "#0a2a1f",
        "usage": "British racing green ramp, the principal brand hue. Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "racing-800",
        "value": "#0e3a2b",
        "usage": "British racing green ramp, the principal brand hue. Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "racing-700",
        "value": "#14503b",
        "usage": "British racing green ramp, the principal brand hue. Components reference the semantic aliases, not the ramps. Primary brand."
      },
      {
        "name": "racing-500",
        "value": "#1e6e4f",
        "usage": "British racing green ramp, the principal brand hue. Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "racing-300",
        "value": "#6fa98e",
        "usage": "British racing green ramp, the principal brand hue. Components reference the semantic aliases, not the ramps. On-dark tint."
      },
      {
        "name": "oxblood-800",
        "value": "#4a141a",
        "usage": "Oxblood ramp, the secondary seal. Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "oxblood-600",
        "value": "#6e1f27",
        "usage": "Oxblood ramp, the secondary seal. Components reference the semantic aliases, not the ramps. Secondary brand."
      },
      {
        "name": "oxblood-400",
        "value": "#9a4048",
        "usage": "Oxblood ramp, the secondary seal. Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "oxblood-300",
        "value": "#c4767e",
        "usage": "Oxblood ramp, the secondary seal. Components reference the semantic aliases, not the ramps. On-dark oxblood solids — dots, rules, brand-alt."
      },
      {
        "name": "oxblood-200",
        "value": "#d79aa1",
        "usage": "Oxblood ramp, the secondary seal. Components reference the semantic aliases, not the ramps. On-dark oxblood text — see note in dark theme."
      },
      {
        "name": "cognac-700",
        "value": "#8a4a22",
        "usage": "Cognac / saddle-leather ramp. Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "cognac-500",
        "value": "#a95f2e",
        "usage": "Cognac / saddle-leather ramp. Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "cognac-300",
        "value": "#c98a55",
        "usage": "Cognac / saddle-leather ramp. Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "brass-600",
        "value": "#886421",
        "usage": "Brass ramp, the text-weight gilt: labels, link hover, focus ring in light. Components reference the semantic aliases, not the ramps. Darkened from #9a7534 for 4.5:1 on parchment."
      },
      {
        "name": "brass-500",
        "value": "#b8894b",
        "usage": "Brass / gilt ramp, the metallic accent (foil, rules, marks). Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "brass-400",
        "value": "#c99e5e",
        "usage": "Brass / gilt ramp, the metallic accent (foil, rules, marks). Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "brass-300",
        "value": "#dec088",
        "usage": "Brass / gilt ramp, the metallic accent (foil, rules, marks). Components reference the semantic aliases, not the ramps. On-dark gilt."
      },
      {
        "name": "navy-800",
        "value": "#16283a",
        "usage": "Polo navy ramp, quiet informational support. Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "navy-600",
        "value": "#24425e",
        "usage": "Polo navy ramp, quiet informational support. Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "navy-400",
        "value": "#4a6c8c",
        "usage": "Polo navy ramp, quiet informational support. Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "signal-600",
        "value": "#a81f26",
        "usage": "Signal red ramp, alarms only. Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "signal-500",
        "value": "#c4292f",
        "usage": "Signal red ramp, alarms only. Components reference the semantic aliases, not the ramps."
      },
      {
        "name": "bg-page",
        "value": {
          "light": "{parchment-50}",
          "dark": "#15110b"
        },
        "usage": "Page ground. Text: text-primary, text-secondary."
      },
      {
        "name": "bg-surface",
        "value": {
          "light": "#ffffff",
          "dark": "#1f1810"
        },
        "usage": "Card on parchment."
      },
      {
        "name": "bg-sunken",
        "value": {
          "light": "{parchment-100}",
          "dark": "#0f0c07"
        },
        "usage": "Sunken wells; hover wash on ghost and quiet elements."
      },
      {
        "name": "bg-inverse",
        "value": {
          "light": "{ink-900}",
          "dark": "#0b0906"
        },
        "usage": "Dark sections, code, terminal."
      },
      {
        "name": "bg-inverse-2",
        "value": {
          "light": "{ink-800}",
          "dark": "#151009"
        },
        "usage": "Raised surface inside inverse sections."
      },
      {
        "name": "text-primary",
        "value": {
          "light": "{ink-900}",
          "dark": "#f1eadb"
        },
        "usage": "Primary text, on bg-page, bg-surface and bg-sunken."
      },
      {
        "name": "text-secondary",
        "value": {
          "light": "{stone-600}",
          "dark": "#b7ac93"
        },
        "usage": "Secondary text, on bg-page, bg-surface and bg-sunken (6.3:1 or more in light)."
      },
      {
        "name": "text-muted",
        "value": {
          "light": "{stone-500}",
          "dark": "#8e826b"
        },
        "usage": "Muted captions and placeholders, on bg-page, bg-surface and bg-sunken (4.6:1 or more in both themes)."
      },
      {
        "name": "text-on-dark",
        "value": {
          "light": "{parchment-100}",
          "dark": "{parchment-100}"
        },
        "usage": "Text on bg-inverse."
      },
      {
        "name": "text-on-dark-muted",
        "value": {
          "light": "#9e937c",
          "dark": "#9e937c"
        },
        "usage": "Muted text on bg-inverse."
      },
      {
        "name": "brand",
        "value": {
          "light": "{racing-700}",
          "dark": "{racing-300}"
        },
        "usage": "Principal brand colour: primary fills, links, checked controls."
      },
      {
        "name": "brand-strong",
        "value": {
          "light": "{racing-900}",
          "dark": "#8fc0a6"
        },
        "usage": "Deepened brand for hover and strong fills."
      },
      {
        "name": "brand-alt",
        "value": {
          "light": "{oxblood-600}",
          "dark": "{oxblood-300}"
        },
        "usage": "Secondary seal: deny actions, destructive dialogs."
      },
      {
        "name": "accent",
        "value": {
          "light": "{brass-600}",
          "dark": "{brass-400}"
        },
        "usage": "Brass accent as text: link hover. Bright gilt fills and keylines use brass-500 directly."
      },
      {
        "name": "accent-on-dark",
        "value": {
          "light": "{brass-300}",
          "dark": "{brass-300}"
        },
        "usage": "Brass accent on dark grounds."
      },
      {
        "name": "leather",
        "value": {
          "light": "{cognac-500}",
          "dark": "{cognac-300}"
        },
        "usage": "Cognac leather accent."
      },
      {
        "name": "info",
        "value": {
          "light": "{navy-600}",
          "dark": "{navy-400}"
        },
        "usage": "Informational tone."
      },
      {
        "name": "border-hairline",
        "value": {
          "light": "{parchment-300}",
          "dark": "#2c2417"
        },
        "usage": "1px rules on light."
      },
      {
        "name": "border-strong",
        "value": {
          "light": "#a99c84",
          "dark": "#463a26"
        },
        "usage": "Decorative rules: table headers and totals, dashed separators, hollow rings. Not for control edges; use border-control."
      },
      {
        "name": "border-control",
        "value": {
          "light": "{stone-400}",
          "dark": "#736650"
        },
        "usage": "Edges of form controls and outline buttons: inputs, selects, textareas, checkboxes, radios. Holds 3:1 on every surface in both themes."
      },
      {
        "name": "border-control-hover",
        "value": {
          "light": "{stone-500}",
          "dark": "{text-muted}"
        },
        "usage": "Hovered control edge; one step stronger than border-control in both themes."
      },
      {
        "name": "border-on-dark",
        "value": {
          "light": "rgba(222,192,136,0.22)",
          "dark": "rgba(222,192,136,0.22)"
        },
        "usage": "Gilt hairline on ink."
      },
      {
        "name": "focus-ring",
        "value": {
          "light": "{brass-600}",
          "dark": "{brass-400}"
        },
        "usage": "Border colour of a focused control; pairs with focus-shadow."
      },
      {
        "name": "label-engraved",
        "value": {
          "light": "{brass-600}",
          "dark": "{brass-300}"
        },
        "usage": "Eyebrow/legend label colour."
      },
      {
        "name": "status-success",
        "value": {
          "light": "{racing-500}",
          "dark": "{racing-300}"
        },
        "usage": "Status mark for a success OUTCOME."
      },
      {
        "name": "status-success-bg",
        "value": {
          "light": "#e4eee6",
          "dark": "#16281e"
        },
        "usage": "Tint fill behind success status."
      },
      {
        "name": "status-success-fg",
        "value": {
          "light": "{racing-700}",
          "dark": "#7fb79a"
        },
        "usage": "Text/icon on status-success-bg."
      },
      {
        "name": "status-warning",
        "value": {
          "light": "{cognac-500}",
          "dark": "{cognac-300}"
        },
        "usage": "Status mark for a warning OUTCOME."
      },
      {
        "name": "status-warning-bg",
        "value": {
          "light": "#f4e6d5",
          "dark": "#2c1e10"
        },
        "usage": "Tint fill behind warning status."
      },
      {
        "name": "status-warning-fg",
        "value": {
          "light": "{cognac-700}",
          "dark": "#d19a66"
        },
        "usage": "Text/icon on status-warning-bg."
      },
      {
        "name": "status-danger",
        "value": {
          "light": "{signal-500}",
          "dark": "{signal-500}"
        },
        "usage": "Status mark for a danger OUTCOME."
      },
      {
        "name": "status-danger-bg",
        "value": {
          "light": "#f5e0df",
          "dark": "#2e1414"
        },
        "usage": "Tint fill behind danger status."
      },
      {
        "name": "status-danger-fg",
        "value": {
          "light": "{signal-600}",
          "dark": "#e08789"
        },
        "usage": "Text/icon on status-danger-bg."
      },
      {
        "name": "status-info",
        "value": {
          "light": "{navy-600}",
          "dark": "{navy-400}"
        },
        "usage": "Status mark for an info OUTCOME."
      },
      {
        "name": "status-info-bg",
        "value": {
          "light": "#e1e8ee",
          "dark": "#152430"
        },
        "usage": "Tint fill behind info status."
      },
      {
        "name": "status-info-fg",
        "value": {
          "light": "{navy-600}",
          "dark": "#8fb0cb"
        },
        "usage": "Text/icon on status-info-bg."
      },
      {
        "name": "tag-bg",
        "value": {
          "light": "{bg-surface}",
          "dark": "#221b12"
        },
        "usage": "Tag fill (default)."
      },
      {
        "name": "tag-fg",
        "value": {
          "light": "{text-secondary}",
          "dark": "{text-secondary}"
        },
        "usage": "Tag text (default), on tag-bg."
      },
      {
        "name": "tag-bd",
        "value": {
          "light": "{border-hairline}",
          "dark": "{border-hairline}"
        },
        "usage": "Tag border (default)."
      },
      {
        "name": "tag-brand-bg",
        "value": {
          "light": "#eaf0ec",
          "dark": "#16281e"
        },
        "usage": "Tag fill (brand)."
      },
      {
        "name": "tag-brand-fg",
        "value": {
          "light": "{racing-700}",
          "dark": "#7fb79a"
        },
        "usage": "Tag text (brand), on tag-brand-bg."
      },
      {
        "name": "tag-brand-bd",
        "value": {
          "light": "rgba(20,80,59,.30)",
          "dark": "rgba(111,169,142,.30)"
        },
        "usage": "Tag border (brand)."
      },
      {
        "name": "tag-gilt-bg",
        "value": {
          "light": "#f6efdf",
          "dark": "#2a2110"
        },
        "usage": "Tag fill (gilt)."
      },
      {
        "name": "tag-gilt-fg",
        "value": {
          "light": "{brass-600}",
          "dark": "{brass-300}"
        },
        "usage": "Tag text (gilt), on tag-gilt-bg."
      },
      {
        "name": "tag-gilt-bd",
        "value": {
          "light": "rgba(184,137,75,.40)",
          "dark": "rgba(222,192,136,.30)"
        },
        "usage": "Tag border (gilt)."
      },
      {
        "name": "tag-oxblood-bg",
        "value": {
          "light": "#f5e7e7",
          "dark": "#2a1416"
        },
        "usage": "Tag fill (oxblood)."
      },
      {
        "name": "tag-oxblood-fg",
        "value": {
          "light": "{oxblood-600}",
          "dark": "{oxblood-200}"
        },
        "usage": "Tag text (oxblood), on tag-oxblood-bg."
      },
      {
        "name": "tag-oxblood-bd",
        "value": {
          "light": "rgba(110,31,39,.28)",
          "dark": "rgba(154,64,72,.35)"
        },
        "usage": "Tag border (oxblood)."
      },
      {
        "name": "state-queued",
        "value": {
          "light": "{stone-400}",
          "dark": "{stone-400}"
        },
        "usage": "Workflow state queued: dot/rule colour."
      },
      {
        "name": "state-queued-bg",
        "value": {
          "light": "{parchment-100}",
          "dark": "#221b12"
        },
        "usage": "Workflow state queued: chip tint."
      },
      {
        "name": "state-queued-fg",
        "value": {
          "light": "{stone-600}",
          "dark": "{text-secondary}"
        },
        "usage": "Workflow state queued: chip text, on state-queued-bg."
      },
      {
        "name": "state-queued-bd",
        "value": {
          "light": "{border-hairline}",
          "dark": "{border-hairline}"
        },
        "usage": "Workflow state queued: chip border."
      },
      {
        "name": "state-running",
        "value": {
          "light": "{racing-500}",
          "dark": "{racing-300}"
        },
        "usage": "Workflow state running: dot/rule colour."
      },
      {
        "name": "state-running-bg",
        "value": {
          "light": "{tag-brand-bg}",
          "dark": "#16281e"
        },
        "usage": "Workflow state running: chip tint."
      },
      {
        "name": "state-running-fg",
        "value": {
          "light": "{racing-700}",
          "dark": "#7fb79a"
        },
        "usage": "Workflow state running: chip text, on state-running-bg."
      },
      {
        "name": "state-running-bd",
        "value": {
          "light": "{tag-brand-bd}",
          "dark": "rgba(111,169,142,.30)"
        },
        "usage": "Workflow state running: chip border."
      },
      {
        "name": "state-needs-input",
        "value": {
          "light": "{brass-600}",
          "dark": "{brass-400}"
        },
        "usage": "Workflow state needs-input: dot/rule colour (3:1 or more on the page grounds)."
      },
      {
        "name": "state-needs-input-bg",
        "value": {
          "light": "{tag-gilt-bg}",
          "dark": "#2a2110"
        },
        "usage": "Workflow state needs-input: chip tint."
      },
      {
        "name": "state-needs-input-fg",
        "value": {
          "light": "{brass-600}",
          "dark": "{brass-300}"
        },
        "usage": "Workflow state needs-input: chip text, on state-needs-input-bg."
      },
      {
        "name": "state-needs-input-bd",
        "value": {
          "light": "{tag-gilt-bd}",
          "dark": "rgba(222,192,136,.30)"
        },
        "usage": "Workflow state needs-input: chip border."
      },
      {
        "name": "state-needs-review",
        "value": {
          "light": "{oxblood-600}",
          "dark": "{oxblood-300}"
        },
        "usage": "Workflow state needs-review: dot/rule colour. Dark: -400 fails 3:1 on dark; see ramp note."
      },
      {
        "name": "state-needs-review-bg",
        "value": {
          "light": "{tag-oxblood-bg}",
          "dark": "#2a1416"
        },
        "usage": "Workflow state needs-review: chip tint."
      },
      {
        "name": "state-needs-review-fg",
        "value": {
          "light": "{oxblood-600}",
          "dark": "{oxblood-200}"
        },
        "usage": "Workflow state needs-review: chip text, on state-needs-review-bg."
      },
      {
        "name": "state-needs-review-bd",
        "value": {
          "light": "{tag-oxblood-bd}",
          "dark": "rgba(154,64,72,.35)"
        },
        "usage": "Workflow state needs-review: chip border."
      },
      {
        "name": "state-done",
        "value": {
          "light": "{stone-500}",
          "dark": "{stone-500}"
        },
        "usage": "Workflow state done: dot/rule colour."
      },
      {
        "name": "state-done-fg",
        "value": {
          "light": "{text-muted}",
          "dark": "{text-muted}"
        },
        "usage": "Workflow state done: chip text, on state-done-bg."
      },
      {
        "name": "state-done-bd",
        "value": {
          "light": "{border-hairline}",
          "dark": "{border-hairline}"
        },
        "usage": "Workflow state done: chip border."
      },
      {
        "name": "state-failed",
        "value": {
          "light": "{signal-500}",
          "dark": "{signal-500}"
        },
        "usage": "Workflow state failed: dot/rule colour."
      },
      {
        "name": "state-failed-bg",
        "value": {
          "light": "{status-danger-bg}",
          "dark": "#2e1414"
        },
        "usage": "Workflow state failed: chip tint."
      },
      {
        "name": "state-failed-fg",
        "value": {
          "light": "{signal-600}",
          "dark": "#e08789"
        },
        "usage": "Workflow state failed: chip text, on state-failed-bg."
      },
      {
        "name": "state-failed-bd",
        "value": {
          "light": "rgba(196,41,47,.30)",
          "dark": "rgba(224,135,137,.32)"
        },
        "usage": "Workflow state failed: chip border."
      },
      {
        "name": "decision-pending",
        "value": {
          "light": "{state-needs-input}",
          "dark": "{state-needs-input}"
        },
        "usage": "Approval decision pending: dot colour."
      },
      {
        "name": "decision-pending-bg",
        "value": {
          "light": "{state-needs-input-bg}",
          "dark": "{state-needs-input-bg}"
        },
        "usage": "Approval decision pending: chip tint."
      },
      {
        "name": "decision-pending-fg",
        "value": {
          "light": "{state-needs-input-fg}",
          "dark": "{state-needs-input-fg}"
        },
        "usage": "Approval decision pending: chip text, on decision-pending-bg."
      },
      {
        "name": "decision-pending-bd",
        "value": {
          "light": "{state-needs-input-bd}",
          "dark": "{state-needs-input-bd}"
        },
        "usage": "Approval decision pending: chip border."
      },
      {
        "name": "decision-approved",
        "value": {
          "light": "{state-running}",
          "dark": "{state-running}"
        },
        "usage": "Approval decision approved: dot colour."
      },
      {
        "name": "decision-approved-bg",
        "value": {
          "light": "{state-running-bg}",
          "dark": "{state-running-bg}"
        },
        "usage": "Approval decision approved: chip tint."
      },
      {
        "name": "decision-approved-fg",
        "value": {
          "light": "{state-running-fg}",
          "dark": "{state-running-fg}"
        },
        "usage": "Approval decision approved: chip text, on decision-approved-bg."
      },
      {
        "name": "decision-approved-bd",
        "value": {
          "light": "{state-running-bd}",
          "dark": "{state-running-bd}"
        },
        "usage": "Approval decision approved: chip border."
      },
      {
        "name": "decision-denied",
        "value": {
          "light": "{state-needs-review}",
          "dark": "{state-needs-review}"
        },
        "usage": "Approval decision denied: dot colour."
      },
      {
        "name": "decision-denied-bg",
        "value": {
          "light": "{state-needs-review-bg}",
          "dark": "{state-needs-review-bg}"
        },
        "usage": "Approval decision denied: chip tint."
      },
      {
        "name": "decision-denied-fg",
        "value": {
          "light": "{state-needs-review-fg}",
          "dark": "{state-needs-review-fg}"
        },
        "usage": "Approval decision denied: chip text, on decision-denied-bg."
      },
      {
        "name": "decision-denied-bd",
        "value": {
          "light": "{state-needs-review-bd}",
          "dark": "{state-needs-review-bd}"
        },
        "usage": "Approval decision denied: chip border."
      },
      {
        "name": "decision-expired",
        "value": {
          "light": "{stone-400}",
          "dark": "{stone-400}"
        },
        "usage": "Approval decision expired: dot colour."
      },
      {
        "name": "decision-expired-fg",
        "value": {
          "light": "{text-muted}",
          "dark": "{text-muted}"
        },
        "usage": "Approval decision expired: chip text, on decision-expired-bg."
      },
      {
        "name": "decision-expired-bd",
        "value": {
          "light": "{border-hairline}",
          "dark": "{border-hairline}"
        },
        "usage": "Approval decision expired: chip border."
      },
      {
        "name": "edge-gilt",
        "value": {
          "light": "rgba(154,117,52,0.55)",
          "dark": "rgba(222,192,136,0.38)"
        },
        "usage": "The 1px gilded book-edge that seams dark sections into light pages."
      },
      {
        "name": "scrim",
        "value": {
          "light": "rgba(23,19,14,0.50)",
          "dark": "rgba(6,4,2,0.66)"
        },
        "usage": "Dialog / palette backdrop."
      },
      {
        "name": "nav-bg",
        "value": {
          "light": "{bg-page}",
          "dark": "{bg-page}"
        },
        "usage": "Sticky nav ground: opaque, over a hairline. Never translucent or blurred."
      },
      {
        "name": "code-inline-bg",
        "value": {
          "light": "{parchment-200}",
          "dark": "#241c12"
        },
        "usage": "Inline code background."
      },
      {
        "name": "code-inline-fg",
        "value": {
          "light": "{oxblood-600}",
          "dark": "{cognac-300}"
        },
        "usage": "Inline code text, on code-inline-bg."
      }
    ]
  },
  "type": {
    "fonts": [],
    "families": {
      "display": "'Cormorant Garamond', 'Hoefler Text', Georgia, 'Times New Roman', serif",
      "mono": "'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace",
      "sans": "'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
    },
    "groups": [
      {
        "name": "Display",
        "family": "display",
        "styles": [
          {
            "name": "display-1",
            "fontSize": "76px",
            "lineHeight": "1.04",
            "fontWeight": 600,
            "usage": "Hero masthead. Cormorant, upright, sentence case.",
            "letterSpacing": "-0.01em"
          },
          {
            "name": "display-2",
            "fontSize": "56px",
            "lineHeight": "1.04",
            "fontWeight": 600,
            "usage": "Secondary masthead.",
            "letterSpacing": "-0.01em"
          },
          {
            "name": "heading-1",
            "fontSize": "42px",
            "lineHeight": "1.2",
            "fontWeight": 600,
            "usage": "Page heading. Upright, one weight and colour; names its content."
          },
          {
            "name": "heading-2",
            "fontSize": "32px",
            "lineHeight": "1.2",
            "fontWeight": 600,
            "usage": "Section heading."
          },
          {
            "name": "heading-3",
            "fontSize": "24px",
            "lineHeight": "1.2",
            "fontWeight": 600,
            "usage": "Sub-section heading."
          }
        ]
      },
      {
        "name": "Documentation",
        "family": "mono",
        "styles": [
          {
            "name": "heading-4-mono",
            "fontSize": "19px",
            "lineHeight": "1.2",
            "fontWeight": 600,
            "usage": "Mono H4: a command or literal used as a heading."
          },
          {
            "name": "body-lg",
            "fontSize": "17px",
            "lineHeight": "1.62",
            "fontWeight": 400,
            "usage": "Lede copy on documentation and marketing pages."
          },
          {
            "name": "body-md",
            "fontSize": "15px",
            "lineHeight": "1.62",
            "fontWeight": 400,
            "usage": "Documentation and marketing body text: mono at 1.62."
          },
          {
            "name": "body-sm",
            "fontSize": "13.5px",
            "lineHeight": "1.62",
            "fontWeight": 400,
            "usage": "Secondary body text and metadata lines."
          },
          {
            "name": "caption-label",
            "fontSize": "12px",
            "fontWeight": 500,
            "usage": "Sentence-case caption label in label-engraved; labels a block of data or a card, never above a section heading."
          },
          {
            "name": "table-header",
            "fontSize": "10.5px",
            "fontWeight": 600,
            "usage": "Table and column headers, uppercase: the one UI place uppercase is used.",
            "letterSpacing": "0.06em"
          }
        ]
      },
      {
        "name": "Interface",
        "family": "sans",
        "styles": [
          {
            "name": "ui-text",
            "fontSize": "13.5px",
            "lineHeight": "1.5",
            "fontWeight": 400,
            "usage": "Application chrome: nav, form labels, card metadata. Sans at lh-ui."
          },
          {
            "name": "ui-row",
            "fontSize": "13.5px",
            "lineHeight": "1.35",
            "fontWeight": 400,
            "usage": "Anything in a fixed-height row: table cells, badges, lane headers, nav items."
          },
          {
            "name": "ui-caption",
            "fontSize": "12px",
            "lineHeight": "1.5",
            "fontWeight": 400,
            "usage": "Hints and helper text in the application register."
          }
        ]
      }
    ]
  },
  "spacing": {
    "tokens": [
      {
        "name": "space-0",
        "value": "0",
        "usage": "No gap."
      },
      {
        "name": "space-1",
        "value": "4px",
        "usage": "Hairline gaps; icon-to-text."
      },
      {
        "name": "space-2",
        "value": "8px",
        "usage": "Tight gaps inside controls."
      },
      {
        "name": "space-3",
        "value": "12px",
        "usage": "Gaps between related items."
      },
      {
        "name": "space-4",
        "value": "16px",
        "usage": "Panel and rail padding."
      },
      {
        "name": "space-5",
        "value": "20px",
        "usage": "Section spacing in cards."
      },
      {
        "name": "space-6",
        "value": "24px",
        "usage": "Page padding (app)."
      },
      {
        "name": "space-8",
        "value": "32px",
        "usage": "Empty-state padding; large gaps."
      },
      {
        "name": "space-10",
        "value": "40px",
        "usage": "Between page sections."
      },
      {
        "name": "space-12",
        "value": "48px",
        "usage": "Between page sections."
      },
      {
        "name": "space-16",
        "value": "64px",
        "usage": "Editorial whitespace."
      },
      {
        "name": "space-20",
        "value": "80px",
        "usage": "Editorial whitespace."
      },
      {
        "name": "space-24",
        "value": "96px",
        "usage": "Hero spacing."
      },
      {
        "name": "space-32",
        "value": "128px",
        "usage": "Hero spacing."
      },
      {
        "name": "app-topbar-h",
        "value": "52px",
        "usage": "App shell top bar height."
      },
      {
        "name": "app-rail-w",
        "value": "220px",
        "usage": "App shell nav rail width."
      },
      {
        "name": "control-h",
        "value": "34px",
        "usage": "Shared control height so mixed rows (input beside button) align."
      },
      {
        "name": "control-h-sm",
        "value": "28px",
        "usage": "Small control height."
      },
      {
        "name": "control-px",
        "value": "10px",
        "usage": "Control horizontal padding."
      },
      {
        "name": "app-gap",
        "value": "12px",
        "usage": "Between lanes, cards, form fields."
      },
      {
        "name": "app-pad",
        "value": "16px",
        "usage": "Panel / card padding."
      },
      {
        "name": "app-page-pad",
        "value": "24px",
        "usage": "Main column padding."
      }
    ]
  },
  "radius": {
    "tokens": [
      {
        "name": "radius-xs",
        "value": "2px",
        "usage": "Checkboxes, inline code, small marks."
      },
      {
        "name": "radius-sm",
        "value": "4px",
        "usage": "Buttons, inputs, chips, banners."
      },
      {
        "name": "radius-md",
        "value": "6px",
        "usage": "Cards, dialogs."
      },
      {
        "name": "radius-lg",
        "value": "10px",
        "usage": "Large panels."
      },
      {
        "name": "radius-pill",
        "value": "999px",
        "usage": "Status dots and tags only."
      }
    ]
  },
  "shadow": {
    "tokens": [
      {
        "name": "shadow-xs",
        "value": "0 1px 2px rgba(23,19,14,0.06)",
        "usage": "Hairline lift."
      },
      {
        "name": "shadow-sm",
        "value": "0 2px 6px rgba(23,19,14,0.07)",
        "usage": "Cards: sit on a hairline and this."
      },
      {
        "name": "shadow-md",
        "value": "0 6px 20px rgba(23,19,14,0.10)",
        "usage": "Sticky bars and popovers."
      },
      {
        "name": "shadow-lg",
        "value": "0 18px 46px rgba(23,19,14,0.16)",
        "usage": "Overlays and dialogs only."
      },
      {
        "name": "shadow-inset",
        "value": "inset 0 1px 3px rgba(23,19,14,0.10)",
        "usage": "Inset \"pressed leather\" for sunken wells."
      },
      {
        "name": "keyline-brass",
        "value": "0 0 0 1px rgba(184,137,75,0.45)",
        "usage": "Gilt keyline: the luxury elevation motif; marks the single most important card or active item."
      },
      {
        "name": "focus-shadow",
        "value": {
          "light": "0 0 0 2px #886421",
          "dark": "0 0 0 2px #c99e5e"
        },
        "usage": "Solid 2px brass focus ring on :focus-visible (4.6:1 or more on every surface in both themes)."
      }
    ]
  },
  "layout": {
    "note": "Reading measure and container widths.",
    "tokens": [
      {
        "name": "measure",
        "value": "68ch",
        "usage": "max reading width for mono body"
      },
      {
        "name": "container",
        "value": "1180px",
        "usage": "content max-width"
      },
      {
        "name": "container-wide",
        "value": "1360px",
        "usage": "Wide content max-width."
      },
      {
        "name": "gutter",
        "value": "32px",
        "usage": "Grid gutter."
      }
    ]
  },
  "borderWidth": {
    "tokens": [
      {
        "name": "border-width",
        "value": "1px",
        "usage": "Default 1px edge."
      },
      {
        "name": "border-width-heavy",
        "value": "1.5px",
        "usage": "Heavier rule."
      }
    ]
  },
  "fontSize": {
    "note": "Type scale, px. Application surfaces reuse this ramp; they differ by family and line-height, not size.",
    "tokens": [
      {
        "name": "text-display-1",
        "value": "76px",
        "usage": "Hero masthead."
      },
      {
        "name": "text-display-2",
        "value": "56px",
        "usage": "Secondary masthead size; the display-2 type style."
      },
      {
        "name": "text-h1",
        "value": "42px",
        "usage": "Page heading size; the heading-1 type style."
      },
      {
        "name": "text-h2",
        "value": "32px",
        "usage": "Section heading size; the heading-2 type style."
      },
      {
        "name": "text-h3",
        "value": "24px",
        "usage": "Sub-section heading size; the heading-3 type style."
      },
      {
        "name": "text-h4",
        "value": "19px",
        "usage": "Mono H4 size; the heading-4-mono type style. Also dialog titles."
      },
      {
        "name": "text-body-lg",
        "value": "17px",
        "usage": "Lede copy size; the body-lg type style."
      },
      {
        "name": "text-body",
        "value": "15px",
        "usage": "Documentation and marketing body size; the body-md type style."
      },
      {
        "name": "text-body-sm",
        "value": "13.5px",
        "usage": "Secondary body and application chrome size; the body-sm, ui-text and ui-row type styles."
      },
      {
        "name": "text-caption",
        "value": "12px",
        "usage": "Captions, hints and metadata; the caption-label and ui-caption type styles."
      },
      {
        "name": "text-micro",
        "value": "10.5px",
        "usage": "Engraved plate labels; table headers."
      }
    ]
  },
  "fontWeight": {
    "tokens": [
      {
        "name": "fw-light",
        "value": "300",
        "usage": "Light numerals in reports."
      },
      {
        "name": "fw-regular",
        "value": "400",
        "usage": "Body text."
      },
      {
        "name": "fw-medium",
        "value": "500",
        "usage": "Caption labels, buttons."
      },
      {
        "name": "fw-semibold",
        "value": "600",
        "usage": "Headings, table headers."
      },
      {
        "name": "fw-bold",
        "value": "700",
        "usage": "Strong emphasis."
      }
    ]
  },
  "lineHeight": {
    "tokens": [
      {
        "name": "lh-tight",
        "value": "1.04",
        "usage": "Mastheads and display lines."
      },
      {
        "name": "lh-snug",
        "value": "1.2",
        "usage": "Headings and titles."
      },
      {
        "name": "lh-normal",
        "value": "1.62",
        "usage": "Documentation body, mono."
      },
      {
        "name": "lh-relaxed",
        "value": "1.75",
        "usage": "Long-form reading."
      },
      {
        "name": "lh-ui",
        "value": "1.5",
        "usage": "Application chrome."
      },
      {
        "name": "lh-ui-tight",
        "value": "1.35",
        "usage": "Fixed-height rows: table cells, badges, lane headers, nav items."
      }
    ]
  },
  "letterSpacing": {
    "tokens": [
      {
        "name": "tracking-tight",
        "value": "-0.01em",
        "usage": "Display sizes and serif titles: display-1, display-2, card titles and the wordmark."
      },
      {
        "name": "tracking-normal",
        "value": "0",
        "usage": "Default tracking for sentence-case labels; buttons and the wordmark."
      },
      {
        "name": "tracking-wide",
        "value": "0.06em",
        "usage": "Lightly tracked mono labels: the table-header type style, tags, field and lane labels, decision buttons."
      },
      {
        "name": "tracking-wider",
        "value": "0.14em",
        "usage": "Uppercase micro labels: badges, table headers, the transcript type column and role and completed chips."
      },
      {
        "name": "tracking-plate",
        "value": "0.22em",
        "usage": "Seal inscription only; not for UI labels."
      }
    ]
  },
  "numeric": {
    "note": "font-variant-numeric values.",
    "tokens": [
      {
        "name": "numeric-tabular",
        "value": "tabular-nums",
        "usage": "Any figure in a column, updating in place, or compared against another: money, counts, durations, percentages."
      },
      {
        "name": "numeric-proportional",
        "value": "proportional-nums",
        "usage": "Figures in running prose."
      }
    ]
  }
}