{
  "id": "hbo-max",
  "version": "1.0.0",
  "name": "HBO Max",
  "description": "HBO Max — rebranded to Max in May 2023 — is the Warner Bros. Discovery subscription streaming service that consolidates HBO, Warner Bros., Discovery, and Cartoon Network libraries. The brand identity is anchored on a saturated purple-to-blue gradient on a dark canvas, deliberately distinct from streaming's red/black (Netflix) and navy/blue (Disney+) conventions. The brand is dark-first and content-forward; the wordmark and gradient read as the brand, with the content carrying the visual weight.\n",
  "provenance": {
    "source": "https://press.wbd.com/us/",
    "license": "Proprietary — All Rights Reserved",
    "attribution": "Warner Bros. Discovery, Inc. — HBO, HBO Max, Max, and associated marks are registered trademarks of Warner Bros. Discovery, Inc. The signature purple-to-blue gradient and the dark canvas are documented across HBO Max's launch brand-system materials and the WBD press kit. The HBO Max corporate display sans is the proprietary marketing typeface; Inter is referenced here as the open-source fallback.\n",
    "importedDate": "2026-05-18",
    "notes": "HBO Max was rebranded to Max in May 2023; the brand atom captures the visual identity across that transition. The purple-to-blue gradient (#B535F6 → #0046FE) is the most distinctive brand element. The marketing display typeface is proprietary and not publicly distributed; Inter is referenced as the open-source fallback.\n"
  },
  "tags": [
    "streaming",
    "entertainment",
    "hbo",
    "max",
    "warner-bros",
    "dark-first"
  ],
  "palette": {
    "ref": "hbo-max@1.0.0",
    "swatches": [
      {
        "id": "max-purple",
        "name": "Max Purple",
        "value": "#B535F6",
        "description": "Primary signature purple — the dominant brand color in the gradient and the wordmark accent.",
        "aliases": []
      },
      {
        "id": "max-purple-deep",
        "name": "Max Purple Deep",
        "value": "#7A1FB8",
        "description": "Deeper purple used on pressed states and as the mid-gradient anchor.",
        "aliases": []
      },
      {
        "id": "max-blue",
        "name": "Max Blue",
        "value": "#0046FE",
        "description": "Saturated blue — the paired end of the purple-to-blue gradient that defines the brand surface.",
        "aliases": []
      },
      {
        "id": "max-blue-bright",
        "name": "Max Blue Bright",
        "value": "#3D7AFF",
        "description": "Lighter blue used on hover/highlight states and as a secondary accent.",
        "aliases": []
      },
      {
        "id": "max-black",
        "name": "Max Black",
        "value": "#000000",
        "description": "Canonical canvas — the Max consumer surface is solid black.",
        "aliases": []
      },
      {
        "id": "max-near-black",
        "name": "Max Near-Black",
        "value": "#0A0A14",
        "description": "Elevated surface — rows, tiles, and modal backgrounds sit on this slightly purple-tinted near-black.",
        "aliases": []
      },
      {
        "id": "max-charcoal",
        "name": "Max Charcoal",
        "value": "#1A1A2E",
        "description": "Elevated surface — used on hover states, expanded title cards, and modal headers.",
        "aliases": []
      },
      {
        "id": "max-white",
        "name": "Max White",
        "value": "#FFFFFF",
        "description": "Primary text on the dark canvas; reversed wordmark fill on light backgrounds.",
        "aliases": []
      },
      {
        "id": "max-gray-light",
        "name": "Max Gray Light",
        "value": "#B8B8C8",
        "description": "Tertiary text and metadata on the dark canvas.",
        "aliases": []
      },
      {
        "id": "max-gray",
        "name": "Max Gray",
        "value": "#5A5A6E",
        "description": "Secondary text and divider color on the dark canvas.",
        "aliases": []
      },
      {
        "id": "max-fog",
        "name": "Max Fog",
        "value": "#F5F5FA",
        "description": "Authored light-mode canvas — for marketing surfaces that require a light treatment.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "max-fog",
          "surface": "max-white",
          "surface-elevated": "max-white",
          "text-primary": "max-near-black",
          "text-secondary": "max-gray",
          "text-tertiary": "max-gray-light",
          "primary": "max-purple",
          "primary-hover": "max-purple-deep",
          "accent": "max-blue",
          "accent-hover": "max-blue-bright",
          "warning": "max-purple-deep",
          "warning-hover": "max-purple",
          "error": "max-purple-deep",
          "success": "max-blue-bright"
        }
      },
      "dark": {
        "roles": {
          "background": "max-black",
          "surface": "max-near-black",
          "surface-elevated": "max-charcoal",
          "text-primary": "max-white",
          "text-secondary": "max-gray-light",
          "text-tertiary": "max-gray",
          "primary": "max-purple",
          "primary-hover": "max-purple-deep",
          "accent": "max-blue",
          "accent-hover": "max-blue-bright",
          "warning": "max-purple",
          "warning-hover": "max-purple-deep",
          "error": "max-purple",
          "success": "max-blue-bright"
        }
      }
    }
  },
  "fonts": [
    {
      "role": "heading",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "body",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "mono",
      "ref": "jetbrainsmono-nerdfont@1.0.0",
      "family": "JetBrainsMono Nerd Font",
      "classification": "monospace",
      "source": {
        "kind": "external",
        "family": "JetBrainsMono Nerd Font",
        "notes": "Nerd-Font-patched build of JetBrains Mono. Not available via Google Fonts. Download woff2/ttf files from the Nerd Fonts GitHub release and self-host, or install system-wide for terminal/IDE use.\n"
      },
      "fallbackStack": [
        "JetBrains Mono",
        "Fira Code",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "monospace"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        }
      ]
    }
  ],
  "roles": {
    "colors": {
      "identity": "max-black",
      "on-identity": "max-purple",
      "background": "max-black",
      "surface": "max-near-black",
      "surface-elevated": "max-charcoal",
      "text-primary": "max-white",
      "text-secondary": "max-gray-light",
      "text-tertiary": "max-gray",
      "primary": "max-purple",
      "primary-hover": "max-purple-deep",
      "accent": "max-blue",
      "accent-hover": "max-blue-bright",
      "mark": "max-purple",
      "text-emphasis": "max-white"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "wordmark": "heading",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "colorChoice",
      "target": "logo.wordmark.fill",
      "severity": "error",
      "rationale": "The Max wordmark renders in the purple-to-blue gradient, in monochrome white on dark surfaces, or in monochrome black on light. The deeper and brighter gradient anchors are interactive-state values; gray tones are chrome — none are acceptable wordmark fills.\n",
      "allowed": [
        "max-purple",
        "max-blue",
        "max-white",
        "max-black"
      ],
      "forbidden": [
        "max-purple-deep",
        "max-blue-bright",
        "max-gray",
        "max-gray-light"
      ]
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "The Max wordmark's signature treatment is the purple-to-blue gradient — flattening to solid purple, recoloring outside the gradient, or rendering over busy photography breaks the defining brand element. Apply only WBD-approved variants with respected clearspace.\n",
      "treatments": [
        "stretched",
        "rotated",
        "recolored",
        "drop-shadow",
        "on-busy-photo",
        "inverted-without-variant",
        "flat-purple-instead-of-gradient"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "Max White on Max Black gives ~21:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/ background pairing on Max surfaces.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "contrastRatio",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "Max Purple (#B535F6) on Max Black gives ~6:1 — clears AA-large and approaches AA-normal. Buttons using the purple as a fill with white text exceed 6:1; this rule guards the interactive affordance of the primary CTA.\n",
      "against": "background",
      "minRatio": 3,
      "standard": "WCAG-AA-large"
    },
    {
      "type": "enumMembership",
      "target": "typography.heading.fontWeight",
      "severity": "warning",
      "rationale": "Max's marketing display headlines use Medium (500), Bold (700), and Black (900) weights for hero typography. Lighter cuts read as body and compromise the cinematic display voice the brand depends on.\n",
      "allowed": [
        "500",
        "700",
        "900"
      ]
    },
    {
      "type": "contextRestriction",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "Max Purple is the brand-identity color and the wordmark fill. Using it inside body copy, for secondary links, or for error states dilutes the signature accent and breaks the cinematic hierarchy the brand depends on.\n",
      "forbiddenContexts": [
        "body-text",
        "secondary-link",
        "error-state"
      ]
    },
    {
      "type": "accessibilityRequirement",
      "target": "*",
      "severity": "error",
      "rationale": "WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas makes contrast checks the default verification on any new role pairing.\n",
      "standard": "WCAG-AA",
      "criterion": "1.4.3"
    },
    {
      "type": "compositionConstraint",
      "target": "roles.colors.primary",
      "severity": "recommendation",
      "rationale": "The signature treatment is Max Purple → Max Blue gradient on black. Pairing the purple with the deeper purple on the same surface flattens the gradient signature into a single-purple composition that reads as inconsistency.\n",
      "pairsWith": [
        "max-blue",
        "max-black",
        "max-white"
      ],
      "doesNotPairWith": [
        "max-purple-deep"
      ]
    },
    {
      "type": "fontPairing",
      "target": "typography.heading",
      "severity": "warning",
      "rationale": "Max's marketing hero typography runs substantially larger than body copy. A 1.6× minimum size ratio preserves the cinematic display-to-prose hierarchy the brand voice depends on.\n",
      "requires": "body",
      "minSizeRatio": 1.6
    }
  ]
}