exo_ape___style_reference:
  info: "> Venetian gallery at golden hour"

  theme: "light"

  info: "Exo Ape operates as a digital studio site that reads like a printed architecture monograph: one massive custom neo-grotesque (Lausanne) sets a near-monastic tone while full-bleed editorial photography does the heavy atmospheric work. The palette is almost entirely warm neutrals — a deep ink-black, warm canvas beige, and two sand-toned border colors that replace the usual cool-gray UI chrome. Headlines are not styled; they are BUILT at 144–250px with negative tracking tight enough to make the letterforms collide, while body copy drops to 14–16px in the same family at loose, breathable line-heights (1.88–2.64). There is no shadow, no gradient, no accent color, and no filled button — interactions are thin warm-beige outlined links that feel like captions, not calls to action. The whole system whispers prestige through scale, whitespace, and warmth rather than shouting it through saturation or contrast."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#0d0e13` | `--color-ink-black` | Primary text, dark UI frames, icon strokes — the deepest near-black with a barely-perceptible cool cast that keeps it from feeling warm or brown against the beige canvas |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Card surfaces, nav background, image bleeds — the brightest surface level that lifts content off the warm canvas |"
    info: "| Canvas Beige | `#e4e0db` | `--color-canvas-beige` | Page background, section bands — a warm light gray-beige that gives the whole site its sunlit, paper-like quality |"
    info: "| Steel Gray | `#6e6e71` | `--color-steel-gray` | Secondary body text, muted borders — the only truly achromatic neutral in the system, used sparingly to signal de-emphasis |"
    info: "| Footer Ink | `#070707` | `--color-footer-ink` | Footer background — a pure near-black that reads as the deepest possible dark without losing detail |"
    info: "| Sand Border | `#e0ccbb` | `--color-sand-border` | Default hairline borders, icon outlines, structural dividers — the warm tan that replaces cold gray chrome throughout the interface |"
    info: "| Warm Linen | `#e6d7ca` | `--color-warm-linen` | Outlined action borders, link underlines, interactive link states — the lighter, more luminous sand tone that signals interactivity without filling the shape |"

  tokens___typography:

    lausanne_400___lausanne_400___detected_in_extracted_data_but_not_described_by_ai____font_lausanne_400:
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 2.64"
      - "**Role:** Lausanne-400 — detected in extracted data but not described by AI"

    lausanne___primary_typeface_for_everything_from_14px_body_to_250px_display__the_250px_hero_display_with__0_046em_tracking_is_the_signature_element___letters_nearly_collide__creating_a_monolithic_word_as_architecture_presence__the_single_weight_400_across_the_full_scale_from_14px_to_250px_means_hierarchy_comes_from_size_and_tracking_alone__not_from_bold_____font_lausanne:
      - "**Substitute:** Inter, Neue Haas Grotesk, Suisse Int'l"
      - "**Weights:** 400"
      - "**Sizes:** 14, 16, 24, 144, 250"
      - "**Line height:** 0.76, 0.90, 1.33, 1.50, 1.88"
      - "**Letter spacing:** -0.046em at 250px, -0.035em at 144–24px, +0.006em at 16px, +0.007em at 14px"
      - "**OpenType features:** `\"ss01\" on, \"tnum\" on`"
      - "**Role:** Primary typeface for everything from 14px body to 250px display. The 250px hero display with -0.046em tracking is the signature element — letters nearly collide, creating a monolithic word-as-architecture presence. The single weight 400 across the full scale (from 14px to 250px) means hierarchy comes from size and tracking alone, not from bold."

    times___system_serif_fallback_used_in_tertiary_body_contexts__acts_as_a_quiet_typographic_counterpoint_to_the_neo_grotesque___never_set_in_display_sizes__always_at_16px_with_generous_leading_____font_times:
      - "**Substitute:** Times New Roman, system serif"
      - "**Weights:** 400"
      - "**Sizes:** 16"
      - "**Line height:** 1.20, 2.00"
      - "**Role:** System serif fallback used in tertiary body contexts. Acts as a quiet typographic counterpoint to the neo-grotesque — never set in display sizes, always at 16px with generous leading."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body-sm | 14px | 1.88 | 0.098px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | 0.096px | `--text-body` |"
      info: "| subheading | 24px | 1.33 | -0.84px | `--text-subheading` |"
      info: "| heading-lg | 144px | 0.76 | -5.04px | `--text-heading-lg` |"
      info: "| display | 250px | 0.76 | -11.5px | `--text-display` |"

  tokens___spacing___shapes:

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 67 | 67px | `--spacing-67` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 200 | 200px | `--spacing-200` |"
      info: "| 206 | 206px | `--spacing-206` |"

    border_radius:

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

    layout:

      - "**Section gap:** 200px"
      - "**Card padding:** 50-60px"
      - "**Element gap:** 13-15px"

  components:

    top_navigation_bar:
      role: "Minimal primary navigation"

      info: "Full-bleed white bar with the Exo Ape wordmark left-aligned and 4 text links (Work, Studio, News, Contact) right-aligned. 48–60px vertical padding, no border, no shadow. Links in Lausanne 14px at #0d0e13, no underline. The nav floats over hero imagery with no backdrop blur — it simply sits on the surface."

    full_bleed_hero_section:
      role: "Atmospheric page opening"

      info: "Edge-to-edge editorial photography (architecture, landscape, lifestyle) at viewport height or larger. Overlay text in Lausanne 250px, weight 400, #ffffff, letter-spacing -0.046em, positioned bottom-left with 120px horizontal padding. The hero text acts as architectural type — it does not describe the image, it becomes part of it."

    outlined_action_link:
      role: "Primary interaction element"

      info: "The site's de facto button. 1px solid #e6d7ca border around Lausanne 16px text, #0d0e13, with 8–16px vertical and 20–32px horizontal padding. No fill, no shadow. On hover, the border darkens to #0d0e13. Zero corner radius. Reads as a caption with a frame, not a button."

    display_headline_block:
      role: "Section-defining type"

      info: "Lausanne 144–250px, weight 400, #0d0e13 on light sections or #ffffff on dark imagery. Line-height 0.76, letter-spacing -0.035em to -0.046em. No max-width constraint — headlines are allowed to break wherever the line-break algorithm decides, creating irregular right edges that feel editorial."

    body_text_block:
      role: "Running prose and descriptions"

      info: "Lausanne 16px, weight 400, #0d0e13, line-height 1.50, max-width ~480–560px. Secondary descriptions drop to 14px with line-height 1.88. No first-line indent, no drop cap. The narrow measure and generous leading give long-form text a literary, unhurried quality."

    image_card:
      role: "Project thumbnail or case study"

      info: "Full-bleed photograph with 0px corner radius, no border, no shadow. Caption text in Lausanne 14px, #0d0e13, positioned beneath with 13–15px gap. Cards sit directly on the #e4e0db canvas — the warm background provides the only visual separation."

    list_item_with_sand_divider:
      role: "Work index, navigation lists, footer links"

      info: "List items separated by 1px #e0ccbb bottom borders, 30–50px vertical padding per row. Text in Lausanne 14–16px, #0d0e13. The warm tan divider replaces the conventional cool-gray hairline, making every list feel like a printed table of contents."

    footer_block:
      role: "Terminal dark surface"

