agence_foudre___style_reference:
  info: "> Magazine splash page in lipstick pink."

  theme: "light"

  info: "Agence Foudre uses a bold editorial-magazine language: warm cream canvas, oversized condensed display type in vivid magenta, and a surprising deep-forest green that reads as both body text and accent. The interface is deliberately sparse — most of the viewport is empty space, and content arrives in dense typographic punches rather than card grids or product visuals. Color is used as emotional punctuation: hot pink screams, faded pink whispers, deep green grounds, and warm off-white softens every surface. Components are minimal — circular pink buttons, pill-shaped badges, and big chunky type are the only chrome. This is a portfolio/expression site, not a product UI: the brand's personality IS the typography and color, everything else stays out of the way."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Lipstick Magenta | `#db3c8a` | `--color-lipstick-magenta` | Display headlines, primary brand color, icon buttons, heading accents — vivid pink carries 100% of brand recognition |"
    info: "| Forest Ink | `#00522d` | `--color-forest-ink` | Body text, links, iconography, footer — deep saturated green against cream creates editorial gravitas no neutral could |"
    info: "| Blush Cream | `#fce5df` | `--color-blush-cream` | Soft surface tint, badge backgrounds, gentle wash blocks, hover states — warm off-pink that sits between page and accent |"
    info: "| Warm Chalk | `#fff8f6` | `--color-warm-chalk` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color |"
    info: "| Charcoal Black | `#000000` | `--color-charcoal-black` | High-contrast text, dark icons, line art, SVG fills — used sparingly for maximum punch |"
    info: "| Lilac Mist | `#d1cfe4` | `--color-lilac-mist` | Decorative type tint, subtle dividers, soft outline strokes — cool gray-lilac for the quietest visual moments |"
    info: "| Bubblegum | `#f29ebd` | `--color-bubblegum` | Secondary accent, lighter pink washes, faded display type, ghost button borders — pink dialed back from brand magenta |"
    info: "| Cotton Pink | `#e878b2` | `--color-cotton-pink` | Mid-tone pink surface for elevated cards, tonal accent between magenta and bubblegum |"

  tokens___typography:

    beni___display_headlines_only___ultra_black_weight_with_0_70_line_height_packs_lines_tightly__creating_dense_typographic_blocks_that_dominate_the_viewport__letter_spacing_normal_lets_the_heavy_weight_do_the_work__no_tracking_adjustment_needed_at_this_scale____font_beni:
      - "**Substitute:** Druk Wide Heavy, Tungsten Bold, Antonio Black"
      - "**Weights:** 900"
      - "**Sizes:** 46px, 80px, 94px, 130px, 230px"
      - "**Line height:** 0.70"
      - "**Role:** Display headlines only — ultra-black weight with 0.70 line-height packs lines tightly, creating dense typographic blocks that dominate the viewport. Letter-spacing normal lets the heavy weight do the work; no tracking adjustment needed at this scale"

    clash_grotesk___body_text__labels__navigation__buttons__badges__links__all_ui_chrome___geometric_grotesk_carries_the_functional_load_while_beni_performs__weights_create_clear_hierarchy__400_for_body__500_for_emphasized__700_for_buttons_and_active_states____font_clash_grotesk:
      - "**Substitute:** Inter, Satoshi, General Sans"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 10px, 12px, 13px, 14px, 16px, 20px, 24px, 30px"
      - "**Line height:** 1.20"
      - "**Role:** Body text, labels, navigation, buttons, badges, links, all UI chrome — geometric grotesk carries the functional load while Beni performs. Weights create clear hierarchy: 400 for body, 500 for emphasized, 700 for buttons and active states"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| micro | 10px | 12 | — | `--text-micro` |"
      info: "| label | 12px | 14 | — | `--text-label` |"
      info: "| caption | 14px | 17 | — | `--text-caption` |"
      info: "| body-sm | 16px | 19 | — | `--text-body-sm` |"
      info: "| body | 20px | 24 | — | `--text-body` |"
      info: "| subheading | 46px | 32 | — | `--text-subheading` |"
      info: "| heading-sm | 80px | 56 | — | `--text-heading-sm` |"
      info: "| heading | 94px | 66 | — | `--text-heading` |"
      info: "| heading-lg | 130px | 91 | — | `--text-heading-lg` |"
      info: "| display | 230px | 161 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 140 | 140px | `--spacing-140` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 20px |"
      info: "| badges | 10px |"
      info: "| buttons | 10px |"
      info: "| elevated | 25px |"
      info: "| iconButtons | 9999px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 120px"
      - "**Card padding:** 30px"
      - "**Element gap:** 15-20px"

  components:

    circular_menu_trigger:
      role: "Primary navigation launcher"

      info: "50px diameter pink circle (#db3c8a), full radius. Contains a three-line hamburger glyph in dark or white. Fixed position top-left. No border, no shadow. The pink circle is the only UI element that breaks the cream canvas"

    circular_brand_mark:
      role: "Logo / brand icon button"

      info: "50px diameter circle matching menu trigger. Contains the agency mark (lightning bolt variant). Fixed top-right. Same pink fill (#db3c8a), same weight as menu — visual symmetry establishes these as the only two interactive dots on screen"

    display_headline_block:
      role: "Hero typographic statement"

      info: "Beni weight 900, sizes 94-230px, line-height 0.70. Color cycles between #db3c8a (full intensity), #f29ebd (mid pink), and #fce5df (faded wash) to create visual rhythm across sections. Left-aligned, bottom-anchored in viewport. No margins — the type itself is the layout"

    faded_echo_headline:
      role: "Repetition / counterpoint display type"

      info: "Same Beni 900 treatment as main headline but in #fce5df or #f29ebd — appears as a ghost version of a statement the full-color version just made. Creates dialogue between sections. Same massive scale (80-130px)"

    section_label:
      role: "Micro-typography category tag"

      info: "Clash Grotesk 400-500, 12-14px, uppercase or sentence case. Color: #00522d or faded #db3c8a. Positioned directly above the display headline it describes. Tight tracking, no decoration — just a whispered label"

    pill_badge___tag:
      role: "Category or filter chip"

      info: "Clash Grotesk 500, 12-14px, #00522d text on #fce5df background. Radius 9999px (fully rounded). Padding 7px 15px. No border. Appears sparingly to tag content without competing with display type"

    body_paragraph:
      role: "Readable editorial text"

      info: "Clash Grotesk 400, 16-20px, line-height 1.20, color #00522d. Max width ~60ch. Generous vertical spacing (30-60px between blocks). The deep green on warm cream is the primary reading experience"

    text_link:
      role: "Inline navigational or editorial link"

      info: "Clash Grotesk 500, inherits body size, color #00522d with possible #db3c8a accent. No underline by default; underline appears on hover in #db3c8a. Minimal, confident — the link should feel like a directional gesture, not a button"

    icon_button_ghost:
      role: "Minimal interaction surface"

      info: "No background, no border. Icon only in #000000 or #00522d, 20-24px. Hover state: icon shifts to #db3c8a. Used for secondary actions where the pink circle buttons are too loud"

  do_s_and_don_ts:

    do:
      - "Use Beni weight 900 with 0.70 line-height for all display type — the tight leading is what makes the headlines feel architectural, not just big"
      - "Default to #fff8f6 as the canvas; let #fce5df appear only as a 5-10% accent surface, never as a full page background"
      - "Pair #db3c8a (loud) with #fce5df (whisper) of the same hue to create dialogue between sections — full color makes a statement, faded color echoes it"
      - "Use #00522d for all body text and links — the deep green is a signature choice that no neutral substitute can replicate"
      - "Let whitespace do the structural work: 60-120px section gaps, and let individual display blocks own full viewport heights"
      - "Set all interactive circles (menu, brand) to 50px diameter with full radius and #db3c8a fill — these are the only two dots on the page"
      - "Cap body text width at 60ch regardless of viewport — readability over impact"

    don_t:
      - "Never use #000000 for body text — #00522d is the editorial voice; black is reserved for icons and graphic elements only"
      - "Don't set Beni at body sizes (under 30px) — it was designed for display only; use Clash Grotesk for everything functional"
      - "Avoid card-heavy layouts — this system breathes through type and space, not through information density"
      - "Never apply #db3c8a to large body areas — pink is an exclamation, not a wallpaper"
      - "Don't add shadows, gradients, or glass effects — the system is deliberately flat; depth comes from color contrast and typographic scale"
      - "Avoid mixing more than two type families — Beni for display, Clash Grotesk for everything else; no serif, no monospace, no decorative fonts"
      - "Don't use symmetric centered layouts — everything left-aligns or uses deliberate asymmetric placement; the type should feel editorial, not ceremonial"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Warm Chalk | `#fff8f6` | Page canvas — the base everything sits on |"
    info: "| 2 | Blush Cream | `#fce5df` | Soft tinted surface for badges, tags, and gentle color blocks |"
    info: "| 3 | Cotton Pink | `#e878b2` | Elevated accent surface, used rarely for standout card moments |"

  imagery:

    info: "Almost no traditional imagery. The site is a typographic showcase where oversized Beni display type IS the visual content. Where images appear (portfolio pieces, team, or case studies), they are treated as full-bleed editorial crops with no rounded corners, no shadows, no decorative frames — raw photographs presented in rectangular slabs. Any illustrations or graphic elements use the brand palette: hot pink forms, deep green line work, lilac accents. Icons are minimal line-art glyphs in black or green, never filled or colorful. The visual density is inverted: 95% typography, 5% image."

  layout:

    info: "Full-bleed single-column layout with extreme vertical whitespace. Each section typically owns an entire viewport height, anchored by massive display type at the bottom-left or top-left. Navigation is stripped to two pink circles in the absolute corners — no nav bar, no mega-menu, no breadcrumbs. Content scrolls as a sequence of typographic statements rather than traditional sections: each scroll position delivers one bold message, then vast white space, then the next. No card grids, no multi-column layouts, no sidebar. The page reads like a typographic manifesto: one idea per screen, each rendered at maximum scale. Responsive behavior collapses display type proportionally but preserves the generous spacing and corner-circle navigation."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #00522d"
    - "background: #fff8f6"
    - "border / divider: #fce5df"
    - "accent: #db3c8a"
    - "secondary accent: #f29ebd"
    - "primary action: no distinct CTA color"

    example_component_prompts:
    - "Create a hero display block: #fff8f6 background, left-aligned Beni weight 900 at 130px with 0.70 line-height, color #db3c8a. Add a 14px Clash Grotesk 500 label above in #00522d reading the section category."
    - "Create a ghost navigation link: no background, no border, Clash Grotesk 500 at 16px in #00522d, hover underline in #db3c8a. Inline within body text, max-width 60ch."
    - "Create a circular brand button: 50px diameter, border-radius 9999px, background #db3c8a, containing a black lightning-bolt glyph centered. Fixed top-right position."
    - "Create a faded echo headline: Beni weight 900 at 80px, line-height 0.70, color #fce5df. Positioned in a new section to echo a previous #db3c8a statement with reduced intensity."
    - "Create a pill category tag: Clash Grotesk 500 at 12px, color #00522d, background #fce5df, border-radius 9999px, padding 7px 15px. No border, no shadow."

  similar_brands:

    - "**Pentagram** — Same editorial-magazine approach where oversized display typography replaces product imagery and layout is radically minimal"
    - "**Locomotive (studio)** — Shared commitment to bold custom display type and generous whitespace as the primary structural system"
    - "**Resn** — Experimental agency aesthetic with unconventional navigation (circular triggers) and typographic-first page rhythm"
    - "**Buck (studio)** — Creative agency portfolio language using display type as hero content with restrained UI chrome"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-lipstick-magenta: #db3c8a;
          --color-forest-ink: #00522d;
          --color-blush-cream: #fce5df;
          --color-warm-chalk: #fff8f6;
          --color-charcoal-black: #000000;
          --color-lilac-mist: #d1cfe4;
          --color-bubblegum: #f29ebd;
          --color-cotton-pink: #e878b2;
        
          /* Typography — Font Families */
          --font-beni: 'Beni', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-clash-grotesk: 'Clash Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 10px;
          --leading-micro: 12;
          --text-label: 12px;
          --leading-label: 14;
          --text-caption: 14px;
          --leading-caption: 17;
          --text-body-sm: 16px;
          --leading-body-sm: 19;
          --text-body: 20px;
          --leading-body: 24;
          --text-subheading: 46px;
          --leading-subheading: 32;
          --text-heading-sm: 80px;
          --leading-heading-sm: 56;
          --text-heading: 94px;
          --leading-heading: 66;
          --text-heading-lg: 130px;
          --leading-heading-lg: 91;
          --text-display: 230px;
          --leading-display: 161;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-60: 60px;
          --spacing-120: 120px;
          --spacing-140: 140px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 120px;
          --card-padding: 30px;
          --element-gap: 15-20px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-2xl: 20px;
          --radius-3xl: 25px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 20px;
          --radius-badges: 10px;
          --radius-buttons: 10px;
          --radius-elevated: 25px;
          --radius-iconbuttons: 9999px;
        
          /* Surfaces */
          --surface-warm-chalk: #fff8f6;
          --surface-blush-cream: #fce5df;
          --surface-cotton-pink: #e878b2;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-lipstick-magenta: #db3c8a;
          --color-forest-ink: #00522d;
          --color-blush-cream: #fce5df;
          --color-warm-chalk: #fff8f6;
          --color-charcoal-black: #000000;
          --color-lilac-mist: #d1cfe4;
          --color-bubblegum: #f29ebd;
          --color-cotton-pink: #e878b2;
        
          /* Typography */
          --font-beni: 'Beni', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-clash-grotesk: 'Clash Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 10px;
          --leading-micro: 12;
          --text-label: 12px;
          --leading-label: 14;
          --text-caption: 14px;
          --leading-caption: 17;
          --text-body-sm: 16px;
          --leading-body-sm: 19;
          --text-body: 20px;
          --leading-body: 24;
          --text-subheading: 46px;
          --leading-subheading: 32;
          --text-heading-sm: 80px;
          --leading-heading-sm: 56;
          --text-heading: 94px;
          --leading-heading: 66;
          --text-heading-lg: 130px;
          --leading-heading-lg: 91;
          --text-display: 230px;
          --leading-display: 161;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-60: 60px;
          --spacing-120: 120px;
          --spacing-140: 140px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-2xl: 20px;
          --radius-3xl: 25px;
        }