charlie___style_reference:
  info: "> Monastery stone-cut typography on obsidian. A portfolio that uses one red wall to make silence deafening."

  theme: "dark"

  info: "Charlie Le Maignan's portfolio is a brutalist editorial canvas: pure black void as the page, oversized white type as the only architecture, and one punishing red slab that detonates against the monochrome. The visual language is a collision of a custom sliced display face (Brasparz) at absurd scale against a restrained neo-grotesque (NeueHaas) doing the quiet labor. Everything is allowed to be massive — line-height compressed to 0.70, letter-spacing driven to -0.079em — so type bleeds across the viewport rather than sitting inside it. The single red hero block functions as the only color punctuation in the entire system; everything else stays achromatic. Surfaces are flat with no elevation, no gradients, no decorative shadow — the design communicates through scale, contrast, and a single chromatic detonation."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Page canvas, deep surface — the void everything floats on |"
    info: "| Bone White | `#ffffff` | `--color-bone-white` | Primary type, nav pill borders, active state fill, hairlines, iconography |"
    info: "| Ash Gray | `#838383` | `--color-ash-gray` | Muted secondary text, inactive nav labels, tertiary metadata |"
    info: "| Alarm Red | `#ed1c24` | `--color-alarm-red` | Hero detonation block — the only chromatic moment, used as full-bleed surface against black. Makes monochrome feel like a held breath before a shout |"

  tokens___typography:

    brasparz_variable___signature_display_face_for_hero_detonations_and_the_wordmark__used_at_extreme_viewport_bleeding_sizes_with_line_height_crushed_to_0_70_so_letterforms_overlap_vertically__the_aggressive_negative_tracking_down_to__0_079em_at_360px_tightens_characters_into_a_single_sculptural_mass__custom_stylistic_sets_ss01_and_ss02_are_explicitly_disabled_set_to_0___the_raw_geometric_forms_are_the_brand__no_alternates_allowed____font_brasparz_variable:
      - "**Substitute:** Druk Wide, Antonio"
      - "**Weights:** 400"
      - "**Sizes:** 145px, 360px"
      - "**Line height:** 0.70"
      - "**Letter spacing:** -0.079em at 360px scaling to -0.020em at 145px"
      - "**OpenType features:** `\"ss01\" 0, \"ss02\" 0`"
      - "**Role:** Signature display face for hero detonations and the wordmark. Used at extreme viewport-bleeding sizes with line-height crushed to 0.70 so letterforms overlap vertically. The aggressive negative tracking (down to -0.079em at 360px) tightens characters into a single sculptural mass. Custom stylistic sets ss01 and ss02 are explicitly DISABLED (set to 0) — the raw geometric forms are the brand, no alternates allowed"

    neuehaas___body__navigation__ui_labels__the_40px_weight_700_serves_as_mid_scale_editorial_heading__weight_400_at_19_20px_carries_paragraph_and_caption_duties__features_calt__case__liga__ss01__ss02_all_active___the_only_font_allowed_to_flex_stylistic_alternates____font_neuehaas:
      - "**Substitute:** Neue Haas Grotesk, Inter, Helvetica Neue"
      - "**Weights:** 400, 700"
      - "**Sizes:** 19px, 20px, 40px"
      - "**Line height:** 1.08, 1.25, 1.32"
      - "**Letter spacing:** normal"
      - "**OpenType features:** `\"calt\", \"case\", \"liga\", \"ss01\", \"ss02\"`"
      - "**Role:** Body, navigation, UI labels. The 40px weight 700 serves as mid-scale editorial heading. Weight 400 at 19-20px carries paragraph and caption duties. Features calt, case, liga, ss01, ss02 all active — the only font allowed to flex stylistic alternates"

    trajan_style_serif_editorial_credits__not_in_extracted_data_but_visible___small_caps_credit_lines_under_the_display_block___classical_serif_at_tiny_size_creates_editorial_gravitas_against_the_brutalist_type____font_trajan_style_serif_editorial_credits_not_in_extracted_data_but_visible:
      - "**Substitute:** Cormorant SC, EB Garamond small caps"
      - "**Weights:** 400"
      - "**Sizes:**"
      - "**Line height:** 1.3"
      - "**Letter spacing:** 0.05em"
      - "**Role:** Small-caps credit lines under the display block — classical serif at tiny size creates editorial gravitas against the brutalist type"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body-sm | 19px | 1.32 | — | `--text-body-sm` |"
      info: "| subheading | 40px | 1.08 | — | `--text-subheading` |"
      info: "| display | 145px | 0.7 | -29px | `--text-display` |"
      info: "| display-xl | 360px | 0.7 | -28.4px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "6px"

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 59 | 59px | `--spacing-59` |"
      info: "| 127 | 127px | `--spacing-127` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| pills | 100px |"
      info: "| buttons | 100px |"
      info: "| surfaces | 0px |"

    layout:

      - "**Section gap:** 59px"
      - "**Card padding:** 20px"
      - "**Element gap:** 15px"

  components:

    outlined_pill_nav_button:
      role: "Primary navigation items (Work, Type, About)"

      info: "100px border-radius, 1px solid #ffffff border, transparent background, #ffffff text. Padding 7px vertical × 20px horizontal. Font: NeueHaas 19px weight 400. 15px right margin between pills. Inactive state — the border does the visual work"

    active_filled_pill_nav_button:
      role: "Current/selected navigation item"

      info: "Same 100px radius, but #ffffff fill with #000000 text. Same 7px/20px padding, same NeueHaas 19px. The inversion is the only differentiator — no color, no border emphasis, just figure-ground flip"

    display_wordmark_brasparz_massive:
      role: "Brand name and hero detonation text"

      info: "Brasparz Variable at 145-360px, line-height 0.70, letter-spacing -0.079em at 360px scaling to -0.020em at 145px. White on black, or black on red. No max-width — bleeds beyond container edges intentionally. The crushed line-height causes letterforms to nearly touch vertically"

    red_detonation_hero_block:
      role: "The singular chromatic moment — full-bleed hero/cover"

