specht_studio___style_reference:
  info: "> Gallery wall of restrained curiosity. The studio's own chrome is a white plane and black type; the visual fireworks live entirely inside the project tiles."

  theme: "light"

  info: "Specht Studio is a curatorial frame, not a design showcase — the website removes every trace of itself so the portfolio work can hang on a neutral gallery wall. The chrome is aggressively monochrome: a single typeface, a single weight, black and gray ink on a near-white plane. There is no brand color, no CTA, no marketing surface — navigation is bare text and the grid of project tiles does all the work. The system achieves its identity through what it withholds: no shadows, no rounded corners, no gradient washes, no chromatic accent. Any page built in this system should read as a museum catalog, not a product page — the structure is the design, and the work is the content."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Gallery White | `#ffffff` | `--color-gallery-white` | Page canvas, project tile background where artwork doesn't fill the frame |"
    info: "| Fog Gray | `#b0b0b0` | `--color-fog-gray` | Secondary surface, subtle dividers, muted metadata text |"
    info: "| Graphite | `#666666` | `--color-graphite` | Link borders, secondary text, caption metadata, inactive nav |"
    info: "| Gallery Black | `#000000` | `--color-gallery-black` | Primary text, active nav, all structural borders, the single ink that holds the system together |"

  tokens___typography:

    helvetica_neue___sole_typeface_across_every_context___nav__body__headings__links__footer__the_deliberate_choice_of_a_single_weight_at_400_across_all_roles_removes_typographic_hierarchy_and_forces_the_grid_and_the_imagery_to_do_the_ranking__no_display_cuts__no_bold_emphasis__no_italics___restraint_as_a_point_of_view_____font_helvetica_neue:
      - "**Substitute:** Inter or Neue Haas Grotesk Text"
      - "**Weights:** 400"
      - "**Sizes:** 15px, 16px, 25px"
      - "**Line height:** 1.00–1.50"
      - "**Letter spacing:** normal"
      - "**Role:** Sole typeface across every context — nav, body, headings, links, footer. The deliberate choice of a single weight at 400 across all roles removes typographic hierarchy and forces the grid and the imagery to do the ranking. No display cuts, no bold emphasis, no italics — restraint as a point of view."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 15px | 1.4 | — | `--text-caption` |"
      info: "| body-sm | 16px | 1.4 | — | `--text-body-sm` |"
      info: "| body | 25px | 1.3 | — | `--text-body` |"

  tokens___spacing___shapes:

    base_unit: "6px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 35 | 35px | `--spacing-35` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| all | 0px |"
      info: "| nav | 0px |"
      info: "| tiles | 0px |"

    layout:

      - "**Page max-width:** 1400px"
      - "**Section gap:** 67-122px"
      - "**Card padding:** 0px"
      - "**Element gap:** 2-10px"

  components:

    navigation_bar:
      role: "Site-wide top navigation"

      info: "Bare text-only horizontal list. Links at 15-16px Helvetica Neue 400 in Gallery Black, no underlines, no backgrounds, no active-state fills. Separated from the content by a hairline 1-2px black border bottom. Spacing between nav items is 30px margin-right. The word 'Work' carries a 2px black underline to mark the current section."

    project_tile:
      role: "Portfolio thumbnail in the grid"

      info: "Edge-to-edge image or artwork with zero padding and zero border-radius. Tiles butt directly against neighbors with a 2-10px gap (the system lets the artwork define its own edges). No title, no metadata, no overlay — the tile is the pure artifact. Grid cells vary in proportion (1:1, portrait, landscape) creating a masonry rhythm."

    grid_container:
      role: "Holds the portfolio tiles in masonry arrangement"

      info: "Multi-column grid (3-4 columns at desktop) at ~1400px max-width, left-aligned rather than centered. Tiles are tightly packed with minimal gutters. The grid is the dominant visual device — it is more present than any individual project."

    text_link:
      role: "Inline and standalone links in body copy"

      info: "15-16px Helvetica Neue 400 in Graphite (#666666), underlined with a 1px Graphite border. No hover color shift detected — links are static. The 1px underline is the only interactive affordance in the entire system."

    section_header:
      role: "Optional heading text for sections like 'Artwork', 'Young Innovators'"

      info: "25px Helvetica Neue 400 in Gallery Black, line-height 1.2, 13-24px margin-bottom. Overlaid directly on or near project tiles — no banner background, no colored chip, no box. Text sits on the white plane with no visual treatment distinguishing it from body type beyond size."

    brand_lockup:
      role: "Studio identity in the top-left corner"

      info: "'Specht Studio' at 15-16px Helvetica Neue 400 in Gallery Black, with the italicized subtitle 'structure, intuition, experiment' directly beneath at the same size in Graphite. No logo mark, no symbol — the wordmark alone. The subtitle in gray creates the only typographic color contrast in the lockup."

    footer:
      role: "Site footer with secondary links and metadata"

      info: "Bare text at 15px Helvetica Neue 400, 11-24px padding. Same black-on-white treatment as the rest of the system. No social icons, no newsletter form, no decorative elements."

  do_s_and_don_ts:

    do:
      - "Use only Helvetica Neue at weight 400 — no bold, no light, no italic beyond the brand subtitle. Typographic uniformity is the system."
      - "Set body text at 15-16px and headings at 25px max. Anything larger than 25px breaks the gallery-wall scale where the imagery dominates."
      - "Build with the white canvas as the default surface. Gallery Black (#000000) is the only structural ink; Graphite (#666666) handles secondary text and link borders."
      - "Let project tiles butt directly against each other with 2-10px gaps. The tight masonry grid is the primary organizational device — wide gutters would dissolve the visual density."
      - "Treat every page as a catalog. Text should annotate and index the work; it should never compete with the imagery for attention."
      - "Keep all borders hairline (1-2px) in Gallery Black. Borders replace shadows, fills, and rounding as the structural language."
      - "When a page needs section labels, use 25px black type directly on the white plane — never a colored chip, pill, or badge."

    don_t:
      - "Do not introduce a brand color. Any chromatic accent would shift the system from 'gallery wall' to 'product page' and destroy the curatorial neutrality."
      - "Do not add rounded corners to tiles, buttons, or containers. The system is orthogonal — sharp 0px radii everywhere."
      - "Do not use shadows, blurs, or elevation. Depth must come from image content and grid density, not from CSS box-shadow."
      - "Do not use multiple typefaces or weights. A second weight or family immediately introduces hierarchy that the system deliberately suppresses."
      - "Do not add a CTA button. There is no primary action in this system — if a page needs a link, use a Graphite-underlined text link."
      - "Do not center the content on the page. The grid is left-aligned, slightly off-center, which creates the editorial-publication feel."
      - "Do not use gradients, fills, or tinted backgrounds. Every surface is pure white or pure black, never a shade between."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Gallery White | `#ffffff` | Primary page canvas — the white wall |"
    info: "| 2 | Fog Gray | `#b0b0b0` | Recessed surface for metadata and quieter elements |"

  elevation:

    info: "No shadows. The design flattens every element onto a single white plane; depth is implied by the project tile grid and the dense packing of imagery, not by elevation. Any attempt to add a drop shadow would introduce product-UI vocabulary that breaks the gallery-wall metaphor."

  imagery:

    info: "The imagery is the design system. Project tiles range across photography, editorial print, poster art, 3D renders, motion stills, and hand-drawn illustration — maximum visual diversity contained within a strict monochrome frame. Each tile is its own self-contained visual world; the grid treats them all with equal weight, no tile is visually privileged by size, position, or treatment. Tiles have no captions, no overlays, no rounded edges — they are raw crops. The overall feel is a curated mood board or museum wall: chaotic in content, rigorous in framing."

  layout:

    info: "The site is a single dense masonry grid of project tiles, full-width with a ~1400px content envelope, left-aligned rather than centered. Navigation is a minimal text bar at the very top — logo top-left, nav links inline — separated from the grid by a single hairline border. The hero IS the grid; there is no separate hero section, no introductory text, no banner image. Scrolling reveals more tiles in continuous flow with no section breaks or alternating bands. The grid packs 3-4 columns at desktop and reduces on smaller viewports. Project metadata and section titles appear sparingly, overlaid on the grid rather than in dedicated zones."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000"
    - "accent: #666666"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:
    - "Build a portfolio grid: white #ffffff background, 3-column masonry layout at 1400px max-width, tiles are edge-to-edge images with 0px border-radius and 8px gap between cells. No shadows, no borders on tiles."
    - "Build a top nav bar: white background, 1px solid #000000 bottom border, 24px padding. Left: 'Specht Studio' in 16px Helvetica Neue weight 400 #000000 with 'structure, intuition, experiment' in #666666 directly below. Right: nav links 'Work', 'Art / Research', 'Archive', 'About', 'Shop' at 15px weight 400 #000000, 30px margin-right between items, active item gets a 2px solid #000000 underline."
    - "Build a text link: 15px Helvetica Neue weight 400, color #666666, 1px solid #666666 underline. No hover state change."
    - "Build a section header: 'Artwork' in 25px Helvetica Neue weight 400 #000000, line-height 1.2, 24px margin-bottom. Sits directly on the white canvas with no background or border."
    - "Build a project tile: a single image filling the entire tile area, 0px padding, 0px border-radius, no overlay text, no border, no shadow. The tile is raw content."

  similar_brands:

    - "**Pentagram** — Portfolio-as-website approach with no decorative chrome — diverse project tiles presented in a dense grid with minimal type treatment, letting the work carry the visual weight"
    - "**Bruce Mau Design** — Studio site that functions as a curatorial catalog — black text on white, tight grid packing, zero brand-color noise, the work speaks for itself"
    - "**Wieden+ Kennedy** — Editorial-portfolio feel with strict typographic restraint and a grid of visually diverse campaign artifacts presented in a neutral frame"
    - "**M/M (Paris)** — Design studio site that treats itself as an art object — monochrome chrome, typographic precision, and project tiles that are individually expressive within a rigid container"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-gallery-white: #ffffff;
          --color-fog-gray: #b0b0b0;
          --color-graphite: #666666;
          --color-gallery-black: #000000;
        
          /* Typography — Font Families */
          --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 15px;
          --leading-caption: 1.4;
          --text-body-sm: 16px;
          --leading-body-sm: 1.4;
          --text-body: 25px;
          --leading-body: 1.3;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 6px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-35: 35px;
        
          /* Layout */
          --page-max-width: 1400px;
          --section-gap: 67-122px;
          --card-padding: 0px;
          --element-gap: 2-10px;
        
          /* Named Radii */
          --radius-all: 0px;
          --radius-nav: 0px;
          --radius-tiles: 0px;
        
          /* Surfaces */
          --surface-gallery-white: #ffffff;
          --surface-fog-gray: #b0b0b0;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-gallery-white: #ffffff;
          --color-fog-gray: #b0b0b0;
          --color-graphite: #666666;
          --color-gallery-black: #000000;
        
          /* Typography */
          --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 15px;
          --leading-caption: 1.4;
          --text-body-sm: 16px;
          --leading-body-sm: 1.4;
          --text-body: 25px;
          --leading-body: 1.3;
        
          /* Spacing */
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-35: 35px;
        }