le_camp___style_reference:
  info: "> Alpine summit base camp at dusk — a field command post where one red signal flare cuts through mountain twilight, and everything else is topo-line restraint."

  theme: "light"

  info: "LE CAMP reads as an alpine expedition outpost translated into a digital surface: a near-monochrome canvas pierced by a single flare-red accent, where the brand speaks through dramatic photographic scale and badge-style illustration rather than through decoration. The design system is ruthlessly reduced — two achromatic values and one chromatic — letting Agrandir's distinctive geometric display voice carry hierarchy while DM Sans handles utility text in the background. Components are confident and flat: pill-radius CTAs in signal red, thin hairline borders, uppercase mono labels acting as wayfinding tags, and shield-shaped program patches that function like scout merit badges scattered across a topographic hero. Sections alternate between full-bleed drama (the dark mountain photograph) and quiet white/cream expanses, creating a rhythm of base camp and summit. The single red accent earns its weight through scarcity — it appears only where a decision is being asked for or a category is being defined."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Red | `#fe3a3a` | `--color-signal-red` | Primary CTA fill, nav active state, brand logo, emphasis body text, accent box-shadows on interactive elements — the single chromatic voice of the system, reserved for moments of decision and identity |"
    info: "| Carbon Ink | `#000000` | `--color-carbon-ink` | Primary text, heading text on light surfaces, icon strokes, nav text, button text, all structural borders and dividers |"
    info: "| Summit White | `#ffffff` | `--color-summit-white` | Primary page canvas, card surface, button text on red, input fill, nav background, hero foreground text on dark imagery |"
    info: "| Ridge Gray | `#767676` | `--color-ridge-gray` | Input border, subtle form dividers — the only non-black neutral, used where a softer boundary is needed without losing contrast |"

  tokens___typography:

    agrandir___display_and_heading_voice___the_90px_weight_600_at_line_height_1_0_acts_as_architectural_type__not_running_text__26px_at_weight_350_600_bridges_display_and_body__the_ultra_tight_1_0_leading_on_the_largest_size_is_a_deliberate_poster_typography_choice_that_lets_letters_stack_as_visual_mass____font_agrandir:
      - "**Substitute:** Bricolage Grotesque (Google Fonts) at weight 800 for display, weight 400 for sub-display"
      - "**Weights:** 350, 600"
      - "**Sizes:** 18px, 26px, 90px"
      - "**Line height:** 1.00–1.20"
      - "**Letter spacing:** normal"
      - "**Role:** Display and heading voice — the 90px weight 600 at line-height 1.0 acts as architectural type, not running text; 26px at weight 350/600 bridges display and body; the ultra-tight 1.0 leading on the largest size is a deliberate poster-typography choice that lets letters stack as visual mass"

    dm_sans___workhorse_body_and_ui_font___paragraphs__nav_items__button_labels__form_text__footer_copy__16px_at_1_4_for_body__14px_at_1_3_for_nav_labels__12px_for_tertiary_meta____font_dm_sans:
      - "**Substitute:** Inter (Google Fonts)"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 14px, 16px, 18px"
      - "**Line height:** 1.30–1.40"
      - "**Letter spacing:** normal"
      - "**Role:** Workhorse body and UI font — paragraphs, nav items, button labels, form text, footer copy; 16px at 1.4 for body, 14px at 1.3 for nav/labels, 12px for tertiary meta"

    dm_mono___micro_label_and_wayfinding_voice___uppercase_category_tags_like__entreprises___coachs___experts__program_identifiers__0_04em_letter_spacing_widens_the_monospace_rhythm_so_these_labels_read_as_expedition_wayfinding_rather_than_code____font_dm_mono:
      - "**Substitute:** JetBrains Mono or IBM Plex Mono (Google Fonts)"
      - "**Weights:** 400"
      - "**Sizes:** 10px, 14px"
      - "**Line height:** 1.30"
      - "**Letter spacing:** 0.04em (≈0.4px at 10px, ≈0.56px at 14px)"
      - "**Role:** Micro-label and wayfinding voice — uppercase category tags like 'ENTREPRISES', 'COACHS & EXPERTS', program identifiers; 0.04em letter-spacing widens the monospace rhythm so these labels read as expedition wayfinding rather than code"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.3 | 0.4px | `--text-caption` |"
      info: "| body | 16px | 1.4 | — | `--text-body` |"
      info: "| subheading | 26px | 1.2 | — | `--text-subheading` |"
      info: "| display | 90px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 10px |"
      info: "| cards | 20px |"
      info: "| buttons | 35px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 60px"
      - "**Card padding:** 40px"
      - "**Element gap:** 10px"

  components:

    primary_cta_button_pill:
      role: "Hero and nav conversion action"

      info: "Filled #fe3a3a background, #ffffff text, DM Sans 400 at 14px, 35px border-radius (fully pill-shaped), 10px vertical × 20px horizontal padding, no border. Single-use per section — scarcity is the point. Drop shadow: 0 2px 8px rgba(254,58,58,0.3) optional glow."

    secondary_button_rounded:
      role: "Utility actions and inline links"

      info: "Transparent or #ffffff background, #000000 text, DM Sans 400 at 14px, 10px border-radius, 10px vertical × 20px horizontal padding, 1px solid #000000 border. Lower visual weight than the pill CTA — used for non-decisive actions."

    menu_trigger:
      role: "Full-screen navigation open"

      info: "Transparent background, #ffffff text on dark hero / #000000 text on light sections, DM Sans 400 at 14px, hamburger icon (three horizontal lines) to the left of label, 10px border-radius, 10px vertical × 20px horizontal padding."

    display_heading_agrandir_90:
      role: "Hero and section-defining headlines"

      info: "Agrandir weight 600 at 90px, line-height 1.0, normal letter-spacing. Renders in #ffffff over dark hero imagery and #000000 over light surfaces. Functions as poster typography — letters stack as visual mass, not running prose."

    section_label_mono_tag:
      role: "Category wayfinding above section headings"

      info: "DM Mono 400 at 10px, line-height 1.3, letter-spacing 0.04em, uppercase, #000000. Sits centered or left-aligned above section headings as an expedition-style category tag."

    program_patch_badge:
      role: "Decorative illustration identifying each program offering"

      info: "Shield/badge-shaped illustration (rounded top, flat or pointed bottom), ~120px wide, 2px stroke, monochromatic fill in one of the system colors: #fe3a3a, #4a7fc5 (blue), or #ffffff outline on dark. Contains line-art iconography (trees, mountains, globe, campfire) and program name in DM Sans 400 at 10–12px. Used as floating decorative elements in the hero."

    cream_feature_card:
      role: "Content blocks requiring warm separation"

