aaron_poe___co___style_reference:
  info: "> Quiet white gallery — coral pink whispers float in vast considered silence, framed only by pill-shaped nav and tightly-tracked type."

  theme: "light"

  info: "Aaron Poe & Co operates as a curator's white room — a creative director's portfolio that strips interface to typography, whitespace, and a single accent. The canvas is pure white; the type stack pairs Geist (tightly tracked, negative letter-spacing) with system fonts for body copy; and a warm coral pink (#ea587d) surfaces only on heading text and hairline borders, never as a filled button. Components feel like gallery placards: a floating pill-shaped nav, centered bio blocks, and subtle 1px inset borders replacing the need for drop shadows. The rhythm is editorial — vast negative space punctuated by compressed, confident type and one whisper of color."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Coral Rose | `#ea587d` | `--color-coral-rose` | Accent for heading text, hairline borders, and active-state markers — the single chromatic signal in an otherwise achromatic system |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, and inverted backgrounds |"
    info: "| Cloud | `#f2f2f2` | `--color-cloud` | Pill nav background, subtle surface elevation, and inset border shadows |"
    info: "| Bone | `#d9d8d4` | `--color-bone` | Warm-toned secondary surface tint for alternating bands |"
    info: "| Char | `#282828` | `--color-char` | Primary text, body copy, and most interface strokes |"
    info: "| Ink | `#121212` | `--color-ink` | Heavier headings, body text, and prominent borders |"
    info: "| Black | `#000000` | `--color-black` | Maximum-emphasis text, logo wordmark, and strong border lines |"
    info: "| Fog | `#b3b3b3` | `--color-fog` | Muted helper text and disabled-state strokes |"
    info: "| Mist | `#cccccc` | `--color-mist` | Lowest-emphasis borders and decorative dividers |"

  tokens___typography:

    apple_system___system_font_fallback_for_body_text_and_rendering_across_platforms__used_wherever_native_os_fonts_provide_a_reliable__performance_optimized_default_at_body_size_____font_apple_system:
      - "**Substitute:** BlinkMacSystemFont, Segoe UI, Roboto, sans-serif"
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.00"
      - "**OpenType features:** `\"dlig\" 0, \"hlig\" 0, \"liga\" 0, \"rlig\" 0, \"smcp\" 0`"
      - "**Role:** System-font fallback for body text and rendering across platforms. Used wherever native OS fonts provide a reliable, performance-optimized default at body size."

    geist___primary_display_and_ui_typeface__the_300_weight_at_micro_sizes_8_10px_creates_whisper_quiet_labels__the_negative_letter_spacing__0_056em_at_8px___0_037em_at_10px_tightens_small_type_into_dense__confident_blocks__400_at_16_18px_serves_body_and_subheadings_with__0_025em_to__0_011em_tracking_____font_geist:
      - "**Substitute:** Inter, Satoshi, General Sans"
      - "**Weights:** 300, 400, 500"
      - "**Sizes:** 8px, 10px, 16px, 18px"
      - "**Line height:** 1.00, 1.17, 1.38, 2.67"
      - "**Letter spacing:** -0.056em at 8px, -0.037em at 10px, -0.025em at 16px, -0.011em at 18px"
      - "**OpenType features:** `\"ss02\", \"lnum\"`"
      - "**Role:** Primary display and UI typeface. The 300 weight at micro sizes (8–10px) creates whisper-quiet labels; the negative letter-spacing (-0.056em at 8px, -0.037em at 10px) tightens small type into dense, confident blocks. 400 at 16–18px serves body and subheadings with -0.025em to -0.011em tracking."

    wtqc_custom_display___reserved_for_prominent_display_headings_30px__1_07_line_height___0_033em_tracking_and_compact_labels_12px__1_33_line_height__the_tight_1_07_line_height_on_the_30px_size_gives_headings_a_condensed__editorial_feel_____font_wtqc_custom_display:
      - "**Substitute:** Geist, Inter"
      - "**Weights:** 500"
      - "**Sizes:** 12px, 30px"
      - "**Line height:** 1.07, 1.33"
      - "**Letter spacing:** -0.033em at both sizes"
      - "**OpenType features:** `\"lnum\"`"
      - "**Role:** Reserved for prominent display headings (30px, 1.07 line-height, -0.033em tracking) and compact labels (12px, 1.33 line-height). The tight 1.07 line-height on the 30px size gives headings a condensed, editorial feel."

    custom_166638___custom_166638___detected_in_extracted_data_but_not_described_by_ai____font_custom166638:
      - "**Weights:** 300"
      - "**Sizes:** 8px"
      - "**Line height:** 1.5"
      - "**OpenType features:** `\"dlig\" 0, \"hlig\" 0, \"liga\" 0, \"rlig\" 0, \"smcp\" 0`"
      - "**Role:** custom_166638 — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption-sm | 10px | 1.17 | -0.37px | `--text-caption-sm` |"
      info: "| body | 16px | 1.38 | -0.4px | `--text-body` |"
      info: "| subheading | 18px | 2.67 | -0.2px | `--text-subheading` |"
      info: "| heading | 30px | 1.07 | -0.99px | `--text-heading` |"

  tokens___spacing___shapes:

    density: "comfortable"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 4px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4px |"
      info: "| pillNav | 24px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgb(242, 242, 242) 0px 0px 0px 1px inset` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 720px"
      - "**Section gap:** 120px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    wordmark_logo:
      role: "Brand identity in the top-left corner"

      info: "Bold text-only 'aaronpoe' mark in #000000 or #282828, set at approximately 18–20px with tight tracking. No icon, no symbol — the name IS the brand. Positioned flush-left with generous left margin."

    pill_navigation_bar:
      role: "Primary site navigation"

      info: "Floating horizontal pill centered at the top of the page. Background #f2f2f2, border-radius 24px (fully pill-shaped), padding approximately 8px 8px. Contains three nav items separated by subtle spacing. The pill sits on the white canvas with no shadow — the color difference and rounded form do all the work."

    nav_item___default:
      role: "Inactive navigation link"

      info: "Text label in #282828 at 12–14px, weight 400, letter-spacing near zero. No background fill, no border. Padding approximately 8px 16px."

    nav_item___active_with_dot_indicator:
      role: "Current page indicator in the pill nav"

      info: "Identical text styling to default nav items, prefixed with a small coral pink dot (#ea587d) at approximately 6px diameter. The dot is the only active-state signal — no bold weight change, no background shift, no underline."

    bio_text_block:
      role: "Centered hero content — the creator's statement"

      info: "Centered paragraph block at max-width ~520–640px, set in system or Geist 16–18px weight 400 in #282828, line-height 1.38–1.5. Two paragraphs separated by one blank line. No background, no border, no decoration — pure typography floating in white space."

    section_heading_with_coral_border:
      role: "Content section titles and category labels"

      info: "Text in coral pink (#ea587d), potentially with a coral hairline border-bottom (1px solid #ea587d). The pink heading is the primary chromatic event in the system — it draws the eye without filling space. Size 24–30px, weight 300–500."

    ghost_button_start_a_project:
      role: "Contact / conversion action in the nav"

      info: "Text-only or hairline-bordered button in the pill nav. Text at 12–14px weight 400 in #282828. No background fill, no border in default state. On hover, optionally a #f2f2f2 background or 1px #282828 border."

    hairline_card:
      role: "Content container for case studies, project tiles, or grouped content"

      info: "White surface (#ffffff) with 1px solid border in #e5e5e5 or #cccccc, border-radius 4px, padding 24px. No drop shadow — the 1px border defines the edge. May optionally use the inset shadow technique (box-shadow: rgb(242,242,242) 0px 0px 0px 1px inset) for a hairline that matches the cloud surface color."

    inset_border_divider:
      role: "Ultra-subtle section separation without visible lines"

      info: "A 1px inset shadow using #f2f2f2 (rgb(242,242,242)) creates a barely-perceptible edge. Used when a physical border would be too heavy but some surface definition is needed."

    project_tile:
      role: "Portfolio work entry — image or text-based"

      info: "Larger card variant with border-radius 4px, 1px border, generous internal padding (32–48px). Likely contains a project title in Geist, optional thumbnail, and a coral-pink category label or hairline accent."

  do_s_and_don_ts:

    do:
      - "Use #ea587d only on heading text, hairline borders, and the active-nav dot — never as a filled button or background"
      - "Set all headings in Geist or wtqc with negative letter-spacing (-0.033em to -0.056em depending on size) to achieve the compressed editorial feel"
      - "Use 24px border-radius for the pill navigation and 4px for all cards and buttons"
      - "Default to max-width 720px for centered text blocks; let whitespace do the layout work"
      - "Separate cards and sections with 1px solid borders in #cccccc or #e5e5e5 — never with drop shadows"
      - "Use #f2f2f2 as the surface tint for floating elements like the pill nav"
      - "Set body text at 16–18px in #282828 with 1.38–1.5 line-height for comfortable reading"

    don_t:
      - "Do not add drop shadows to cards, buttons, or navigation — the system is intentionally flat"
      - "Do not use #ea587d as a button background fill — the accent only appears on headings and borders"
      - "Do not use large border-radii on cards — keep them at 4px; only the pill nav gets 24px"
      - "Do not introduce new chromatic colors — the system is deliberately monochrome with one pink accent"
      - "Do not use positive letter-spacing — all text tracks tight (negative values) to feel compressed and confident"
      - "Do not fill the page with imagery or illustrations — let typography and whitespace carry the composition"
      - "Do not use dark mode as the default theme — white canvas is the signature; dark (#121212) is reserved for inverted sections only"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#ffffff` | Primary page background — the infinite white wall |"
    info: "| 2 | Pill Surface | `#f2f2f2` | Navigation pill background and subtle card elevation |"
    info: "| 3 | Warm Band | `#d9d8d4` | Occasional warm-toned section divider or band |"
    info: "| 4 | Inverted | `#121212` | Dark-mode sections or inverted text blocks |"

  elevation:

    - "**All surfaces:** `rgb(242, 242, 242) 0px 0px 0px 1px inset`"

  imagery:

    info: "No photography, illustration, or product imagery detected. The site is pure typography and whitespace — the creator's name, bio text, and navigation are the only visual content. Any portfolio work would be presented as text-based case study entries within hairline cards, not as image galleries. This text-only approach reinforces the editorial, gallery-curated personality."

  layout:

    info: "Page-level layout is centered and max-width contained (approximately 720px for text content). The top of the page features a split header: the wordmark logo flush-left, the pill navigation floating centered. Below the header, vast white space leads to a centered bio text block that sits in the upper-middle of the viewport. The rhythm is vertical and unhurried — sections separated by 100–120px of whitespace, with no visible dividers or alternating color bands. Navigation is minimal (a single pill nav, no sidebar, no mega-menu). The overall density is sparse — the page is approximately 80% white space, making the centered type feel like a gallery placard on a white wall."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #282828 (body) / #000000 (logo/emphasis) / #121212 (headings)"
    - "background: #ffffff (canvas) / #f2f2f2 (pill nav, subtle surfaces)"
    - "border: #cccccc (hairlines) / #e5e5e5 (card edges)"
    - "accent: #ea587d (headings, active dot, accent borders only — never fills)"
    - "muted text: #b3b3b3"
    - "primary action: no distinct CTA color"

  example_component_prompts:

    - "**Pill Navigation Bar**: Centered floating nav at top of page. Background #f2f2f2, border-radius 24px, padding 8px 8px, height ~40px. Contains 3 items spaced ~16px apart. Sits on #ffffff canvas with no shadow. Items at 12px Geist weight 400, #282828, letter-spacing -0.4px."

    - "**Bio Text Block**: Centered paragraph block, max-width 560px, text-align center. Two paragraphs in Geist 18px weight 400, #282828, line-height 2.67 (the generous value creates breathing room between lines). No background, no border. Vertically positioned ~200px from top of viewport."

    - "**Section Heading**: Text 'Selected Work' in coral pink #ea587d, Geist 30px weight 500, letter-spacing -0.99px, line-height 1.07. Optionally with a 1px solid #ea587d border-bottom, 24px below the text."

    - "**Hairline Card**: White surface #ffffff, border 1px solid #e5e5e5, border-radius 4px, padding 24px. Contains a project title in Geist 16px weight 500 #121212, and a short description in Geist 14px weight 400 #282828. No drop shadow."

    - "**Active Nav Item with Dot**: Same styling as default nav item (Geist 12px weight 400 #282828), but prefixed with a 6px diameter circle in #ea587d, positioned 8px to the left of the text with 2px gap."

  type_philosophy:

    info: "The system uses negative letter-spacing aggressively at every size, with tighter tracking on display sizes (-0.056em at 8px, -0.033em at 30px) and slightly looser tracking at body size (-0.025em to -0.011em at 16–18px). This creates a voice that feels compressed, editorial, and confident — the opposite of airy or breathy typography. Font feature settings \"ss02\" and \"lnum\" are enabled on Geist, activating stylistic set 02 and lining figures for consistent numerical alignment. The 2.67 line-height at 18px body is unusual and deliberate — it creates generous vertical rhythm between lines, making the bio text feel meditative rather than dense."

  similar_brands:

    - "**Manual (cerealmag.com/manual)** — Same editorial white-space approach with centered text blocks, hairline borders, and almost no imagery — relies on typography and whitespace as the design"
    - "**It's Nice That (itsnicethat.com)** — Gallery-curated white canvas with pill-shaped navigation, restrained color palette, and editorial typography with tight tracking"
    - "**Pentagram (pentagram.com)** — Creative agency portfolio using pure white backgrounds, single accent color moments, and text-forward project tiles within hairline-bordered cards"
    - "**Sam Soffes (soff.es)** — Minimal personal site with system font typography, pill-shaped nav, and one accent color used sparingly on headings and links"
    - "**Are.na (are.na)** — Generous white space, 4px card radii, 1px hairline borders replacing shadows, and a single warm accent against an otherwise achromatic palette"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-coral-rose: #ea587d;
          --color-pure-white: #ffffff;
          --color-cloud: #f2f2f2;
          --color-bone: #d9d8d4;
          --color-char: #282828;
          --color-ink: #121212;
          --color-black: #000000;
          --color-fog: #b3b3b3;
          --color-mist: #cccccc;
        
          /* Typography — Font Families */
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-wtqc-custom-display: 'wtqc (custom display)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-custom166638: 'custom_166638', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption-sm: 10px;
          --leading-caption-sm: 1.17;
          --tracking-caption-sm: -0.37px;
          --text-body: 16px;
          --leading-body: 1.38;
          --tracking-body: -0.4px;
          --text-subheading: 18px;
          --leading-subheading: 2.67;
          --tracking-subheading: -0.2px;
          --text-heading: 30px;
          --leading-heading: 1.07;
          --tracking-heading: -0.99px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Layout */
          --page-max-width: 720px;
          --section-gap: 120px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-2xl: 17px;
          --radius-3xl: 24px;
          --radius-full: 90px;
        
          /* Named Radii */
          --radius-cards: 4px;
          --radius-inputs: 4px;
          --radius-buttons: 4px;
          --radius-pillnav: 24px;
        
          /* Shadows */
          --shadow-subtle: rgb(242, 242, 242) 0px 0px 0px 1px inset;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-pill-surface: #f2f2f2;
          --surface-warm-band: #d9d8d4;
          --surface-inverted: #121212;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-coral-rose: #ea587d;
          --color-pure-white: #ffffff;
          --color-cloud: #f2f2f2;
          --color-bone: #d9d8d4;
          --color-char: #282828;
          --color-ink: #121212;
          --color-black: #000000;
          --color-fog: #b3b3b3;
          --color-mist: #cccccc;
        
          /* Typography */
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-wtqc-custom-display: 'wtqc (custom display)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-custom166638: 'custom_166638', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption-sm: 10px;
          --leading-caption-sm: 1.17;
          --tracking-caption-sm: -0.37px;
          --text-body: 16px;
          --leading-body: 1.38;
          --tracking-body: -0.4px;
          --text-subheading: 18px;
          --leading-subheading: 2.67;
          --tracking-subheading: -0.2px;
          --text-heading: 30px;
          --leading-heading: 1.07;
          --tracking-heading: -0.99px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-2xl: 17px;
          --radius-3xl: 24px;
          --radius-full: 90px;
        
          /* Shadows */
          --shadow-subtle: rgb(242, 242, 242) 0px 0px 0px 1px inset;
        }