josh_warner___style_reference:
  info: "> black void gallery wall"

  theme: "dark"

  info: "Josh Warner's portfolio operates as a near-pure black gallery wall: the interface recedes so that 3D renders, product mockups, and photographic compositions can dominate every viewport. Typography is whisper-thin and uniformly weighted at 400 across the scale, using a single sans-serif family that refuses to shout — hierarchy is built through size and generous letter-spacing (0.04em) rather than weight contrast. The entire palette is achromatic except for a single electric green status dot (#08ff00), which functions as the site's only living signal against the void. Surfaces are flat or near-flat; depth is borrowed entirely from the artwork, not from drop shadows or gradients. Components are sparse, pill-shaped, and almost weightless — ghost buttons, hairline borders on #000, circular avatars, and pill nav items. The system is a frame, not a subject."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void | `#0f0f0f` | `--color-void` | Page canvas and primary surface — the base layer beneath all artwork, slightly lifted from pure black to prevent OLED banding in the dark void |"
    info: "| Absolute | `#000000` | `--color-absolute` | Hairline borders, image containers, icon strokes, footer dividers — pure black acts as the structural ink that defines edges in the absence of visible card surfaces |"
    info: "| Charcoal | `#1a1a1a` | `--color-charcoal` | Elevated footer surface and deeper UI panels — a single step up from canvas for zone separation without breaking the dark void |"
    info: "| Faint | `#080808` | `--color-faint` | Shadow base for subtle elevation effects — nearly invisible against canvas, used in box-shadow compositions for soft ambient lift |"
    info: "| Bone | `#f0f0f0` | `--color-bone` | Primary text color, nav item fills, filled button background — warm off-white replaces pure white to soften contrast against the black void and reduce eye strain |"
    info: "| Ash | `#b8b8b8` | `--color-ash` | Secondary body text, subdued helper labels, muted metadata — sits one step below Bone for non-emphasized copy without losing legibility on dark surfaces |"
    info: "| Graphite | `#696969` | `--color-graphite` | Tertiary text and border accents on headings — used sparingly for fine print and inactive labels that should recede |"
    info: "| Live Wire | `#08ff00` | `--color-live-wire` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content |"

  tokens___typography:

    inter_display___primary_typeface_across_all_ui__body__navigation__and_headings___used_exclusively_at_weight_400_with_no_weight_variation__creating_a_flat__even_visual_texture_where_size_and_spacing_alone_carry_hierarchy__substitute_with_inter_free__near_identical_metrics_____font_inter_display:
      - "**Substitute:** Inter"
      - "**Weights:** 400"
      - "**Sizes:** 14px, 16px, 20px, 32px, 40px"
      - "**Line height:** 1.00-1.56"
      - "**Letter spacing:** 0.04em"
      - "**Role:** Primary typeface across all UI, body, navigation, and headings — used exclusively at weight 400 with no weight variation, creating a flat, even visual texture where size and spacing alone carry hierarchy. Substitute with Inter (free, near-identical metrics)."

    system_sans_serif___micro_ui_labels_12px___system_stack_for_the_smallest_utility_text_where_font_loading_overhead_isn_t_justified____font_system_sans_serif:
      - "**Substitute:** -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** normal"
      - "**Role:** Micro-UI labels (12px) — system stack for the smallest utility text where font loading overhead isn't justified"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | 0.48px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | 0.56px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | 0.64px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | 0.8px | `--text-subheading` |"
      info: "| heading | 32px | 1.25 | 1.28px | `--text-heading` |"
      info: "| display | 40px | 1.2 | 1.6px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| badges | 100px |"
      info: "| images | 4px |"
      info: "| avatars | 100px |"
      info: "| buttons | 100px |"
      info: "| navPills | 100px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(0, 0, 0, 0.5) 0px 1px 10px -2px` | `--shadow-md` |"
      info: "| md-2 | `rgba(0, 0, 0, 0.16) 0px 0px 10px 0px` | `--shadow-md-2` |"

    layout:

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

  components:

    pill_navigation_button:
      role: "Top-center nav items (Projects, Art, Info) and ghost nav controls"

      ghost_style_button: "transparent background, Bone (#f0f0f0) text at 14-16px Inter Display 400 with 0.04em letter-spacing, 100px border-radius, 4px vertical / 14px horizontal padding, no visible border. Active state (Art in screenshots) indicated by a subtle underline or text emphasis rather than a fill change."

    filled_cta_button:
      role: "Primary action — Contact, Hire me"

      info: "Bone (#f0f0f0) fill, Void (#0f0f0f) text at 14-16px Inter Display 400, 100px border-radius, 6px vertical / 14px horizontal padding. No border, no shadow. The only filled button in the system — reserved for actions the user must see."

    status_indicator:
      role: "Availability signal in footer/hero"

      info: "6-8px circular dot in Live Wire (#08ff00) with optional text label ('Available for hire') in Bone at 14px. The green dot is the sole chromatic element in the entire UI — a heartbeat against the void."

    avatar_badge:
      role: "Brand identity mark in top-left nav"

      info: "Circular thumbnail (100px radius) of the designer's portrait, 32-40px diameter, no border. Paired with 'Josh Warner' wordmark in Bone at 14-16px Inter Display 400."

    coming_soon_pill:
      role: "Project status badge on case study previews"

      ghost_pill: "transparent background, Bone text 'Coming Soon' at 12px, 100px radius, 4px vertical / 10px horizontal padding. Communicates temporal state through the nav pill language rather than introducing a new component family."

    hero_art_container:
      role: "Full-bleed 3D render or photographic artwork"

      info: "No container chrome — artwork extends to viewport edges against Void (#0f0f0f) canvas. The hero is a single large composition (golden ampersands + driftwood in screenshots) that occupies the full viewport height with overlaid nav and tagline."

    project_showcase_panel:
      role: "Individual case study preview (phone mockup in second screenshot)"

      info: "Device mockup centered or positioned within the viewport, floating over continuation of the hero artwork. No card surface, no border — the device image itself is the visual unit. Caption text overlays in Bone at 16-20px."

    footer_bar:
      role: "Site footer with bio and CTA"

      info: "Charcoal (#1a1a1a) background, one step above canvas. Contains status indicator on left, bio text in Bone/Ash at 14-16px, and Hire me button on right. 12px padding, hairline top border in Absolute (#000000)."

    tagline_headline:
      role: "Hero left-aligned copy block"

      info: "Two-line statement ('Product by day. / Art by night.') at 32-40px Inter Display 400, Bone (#f0f0f0), 0.04em letter-spacing, positioned in lower-left of hero with generous left margin. No bold, no gradient — the weight of the line comes from its placement against the dark void."

    subtitle_body_text:
      role: "Supporting paragraph text"

      info: "14-16px Inter Display 400, Ash (#b8b8b8) or Bone (#f0f0f0), 0.04em letter-spacing, 1.5-1.56 line-height. Restrained, readable, never decorative."

    image_thumbnail:
      role: "Small image containers and inline media"

      info: "4px border-radius, Absolute (#000000) 1px border. The tight radius keeps images grounded and sharp against the void, contrasting with the 100px pill language of interactive elements."

  do_s_and_don_ts:

    do:
      - "Use Bone (#f0f0f0) for all text on the dark void — never use pure white, which clashes with the warm off-white palette"
      - "Apply 100px border-radius to every interactive button, badge, nav item, and avatar — the pill shape is the system's signature geometry"
      - "Keep all type at Inter Display weight 400 — never introduce bold or semibold weights; build hierarchy through size and spacing only"
      - "Use 0.04em letter-spacing on all text — this consistent positive tracking is what makes the whisper-weight type legible and gives the system its measured, deliberate feel"
      - "Reserve Live Wire (#08ff00) exclusively for the availability status dot — it is the only chromatic color and must appear nowhere else"
      - "Set page backgrounds to Void (#0f0f0f), not pure black — the near-black prevents OLED smearing and creates a subtle canvas depth"
      - "Use 4px border-radius for image containers and 100px for all interactive elements — maintain the sharp/round duality"

    don_t:
      - "Don't introduce any new accent colors beyond Live Wire green — the system is deliberately monochromatic and any additional hue will break the gallery void"
      - "Don't use drop shadows for card or surface elevation — depth must come from the artwork itself or surface tone shifts, not from shadow stacks"
      - "Don't bold headlines or use weight 500+ — the entire type system breathes at weight 400; adding weight disrupts the flat, even texture"
      - "Don't use sharp corners (<12px) on buttons, nav items, or badges — the pill geometry is the system's visual identity"
      - "Don't use pure black (#000000) as a fill background for cards or surfaces — reserve it for hairline borders and edges; use Void (#0f0f0f) for surfaces"
      - "Don't place body text below 14px or above 40px — the type scale is deliberately compressed; deviation breaks the editorial restraint"
      - "Don't add gradients, glows, or color washes to UI elements — the system's visual energy comes from the 3D/photographic content, not from UI decoration"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Void | `#0f0f0f` | Page canvas — the base layer beneath all content |"
    info: "| 1 | Charcoal | `#1a1a1a` | Footer surface — one step above canvas for zone separation |"
    info: "| 2 | Bone | `#f0f0f0` | Filled button background — inverted surface for interactive emphasis |"

  elevation:

    - "**Buttons and interactive elements:** `rgba(0, 0, 0, 0.16) 0px 0px 10px 0px`"
    - "**Project images and artwork overlays:** `rgba(0, 0, 0, 0.5) 0px 1px 10px -2px`"

  imagery:

    the_site_is_image_dominant: "full-bleed 3D renders and high-end photography occupy the entire viewport. The hero features a sculptural composition of metallic golden ampersand letterforms intertwined with organic driftwood, a small flower, and ornate keys — studio-lit, high-contrast, against a pure black backdrop. Secondary sections show device mockups (iPhone displaying app UI) floating over continuation of the driftwood scene, creating a unified visual world across scroll. All imagery is photographic or 3D-rendered, never illustrated or flat. Color treatment in photography is moody and warm — golden metallics, warm wood tones, against deep black. No icons are used; navigation and status are text-only. Images have tight 4px corners, contrasting with the pill-shaped UI chrome."

  layout:

    info: "Full-bleed dark canvas with no visible page max-width constraint — the hero artwork extends edge-to-edge, and text overlays float in negative space (lower-left for the tagline, center for nav). Navigation is a single horizontal bar with brand avatar+name on far left, three nav items (Projects, Art, Info) clustered in center, and a Contact button on far right. Below the hero, the page flows into full-viewport project showcase panels, each featuring a device mockup or artwork composition centered or slightly off-center, with minimal text overlay. Footer is a single horizontal band with status indicator left-aligned, bio center-left, and CTA right-aligned. Vertical rhythm is defined by 60-64px section gaps, and the overall density is compact with generous breathing room around text overlays. The layout is editorial and gallery-like — content sections are separated by the artwork itself rather than by dividers or background color changes."

  agent_prompt_guide:

  quick_color_reference:
    - "background (canvas): #0f0f0f"
    - "text (primary): #f0f0f0"
    - "text (secondary): #b8b8b8"
    - "border (hairline): #000000"
    - "accent (status dot only): #08ff00"
    - "primary action: #f0f0f0 (filled action)"

  3_5_example_component_prompts:

    - "**Pill Navigation Button (ghost):** Transparent background, 14px Inter Display weight 400, color #f0f0f0, letter-spacing 0.04em, border-radius 100px, padding 4px 14px. No border, no shadow."

    - "**Filled Contact Button:** Background #f0f0f0, text 14px Inter Display weight 400, color #0f0f0f, letter-spacing 0.04em, border-radius 100px, padding 6px 14px. No border."

    - "**Status Indicator Row:** 8px circular dot in #08ff00, followed by label text 'Available for hire' at 14px Inter Display 400, color #f0f0f0, letter-spacing 0.04em. Inline-flex with 8px gap."

    - "**Hero Tagline Block:** Two-line headline at 32-40px Inter Display weight 400, color #f0f0f0, letter-spacing 0.04em, positioned in lower-left viewport. Subtitle below at 16px, color #b8b8b8, same letter-spacing."

    - "**Footer Bar:** Background #1a1a1a, full-width, 12px padding. Status indicator on left, bio text in #f0f0f0 at 14px, 'Hire me' filled button (Bone fill, Void text, 100px radius) on right."

  similar_brands:

    - "**Are.na** — Same achromatic dark gallery approach with whisper-weight sans-serif and zero decorative color — content as the visual subject against a near-black void"
    - "**Locomotive (locomotive.ca)** — Full-bleed 3D-rendered hero compositions against deep black canvas, with pill-shaped minimal nav and editorial-scale typography"
    - "**Werkstatt (by Studio Apeloig)** — Portfolio-as-art-gallery language: large sculptural imagery dominates, UI is reduced to text labels and pill controls, single-color palette"
    - "**Rauno Freiberg** — Dark-mode developer portfolio with weight-400-only type, generous letter-spacing, and near-monochromatic palette where color is reserved for a single functional signal"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void: #0f0f0f;
          --color-absolute: #000000;
          --color-charcoal: #1a1a1a;
          --color-faint: #080808;
          --color-bone: #f0f0f0;
          --color-ash: #b8b8b8;
          --color-graphite: #696969;
          --color-live-wire: #08ff00;
        
          /* Typography — Font Families */
          --font-inter-display: 'Inter Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-sans-serif: 'System sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.48px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: 0.56px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.64px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: 0.8px;
          --text-heading: 32px;
          --leading-heading: 1.25;
          --tracking-heading: 1.28px;
          --text-display: 40px;
          --leading-display: 1.2;
          --tracking-display: 1.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-60: 60px;
          --spacing-64: 64px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 60-64px;
          --card-padding: 14px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-3xl: 40px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-badges: 100px;
          --radius-images: 4px;
          --radius-avatars: 100px;
          --radius-buttons: 100px;
          --radius-navpills: 100px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.5) 0px 1px 10px -2px;
          --shadow-md-2: rgba(0, 0, 0, 0.16) 0px 0px 10px 0px;
        
          /* Surfaces */
          --surface-void: #0f0f0f;
          --surface-charcoal: #1a1a1a;
          --surface-bone: #f0f0f0;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void: #0f0f0f;
          --color-absolute: #000000;
          --color-charcoal: #1a1a1a;
          --color-faint: #080808;
          --color-bone: #f0f0f0;
          --color-ash: #b8b8b8;
          --color-graphite: #696969;
          --color-live-wire: #08ff00;
        
          /* Typography */
          --font-inter-display: 'Inter Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-sans-serif: 'System sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.48px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: 0.56px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.64px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: 0.8px;
          --text-heading: 32px;
          --leading-heading: 1.25;
          --tracking-heading: 1.28px;
          --text-display: 40px;
          --leading-display: 1.2;
          --tracking-display: 1.6px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-60: 60px;
          --spacing-64: 64px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-3xl: 40px;
          --radius-full: 100px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.5) 0px 1px 10px -2px;
          --shadow-md-2: rgba(0, 0, 0, 0.16) 0px 0px 10px 0px;
        }