hbo_max___style_reference:
  info: "> Cinema lobby at midnight. Pure black walls, one cool blue exit sign, and movie posters glowing from every surface."

  theme: "dark"

  info: "HBO Max is a cinema-dark streaming interface: deep black canvas, content poster art as the primary visual unit, and a single steel-blue accent that powers every interactive element. The design is deliberately sparse — white text floats on black, pricing cards flip the polarity to white-on-light to signal commerce zones, and typography does the heavy lifting through size and spacing rather than color. Components stay flat and minimal: 8px-radius buttons, hairline borders, no shadows, no gradients. The custom Max Sans typeface carries a slight positive letter-spacing on small labels, giving even utility text a cinematic, editorial quality."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Page background, hero canvas, navigation surface — the default darkness that lets poster art and white text feel illuminated |"
    info: "| Smoke | `#050409` | `--color-smoke` | Near-black secondary surface, subtle elevation layer above pure black for section separation |"
    info: "| Ash Mist | `#b8b6bb` | `--color-ash-mist` | Muted helper text, secondary body copy, disabled icon strokes — readable but recedes |"
    info: "| Iron Veil | `#89868e` | `--color-iron-veil` | Tertiary text, inactive border outlines on controls |"
    info: "| Faded Print | `#999999` | `--color-faded-print` | Lowest-priority metadata, footnote-level text and borders |"
    info: "| Snow | `#ffffff` | `--color-snow` | Primary text, pricing card surfaces, icon fills, pill backgrounds — the dominant positive value in the system |"
    info: "| Eclipse Indigo | `#0e0a17` | `--color-eclipse-indigo` | Near-black heading accent, subtle border tint for heading underlines |"
    info: "| Signal Blue | `#3d6a99` | `--color-signal-blue` | Primary CTA fill, active link color, brand accent on icons and borders — the single chromatic note that powers all interactivity |"
    info: "| Glacier Beam | `#71b8f2` | `--color-glacier-beam` | Blue text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color |"

  tokens___typography:

    max_sans___custom_sans_serif__weights_300_400_carry_the_bulk_of_body_and_headline_work__600_700_reserved_for_prices_and_ctas__100_used_for_ultra_light_display_moments__positive_letter_spacing_0_083_0_1em_on_small_labels_gives_cinematic__marquee_poster_feel_____font_max_sans:
      - "**Substitute:** Inter, Helvetica Neue, or Söhne"
      - "**Weights:** 100, 300, 400, 600, 700"
      - "**Sizes:** 10, 12, 13, 14, 16, 18, 19, 20, 24, 26, 28, 35, 37, 44, 56"
      - "**Line height:** 0.80, 1.00, 1.10, 1.11, 1.20, 1.23, 1.25, 1.35, 1.60, 1.96"
      - "**Letter spacing:** +0.83px at 10px, +1.0px at 12px, +1.6px at 16px"
      - "**OpenType features:** `\"locl\" 0`"
      - "**Role:** Custom sans-serif. Weights 300–400 carry the bulk of body and headline work; 600–700 reserved for prices and CTAs; 100 used for ultra-light display moments. Positive letter-spacing (0.083–0.1em) on small labels gives cinematic, marquee-poster feel."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.6 | 0.83px | `--text-caption` |"
      info: "| body | 14px | 1.25 | — | `--text-body` |"
      info: "| body-lg | 16px | 1.2 | — | `--text-body-lg` |"
      info: "| subheading | 18px | 1.23 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.11 | — | `--text-heading-sm` |"
      info: "| heading | 28px | 1.1 | — | `--text-heading` |"
      info: "| heading-lg | 35px | 1 | — | `--text-heading-lg` |"
      info: "| display | 56px | 0.8 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 4.5px |"
      info: "| cards | 4.5px |"
      info: "| pills | 100px |"
      info: "| images | 8px |"
      info: "| buttons | 8px |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 64px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    signal_blue_cta_button:
      role: "Primary call-to-action for sign-up, plan selection, and key conversion points"

      info: "Filled #3d6a99 background, white text at 14px weight 600, 8px border-radius, 12px vertical × 16px horizontal padding. Uppercase or sentence case. Letter-spacing 0.083em. Used for 'Sign Up Now', 'Select Plan'."

    ghost_outline_button:
      role: "Secondary CTA, nav actions against dark backgrounds"

      info: "Transparent fill, 1px solid white border, white text weight 600, 8px radius, 10px vertical × 16px horizontal padding. Used for 'Sign Up Now' in the header against dark hero."

    pricing_tier_card:
      role: "Subscription plan display with feature list and price"

      info: "White (#ffffff) surface on black page — full polarity inversion. 4.5px border-radius, 24px padding, checkmark icons in blue (#3d6a99) for feature items, bold price at 28px weight 700, '/month' suffix in lighter weight. Bottom-right Signal Blue Select Plan button."

    category_tile:
      role: "Genre/content category navigation cards"

      info: "Full-bleed poster image background, 8px radius, overlay text at bottom: category name in white weight 600, 'for' label in muted white, content title in uppercase small-caps. Used for Movies, Family, Drama, Comedy, Action, True Crime."

    billing_toggle:
      role: "Monthly/Yearly plan period switcher"

      info: "Pill-shaped (100px radius) container with two segments. Active segment: white background, black text. Inactive: transparent, white text. 24px horizontal × 12px vertical padding per segment. SAVE badge floats above in #3d6a99."

    header_navigation:
      role: "Top-level site navigation and auth actions"

      info: "Transparent over hero, minimal. HBO Max logo left (white, stacked). Right side: 'Sign In' text link + 'Sign Up Now' ghost button. No background bar — floats directly on dark hero."

    content_hero_grid:
      role: "Full-bleed poster wall above the fold"

      info: "Dense grid of content poster art (10+ columns on desktop), slight tilt/perspective effect, poster images edge-to-edge. Logo + pricing copy + CTA centered over the grid with no card or panel — text sits directly on the artwork."

    feature_check_item:
      role: "Line item within pricing cards listing plan capabilities"

      info: "Blue (#3d6a99) checkmark icon at 14px, followed by dark text weight 400 at 14px. Consistent 8px vertical gap between items. Unchecked items: empty circle outline in same blue."

    carousel_section_header:
      role: "Genre section titles with horizontal scroll affordance"

      info: "Centered title at 28px weight 400, flanked by left/right arrow chevrons in muted gray. Adjacent dimmed genre labels scroll into view. Letter-spacing 0.083em for cinematic feel."

    section_heading:
      role: "Major page section titles like 'Pick Your Perfect Plan'"

      info: "White text at 28px weight 400, centered alignment, generous 64px vertical breathing room above and below. Subtext at 16px weight 400 in #b8b6bb muted gray."

    annual_savings_link:
      role: "Yearly pricing callout below monthly price"

      info: "'Or pay €X/year and save €Y' in blue (#3d6a99) text link at 12px weight 400, with right-arrow chevron. Sits directly below the /month price line."

  do_s_and_don_ts:

    do:
      - "Use #3d6a99 exclusively for filled CTA buttons, active states, and check icons — it is the system's only chromatic note"
      - "Invert to white surfaces for any commerce/pricing zone; the rest of the page must stay black"
      - "Set buttons to 8px radius and pill elements to 100px radius — never mix intermediate values"
      - "Apply 0.083–0.1em positive letter-spacing on labels, badges, and small-caps text for the cinematic marquee quality"
      - "Keep the page background pure #000000 with no overlays, gradients, or dim layers in content areas"
      - "Use weight 300–400 for headlines; reserve 600–700 for prices, CTAs, and emphasis only"
      - "Maintain generous vertical rhythm: 64px between sections, 24px card padding, 16px between elements"

    don_t:
      - "Never use drop shadows — depth comes from surface color polarity, not elevation"
      - "Don't introduce additional accent colors — the system is monochrome plus one blue"
      - "Avoid backgrounds lighter than #050409 outside of pricing cards"
      - "Don't use letter-spacing tighter than -0.01em on small text; the system breathes outward, not inward"
      - "Never place white buttons on white pricing cards or blue buttons on blue surfaces — polarity must flip"
      - "Don't add gradients, glass effects, or blur — the aesthetic is flat cinema-dark"
      - "Avoid using #3d6a99 for large decorative areas; it should stay as precise interactive punctuation, not fill backgrounds"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Obsidian Canvas | `#000000` | Full-page background, hero section base |"
    info: "| 2 | Smoke Surface | `#050409` | Subtle section separator, slightly elevated dark panel |"
    info: "| 3 | Snow Card | `#ffffff` | Pricing tier cards, feature panels — inverted polarity for commerce zones |"
    info: "| 4 | Signal Blue Accent | `#3d6a99` | Active CTA buttons, selected toggle state |"

  elevation:

    info: "No shadows. Depth is communicated exclusively through surface color polarity shifts — white cards on black background create contrast-based elevation, never drop shadows. This keeps the cinema-dark aesthetic pure: no fake light sources, only true surface contrast."

  imagery:

    info: "Content poster art is the entire visual identity. The hero is a dense, slightly perspective-tilted grid of real HBO Max show and movie posters — ten or more visible at once with no breathing room between them, creating a wall-of-content effect. Category tiles use full-bleed poster stills with overlaid text. No lifestyle photography, no abstract illustration, no 3D renders. Photography treatment: high-saturation, cinematic color grading inherited from the source material. Icons are minimal — simple checkmark outlines and chevron arrows, no decorative iconography."

  layout:

    info: "Full-bleed cinematic layout. The hero is a max-edge poster grid with centered logo and CTA floating over it — no container, no card. Below the fold: centered single-column stack with max-width 1280px. The pricing section breaks the dark pattern with a 4-column card grid on white surfaces, providing a stark polarity shift. Category tiles are 6 equal columns. Content carousels use a horizontal scroll model with chevron controls. Navigation is a transparent floating bar with no background fill. Section rhythm: dark band → light pricing band → dark content bands, creating a three-act visual structure."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #ffffff"
    - "background: #000000"
    - "border: #050409"
    - "accent: #3d6a99"
    - "link/hover: #71b8f2"
    - "primary action: #3d6a99 (filled action)"

    3_5_example_component_prompts:

    - "**Hero Section**: Full-bleed #000000 background with a 10-column grid of poster images filling the viewport. Centered white HBO Max logo at 56px weight 300, letter-spacing 0.083em. Below: 'Start streaming with HBO Max plans from €6.99/month' at 16px weight 400 white. Signal Blue CTA button: #3d6a99 fill, white text 14px weight 600, 8px radius, 12px 24px padding, letter-spacing 0.083em."

    - "**Pricing Card**: White (#ffffff) surface, 4.5px radius, 24px padding. Plan name 'Standard' at 20px weight 400. Feature list: #3d6a99 checkmark icons at 14px with dark body text. Price '€10.99' at 28px weight 700, '/month' suffix at 14px weight 400. Signal Blue Select Plan button (8px radius) bottom-right. Annual savings link in #3d6a99 at 12px below price."

    - "**Category Tile**: Full-bleed poster image, 8px radius, 200px height. Bottom overlay: category name 'Drama' in white 20px weight 600, 'HBO ORIGINAL' label in uppercase 10px weight 400 white at 0.1em tracking, content title 'EUPHORIA' in 12px weight 400."

    - "**Billing Toggle**: 100px-radius pill, 2px border in #050409. 'MONTHLY' active: white fill, black text 14px weight 600. 'YEARLY' inactive: transparent, white text. SAVE 16% badge above in #3d6a99 with white text 10px weight 600."

    - "**Carousel Header**: 'DISCOVER THE GREATEST' eyebrow at 12px weight 400 #b8b6bb, letter-spacing 0.1em. Genre name 'Epics' at 35px weight 300 white, centered. Left/right #89868e chevron arrows flanking, 24px from text."

  polarity_system:

    info: "The defining structural principle is surface polarity inversion. The page lives in #000000 darkness. Commerce zones (pricing) flip to #ffffff light. Active states use #3d6a99 blue as the single chromatic signal. Never blend these zones with gradients, overlays, or transitional surfaces — the contrast between black, white, and blue IS the visual system. Cards on black feel like illuminated screens; cards on white feel like printed pages. This binary approach eliminates ambiguity about where the user is in the conversion funnel."

  similar_brands:

    - "**Netflix** — Same dark-canvas streaming aesthetic with content poster grids as the dominant visual unit, and sparse UI chrome that lets artwork carry the brand"
    - "**Disney+** — Similar dark-mode entertainment layout with category carousels and single-accent CTA buttons against near-black backgrounds"
    - "**Apple TV+** — Identical black-canvas minimalism with a single white wordmark and full-bleed content imagery, relying on weight contrast rather than color"
    - "**Spotify** — Dark immersive interface where content art tiles carry the visual weight and the UI recedes into monochrome backgrounds with minimal accent color"
    - "**Hulu** — Similar streaming-tier pricing card grid with polarity-inverted white cards on a dark page and single blue CTA accent"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #000000;
          --color-smoke: #050409;
          --color-ash-mist: #b8b6bb;
          --color-iron-veil: #89868e;
          --color-faded-print: #999999;
          --color-snow: #ffffff;
          --color-eclipse-indigo: #0e0a17;
          --color-signal-blue: #3d6a99;
          --color-glacier-beam: #71b8f2;
        
          /* Typography — Font Families */
          --font-max-sans: 'Max Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.6;
          --tracking-caption: 0.83px;
          --text-body: 14px;
          --leading-body: 1.25;
          --text-body-lg: 16px;
          --leading-body-lg: 1.2;
          --text-subheading: 18px;
          --leading-subheading: 1.23;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.11;
          --text-heading: 28px;
          --leading-heading: 1.1;
          --text-heading-lg: 35px;
          --leading-heading-lg: 1;
          --text-display: 56px;
          --leading-display: 0.8;
        
          /* Typography — Weights */
          --font-weight-thin: 100;
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4.5px;
          --radius-lg: 8px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-tags: 4.5px;
          --radius-cards: 4.5px;
          --radius-pills: 100px;
          --radius-images: 8px;
          --radius-buttons: 8px;
        
          /* Surfaces */
          --surface-obsidian-canvas: #000000;
          --surface-smoke-surface: #050409;
          --surface-snow-card: #ffffff;
          --surface-signal-blue-accent: #3d6a99;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #000000;
          --color-smoke: #050409;
          --color-ash-mist: #b8b6bb;
          --color-iron-veil: #89868e;
          --color-faded-print: #999999;
          --color-snow: #ffffff;
          --color-eclipse-indigo: #0e0a17;
          --color-signal-blue: #3d6a99;
          --color-glacier-beam: #71b8f2;
        
          /* Typography */
          --font-max-sans: 'Max Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.6;
          --tracking-caption: 0.83px;
          --text-body: 14px;
          --leading-body: 1.25;
          --text-body-lg: 16px;
          --leading-body-lg: 1.2;
          --text-subheading: 18px;
          --leading-subheading: 1.23;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.11;
          --text-heading: 28px;
          --leading-heading: 1.1;
          --text-heading-lg: 35px;
          --leading-heading-lg: 1;
          --text-display: 56px;
          --leading-display: 0.8;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-md: 4.5px;
          --radius-lg: 8px;
          --radius-full: 100px;
        }