champions4good___style_reference:
  info: "> midnight sports broadside — a vintage club poster screaming from a plum-dark wall"

  theme: "dark"

  info: "Champions4good is a dark-first club poster: deep plum canvas, one screaming lavender accent, and ultra-condensed display type that fills the screen like a vintage sports broadside. The visual hierarchy is brutally simple — everything chromatic is lavender-pink (#e894ff) against the plum ground, and supporting accents (mint, amber) appear as small functional punctuation rather than competing for attention. Body sections break to white canvas with the same condensed display type rendered in dense black, creating a high-contrast section rhythm. The type attitude is anti-restraint: Druk Condensed at 200-300px with tight tracking and tight line-height pushes the display copy to the edges of its container, while Neue Montreal handles UI chrome at human sizes. Components are minimal — pill toggles, a single filled lavender button, sparse navigation — letting the typography and the plum-to-white contrast do the work."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Deep Plum | `#23002b` | `--color-deep-plum` | Hero canvas, dark section backgrounds, page-level ground — sets the exclusive nighttime club mood |"
    info: "| Lavender Shock | `#e894ff` | `--color-lavender-shock` | Pink supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Espresso Brown | `#291900` | `--color-espresso-brown` | Warm near-black for card backgrounds, dark UI surfaces, warm-tinted borders — adds subtle warmth to the otherwise cool palette |"
    info: "| Ink Teal | `#002629` | `--color-ink-teal` | Cool near-black for body text, deep card surfaces, cool borders — the teal undertone distinguishes dark text from the plum background |"
    info: "| Slate | `#333333` | `--color-slate` | Primary body text on light sections, icon strokes, dense UI text |"
    info: "| Charcoal | `#121212` | `--color-charcoal` | Headlines on light sections, heavy text blocks, near-black emphasis |"
    info: "| Black | `#000000` | `--color-black` | Maximum-contrast text on white sections, solid fills for condensed display type in light zones |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Light section canvas, reverse text on dark plum, card surfaces in light zones |"
    info: "| Mint Signal | `#93ffe4` | `--color-mint-signal` | Accent punctuation: highlight washes, badge backgrounds, small functional moments — cool contrast against lavender |"
    info: "| Amber Pulse | `#ffac47` | `--color-amber-pulse` | Accent punctuation: warm highlight moments, secondary badges, energy markers — warm contrast against the cool palette |"

  tokens___typography:

    druk_condensed_super_desktop___display_and_section_headings___extreme_condensed_bold_that_fills_containers_edge_to_edge__151_317px_for_hero_scale_words__24_44px_for_subheadings____font_druk_condensed_super_desktop:
      - "**Substitute:** Oswald (700, condensed) or Bebas Neue for free alternatives; Anton as last resort"
      - "**Weights:** 400, 500"
      - "**Sizes:** 24px, 29px, 32px, 43px, 44px, 151px, 187px, 317px"
      - "**Line height:** 0.78, 0.85, 1.00"
      - "**Letter spacing:** +0.005em to +0.008em — slightly positive tracking prevents the ultra-condensed letterforms from feeling claustrophobic at display sizes"
      - "**Role:** Display and section headings — extreme condensed bold that fills containers edge-to-edge; 151-317px for hero-scale words, 24-44px for subheadings"

    neue_montreal___ui_body__navigation__buttons__supporting_copy___geometric_sans_serif_that_stays_quiet_so_druk_can_shout__58px_is_the_bridge_size_between_ui_and_display____font_neue_montreal:
      - "**Substitute:** Inter, Manrope, or DM Sans"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 12px, 14px, 15px, 16px, 58px"
      - "**Line height:** 1.00, 1.10, 1.20, 1.30, 1.40, 1.43"
      - "**Letter spacing:** -0.022em — negative tracking tightens the UI type into a compact, confident block that visually anchors against the sprawling display type"
      - "**Role:** UI body, navigation, buttons, supporting copy — geometric sans-serif that stays quiet so Druk can shout; 58px is the bridge size between UI and display"

    arial___system_fallback_for_body_text_rendering____font_arial:
      - "**Substitute:** system-ui, sans-serif"
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.43"
      - "**Role:** System fallback for body text rendering"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.43 | -0.22px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | -0.22px | `--text-body-sm` |"
      info: "| subheading | 24px | 1 | 0.05px | `--text-subheading` |"
      info: "| heading-sm | 32px | 0.85 | 0.05px | `--text-heading-sm` |"
      info: "| heading | 58px | 1.1 | -0.22px | `--text-heading` |"
      info: "| display | 187px | 0.85 | 0.05px | `--text-display` |"
      info: "| display-xl | 317px | 0.78 | 0.05px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 192 | 192px | `--spacing-192` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 6px |"
      info: "| cards | 14px |"
      info: "| pills | 9999px |"
      info: "| buttons | 9999px |"
      info: "| special | 24px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 20px"
      - "**Element gap:** 8px"

  components:

    hero_display_headline:
      role: "Full-bleed poster-scale word stack"

      info: "Druk Condensed 317px at line-height 0.78, color Lavender Shock (#e894ff) on Deep Plum (#23002b) ground. Letters push to the edges of the viewport with near-zero padding. No line-wrap — each word is a separate element. Secondary connecting words ('YOUR', 'OF') sit in Neue Montreal 58px at 600 weight, breaking the display rhythm. The extreme vertical compression (line-height 0.78) causes descenders and ascenders to overlap adjacent lines, creating the poster-stacked effect."

    sport_toggle_pill:
      role: "Two-option selector for sport type (tennis/golf)"

      info: "Pill shape (9999px radius), 80×48px frame, Deep Plum (#23002b) background. Active state: Lavender Shock (#e894ff) fill with dark icon. Inactive: outlined with 1px Lavender Shock border on transparent. Icon is a simple white-line sport figure centered within."

    filled_lavender_button:
      role: "Primary action — Join, Sign Up, CTA"

      info: "Pill shape (9999px radius), 12px 20px padding, Lavender Shock (#e894ff) background, Deep Plum (#23002b) text, Neue Montreal 14px 500 weight. No border, no shadow. On hover: slight brightness shift to 100% saturation. Compact — this is a one-word button."

    navigation_bar:
      role: "Top-level site navigation"

      info: "Transparent over hero, 64px tall, horizontal: logo left, nav links center, action button right. Links in Neue Montreal 14px, Paper White (#ffffff) on dark sections, Slate (#333333) on light sections. Active link gets Lavender Shock underline or color shift. No background bar — the nav floats directly on the section canvas."

    wordmark_logo:
      role: "Brand identity mark"

      stacked_text_logo: "'CHAMPIONS FOR GOOD CLUB' in three lines, Druk Condensed 400 weight at ~20px, Lavender Shock (#e894ff). Preceded by a small mark icon. No tagline, no subtext — the mark IS the identity."

    light_section_display_block:
      role: "Headline blocks on white canvas sections"

      info: "Druk Condensed 187px at line-height 0.85, Black (#000000) or Charcoal (#121212) fill, left-aligned. Words stack vertically with tight tracking. White space dominates right side of the layout. This is the 'poster' moment on light sections — same type treatment as hero, different color."

    card_surface:
      role: "Content card on either dark or light ground"

      info: "14px border-radius, 20px padding, no shadow. Dark variant: Espresso Brown (#291900) background with Paper White (#ffffff) text. Light variant: Paper White background with Slate (#333333) text and 1px hairline border in #e5e5e5."

    badge___tag:
      role: "Small status or category label"

      info: "6px border-radius, 3-5px vertical padding, 8-10px horizontal padding. Mint Signal (#93ffe4), Amber Pulse (#ffac47), or Lavender Shock (#e894ff) fills with dark text. Neue Montreal 12px 500 weight, uppercase optional."

    footer_link_list:
      role: "Bottom-of-page navigation"

      info: "Neue Montreal 14px, Paper White on dark footer sections, Slate on light. 8px row-gap between links, left-aligned columns. No decoration — just dense, readable type."

  do_s_and_don_ts:

    do:
      - "Use Druk Condensed for all display headings at 58px or larger — this font is the brand voice, not a decoration"
      - "Set display type to line-height 0.78-0.85 to create the poster-stacked overlap effect"
      - "Use Lavender Shock (#e894ff) as the ONLY chromatic color on Deep Plum (#23002b) sections — let the duotone do the work"
      - "Apply 9999px border-radius to every button, tag, and pill element — no sharp corners in the UI"
      - "Break the page rhythm with white (#ffffff) sections after dark plum sections — the contrast IS the layout"
      - "Use Mint Signal (#93ffe4) and Amber Pulse (#ffac47) only as small accents under 20% of viewport — they are punctuation, not surfaces"
      - "Keep Neue Montreal at 12-16px for all UI chrome — it must stay quiet enough that Druk dominates"

    don_t:
      - "Don't use any font other than Druk Condensed for display type — system serifs or regular sans-serifs at 200px+ will collapse the poster energy"
      - "Don't place Lavender Shock (#e894ff) on white or light backgrounds — the contrast is designed for dark plum only"
      - "Don't add box-shadows to cards or buttons — the design uses flat color layering, not elevation"
      - "Don't use line-height above 1.0 for display type — the tight vertical compression is the signature"
      - "Don't mix the accent colors (mint, amber) into the dark plum sections — they belong in light/transition zones only"
      - "Don't use border-radius smaller than 6px on any interactive element — the system is built on pills and soft corners"
      - "Don't center-align display headlines — left-align pushes type to the viewport edge for the broadside effect"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Deep Plum Ground | `#23002b` | Hero and dark section canvas — the primary brand surface |"
    info: "| 1 | Espresso Card | `#291900` | Dark card surfaces, warm-tinted elevated elements on plum ground |"
    info: "| 2 | Ink Teal Card | `#002629` | Cool-tinted card surfaces and deep text on light sections |"
    info: "| 3 | Paper White | `#ffffff` | Light section canvas, reverse text, high-contrast break sections |"

  imagery:

    info: "Iconography is the primary visual language: simple line-art sport figures (tennis player, golfer) rendered as single-stroke outlines in white or lavender, used inside pill toggles. No photography, no illustrations, no 3D renders. The display type itself is the imagery — the huge condensed words function as visual art on the plum canvas. Any photographic content would need to be tightly cropped sports imagery with high contrast and minimal background."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #ffffff (on dark) / #333333 (on light)"
    - "background: #23002b (dark sections) / #ffffff (light sections)"
    - "border: rgba(255,255,255,0.2) on dark / #e5e5e5 on light"
    - "accent: #e894ff"
    - "signal: #93ffe4 (mint), #ffac47 (amber)"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:

    - "*Create a hero section:* Deep Plum (#23002b) full-bleed background. Display headline in Druk Condensed 317px weight 500, line-height 0.78, color Lavender Shock (#e894ff), letter-spacing +0.008em. Secondary words in Neue Montreal 58px weight 600. Two pill toggles (9999px radius, 80×48px) centered above the headline, one filled Lavender Shock, one outlined with 1px Lavender Shock border."

    - "*Create a filled action button:* Pill shape (9999px radius), 12px 20px padding, Lavender Shock (#e894ff) background, Deep Plum (#23002b) text, Neue Montreal 14px weight 500, no border, no shadow."

    - "*Create a light-section display block:* White (#ffffff) background. Druk Condensed 187px weight 500, line-height 0.85, color Black (#000000), left-aligned, occupying 60% of viewport width. 64px top padding."

    - "*Create a card on dark ground:* 14px border-radius, 20px padding, Espresso Brown (#291900) background, Paper White (#ffffff) body text in Neue Montreal 15px weight 400. Optional Mint Signal (#93ffe4) badge tag (6px radius, 4px 10px padding) in top-left corner."

    - "*Create a navigation bar:* Transparent background, 64px height, 20px horizontal padding. Logo left (Druk Condensed 20px Lavender Shock), nav links center (Neue Montreal 14px Paper White with 32px gap), filled action button right (Lavender Shock pill, 12px 20px padding)."

  similar_brands:

    - "**The Players' Tribune** — Same dark-canvas + ultra-condensed display type approach for sports community branding"
    - "**On Running** — Bold condensed type filling the viewport, single accent color against dark, poster-scale typography"
    - "**WHOOP** — Dark-first interface with a single saturated accent (lavender/electric) on deep neutral ground"
    - "**Gymshark** — High-contrast display type pushing to viewport edges, club/community energy through typographic scale"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-deep-plum: #23002b;
          --color-lavender-shock: #e894ff;
          --color-espresso-brown: #291900;
          --color-ink-teal: #002629;
          --color-slate: #333333;
          --color-charcoal: #121212;
          --color-black: #000000;
          --color-paper-white: #ffffff;
          --color-mint-signal: #93ffe4;
          --color-amber-pulse: #ffac47;
        
          /* Typography — Font Families */
          --font-druk-condensed-super-desktop: 'Druk Condensed Super Desktop', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.43;
          --tracking-caption: -0.22px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.22px;
          --text-subheading: 24px;
          --leading-subheading: 1;
          --tracking-subheading: 0.05px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 0.85;
          --tracking-heading-sm: 0.05px;
          --text-heading: 58px;
          --leading-heading: 1.1;
          --tracking-heading: -0.22px;
          --text-display: 187px;
          --leading-display: 0.85;
          --tracking-display: 0.05px;
          --text-display-xl: 317px;
          --leading-display-xl: 0.78;
          --tracking-display-xl: 0.05px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-160: 160px;
          --spacing-192: 192px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 20px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 14px;
          --radius-3xl: 24px;
        
          /* Named Radii */
          --radius-tags: 6px;
          --radius-cards: 14px;
          --radius-pills: 9999px;
          --radius-buttons: 9999px;
          --radius-special: 24px;
        
          /* Surfaces */
          --surface-deep-plum-ground: #23002b;
          --surface-espresso-card: #291900;
          --surface-ink-teal-card: #002629;
          --surface-paper-white: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-deep-plum: #23002b;
          --color-lavender-shock: #e894ff;
          --color-espresso-brown: #291900;
          --color-ink-teal: #002629;
          --color-slate: #333333;
          --color-charcoal: #121212;
          --color-black: #000000;
          --color-paper-white: #ffffff;
          --color-mint-signal: #93ffe4;
          --color-amber-pulse: #ffac47;
        
          /* Typography */
          --font-druk-condensed-super-desktop: 'Druk Condensed Super Desktop', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.43;
          --tracking-caption: -0.22px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.22px;
          --text-subheading: 24px;
          --leading-subheading: 1;
          --tracking-subheading: 0.05px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 0.85;
          --tracking-heading-sm: 0.05px;
          --text-heading: 58px;
          --leading-heading: 1.1;
          --tracking-heading: -0.22px;
          --text-display: 187px;
          --leading-display: 0.85;
          --tracking-display: 0.05px;
          --text-display-xl: 317px;
          --leading-display-xl: 0.78;
          --tracking-display-xl: 0.05px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-160: 160px;
          --spacing-192: 192px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 14px;
          --radius-3xl: 24px;
        }