swimclub___style_reference:
  info: "> Clinical dossier behind pixelated LCD readouts"

  theme: "mixed"

  info: "SwimClub runs a clinical-journal visual system: almost entirely achromatic (white, black, cool gray) with a single vivid orange (#ff9e00) used as full-bleed punctuation rather than button color. Typography does the heavy lifting — a geometric grotesque (Px Grotesk) for body and headlines, a monospace (Apercu Mono) for data labels and navigation micro-copy, and a custom pixelated display face (Swimclub) reserved for the logo and oversized statistic numbers that read like LCD readouts. Surfaces alternate between a cool off-white canvas, stark white product cards, deep navy-black hero blocks with photographic product shots, and saturated orange stat panels. The interface feels like a medical dossier viewed through a retro arcade screen: clinical, editorial, slightly playful, with sharp 0px corners and hairline dashed borders that keep everything reading as diagram rather than decoration."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Tabloid Orange | `#ff9e00` | `--color-tabloid-orange` | Full-bleed section backgrounds (announcement bar, statistic panels) — the only chromatic brand color, used at maximum saturation to break the otherwise monochrome flow |"
    info: "| Deep Capsule Navy | `linear-gradient(rgb(106, 144, 176), rgb(65, 115, 158) 30%, rgb(18, 58, 92) 97%, rgb(2, 5, 7) 139%)` | `--color-deep-capsule-navy` | Hero gradient terminal color and product photograph backgrounds — near-black with a blue undertone, not a pure black |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, hairline borders, navigation dividers, card outlines, button text — the dominant structural color across the entire interface |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page background, card surfaces, product image overlays, button fills, and text on dark or orange panels |"
    info: "| Cool Gray | `#d2dce1` | `--color-cool-gray` | Muted UI surface for disabled controls, low-emphasis panels, and placeholder blocks. |"
    info: "| Iron Gray | `#666666` | `--color-iron-gray` | Secondary body text and low-emphasis borders — the mid-tone of the neutral scale |"
    info: "| Ash | `#b3b3b3` | `--color-ash` | Tertiary borders, disabled state outlines, muted icon strokes |"
    info: "| Smoke | `#cccccc` | `--color-smoke` | Dividers, dashed-border accent on feature cards, subtle separator lines |"

  tokens___typography:

    px_grotesk___primary_workhorse___body_copy_at_15_17px_400__subheadings_at_21_31px_700__display_headlines_at_52_74px_700__geometric_grotesque_with_squared_terminals_gives_a_clinical__diagram_like_feel__the_74px_hero_weight_is_set_very_tight_1_05_so_multi_line_headlines_stack_into_a_solid_block_____font_px_grotesk:
      - "**Substitute:** Inter, Space Grotesk, or DM Sans"
      - "**Weights:** 400, 700"
      - "**Sizes:** 12, 15, 16, 17, 21, 31, 37, 52, 74"
      - "**Line height:** 1.05, 1.10, 1.30, 1.70"
      - "**Role:** Primary workhorse — body copy at 15–17px/400, subheadings at 21–31px/700, display headlines at 52–74px/700. Geometric grotesque with squared terminals gives a clinical, diagram-like feel. The 74px hero weight is set very tight (1.05) so multi-line headlines stack into a solid block."

    apercu_mono_pro___monospace_micro_copy___navigation_links__section_labels__input_placeholders__ingredient_lists__and_small_data_captions__set_at_small_sizes_15_17px_with_a_0_02em_positive_letter_spacing_so_uppercase_strings_read_as_printed_stamps_or_specimen_labels_rather_than_running_text_____font_apercu_mono_pro:
      - "**Substitute:** IBM Plex Mono, JetBrains Mono, or Space Mono"
      - "**Weights:** 400"
      - "**Sizes:** 15, 17"
      - "**Line height:** 1.10, 1.20"
      - "**Letter spacing:** 0.02em"
      - "**Role:** Monospace micro-copy — navigation links, section labels, input placeholders, ingredient lists, and small data captions. Set at small sizes (15–17px) with a 0.02em positive letter-spacing so uppercase strings read as printed stamps or specimen labels rather than running text."

    swimclub_custom_pixel_bitmap_face___signature_display_face_used_exclusively_for_the_wordmark_and_the_three_giant_statistic_numerals_60__50__1_4__the_blocky__pixelated_construction_makes_numbers_look_like_lcd_or_7_segment_readouts___a_deliberate_retro_digital_contrast_against_the_clean_grotesque_body__never_set_below_90px__its_identity_depends_on_scale_____font_swimclub_custom_pixelbitmap_face:
      - "**Substitute:** VT323, Press Start 2P, or a custom bitmap font"
      - "**Weights:** 400"
      - "**Sizes:** 96, 105"
      - "**Line height:** 1.00"
      - "**Role:** Signature display face used exclusively for the wordmark and the three giant statistic numerals (60%, 50%, 1/4). The blocky, pixelated construction makes numbers look like LCD or 7-segment readouts — a deliberate retro-digital contrast against the clean grotesque body. Never set below 90px; its identity depends on scale."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.3 | — | `--text-caption` |"
      info: "| body-sm | 15px | 1.7 | — | `--text-body-sm` |"
      info: "| subheading | 21px | 1.3 | — | `--text-subheading` |"
      info: "| heading-sm | 31px | 1.1 | — | `--text-heading-sm` |"
      info: "| heading | 37px | 1.1 | — | `--text-heading` |"
      info: "| heading-lg | 52px | 1.05 | — | `--text-heading-lg` |"
      info: "| display | 74px | 1.05 | — | `--text-display` |"
      info: "| stat-numeral | 105px | 1 | — | `--text-stat-numeral` |"

  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: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 140 | 140px | `--spacing-140` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| images | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 120px"
      - "**Card padding:** 32px"
      - "**Element gap:** 4px"

  components:

    announcement_bar:
      role: "Site-wide top strip"

      info: "Full-bleed #ff9e00 bar, ~32px tall, centered uppercase Apercu Mono Pro at 12px, black text. The single dose of orange at the very top — always present, always the first thing the eye lands on."

    top_navigation:
      role: "Primary site nav"

      three_zone_layout_on_white: "SHOP and ABOUT US left, Swimclub pixel wordmark center, ACCOUNT and CART (0) right. All links in Apercu Mono Pro 12–15px uppercase, letter-spacing 0.02em, black. No background, no border — the nav is just typographic restraint floating on white."

    hero_block:
      role: "Above-the-fold introduction"

      info: "Full-bleed dark gradient (#6a90b0 → #020507, top-left to bottom-right) with golden capsule product photography on the right and a text block on the left. Headline at 74px Px Grotesk weight 700, white, line-height 1.05. Subtext at 16–17px Px Grotesk weight 400, white. 64px left padding, generous breathing room from the nav."

    outlined_cta_button_hero:
      role: "Primary call-to-action on dark backgrounds"

      info: "White border 1px, white text, no fill, 0px radius, ~32px tall, Apercu Mono Pro 15px uppercase with 0.02em letter-spacing. The 'GET STARTED' button sits on the dark hero — outlined white is the only viable shape here. Sits inside a black-bordered white rectangle, giving it a stamped, printed feel."

    outlined_cta_button_light_surface:
      role: "Primary call-to-action on light backgrounds"

      info: "Black border 1px, black text, no fill, 0px radius, 32px padding (16px horizontal, 8px vertical). Apercu Mono Pro 15px uppercase. The ghost/outlined pattern is consistent — buttons never fill with color."

    media_credibility_bar:
      role: "Social proof strip"

      info: "Horizontal row of four press/clinical logos (GQ, Stanford clinician, Clinicians' Choice badge, clinician count) on a white background separated by thin black vertical dividers. Each cell contains a small image or icon plus a short body-text caption. No card backgrounds — just dividers and type."

    centered_headline_band:
      role: "Section opener"

      info: "White or #d2dce1 band, centered headline at 31–37px Px Grotesk weight 700, followed by a single-line subtext at 15–17px weight 400. Tight centered alignment, 120px vertical padding above and below. Acts as a breathing pause between dense blocks."

    orange_statistic_panel:
      role: "Data showcase"

      info: "Full-bleed #ff9e00 band, divided into 2–4 equal columns by thin white vertical lines. Each column carries a tiny uppercase Apercu Mono Pro label (e.g. 'THE STATE OF MEN'S REPRODUCTIVE HEALTH') and a giant Swimclub pixel numeral at 96–105px in black. The pixel font on saturated orange is the site's most distinctive visual moment."

    dashed_border_feature_card:
      role: "Product benefit listing"

      info: "White card with 1px dashed #cccccc border, 0px radius, 32px padding. Left side: small icon (sperm, molecule, DNA glyph) in black. Center: bold Px Grotesk 21px heading with a 15px weight 400 sub-label below. Right side: a small black minus/dash icon acting as a collapse indicator. The dashed border signals 'diagram entry' rather than 'product card'."

    product_image_block:
      role: "Full-bleed product photography"

      info: "Pure black (#020507) block, full container width, variable height, with white uppercase Apercu Mono Pro caption overlaid (e.g. 'OPTIMAL COUNT'). No text, no UI — just the dark canvas and the product, creating a cinematic pause."

    ingredient_tag_list:
      role: "Composed supplement ingredients"

      info: "Inline run of uppercase Apercu Mono Pro tokens (COQ10, LYCOPENE, VITAMIN D3, VITAMIN E, OMEGA-3S, NAC, L-CARNITINE) separated by spaces, set at 15px. Introduced by a small uppercase label 'TARGETED WITH'. Reads as a specimen label."

    icon_set:
      role: "Functional glyphs"

      info: "Single-color black icons drawn at a consistent hairline stroke weight. Style is geometric/technical (diamond molecules, simplified sperm forms, DNA strands) — never decorative. Always paired with a short label, never floating alone."

  do_s_and_don_ts:

    do:
      - "Use #ff9e00 only as a full-bleed panel background for the announcement bar and statistic sections — never as a button fill, icon tint, or border."
      - "Reserve the Swimclub pixel font for the wordmark and statistic numerals at 90px or larger; it loses its character below that scale."
      - "Set Px Grotesk headlines tight — line-height 1.05 at 52–74px so multi-line stacks read as a solid block, not airy type."
      - "Use Apercu Mono Pro for every uppercase label, navigation item, and small data string; reserve Px Grotesk for body and headings."
      - "Keep all corners at 0px radius — sharp edges are the system's identity. Use 1px black or #cccccc dashed borders to separate sections."
      - "Alternate surface levels deliberately: white → #d2dce1 → #ff9e00 → #020507 to create the editorial rhythm."
      - "Use 120px vertical padding between major sections and 32px inside cards."

    don_t:
      - "Don't round corners on cards, buttons, tags, or images — radius is 0px across the system."
      - "Don't use orange for buttons, links, or icons — it belongs only on full-bleed section backgrounds."
      - "Don't set the Swimclub pixel font below 90px or use it for body copy — it will become illegible."
      - "Don't use shadows or elevation effects — the system relies on flat surfaces and hairline borders, not depth."
      - "Don't mix the monospace and pixel fonts in the same size range — Apercu Mono is for micro-labels (12–17px), Swimclub is for giant readouts (90px+)."
      - "Don't fill CTA buttons with color — keep them outlined (black border on light, white border on dark) with a transparent interior."
      - "Don't introduce new chromatic colors — the system is intentionally monochrome plus one orange."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas Gray | `#d2dce1` | Outermost page background between major sections, footer band — cool blue-gray that sets a clinical mood |"
    info: "| 1 | Paper | `#ffffff` | Primary content surface — product cards, media bar, feature blocks, body sections |"
    info: "| 2 | Orange Panel | `#ff9e00` | Full-bleed accent surface for announcement bar and statistic panel — interrupts the monochrome flow |"
    info: "| 3 | Capsule Black | `#020507` | Hero and product photograph background — high-contrast stage for golden capsule imagery |"

  elevation:

    info: "The design is deliberately shadowless. Hierarchy is created through surface contrast (white → #d2dce1 → orange → black), hairline 1px borders, and whitespace, never through drop shadows or blur. This keeps the interface reading as a flat printed document or clinical diagram rather than a skeuomorphic app."

  imagery:

    photography_is_reserved_for_the_product: "golden-amber capsules and softgel pills shot against dark blue-to-black gradient backgrounds with dramatic studio lighting. Treatment is high-contrast, moody, and product-only — no lifestyle imagery, no people, no context. The pills are the heroes, always isolated, always glowing. Imagery occupies roughly 50% of the hero block and the dedicated product photograph bands; the rest of the page is text and data."

  layout:

    info: "Page is a vertical stack of full-bleed bands rather than a max-width container flow. The hero is full-bleed dark; subsequent sections alternate between max-width-1200px centered content (white or #d2dce1) and edge-to-edge accent panels (orange, black). The nav is a thin typographic strip — no background bar, no shadow, no border. Hero is a 50/50 split: left text block, right product photograph on a gradient. Below the fold, the pattern is: centered headline band → 4-column media bar → centered headline band → 4-column orange stat panel → 2-column feature list with dark product image in the middle. Section gaps are 120px; card padding is 32px. Navigation is minimal top-only with no sticky behavior evident."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #000000"
    - "background: #ffffff"
    - "section wash: #d2dce1"
    - "dark surface: #020507"
    - "accent panel: #ff9e00"
    - "primary action: no distinct CTA color"

    info: "Example Component Prompts:"

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "Create the orange statistic panel: full-bleed #ff9e00 background, divided into three equal columns by 1px white vertical lines. Each column: uppercase Apercu Mono Pro 12px label at top in black, then a Swimclub pixel-font numeral at 105px in black, then a short body caption in Px Grotesk 15px weight 400 below."

    - "Create a dashed-border feature card: #ffffff background, 1px dashed #cccccc border, 0px radius, 32px padding. Left: small black geometric icon. Center: Px Grotesk 21px weight 700 heading with 15px weight 400 sub-label beneath. Right: small black minus/dash collapse icon."

    - "Create the centered headline band: #d2dce1 background, 120px padding top and bottom, centered Px Grotesk 37px weight 700 heading in #000000, followed by a 16px weight 400 subtext in #000000, max-width 720px."

    - "Create the top nav: #ffffff background, 32px vertical padding, three flex zones. Left: SHOP and ABOUT US in Apercu Mono Pro 12px uppercase, #000000, letter-spacing 0.02em. Center: Swimclub pixel wordmark at 21px. Right: ACCOUNT and CART (0) in the same monospace style. No borders, no background bar, no shadow."

  similar_brands:

    - "**Athletic Greens / AG1** — Same clinical-supplement editorial language: monochrome canvas, single full-bleed accent color, monospace data labels, oversized statistic numerals as the visual hero"
    - "**Ritual Vitamins** — Same minimal monochrome palette with one warm accent, hairline borders, monospace ingredient lists, and product photography that dominates the dark hero"
    - "**Brilliant (brilliant.org)** — Same pixel/digital display treatment for statistics and a clean grotesque body — the contrast between clinical sans-serif and retro-bitmap numerals is a shared signature"
    - "**WHOOP** — Same dark full-bleed hero with centered white headline, achromatic body, and a single saturated accent (orange for SwimClub, red for WHOOP) used as a section punctuation rather than button color"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-tabloid-orange: #ff9e00;
          --color-deep-capsule-navy: #020507;
          --gradient-deep-capsule-navy: linear-gradient(rgb(106, 144, 176), rgb(65, 115, 158) 30%, rgb(18, 58, 92) 97%, rgb(2, 5, 7) 139%);
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-cool-gray: #d2dce1;
          --color-iron-gray: #666666;
          --color-ash: #b3b3b3;
          --color-smoke: #cccccc;
        
          /* Typography — Font Families */
          --font-px-grotesk: 'Px Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apercu-mono-pro: 'Apercu Mono Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-swimclub-custom-pixelbitmap-face: 'Swimclub (custom pixel/bitmap face)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.3;
          --text-body-sm: 15px;
          --leading-body-sm: 1.7;
          --text-subheading: 21px;
          --leading-subheading: 1.3;
          --text-heading-sm: 31px;
          --leading-heading-sm: 1.1;
          --text-heading: 37px;
          --leading-heading: 1.1;
          --text-heading-lg: 52px;
          --leading-heading-lg: 1.05;
          --text-display: 74px;
          --leading-display: 1.05;
          --text-stat-numeral: 105px;
          --leading-stat-numeral: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-120: 120px;
          --spacing-140: 140px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 120px;
          --card-padding: 32px;
          --element-gap: 4px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas-gray: #d2dce1;
          --surface-paper: #ffffff;
          --surface-orange-panel: #ff9e00;
          --surface-capsule-black: #020507;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-tabloid-orange: #ff9e00;
          --color-deep-capsule-navy: #020507;
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-cool-gray: #d2dce1;
          --color-iron-gray: #666666;
          --color-ash: #b3b3b3;
          --color-smoke: #cccccc;
        
          /* Typography */
          --font-px-grotesk: 'Px Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apercu-mono-pro: 'Apercu Mono Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-swimclub-custom-pixelbitmap-face: 'Swimclub (custom pixel/bitmap face)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.3;
          --text-body-sm: 15px;
          --leading-body-sm: 1.7;
          --text-subheading: 21px;
          --leading-subheading: 1.3;
          --text-heading-sm: 31px;
          --leading-heading-sm: 1.1;
          --text-heading: 37px;
          --leading-heading: 1.1;
          --text-heading-lg: 52px;
          --leading-heading-lg: 1.05;
          --text-display: 74px;
          --leading-display: 1.05;
          --text-stat-numeral: 105px;
          --leading-stat-numeral: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-120: 120px;
          --spacing-140: 140px;
        }