f5f0e8_background__20px_border_radius__40px_padding_on_all_sides__no_border__no_shadow__contains_a_section_label_mono_tag_in_000000_and_body_heading_in_fe3a3a_at_agrandir_26_90px__the_warm_cream_against_the_red_heading_is_a_signature_warm_cool_contrast:

    input_field:
      role: "Form text input"

ffffff_background__1px_solid_767676_border__10px_border_radius__dm_sans_400_at_16px__10px_vertical___15px_horizontal_padding__placeholder_text_in_767676__focus_state__border_shifts_to_000000:

    navigation_bar:
      role: "Top-level site navigation"

      info: "Fixed top bar, transparent background over hero / #ffffff with 1px #000000 bottom border over light sections. Contains brand mark (red triangle LE CAMP badge) at left, CTA pill button + menu trigger at right. Padding: 15px vertical."

    stat_block_social_proof:
      role: "Credibility metrics"

      info: "Centered or left-aligned, DM Sans 400 at 16px body with DM Sans 400 at 26px weight emphasis on the number. No card wrapper — text sits directly on the surface gray."

  do_s_and_don_ts:

    do:
      - "Use #fe3a3a exclusively for primary CTAs, the brand logo, and emphasis body text — never as a background fill for large non-action surfaces"
      - "Set display headlines at 90px Agrandir weight 600 with line-height 1.0 to let letters stack as visual mass"
      - "Apply 35px border-radius (pill shape) to primary CTA buttons and 10px to secondary buttons — the radius difference signals action weight"
      - "Use DM Mono at 10px with 0.04em letter-spacing uppercase for section labels, positioned above their heading"
      - "Separate sections with 60px vertical gaps and alternate between #ffffff, #f5f5f5, and #f5f0e8 to create a base-camp-to-summit rhythm"
      - "Keep all structural borders at 1px solid #000000 — no thicker rules, no decorative dividers"
      - "Use #767676 only for input borders; never for text, never for buttons, never for card edges"

    don_t:
      - "Do not introduce any color outside #fe3a3a, #000000, #ffffff, and #767676 — the system is intentionally two-tone plus a gray"
      - "Do not apply drop shadows to cards, panels, or any neutral surface — elevation belongs only to the red CTA and hero illustrations"
      - "Do not set body text above 18px or use Agrandir for running prose — Agrandir is display-only"
      - "Do not use 0px or 4px border-radius — all rounded elements use 10px, 20px, or 35px, never square"
      - "Do not place red text on a red background or white text on white — the red's scarcity depends on it always sitting on a neutral surface"
      - "Do not use the cream (#f5f0e8) as a full-page background — it is a card surface only"
      - "Do not use gradients — the system is strictly flat color and photography"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Summit White | `#ffffff` | Primary page canvas — most content sections sit on this |"
    info: "| 1 | Glacier Mist | `#f5f5f5` | Section background for supporting content blocks (social proof, stats) |"
    info: "| 2 | Trail Cream | `#f5f0e8` | Warm feature card surface for content blocks that need separation without harshness |"
    info: "| 3 | Base Camp Dark | `#0a1628` | Hero photographic layer — deep blue-black mountain landscape at dusk; serves as full-bleed narrative canvas |"

  elevation:

    - "**Primary CTA Button:** `0 2px 12px rgba(254,58,58,0.25)`"
    - "**Program Patch Badges (hero):** `0 4px 20px rgba(10,22,40,0.4)`"

  imagery:

    info: "Hero is a full-bleed dark mountain photograph at dusk — deep blue-black ridges with reflective lake water, no sky detail, no human subjects. The photograph is treated as a topographical field, not a lifestyle shot. All other illustration is shield/badge-shaped program patches with thin 2px line-art iconography (trees, mountains, campfire, globe) in single-color treatment. No product photography, no stock imagery, no 3D renders. The visual language is expedition cartography — maps, badges, and wayfinding markers rather than people or product."

  layout:

    info: "Hero is full-bleed dark with centered headline (90px Agrandir) and floating program patches arranged in a loose constellation. Body sections are max-width 1200px centered with generous side padding. The second section uses an asymmetric two-column: dense paragraph left (40% width), oversized display heading stacked left-aligned right (55% width), creating tension between reading-text and poster-text. Stat sections are centered single-column. Feature cards span full width with internal max-width. Section rhythm: dark hero → white expanse → light gray → cream card, with 60px vertical gaps between each. Navigation is a fixed top bar with brand left, actions right — no mega-menu visible, no sidebar."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000 (structural), #767676 (inputs only)"
    - "accent: #fe3a3a"
    - "primary action: #fe3a3a (filled action)"

    3_5_example_component_prompts:

    - "**Hero Section**: Full-bleed dark mountain photograph at 100vh. Centered headline in Agrandir 90px weight 600, line-height 1.0, color #ffffff. Subtext in DM Sans 16px weight 400, #ffffff, opacity 0.85. Three program patch badges (shield-shaped, 2px stroke) floating around the headline in #fe3a3a, #4a7fc5, and #ffffff outline. Section label above headline: DM Mono 10px uppercase, 0.04em letter-spacing, #ffffff."

    - "**Asymmetric About Section**: Max-width 1200px, #ffffff background, 60px vertical padding. Left column (40% width): paragraph in DM Sans 14px weight 400, #000000, line-height 1.4, max 6 lines. Right column (55% width): Agrandir 90px weight 600, line-height 1.0, #000000, left-aligned. Small red button (Secondary Button: #000000 text, 1px solid #000000 border, 10px radius, 10px×20px padding) below the paragraph."

    - "Create a Primary Action Button: #fe3a3a background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "**Cream Feature Card**: #f5f0e8 background, 20px border-radius, 40px padding all sides, no border, no shadow. Section label: DM Mono 10px uppercase, 0.04em letter-spacing, #000000. Heading: Agrandir 26px weight 600, #fe3a3a. Body: DM Sans 16px weight 400, #000000, line-height 1.4."

    - "**Section Label Tag**: DM Mono 10px weight 400, uppercase, letter-spacing 0.04em, #000000, line-height 1.3. Sits 15px above its associated heading, centered or left-aligned to match the section's text alignment."

  similar_brands:

    - "**Basecamp** — Same monochrome-first philosophy with a single bold accent color (orange/red), flat surfaces, generous whitespace, and geometric sans-serif body type — both systems prove that extreme restraint with one chromatic voice reads as confidence"
    - "**Arc Browser** — Similar dramatic full-bleed dark photographic hero treatment paired with clean light body sections; both use oversized display type as the primary visual hook and let the hero image do the emotional heavy lifting"
    - "**Cowboy (e-bikes)** — Same patch/badge illustration style applied to product categories, same monospace label system for wayfinding, same near-monochrome palette with a single accent color for CTAs and emphasis"
    - "**Linear** — Same typographic precision with a custom/display heading face paired against a clean geometric sans body, same flat-card approach to content blocks, same use of a single saturated accent against neutral structure"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-red: #fe3a3a;
          --color-carbon-ink: #000000;
          --color-summit-white: #ffffff;
          --color-ridge-gray: #767676;
        
          /* Typography — Font Families */
          --font-agrandir: 'Agrandir', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.3;
          --tracking-caption: 0.4px;
          --text-body: 16px;
          --leading-body: 1.4;
          --text-subheading: 26px;
          --leading-subheading: 1.2;
          --text-display: 90px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-w350: 350;
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-60: 60px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 60px;
          --card-padding: 40px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-2xl: 20px;
          --radius-3xl: 35px;
        
          /* Named Radii */
          --radius-nav: 10px;
          --radius-cards: 20px;
          --radius-buttons: 35px;
        
          /* Surfaces */
          --surface-summit-white: #ffffff;
          --surface-glacier-mist: #f5f5f5;
          --surface-trail-cream: #f5f0e8;
          --surface-base-camp-dark: #0a1628;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-red: #fe3a3a;
          --color-carbon-ink: #000000;
          --color-summit-white: #ffffff;
          --color-ridge-gray: #767676;
        
          /* Typography */
          --font-agrandir: 'Agrandir', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.3;
          --tracking-caption: 0.4px;
          --text-body: 16px;
          --leading-body: 1.4;
          --text-subheading: 26px;
          --leading-subheading: 1.2;
          --text-display: 90px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-60: 60px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-2xl: 20px;
          --radius-3xl: 35px;
        }