070707_background__full_bleed__200px_vertical_padding__all_text_in_ffffff__lausanne_14_16px__no_social_icons_rendered_in_color__no_accent_highlights__the_footer_closes_the_page_with_the_deepest_possible_black__creating_maximum_contrast_against_the_warm_beige_canvas_above:

    section_spacer:
      role: "Vertical rhythm between sections"

      not_a_component_but_a_rhythm_rule: "200px of vertical breathing room between major sections, implemented as paddingTop/paddingBottom on the outer section wrapper. This is the system's primary elevation tool — it replaces shadows, cards, and dividers with pure whitespace."

  do_s_and_don_ts:

    do:
      - "Set display type at 144–250px in Lausanne weight 400 with tracking between -0.035em and -0.046em — the size IS the hierarchy"
      - "Use #e6d7ca 1px borders for all interactive elements; let the outlined link be the only action shape in the system"
      - "Maintain 200px section gaps to create editorial whitespace; resist pulling sections closer together"
      - "Use #e4e0db as the default page canvas, not pure white, to preserve the warm paper-like atmosphere"
      - "Set body text line-height at 1.88 for 14px and 1.50 for 16px; the generous leading is what makes Lausanne readable at small sizes"
      - "Use #e0ccbb for all structural dividers, list separators, and hairline borders — never default to cool gray"
      - "Let images bleed to all four edges with 0px corner radius; the warmth comes from the canvas behind, not from rounded framing"

    don_t:
      - "Do not introduce filled buttons, filled backgrounds for actions, or any solid color button — the outlined link is the only action component"
      - "Do not use box-shadow, drop-shadow, or blur effects; depth comes from surface color contrast and whitespace only"
      - "Do not use saturated colors, gradients, or brand accent hues; the palette ends at warm sand tones"
      - "Do not set body type below 14px or above 16px; the 14–16px range is the only legible band in the system"
      - "Do not add corner radius to cards, buttons, or images; every edge in the system is sharp 0px"
      - "Do not use bold or semibold weights; the system has one weight (400) and hierarchy comes from size alone"
      - "Do not center-align body prose; keep running text left-aligned with a 480–560px measure for editorial readability"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#e4e0db` | Full-page warm background establishing the paper-like base |"
    info: "| 1 | Surface White | `#ffffff` | Card and panel surfaces that lift content off the canvas |"
    info: "| 2 | Sand Tint | `#e0ccbb` | Subtle warm wash for highlighted sections or accent bands |"
    info: "| 3 | Footer Ink | `#070707` | Terminal dark surface closing the page with contrast |"

  elevation:

    info: "The system deliberately uses zero box-shadow. Depth is communicated exclusively through surface color contrast — white cards on a beige canvas, dark footer on light sections, and warm sand borders as visual dividers. This is a design-without-shadows philosophy rooted in editorial print design, where page layers are read by ink density and color temperature rather than by drop-shadow."

  imagery:

    info: "The visual language is dominated by full-bleed editorial photography — architectural exteriors (domes, basilicas, civic buildings), warm-toned landscapes, and lifestyle imagery shot at golden hour. Treatment is always full-bleed, always edge-to-edge with zero corner radius, always with the warmest possible white balance to match the #e4e0db canvas. Images are never cropped to thumbnails with padding; they are always presented at maximum scale, often as full-viewport hero backgrounds. The photography style is high-key warm, staged but not sterile, with deep shadow detail preserved in the architecture. Icons, when present, are minimal thin-stroke line icons at 1px weight in #0d0e13. The site is image-heavy but uses images as atmosphere, not as product showcase — the photography sells the studio's aesthetic sensibility, not its deliverables."

  layout:

    info: "Full-bleed, viewport-scale layout with no max-width container. The hero is a single full-viewport image with overlay display text anchored bottom-left at 120px horizontal padding. Below the hero, sections alternate between #ffffff and #e4e0db surfaces, each separated by 200px of vertical breathing room. Content blocks are left-aligned, narrow-measure prose columns (480–560px) for body text, with display headlines allowed to break at their natural line-length creating irregular right edges. The grid is loose — no rigid 12-column system, no card grids with uniform sizing. Navigation is a single top bar with no sticky behavior, no mega-menu, and no visual weight. The page reads top-to-bottom as a vertical scroll through atmospheric photography punctuated by monumental type, ending in a near-black footer that provides the only dramatic contrast in the entire layout."

  agent_prompt_guide:

    info: "QUICK COLOR REFERENCE"
    - "text: #0d0e13"
    - "background: #ffffff (cards) or #e4e0db (canvas)"
    - "border: #e0ccbb (structural) or #e6d7ca (interactive)"
    - "muted text: #6e6e71"
    - "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."

    - "OUTLINED ACTION LINK: Lausanne 16px, weight 400, #0d0e13 text. 1px solid #e6d7ca border, 12px vertical padding, 24px horizontal padding, 0px corner radius. On hover, border becomes #0d0e13. No background fill, no shadow. Use this for every interactive element on the site."

    - "BODY TEXT BLOCK: Lausanne 16px, weight 400, #0d0e13, line-height 1.50, max-width 520px, left-aligned. For longer passages, drop to 14px with line-height 1.88. No first-line indent, no drop cap, no italic for emphasis — size contrast does all the work."

    - "SECTION WITH WARM CANVAS: Background #e4e0db, 200px top and bottom padding. Display headline in Lausanne 144px, weight 400, #0d0e13, letter-spacing -0.035em, line-height 0.76. Narrow body text column below at 520px max-width in Lausanne 16px."

    - "LIST WITH SAND DIVIDERS: Vertical list of items, each separated by 1px solid #e0ccbb bottom border. Each item has 30px vertical padding. Text in Lausanne 14px, #0d0e13, line-height 1.88. No bullet points, no icons — the divider line is the only visual structure."

  typographic_architecture:

    info: "The single most defining choice in this system is the use of one weight (400) across a type scale that spans 14px to 250px. This is anti-conventional — most design systems solve hierarchy with weight (300/400/500/600/700). Exo Ape solves it with size and tracking alone. The 250px display with -0.046em letter-spacing creates letterforms so tight that the word becomes a solid mass — 'Digital' at 250px reads as a single architectural object, not as eight characters. The 14px body at +0.007em tracking and 1.88 line-height creates the opposite effect: letters breathe, lines breathe, the page breathes. The system oscillates between these two extremes and never uses intermediate weights to smooth the transition — the jump from 24px to 144px is deliberately jarring, like turning a page in a monograph."

  warm_neutral_system:

    info: "Every neutral in the system has a warm cast — even the near-black #0d0e13 has a barely-perceptible blue undertone that reads as cool only when placed directly next to a truly achromatic gray. The canvas #e4e0db is a warm light gray-beige, the dividers #e0ccbb and #e6d7ca are warm sands, and the white surfaces are used sparingly to lift content. The only truly cool element is the muted text gray #6e6e71, which is used minimally for de-emphasis. This warm-cool tension is subtle but consistent — the site feels like it was printed on cream paper, not displayed on a screen."

  similar_brands:

    - "**Locomotive** — Same editorial full-bleed photography approach with massive neo-grotesque display type and warm-neutral canvas — both treat the website as a printed monograph"
    - "**Resn** — Similar oversized display headlines, generous whitespace, and warm-toned hero photography with minimal UI chrome"
    - "**Pentagram** — Same single-weight type scale spanning body-to-display sizes, warm-neutral palette, and editorial layout that prioritizes type and photography over UI elements"
    - "**Active Theory** — Same full-bleed atmospheric hero photography with overlay display type and minimal navigation, though Active Theory pushes more into motion and depth"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #0d0e13;
          --color-pure-white: #ffffff;
          --color-canvas-beige: #e4e0db;
          --color-steel-gray: #6e6e71;
          --color-footer-ink: #070707;
          --color-sand-border: #e0ccbb;
          --color-warm-linen: #e6d7ca;
        
          /* Typography — Font Families */
          --font-lausanne-400: 'Lausanne-400', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-lausanne: 'Lausanne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 14px;
          --leading-body-sm: 1.88;
          --tracking-body-sm: 0.098px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.096px;
          --text-subheading: 24px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.84px;
          --text-heading-lg: 144px;
          --leading-heading-lg: 0.76;
          --tracking-heading-lg: -5.04px;
          --text-display: 250px;
          --leading-display: 0.76;
          --tracking-display: -11.5px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-22: 22px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-67: 67px;
          --spacing-120: 120px;
          --spacing-200: 200px;
          --spacing-206: 206px;
        
          /* Layout */
          --section-gap: 200px;
          --card-padding: 50-60px;
          --element-gap: 13-15px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas: #e4e0db;
          --surface-surface-white: #ffffff;
          --surface-sand-tint: #e0ccbb;
          --surface-footer-ink: #070707;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #0d0e13;
          --color-pure-white: #ffffff;
          --color-canvas-beige: #e4e0db;
          --color-steel-gray: #6e6e71;
          --color-footer-ink: #070707;
          --color-sand-border: #e0ccbb;
          --color-warm-linen: #e6d7ca;
        
          /* Typography */
          --font-lausanne-400: 'Lausanne-400', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-lausanne: 'Lausanne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 14px;
          --leading-body-sm: 1.88;
          --tracking-body-sm: 0.098px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.096px;
          --text-subheading: 24px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.84px;
          --text-heading-lg: 144px;
          --leading-heading-lg: 0.76;
          --tracking-heading-lg: -5.04px;
          --text-display: 250px;
          --leading-display: 0.76;
          --tracking-display: -11.5px;
        
          /* Spacing */
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-22: 22px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-67: 67px;
          --spacing-120: 120px;
          --spacing-200: 200px;
          --spacing-206: 206px;
        }