{
  "$description": "North design tokens — the single source of truth for colour, type, space, shape, depth and motion across North, NorthStar, NorthCloud, NorthEdge and the cross-brand enablers. Format: W3C Design Tokens Community Group (DTCG). Edit here, then run `npm run tokens` to regenerate CSS, SCSS, JS and Tailwind outputs.",
  "color": {
    "$type": "color",
    "midnight": {
      "$description": "Primary. The night sky over the desert: depth, trust, sovereignty. Logos, headlines, dark surfaces.",
      "05": {
        "$value": "#F3F4F8",
        "$description": "Lightest tint. Table stripes, hover wash on light."
      },
      "10": {
        "$value": "#E4E7F0",
        "$description": "Selected rows, chips, subtle fills."
      },
      "20": {
        "$value": "#C8CDE0",
        "$description": "Borders on tinted panels. Body copy on dark."
      },
      "30": {
        "$value": "#A3AAC6",
        "$description": "Captions on dark. Disabled icons on light."
      },
      "40": {
        "$value": "#7C85A8",
        "$description": "Placeholder text on light (large only)."
      },
      "50": {
        "$value": "#58628A",
        "$description": "Captions and secondary text on light (5.9:1 on white)."
      },
      "60": {
        "$value": "#3D4870",
        "$description": "Body copy on light (8.9:1 on white)."
      },
      "70": {
        "$value": "#2F3A63",
        "$description": "Hover state for Midnight surfaces."
      },
      "80": {
        "$value": "#273156",
        "$description": "Core Midnight. The North navy — logos, headlines, primary dark surface."
      },
      "90": {
        "$value": "#1B223D",
        "$description": "Headline ink on light. Raised surfaces on dark."
      },
      "95": {
        "$value": "#121624",
        "$description": "Dark-mode canvas. The deepest night."
      }
    },
    "dune": {
      "$description": "Warm neutral. Sand and paper — gives North its warmth and stops layouts feeling clinical.",
      "02": {
        "$value": "#FFFCF9",
        "$description": "Paper. Print stock simulation, long-read backgrounds."
      },
      "05": {
        "$value": "#FFF9F3",
        "$description": "Core Dune (Cream). The signature light background."
      },
      "10": {
        "$value": "#FAF2E8",
        "$description": "Panels on Cream. Visual containers in guidelines."
      },
      "20": {
        "$value": "#F0E5D7",
        "$description": "Dividers on Cream, card borders."
      },
      "30": {
        "$value": "#E2D3C1",
        "$description": "Illustration mid-tone, strong dividers."
      },
      "40": {
        "$value": "#C9B9A6",
        "$description": "Illustration shadow tone."
      },
      "60": {
        "$value": "#8E8274",
        "$description": "Decorative only — not for text."
      },
      "80": {
        "$value": "#5C574F",
        "$description": "Muted warm text on Cream (6.9:1)."
      },
      "90": {
        "$value": "#2E2B27",
        "$description": "Warm dark surface (print, merch)."
      },
      "95": {
        "$value": "#1A1816",
        "$description": "Ink. Warm near-black for long-form body copy and print."
      }
    },
    "dawn": {
      "$description": "Accent. First light over the dunes: warmth, humanity, optimism. Used as a glow, never as text.",
      "05": {
        "$value": "#FFF6F0",
        "$description": "Faint warm wash."
      },
      "10": {
        "$value": "#FFEDE2",
        "$description": "Callout backgrounds, highlight rows."
      },
      "20": {
        "$value": "#FFE3D3",
        "$description": "Core Dawn (Peach). Aurora gradient start, illustration fills."
      },
      "30": {
        "$value": "#FFCDB2",
        "$description": "Illustration fills, chart backgrounds."
      },
      "40": {
        "$value": "#FDB48D",
        "$description": "NorthEdge accent on dark surfaces."
      },
      "60": {
        "$value": "#F08A5D",
        "$description": "Ember. Graphic accent; text only on Midnight (5.1:1)."
      },
      "80": {
        "$value": "#B4532D",
        "$description": "Text-safe Dawn on light (4.98:1 on white)."
      }
    },
    "oasis": {
      "$description": "Accent. Water in the desert: clarity, intelligence, the agentic spark. NorthStar's signal colour.",
      "05": {
        "$value": "#F0FDFD",
        "$description": "Faint cool wash."
      },
      "10": {
        "$value": "#DDF9FA",
        "$description": "Info backgrounds, selected states on light."
      },
      "20": {
        "$value": "#C0F4F7",
        "$description": "Illustration fills."
      },
      "30": {
        "$value": "#95ECF1",
        "$description": "Core Oasis (Aqua). Links and actions on dark, highlights, focus glow."
      },
      "50": {
        "$value": "#4ECAE6",
        "$description": "Horizon gradient end, illustration accents."
      },
      "70": {
        "$value": "#1A98B3",
        "$description": "Graphic Oasis on light (icons, large text, 3.4:1)."
      },
      "85": {
        "$value": "#0E6476",
        "$description": "Text-safe Oasis on light (6.8:1)."
      }
    },
    "gulf": {
      "$description": "Secondary. The Arabian Gulf: action, links, focus, data. North's action colour on light surfaces.",
      "05": {
        "$value": "#F1F7FD",
        "$description": "Faint blue wash."
      },
      "10": {
        "$value": "#E2EFFA",
        "$description": "Selected backgrounds, info panels."
      },
      "20": {
        "$value": "#C3DDF4",
        "$description": "Focus ring halo, chart gridline accent."
      },
      "30": {
        "$value": "#9FC9EE",
        "$description": "Disabled action fill."
      },
      "40": {
        "$value": "#6AAAE4",
        "$description": "Links on dark surfaces (7.3:1 on Midnight 95)."
      },
      "60": {
        "$value": "#227ED1",
        "$description": "Core Gulf (Blue). Brand blue for graphics and large type — 4.2:1 on white, so not for small text."
      },
      "70": {
        "$value": "#1B6AB1",
        "$description": "Action. Buttons and links on light (5.6:1 on white)."
      },
      "80": {
        "$value": "#165792",
        "$description": "Action hover / pressed."
      },
      "90": {
        "$value": "#0F3D68",
        "$description": "Deep blue for illustration and gradients."
      }
    },
    "steel": {
      "$description": "Cool neutral for product UI: borders, disabled states, data scaffolding.",
      "05": {
        "$value": "#F6F7F9",
        "$description": "Product canvas."
      },
      "10": {
        "$value": "#ECEEF2",
        "$description": "Input fills, table headers."
      },
      "20": {
        "$value": "#DADEE6",
        "$description": "Borders and dividers."
      },
      "30": {
        "$value": "#C1C7D2",
        "$description": "Strong borders, chart axes."
      },
      "50": {
        "$value": "#8A92A3",
        "$description": "Disabled text (non-essential)."
      },
      "70": {
        "$value": "#545C6E",
        "$description": "Secondary UI text (6.6:1)."
      },
      "90": {
        "$value": "#22262F",
        "$description": "Dark UI chrome."
      }
    },
    "base": {
      "snow": {
        "$value": "#FCFCFC",
        "$description": "North White. Text and logos on Midnight; avoids the glare of pure white on dark."
      },
      "white": {
        "$value": "#FFFFFF",
        "$description": "Pure white. Light-mode canvas and cards."
      },
      "black": {
        "$value": "#000000",
        "$description": "Pure black. Only for one-colour print and the monochrome logo."
      }
    },
    "status": {
      "$description": "Reserved for system state. Never use as decoration or as a chart series.",
      "success": {
        "$value": "#18794E",
        "$description": "Success text/icon (5.4:1 on white)."
      },
      "success-bg": {
        "$value": "#E3F5EC",
        "$description": "Success background."
      },
      "warning": {
        "$value": "#9A5B00",
        "$description": "Warning text/icon (5.4:1 on white)."
      },
      "warning-bg": {
        "$value": "#FFF1D6",
        "$description": "Warning background."
      },
      "danger": {
        "$value": "#C0352F",
        "$description": "Error text/icon (5.5:1 on white)."
      },
      "danger-bg": {
        "$value": "#FDE7E6",
        "$description": "Error background."
      },
      "info": {
        "$value": "#1B6AB1",
        "$description": "Information text/icon (alias of Gulf 70)."
      },
      "info-bg": {
        "$value": "#E2EFFA",
        "$description": "Information background."
      }
    },
    "dataviz": {
      "$description": "Validated categorical palette. Assign in this fixed order, never cycled. Validated for colour-vision deficiency (adjacent ΔE ≥ 12) in light and dark.",
      "light": {
        "1": {
          "$value": "#227ED1",
          "$description": "Gulf"
        },
        "2": {
          "$value": "#E0703F",
          "$description": "Ember"
        },
        "3": {
          "$value": "#159A9C",
          "$description": "Lagoon"
        },
        "4": {
          "$value": "#D29B1F",
          "$description": "Saffron (2.4:1 on white — always label directly)"
        },
        "5": {
          "$value": "#7562C9",
          "$description": "Iris"
        },
        "6": {
          "$value": "#C2477A",
          "$description": "Rose"
        }
      },
      "dark": {
        "1": {
          "$value": "#3A8EE0",
          "$description": "Gulf (dark)"
        },
        "2": {
          "$value": "#D9693A",
          "$description": "Ember (dark)"
        },
        "3": {
          "$value": "#17999B",
          "$description": "Lagoon (dark)"
        },
        "4": {
          "$value": "#B8861A",
          "$description": "Saffron (dark)"
        },
        "5": {
          "$value": "#8C7BDB",
          "$description": "Iris (dark)"
        },
        "6": {
          "$value": "#D35C8C",
          "$description": "Rose (dark)"
        }
      }
    }
  },
  "gradient": {
    "$type": "gradient",
    "aurora": {
      "$value": [
        {
          "color": "{color.dawn.20}",
          "position": 0
        },
        {
          "color": "{color.dune.05}",
          "position": 0.38
        },
        {
          "color": "{color.oasis.30}",
          "position": 0.72
        },
        {
          "color": "{color.gulf.60}",
          "position": 1
        }
      ],
      "$description": "The North signature. Sunrise to sea: Dawn → Dune → Oasis → Gulf. App icons, covers, hero moments. One per layout."
    },
    "horizon": {
      "$value": [
        {
          "color": "{color.midnight.80}",
          "position": 0
        },
        {
          "color": "#1D6EC4",
          "position": 0.38
        },
        {
          "color": "{color.gulf.60}",
          "position": 0.62
        },
        {
          "color": "{color.oasis.50}",
          "position": 1
        }
      ],
      "$description": "Night to water. Thin bars, progress, dividers and product chrome on dark. Never behind body text."
    },
    "night": {
      "$value": [
        {
          "color": "{color.midnight.95}",
          "position": 0
        },
        {
          "color": "{color.midnight.80}",
          "position": 1
        }
      ],
      "$description": "Quiet depth for dark-mode heroes, slides and wallpapers."
    }
  },
  "semantic": {
    "$description": "Role-based colours. Components use these — never primitives — so light and dark mode swap in one place.",
    "light": {
      "bg-canvas": {
        "$type": "color",
        "$value": "{color.base.white}",
        "$description": "Page background."
      },
      "bg-subtle": {
        "$type": "color",
        "$value": "{color.dune.05}",
        "$description": "Section bands, warm backgrounds."
      },
      "bg-panel": {
        "$type": "color",
        "$value": "{color.dune.10}",
        "$description": "Visual containers, cards on Cream."
      },
      "bg-inverse": {
        "$type": "color",
        "$value": "{color.midnight.80}",
        "$description": "Dark bands inside a light layout."
      },
      "surface-raised": {
        "$type": "color",
        "$value": "{color.base.white}",
        "$description": "Cards, menus, dialogs."
      },
      "text-heading": {
        "$type": "color",
        "$value": "{color.midnight.90}",
        "$description": "Titles and headings."
      },
      "text-body": {
        "$type": "color",
        "$value": "{color.midnight.60}",
        "$description": "Body copy."
      },
      "text-caption": {
        "$type": "color",
        "$value": "{color.midnight.50}",
        "$description": "Captions, metadata, helper text."
      },
      "text-strong": {
        "$type": "color",
        "$value": "{color.midnight.90}",
        "$description": "Bold emphasis inside body copy."
      },
      "text-link": {
        "$type": "color",
        "$value": "{color.gulf.70}",
        "$description": "Inline links."
      },
      "text-on-action": {
        "$type": "color",
        "$value": "{color.base.white}",
        "$description": "Text on the action colour."
      },
      "action": {
        "$type": "color",
        "$value": "{color.gulf.70}",
        "$description": "Primary buttons, CTAs."
      },
      "action-hover": {
        "$type": "color",
        "$value": "{color.gulf.80}",
        "$description": "Primary button hover."
      },
      "accent": {
        "$type": "color",
        "$value": "{color.dawn.20}",
        "$description": "Warm glow, highlights, illustration."
      },
      "border": {
        "$type": "color",
        "$value": "{color.dune.20}",
        "$description": "Default border on warm surfaces."
      },
      "border-ui": {
        "$type": "color",
        "$value": "{color.steel.20}",
        "$description": "Default border in product UI."
      },
      "focus": {
        "$type": "color",
        "$value": "{color.gulf.60}",
        "$description": "Keyboard focus ring."
      },
      "diagram-canvas": {
        "$type": "color",
        "$value": "{color.base.white}",
        "$description": "Diagram background."
      },
      "diagram-line": {
        "$type": "color",
        "$value": "{color.midnight.60}",
        "$description": "Connectors, arrows and node borders."
      },
      "diagram-line-strong": {
        "$type": "color",
        "$value": "{color.midnight.90}",
        "$description": "Primary path, emphasised connectors."
      },
      "diagram-node": {
        "$type": "color",
        "$value": "{color.base.white}",
        "$description": "Default node fill (system, service, step)."
      },
      "diagram-node-alt": {
        "$type": "color",
        "$value": "{color.dune.05}",
        "$description": "Secondary node fill (external system, actor)."
      },
      "diagram-group": {
        "$type": "color",
        "$value": "{color.dune.10}",
        "$description": "Group container fill."
      },
      "diagram-zone": {
        "$type": "color",
        "$value": "{color.oasis.05}",
        "$description": "Trust boundary / on-premises zone fill."
      },
      "diagram-zone-border": {
        "$type": "color",
        "$value": "{color.oasis.70}",
        "$description": "Trust boundary dashed border."
      },
      "diagram-ai": {
        "$type": "color",
        "$value": "{color.oasis.70}",
        "$description": "AI agent and model accents."
      },
      "diagram-human": {
        "$type": "color",
        "$value": "{color.dawn.60}",
        "$description": "Human approval and review accents."
      },
      "diagram-flow": {
        "$type": "color",
        "$value": "{color.gulf.70}",
        "$description": "Highlighted main flow."
      },
      "diagram-label": {
        "$type": "color",
        "$value": "{color.midnight.90}",
        "$description": "Node titles."
      },
      "diagram-caption": {
        "$type": "color",
        "$value": "{color.midnight.50}",
        "$description": "Edge labels, captions, metadata."
      },
      "skeleton-base": {
        "$type": "color",
        "$value": "{color.steel.10}",
        "$description": "Skeleton placeholder fill."
      },
      "skeleton-shine": {
        "$type": "color",
        "$value": "rgba(255,255,255,0.65)",
        "$description": "Shimmer highlight that sweeps across skeletons."
      },
      "scrim": {
        "$type": "color",
        "$value": "rgba(18,22,36,0.72)",
        "$description": "Overlay behind dialogs and drawers."
      },
      "row-hover": {
        "$type": "color",
        "$value": "rgba(27,34,61,0.035)",
        "$description": "Table row hover."
      },
      "row-selected": {
        "$type": "color",
        "$value": "rgba(27,106,177,0.09)",
        "$description": "Selected table row / list item."
      },
      "table-header": {
        "$type": "color",
        "$value": "{color.steel.05}",
        "$description": "Table header background."
      },
      "status-success": {
        "$type": "color",
        "$value": "{color.status.success}",
        "$description": "Success text and icons."
      },
      "status-success-bg": {
        "$type": "color",
        "$value": "{color.status.success-bg}",
        "$description": "Success background."
      },
      "status-warning": {
        "$type": "color",
        "$value": "{color.status.warning}",
        "$description": "Warning text and icons."
      },
      "status-warning-bg": {
        "$type": "color",
        "$value": "{color.status.warning-bg}",
        "$description": "Warning background."
      },
      "status-danger": {
        "$type": "color",
        "$value": "{color.status.danger}",
        "$description": "Error text, icons and danger actions."
      },
      "status-danger-bg": {
        "$type": "color",
        "$value": "{color.status.danger-bg}",
        "$description": "Error background."
      },
      "status-info": {
        "$type": "color",
        "$value": "{color.status.info}",
        "$description": "Information text and icons."
      },
      "status-info-bg": {
        "$type": "color",
        "$value": "{color.status.info-bg}",
        "$description": "Information background."
      },
      "text-on-danger": {
        "$type": "color",
        "$value": "{color.base.white}",
        "$description": "Text on danger buttons."
      },
      "ai": {
        "$value": "{color.oasis.70}",
        "$type": "color",
        "$description": "AI activity and agent presence: thinking orbs, agent avatars, AI markers (graphics, 3:1+)."
      }
    },
    "dark": {
      "bg-canvas": {
        "$type": "color",
        "$value": "{color.midnight.95}",
        "$description": "Page background."
      },
      "bg-subtle": {
        "$type": "color",
        "$value": "#1A2033",
        "$description": "Section bands."
      },
      "bg-panel": {
        "$type": "color",
        "$value": "{color.midnight.90}",
        "$description": "Visual containers."
      },
      "bg-inverse": {
        "$type": "color",
        "$value": "{color.dune.05}",
        "$description": "Light bands inside a dark layout."
      },
      "surface-raised": {
        "$type": "color",
        "$value": "{color.midnight.90}",
        "$description": "Cards, menus, dialogs."
      },
      "text-heading": {
        "$type": "color",
        "$value": "{color.base.snow}",
        "$description": "Titles and headings."
      },
      "text-body": {
        "$type": "color",
        "$value": "{color.midnight.20}",
        "$description": "Body copy."
      },
      "text-caption": {
        "$type": "color",
        "$value": "{color.midnight.30}",
        "$description": "Captions, metadata."
      },
      "text-strong": {
        "$type": "color",
        "$value": "{color.base.snow}",
        "$description": "Bold emphasis."
      },
      "text-link": {
        "$type": "color",
        "$value": "{color.oasis.30}",
        "$description": "Inline links."
      },
      "text-on-action": {
        "$type": "color",
        "$value": "{color.midnight.90}",
        "$description": "Text on the action colour."
      },
      "action": {
        "$type": "color",
        "$value": "{color.oasis.30}",
        "$description": "Primary buttons: in the dark, action becomes the star's light."
      },
      "action-hover": {
        "$type": "color",
        "$value": "{color.oasis.20}",
        "$description": "Primary button hover."
      },
      "accent": {
        "$type": "color",
        "$value": "{color.dawn.40}",
        "$description": "Warm glow on dark."
      },
      "border": {
        "$type": "color",
        "$value": "#2A3352",
        "$description": "Default border."
      },
      "border-ui": {
        "$type": "color",
        "$value": "#2A3352",
        "$description": "Product UI border."
      },
      "focus": {
        "$type": "color",
        "$value": "{color.oasis.30}",
        "$description": "Keyboard focus ring."
      },
      "diagram-canvas": {
        "$type": "color",
        "$value": "{color.midnight.95}",
        "$description": "Diagram background."
      },
      "diagram-line": {
        "$type": "color",
        "$value": "{color.midnight.30}",
        "$description": "Connectors, arrows and node borders."
      },
      "diagram-line-strong": {
        "$type": "color",
        "$value": "{color.base.snow}",
        "$description": "Primary path, emphasised connectors."
      },
      "diagram-node": {
        "$type": "color",
        "$value": "{color.midnight.90}",
        "$description": "Default node fill (system, service, step)."
      },
      "diagram-node-alt": {
        "$type": "color",
        "$value": "{color.midnight.80}",
        "$description": "Secondary node fill (external system, actor)."
      },
      "diagram-group": {
        "$type": "color",
        "$value": "#1A2033",
        "$description": "Group container fill."
      },
      "diagram-zone": {
        "$type": "color",
        "$value": "#14242E",
        "$description": "Trust boundary / on-premises zone fill."
      },
      "diagram-zone-border": {
        "$type": "color",
        "$value": "{color.oasis.50}",
        "$description": "Trust boundary dashed border."
      },
      "diagram-ai": {
        "$type": "color",
        "$value": "{color.oasis.30}",
        "$description": "AI agent and model accents."
      },
      "diagram-human": {
        "$type": "color",
        "$value": "{color.dawn.40}",
        "$description": "Human approval and review accents."
      },
      "diagram-flow": {
        "$type": "color",
        "$value": "{color.gulf.40}",
        "$description": "Highlighted main flow."
      },
      "diagram-label": {
        "$type": "color",
        "$value": "{color.base.snow}",
        "$description": "Node titles."
      },
      "diagram-caption": {
        "$type": "color",
        "$value": "{color.midnight.30}",
        "$description": "Edge labels, captions, metadata."
      },
      "skeleton-base": {
        "$type": "color",
        "$value": "#1E2640",
        "$description": "Skeleton placeholder fill."
      },
      "skeleton-shine": {
        "$type": "color",
        "$value": "rgba(255,255,255,0.06)",
        "$description": "Shimmer highlight that sweeps across skeletons."
      },
      "scrim": {
        "$type": "color",
        "$value": "rgba(6,8,14,0.78)",
        "$description": "Overlay behind dialogs and drawers."
      },
      "row-hover": {
        "$type": "color",
        "$value": "rgba(252,252,252,0.04)",
        "$description": "Table row hover."
      },
      "row-selected": {
        "$type": "color",
        "$value": "rgba(149,236,241,0.10)",
        "$description": "Selected table row / list item."
      },
      "table-header": {
        "$type": "color",
        "$value": "{color.midnight.90}",
        "$description": "Table header background."
      },
      "status-success": {
        "$type": "color",
        "$value": "#5CC796",
        "$description": "Success text and icons."
      },
      "status-success-bg": {
        "$type": "color",
        "$value": "#13301F",
        "$description": "Success background."
      },
      "status-warning": {
        "$type": "color",
        "$value": "#F2B544",
        "$description": "Warning text and icons."
      },
      "status-warning-bg": {
        "$type": "color",
        "$value": "#33270F",
        "$description": "Warning background."
      },
      "status-danger": {
        "$type": "color",
        "$value": "#FF8A84",
        "$description": "Error text, icons and danger actions."
      },
      "status-danger-bg": {
        "$type": "color",
        "$value": "#3A1717",
        "$description": "Error background."
      },
      "status-info": {
        "$type": "color",
        "$value": "#6AAAE4",
        "$description": "Information text and icons."
      },
      "status-info-bg": {
        "$type": "color",
        "$value": "#14253D",
        "$description": "Information background."
      },
      "text-on-danger": {
        "$type": "color",
        "$value": "{color.midnight.90}",
        "$description": "Text on danger buttons."
      },
      "ai": {
        "$value": "{color.oasis.30}",
        "$type": "color",
        "$description": "AI activity and agent presence on dark."
      }
    }
  },
  "brand": {
    "$description": "Sub-brand signal colours. Every sub-brand shares the North core (Midnight, Dune, type, logo); the signal is the one colour that tells them apart.",
    "north": {
      "signal": {
        "$type": "color",
        "$value": "{color.midnight.80}",
        "$description": "North (corporate) and the cross-brand enablers."
      }
    },
    "northstar": {
      "signal": {
        "$type": "color",
        "$value": "{color.oasis.30}",
        "$description": "NorthStar — agentic AI platform. Oasis: the spark of intelligence."
      }
    },
    "northcloud": {
      "signal": {
        "$type": "color",
        "$value": "{color.gulf.60}",
        "$description": "NorthCloud — cloud business. Gulf: depth, scale, infrastructure."
      }
    },
    "northedge": {
      "signal": {
        "$type": "color",
        "$value": "{color.dawn.40}",
        "$description": "NorthEdge — AI inference. Dawn: heat, speed, first light."
      }
    }
  },
  "font": {
    "family": {
      "$type": "fontFamily",
      "display": {
        "$value": [
          "Helvetica Now Display",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$description": "Headlines, display, numbers, wordmarks."
      },
      "text": {
        "$value": [
          "Helvetica Now Text",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$description": "Body copy, UI, captions."
      },
      "arabic": {
        "$value": [
          "IBM Plex Sans Arabic",
          "Noto Sans Arabic",
          "Tahoma",
          "sans-serif"
        ],
        "$description": "All Arabic-script text."
      },
      "mono": {
        "$value": [
          "JetBrains Mono",
          "SFMono-Regular",
          "Menlo",
          "Consolas",
          "monospace"
        ],
        "$description": "Code, CLI, tokens, IDs."
      }
    },
    "weight": {
      "$type": "fontWeight",
      "light": {
        "$value": 300,
        "$description": "Display Light — large lead lines and quotes only."
      },
      "regular": {
        "$value": 400,
        "$description": "Body copy."
      },
      "medium": {
        "$value": 500,
        "$description": "Headings, buttons, labels."
      },
      "bold": {
        "$value": 700,
        "$description": "Display headlines, sub-brand names in lockups, emphasis."
      },
      "extrabold": {
        "$value": 800,
        "$description": "Hero numbers only."
      }
    }
  },
  "typography": {
    "$type": "typography",
    "display-xl": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontWeight": 700,
        "fontSize": "96px",
        "lineHeight": 0.96,
        "letterSpacing": "-0.035em"
      },
      "$description": "Campaign heroes, title slides. One per layout."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontWeight": 700,
        "fontSize": "72px",
        "lineHeight": 1.0,
        "letterSpacing": "-0.03em"
      },
      "$description": "Landing-page heroes."
    },
    "heading-1": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontWeight": 500,
        "fontSize": "48px",
        "lineHeight": 1.06,
        "letterSpacing": "-0.02em"
      },
      "$description": "Page titles."
    },
    "heading-2": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontWeight": 500,
        "fontSize": "36px",
        "lineHeight": 1.1,
        "letterSpacing": "-0.015em"
      },
      "$description": "Section titles."
    },
    "heading-3": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontWeight": 500,
        "fontSize": "24px",
        "lineHeight": 1.22,
        "letterSpacing": "-0.01em"
      },
      "$description": "Sub-sections, card titles."
    },
    "heading-4": {
      "$value": {
        "fontFamily": "{font.family.text}",
        "fontWeight": 700,
        "fontSize": "18px",
        "lineHeight": 1.33,
        "letterSpacing": "0"
      },
      "$description": "Small headings, list titles."
    },
    "lead": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontWeight": 300,
        "fontSize": "22px",
        "lineHeight": 1.45,
        "letterSpacing": "-0.005em"
      },
      "$description": "Intro paragraphs under a title."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "{font.family.text}",
        "fontWeight": 400,
        "fontSize": "18px",
        "lineHeight": 1.55,
        "letterSpacing": "0"
      },
      "$description": "Marketing body copy."
    },
    "body": {
      "$value": {
        "fontFamily": "{font.family.text}",
        "fontWeight": 400,
        "fontSize": "16px",
        "lineHeight": 1.55,
        "letterSpacing": "0"
      },
      "$description": "Default body and UI copy."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "{font.family.text}",
        "fontWeight": 400,
        "fontSize": "14px",
        "lineHeight": 1.5,
        "letterSpacing": "0.005em"
      },
      "$description": "Dense UI, tables, secondary copy."
    },
    "caption": {
      "$value": {
        "fontFamily": "{font.family.text}",
        "fontWeight": 500,
        "fontSize": "12px",
        "lineHeight": 1.4,
        "letterSpacing": "0.01em"
      },
      "$description": "Captions and legal. Smallest permitted size on screen."
    },
    "microtitle": {
      "$value": {
        "fontFamily": "{font.family.text}",
        "fontWeight": 700,
        "fontSize": "12px",
        "lineHeight": 1.3,
        "letterSpacing": "0.1em",
        "textTransform": "uppercase"
      },
      "$description": "Navigation groups and data labels only — echoes the uppercase wordmark. Never above every heading."
    },
    "code": {
      "$value": {
        "fontFamily": "{font.family.mono}",
        "fontWeight": 400,
        "fontSize": "14px",
        "lineHeight": 1.6,
        "letterSpacing": "0"
      },
      "$description": "Code blocks, CLI, token names."
    }
  },
  "arabic": {
    "$description": "Arabic-script typography adjustments, applied on top of the Latin text styles.",
    "size-ratio": {
      "$type": "number",
      "$value": 1.08,
      "$description": "Multiply the Latin font size by this for Arabic at the same role (optically matches Helvetica Now)."
    },
    "line-height-body": {
      "$type": "number",
      "$value": 1.8,
      "$description": "Arabic body and UI copy."
    },
    "line-height-heading": {
      "$type": "number",
      "$value": 1.35,
      "$description": "Arabic headings (Latin headings are tighter)."
    },
    "letter-spacing": {
      "$type": "dimension",
      "$value": "0",
      "$description": "Never track Arabic."
    },
    "weight-heading": {
      "$type": "fontWeight",
      "$value": 600,
      "$description": "IBM Plex Sans Arabic SemiBold for headings that pair with Latin Display Medium/Bold."
    }
  },
  "space": {
    "$type": "dimension",
    "$description": "4px base unit. Keys are multiples of 4px.",
    "0": {
      "$value": "0px"
    },
    "0_5": {
      "$value": "2px",
      "$description": "Hairline offsets."
    },
    "1": {
      "$value": "4px",
      "$description": "Icon-to-label gap."
    },
    "2": {
      "$value": "8px",
      "$description": "Tight stacks, chip padding."
    },
    "3": {
      "$value": "12px",
      "$description": "Input padding."
    },
    "4": {
      "$value": "16px",
      "$description": "Default gap. Mobile page gutter."
    },
    "5": {
      "$value": "20px"
    },
    "6": {
      "$value": "24px",
      "$description": "Card padding."
    },
    "8": {
      "$value": "32px",
      "$description": "Panel padding. Desktop gutter."
    },
    "10": {
      "$value": "40px"
    },
    "12": {
      "$value": "48px",
      "$description": "Between related sections."
    },
    "16": {
      "$value": "64px",
      "$description": "Between page sections."
    },
    "20": {
      "$value": "80px"
    },
    "24": {
      "$value": "96px",
      "$description": "Hero padding."
    },
    "32": {
      "$value": "128px",
      "$description": "Campaign whitespace."
    },
    "40": {
      "$value": "160px"
    }
  },
  "radius": {
    "$type": "dimension",
    "$description": "Radius grows with the size of the object. Nested radius = outer radius − padding.",
    "none": {
      "$value": "0px",
      "$description": "Full-bleed images, tables."
    },
    "xs": {
      "$value": "4px",
      "$description": "Checkboxes, tags, code."
    },
    "sm": {
      "$value": "8px",
      "$description": "Buttons, inputs."
    },
    "md": {
      "$value": "12px",
      "$description": "Small cards, menus."
    },
    "lg": {
      "$value": "16px",
      "$description": "Cards, image tiles."
    },
    "xl": {
      "$value": "24px",
      "$description": "Visual panels, bento boxes, hero media."
    },
    "2xl": {
      "$value": "32px",
      "$description": "Full-width feature panels."
    },
    "full": {
      "$value": "9999px",
      "$description": "Pills, avatars, the star badge."
    }
  },
  "border": {
    "$type": "dimension",
    "hairline": {
      "$value": "1px",
      "$description": "Default borders and dividers."
    },
    "strong": {
      "$value": "2px",
      "$description": "Selected cards, data lines."
    },
    "focus": {
      "$value": "3px",
      "$description": "Keyboard focus ring (offset 2px)."
    }
  },
  "shadow": {
    "$type": "shadow",
    "$description": "Shadows are tinted with Midnight, never grey. Use depth to show hierarchy, not decoration.",
    "0": {
      "$value": "none",
      "$description": "Flat. Default for content on Cream."
    },
    "1": {
      "$value": "0 1px 2px rgba(27,34,61,.06), 0 1px 1px rgba(27,34,61,.04)",
      "$description": "Resting cards, inputs."
    },
    "2": {
      "$value": "0 4px 12px rgba(27,34,61,.08), 0 1px 3px rgba(27,34,61,.06)",
      "$description": "Hovered cards, dropdowns."
    },
    "3": {
      "$value": "0 12px 32px rgba(27,34,61,.12), 0 2px 6px rgba(27,34,61,.06)",
      "$description": "Popovers, floating product windows."
    },
    "4": {
      "$value": "0 24px 64px rgba(27,34,61,.18), 0 4px 12px rgba(27,34,61,.08)",
      "$description": "Dialogs, hero device mock-ups."
    },
    "glow": {
      "$value": "0 0 0 1px rgba(149,236,241,.4), 0 0 32px rgba(149,236,241,.35)",
      "$description": "Oasis glow for the star and live AI states on dark."
    }
  },
  "motion": {
    "duration": {
      "$type": "duration",
      "instant": {
        "$value": "80ms",
        "$description": "Colour changes, toggles."
      },
      "fast": {
        "$value": "140ms",
        "$description": "Hovers, small reveals."
      },
      "base": {
        "$value": "220ms",
        "$description": "Menus, accordions, tabs."
      },
      "slow": {
        "$value": "360ms",
        "$description": "Panels, drawers, page transitions."
      },
      "deliberate": {
        "$value": "600ms",
        "$description": "Hero moments, the star rise. Once per screen."
      }
    },
    "easing": {
      "$type": "cubicBezier",
      "standard": {
        "$value": [
          0.2,
          0,
          0,
          1
        ],
        "$description": "Most UI movement."
      },
      "enter": {
        "$value": [
          0,
          0,
          0.2,
          1
        ],
        "$description": "Elements arriving."
      },
      "exit": {
        "$value": [
          0.4,
          0,
          1,
          1
        ],
        "$description": "Elements leaving."
      },
      "rise": {
        "$value": [
          0.22,
          1,
          0.36,
          1
        ],
        "$description": "Signature ease: a long, calm settle, like a star rising."
      }
    }
  },
  "breakpoint": {
    "$type": "dimension",
    "sm": {
      "$value": "640px",
      "$description": "Large phones."
    },
    "md": {
      "$value": "960px",
      "$description": "Tablets, small laptops."
    },
    "lg": {
      "$value": "1280px",
      "$description": "Desktops."
    },
    "xl": {
      "$value": "1600px",
      "$description": "Wide screens."
    }
  },
  "grid": {
    "$type": "dimension",
    "columns-mobile": {
      "$value": "4",
      "$description": "Columns below md."
    },
    "columns-tablet": {
      "$value": "8",
      "$description": "Columns md–lg."
    },
    "columns-desktop": {
      "$value": "12",
      "$description": "Columns at lg and up."
    },
    "gutter-mobile": {
      "$value": "16px"
    },
    "gutter-desktop": {
      "$value": "32px"
    },
    "margin-mobile": {
      "$value": "16px"
    },
    "margin-desktop": {
      "$value": "64px"
    },
    "max-width": {
      "$value": "1280px",
      "$description": "Content max width."
    },
    "measure": {
      "$value": "68ch",
      "$description": "Maximum line length for reading."
    }
  },
  "z": {
    "$type": "number",
    "base": {
      "$value": 0
    },
    "raised": {
      "$value": 10
    },
    "sticky": {
      "$value": 100
    },
    "overlay": {
      "$value": 1000
    },
    "modal": {
      "$value": 1100
    },
    "toast": {
      "$value": 1200
    }
  },
  "opacity": {
    "$type": "number",
    "disabled": {
      "$value": 0.4,
      "$description": "Disabled controls."
    },
    "muted": {
      "$value": 0.64,
      "$description": "De-emphasised graphics."
    },
    "scrim": {
      "$value": 0.72,
      "$description": "Overlay behind dialogs (Midnight 95)."
    }
  },
  "size": {
    "$description": "Component sizes. Controls share heights so they align in a row.",
    "control-sm": {
      "$type": "dimension",
      "$value": "32px",
      "$description": "Small buttons, inputs, chips in dense UI and tables."
    },
    "control-md": {
      "$type": "dimension",
      "$value": "40px",
      "$description": "Default buttons, inputs, selects."
    },
    "control-lg": {
      "$type": "dimension",
      "$value": "48px",
      "$description": "Marketing CTAs, touch-first forms."
    },
    "touch-min": {
      "$type": "dimension",
      "$value": "44px",
      "$description": "Minimum touch target on touch devices (pad the hit area if the visual is smaller)."
    },
    "icon-sm": {
      "$type": "dimension",
      "$value": "16px",
      "$description": "Icons in dense UI and badges."
    },
    "icon-md": {
      "$type": "dimension",
      "$value": "20px",
      "$description": "Default UI icon."
    },
    "icon-lg": {
      "$type": "dimension",
      "$value": "24px",
      "$description": "Navigation and empty-state icons."
    },
    "table-row": {
      "$type": "dimension",
      "$value": "44px",
      "$description": "Default table row height (compact 32px, relaxed 56px)."
    }
  },
  "filter": {
    "$description": "Filters and effects. Use only for the purposes described.",
    "blur-scrim": {
      "$type": "dimension",
      "$value": "4px",
      "$description": "Backdrop blur behind dialogs and drawers (with the scrim colour)."
    },
    "blur-sm": {
      "$type": "dimension",
      "$value": "8px",
      "$description": "Backdrop blur for floating controls over images."
    },
    "blur-md": {
      "$type": "dimension",
      "$value": "14px",
      "$description": "Backdrop blur for sticky headers and toolbars."
    },
    "blur-lg": {
      "$type": "dimension",
      "$value": "40px",
      "$description": "Decorative glows only (the Oasis glow, Aurora). Never on content."
    },
    "grayscale": {
      "$type": "number",
      "$value": 1,
      "$description": "Full grayscale: partner logo walls in one-colour mode."
    },
    "grayscale-muted": {
      "$type": "number",
      "$value": 0.6,
      "$description": "Inactive or archived imagery."
    },
    "dim": {
      "$type": "number",
      "$value": 0.72,
      "$description": "Brightness for images behind text when duotone is not possible."
    },
    "saturate-backdrop": {
      "$type": "number",
      "$value": 1.4,
      "$description": "Saturation boost paired with backdrop blur on light headers."
    }
  },
  "diagram": {
    "$description": "Geometry for diagrams, flowcharts and architecture drawings. Colours are the diagram-* semantic roles.",
    "grid": {
      "$type": "dimension",
      "$value": "8px",
      "$description": "Snap every node and connector to an 8px grid."
    },
    "stroke": {
      "$type": "dimension",
      "$value": "1.5px",
      "$description": "Node borders and connectors."
    },
    "stroke-strong": {
      "$type": "dimension",
      "$value": "2.5px",
      "$description": "Primary path and emphasised connectors."
    },
    "node-radius": {
      "$type": "dimension",
      "$value": "8px",
      "$description": "Nodes (boxes)."
    },
    "group-radius": {
      "$type": "dimension",
      "$value": "16px",
      "$description": "Group containers."
    },
    "zone-radius": {
      "$type": "dimension",
      "$value": "24px",
      "$description": "Zones and trust boundaries."
    },
    "node-min-width": {
      "$type": "dimension",
      "$value": "144px",
      "$description": "Minimum node width."
    },
    "node-height": {
      "$type": "dimension",
      "$value": "56px",
      "$description": "Default single-line node height (two lines: 72px)."
    },
    "node-padding": {
      "$type": "dimension",
      "$value": "12px 16px",
      "$description": "Inner padding of a node."
    },
    "gap": {
      "$type": "dimension",
      "$value": "48px",
      "$description": "Minimum gap between nodes along a flow."
    },
    "dash": {
      "$type": "string",
      "$value": "6 4",
      "$description": "Dashed line pattern (async, optional, boundaries)."
    },
    "dot": {
      "$type": "string",
      "$value": "1.5 4",
      "$description": "Dotted line pattern (dependency, reference)."
    },
    "arrow-size": {
      "$type": "dimension",
      "$value": "8px",
      "$description": "Arrowhead length."
    },
    "label-size": {
      "$type": "dimension",
      "$value": "14px",
      "$description": "Node title (Helvetica Now Text Medium)."
    },
    "caption-size": {
      "$type": "dimension",
      "$value": "12px",
      "$description": "Edge labels and captions (Helvetica Now Text Regular)."
    },
    "icon-size": {
      "$type": "dimension",
      "$value": "20px",
      "$description": "Icon inside a node."
    }
  }
}