ed1c24_background__no_border__0px_radius__full_viewport_width__houses_a_black_brasparz_display_at_maximum_scale__vertical_padding_generous_50px__the_block_is_a_wall__not_a_card:

    editorial_credit_line:
      role: "Small-caps attribution beneath display type"

      info: "Classical serif (Trajan-style), ~14px, letter-spacing 0.05em, white on red or black on red. Sets the tone shift from brutalist to editorial-museum"

    caption_stack:
      role: "Small descriptive text (e.g., 'A COLLECTION OF INDEPENDENT & STUDIO WORK')"

      info: "NeueHaas 19px weight 700, uppercase, #ffffff or #000000 depending on surface. Tight line-height 1.25. Functions as a label, not body copy"

    floating_social_icon_stack:
      role: "Persistent utility icons (heart, info, share) anchored to hero edge"

      info: "Right-aligned vertical stack at hero block right edge. 1px #000000 borders on circular or square containers, #000000 icons. No background fill — icons float on the red"

    project_tile_implied_from_spacing_tokens:
      role: "Portfolio work entries"

      info: "Full-bleed or large image containers, 0px radius, no shadow. Generous internal padding ~30px. Image-first, no card chrome"

  do_s_and_don_ts:

    do:
      - "Use Brasparz Variable only at 145px or larger with line-height 0.70 — smaller and it loses its sculptural impact"
      - "Keep letter-spacing on display type at -0.06em to -0.08em; tighter as size increases"
      - "Set ss01 and ss02 to 0 on Brasparz — the raw forms are non-negotiable"
      - "Use 100px border-radius on all interactive elements (buttons, tags, nav)"
      - "Let the red hero block run full-bleed at viewport width — never contain it in a card"
      - "Keep all text either #ffffff (on black/red) or #000000 (on red) — no mid-gray body type"
      - "Use NeueHaas 19-20px for all UI; never set body below 19px"

    don_t:
      - "Don't introduce gradients, shadows, or any depth-cueing — the system is flat by doctrine"
      - "Don't use Brasparz for body text or UI labels — it is display-only and will collapse at small sizes"
      - "Don't add a second accent color — red is the sole chromatic vocabulary"
      - "Don't use mid-gray (#838383) for anything larger than caption — it fails contrast on the black canvas at 3.8:1"
      - "Don't contain the display type in a max-width box — let it bleed to viewport edges"
      - "Don't apply card-style padding, borders, or radius to content surfaces — only nav pills get the 100px radius"
      - "Don't use uppercase letter-spacing tighter than -0.02em on NeueHaas body — the tracking pattern belongs only to Brasparz"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Obsidian Void | `#000000` | Page canvas — the baseline that all white type and red detonations sit on |"
    info: "| 1 | Alarm Red | `#ed1c24` | Sole chromatic surface — full-bleed hero blocks, the system's one emotional release valve |"

  elevation:

    info: "Zero shadow. Zero elevation. The design communicates through scale contrast and chromatic detonation, not depth. Surfaces meet at hard edges with no softening — the only rounding in the system is the 100px pill radius on nav buttons."

  imagery:

    info: "The visible screenshot shows no photography or illustration — the design IS typography as image. The 'imagery' is the sliced geometric letterforms of Brasparz rendered at architectural scale, functioning as both content and visual. Any future imagery (project thumbnails, case study photos) should be treated with the same brutalist containment: full-bleed, no rounded corners, no decorative framing, image-as-wall not image-as-illustration."

  layout:

    info: "Full-bleed, no max-width container. The page is a vertical stack of viewport-spanning sections: nav pills centered at top with generous breathing room, then the wordmark in Brasparz at hero scale, then a full-viewport red detonation block with massive display type, followed by content sections that continue the 100% width rhythm. Section gaps of ~59px create pauses between detonations. Navigation is minimal — three pill buttons horizontally centered, no sticky behavior visible, no sidebar. The layout grammar is: silence, white type, detonation, silence, white type, detonation. Content never lives in a contained column — it always addresses the viewport edge."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #ffffff"
    - "background: #000000"
    - "border: #ffffff (1px)"
    - "muted text: #838383"
    - "accent surface: #ed1c24 (full-bleed red hero blocks only)"
    - "primary action: #ffffff (filled action)"

  example_component_prompts:

    - "**Outlined Nav Pill**: 100px border-radius, 1px solid #ffffff border, transparent fill, #ffffff text. NeueHaas 19px weight 400, padding 7px 20px. Inactive nav state."

    - "**Active Nav Pill**: 100px border-radius, #ffffff fill, #000000 text. Same padding 7px 20px, same NeueHaas 19px. No border needed — fill inverts the contrast."

    - "**Display Wordmark**: Brasparz Variable 360px, line-height 0.70, letter-spacing -0.079em, #ffffff on #000000 canvas. fontFeatureSettings: \"ss01\" 0, \"ss02\" 0. Let it bleed beyond any container — no max-width."

    - "**Red Detonation Block**: Full-bleed #ed1c24 surface, no border, 0px radius. Inside: Brasparz Variable 145px line-height 0.70 letter-spacing -0.020em, #000000 text. Top padding ~50px, left padding 0 — text starts at viewport edge."

    - "**Editorial Caption**: Trajan-style serif ~14px, letter-spacing 0.05em, uppercase, #000000 on the red surface. 30px row gap above the display block."

  typographic_brutalism:

    info: "The system's core tension is between Brasparz (maximalist, architectural, screaming) and NeueHaas (quiet, neutral, functional). The design's signature is the collision: a 360px crushed line-height display next to a 19px well-spaced body label. Never smooth this contrast — it is the brand. Brasparz is always at maximum volume or not used at all; there is no middle register for it."

  similar_brands:

    - "**Pentagram** — Same full-bleed editorial blocks, oversized display type addressing viewport edges, minimal nav, black/white/red chromatic restraint"
    - "**Hattie Molloy (or other indie type designer portfolios)** — Same sliced/custom display face at architectural scale, crushed line-heights, no card chrome, type-as-image"
    - "**Bureau Cool** — Same dark canvas, custom display typography, single chromatic detonation block, zero shadow/depth"
    - "**Wieden+Kennedy editorial** — Same brutalist editorial portfolio language — flat surfaces, aggressive scale contrast, no decorative warmth"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #000000;
          --color-bone-white: #ffffff;
          --color-ash-gray: #838383;
          --color-alarm-red: #ed1c24;
        
          /* Typography — Font Families */
          --font-brasparz-variable: 'Brasparz Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neuehaas: 'NeueHaas', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-trajan-style-serif-editorial-credits-not-in-extracted-data-but-visible: 'Trajan-style serif (editorial credits, not in extracted data but visible)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
        
          /* Typography — Scale */
          --text-body-sm: 19px;
          --leading-body-sm: 1.32;
          --text-subheading: 40px;
          --leading-subheading: 1.08;
          --text-display: 145px;
          --leading-display: 0.7;
          --tracking-display: -29px;
          --text-display-xl: 360px;
          --leading-display-xl: 0.7;
          --tracking-display-xl: -28.4px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 6px;
          --spacing-7: 7px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-50: 50px;
          --spacing-59: 59px;
          --spacing-127: 127px;
        
          /* Layout */
          --section-gap: 59px;
          --card-padding: 20px;
          --element-gap: 15px;
        
          /* Border Radius */
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-pills: 100px;
          --radius-buttons: 100px;
          --radius-surfaces: 0px;
        
          /* Surfaces */
          --surface-obsidian-void: #000000;
          --surface-alarm-red: #ed1c24;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #000000;
          --color-bone-white: #ffffff;
          --color-ash-gray: #838383;
          --color-alarm-red: #ed1c24;
        
          /* Typography */
          --font-brasparz-variable: 'Brasparz Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-neuehaas: 'NeueHaas', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-trajan-style-serif-editorial-credits-not-in-extracted-data-but-visible: 'Trajan-style serif (editorial credits, not in extracted data but visible)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
        
          /* Typography — Scale */
          --text-body-sm: 19px;
          --leading-body-sm: 1.32;
          --text-subheading: 40px;
          --leading-subheading: 1.08;
          --text-display: 145px;
          --leading-display: 0.7;
          --tracking-display: -29px;
          --text-display-xl: 360px;
          --leading-display-xl: 0.7;
          --tracking-display-xl: -28.4px;
        
          /* Spacing */
          --spacing-7: 7px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-50: 50px;
          --spacing-59: 59px;
          --spacing-127: 127px;
        
          /* Border Radius */
          --radius-full: 100px;
        }