{
  "name": "Octaleus Design Tokens",
  "version": "1.0.0",
  "lastUpdated": "2026-09-07",
  "colors": {
    "primary": {
      "hex": "#000000",
      "token": "--color-primary",
      "role": "True black for primary buttons & device frames"
    },
    "primaryContainer": {
      "hex": "#131B2E",
      "token": "--color-primary-container",
      "role": "Deep midnight navy for dark panels, phone screens, pricing hero"
    },
    "onSurface": {
      "hex": "#0B1C30",
      "token": "--color-on-surface",
      "role": "Near-navy body & heading text on light"
    },
    "onSurfaceVariant": {
      "hex": "#45464D",
      "token": "--color-on-surface-variant",
      "role": "Secondary text, captions, nav idle"
    },
    "secondary": {
      "hex": "#4B41E1",
      "token": "--color-secondary",
      "role": "Indigo interactive, links, focus rings, eyebrows, verified badges"
    },
    "secondaryContainer": {
      "hex": "#645EFB",
      "token": "--color-secondary-container",
      "role": "Secondary hover fill"
    },
    "tertiaryFixedDim": {
      "hex": "#FFB95F",
      "token": "--color-tertiary-fixed-dim",
      "role": "Amber accent for time & money (free-window timer, wallet balance)"
    },
    "surface": {
      "hex": "#F8F9FF",
      "token": "--color-surface",
      "role": "Page background"
    },
    "surfaceContainerLow": {
      "hex": "#EFF4FF",
      "token": "--color-surface-container-low",
      "role": "Alternating section bands, footer"
    },
    "surfaceContainerLowest": {
      "hex": "#FFFFFF",
      "token": "--color-surface-container-lowest",
      "role": "Cards, elevated panels, secondary buttons"
    },
    "outlineVariant": {
      "hex": "#C6C6CD",
      "token": "--color-outline-variant",
      "role": "Dividers and borders (at 20-30% opacity)"
    }
  },
  "typography": {
    "displayHero": { "family": "Manrope", "size": "56px", "weight": 800, "tracking": "-0.03em" },
    "headlineXl": { "family": "Manrope", "size": "40px", "weight": 700, "tracking": "-0.02em" },
    "headlineLg": { "family": "Manrope", "size": "30px", "weight": 700, "tracking": "-0.015em" },
    "headlineMd": { "family": "Manrope", "size": "24px", "weight": 600, "tracking": "-0.01em" },
    "headlineSm": { "family": "Manrope", "size": "18px", "weight": 600, "tracking": "0" },
    "bodyXl": { "family": "Inter", "size": "18px", "weight": 400, "tracking": "-0.005em" },
    "bodyLg": { "family": "Inter", "size": "16px", "weight": 400, "tracking": "0" },
    "bodyMd": { "family": "Inter", "size": "14px", "weight": 400, "tracking": "0.005em" },
    "bodySm": { "family": "Inter", "size": "12px", "weight": 400, "tracking": "0.01em" },
    "labelMd": { "family": "Inter", "size": "13px", "weight": 600, "tracking": "0.02em" },
    "labelSm": { "family": "Inter", "size": "11px", "weight": 600, "tracking": "0.04em", "transform": "UPPERCASE" }
  },
  "radii": {
    "default": "2px",
    "lg": "4px",
    "xl": "8px",
    "full": "12px",
    "deviceFrame": "34-48px"
  }
}