katherine_pihl___style_reference:
  info: "> art gallery wall at dawn — a white-walled space where black type, generous gaps, and full-bleed imagery do all the work, and the UI itself is almost invisible."

  theme: "light"

  info: "Katherine Pihl is an editorial portfolio system where the work does the talking and the interface recedes into the wall. The page is a pure white canvas with black and two grays — zero chromatic accent, zero decorative gradient, zero shadow — so the imagery carries all the color. The typographic system is the only expressive layer: a precise neo-grotesque (Neue Montreal) at 300–500 for all structural and label text, paired with a high-contrast light-weight serif (Ryhmes) that appears only as large display type overlaid on project imagery. Cards are not cards — they are unbordered, full-bleed images with text labels hanging in the whitespace below. Navigation is two text links. The layout rhythm is a 3-column grid with generous vertical breathing room; everything else is silence."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#000000` | `--color-ink` | Primary text, all structural borders, hairline page frames, link underlines — the single typographic ink |"
    info: "| Fog | `#b3b3b3` | `--color-fog` | Page background, watermark-level surfaces, lightest borders |"
    info: "| Ash | `#999999` | `--color-ash` | Medium-contrast borders, control outlines, and structural separators. |"

  tokens___typography:

    neue_montreal___all_structural_ui_text__top_bar_name__contact_link__filter_nav__project_labels__category_tags__weight_300_for_uppercase_nav_and_filter_items__400_for_body__500_for_active_filter__all__and_project_names__letter_spacing_opens_dramatically_at_small_sizes_0_07em_at_12px_to_give_the_nav_a_typeset__editorial_cadence_____font_neue_montreal:
      - "**Substitute:** Inter or General Sans at matching weights"
      - "**Weights:** 300, 400, 500"
      - "**Sizes:** 16px"
      - "**Line height:** 1.20 (display use), 1.50 (body use)"
      - "**Letter spacing:** 0.07em at 12px (uppercase nav), 0.02em at 16px (body), 0 at display use"
      - "**Role:** All structural UI text: top-bar name, contact link, filter nav, project labels, category tags. Weight 300 for uppercase nav and filter items, 400 for body, 500 for active filter ('All') and project names. Letter-spacing opens dramatically at small sizes (0.07em at 12px) to give the nav a typeset, editorial cadence."

    ryhmes___display_serif_used_exclusively_for_project_titles_overlaid_on_hero_imagery_e_g___recreation___brown_jordan__weight_300___the_thinnest_possible_stroke___combined_with_tight_tracking__0_03em_makes_the_text_feel_etched_into_the_photograph_rather_than_placed_on_top__this_serif_is_the_portfolio_s_only_expressive_voice__it_never_appears_in_chrome__nav__or_labels_____font_ryhmes:
      - "**Substitute:** Playfair Display or DM Serif Display at weight 300"
      - "**Weights:** 300"
      - "**Sizes:** 32px"
      - "**Line height:** 1.10"
      - "**Letter spacing:** -0.03em (tightened tracking at all sizes)"
      - "**Role:** Display serif used exclusively for project titles overlaid on hero imagery (e.g. 'recreation', 'BROWN JORDAN'). Weight 300 — the thinnest possible stroke — combined with tight tracking (-0.03em) makes the text feel etched into the photograph rather than placed on top. This serif is the portfolio's only expressive voice; it never appears in chrome, nav, or labels."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | 0.84px | `--text-caption` |"
      info: "| body | 16px | 1.5 | 0.32px | `--text-body` |"
      info: "| display | 64px | 1.1 | -1.92px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 40 | 40px | `--spacing-40` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1400px"
      - "**Section gap:** 40px"
      - "**Card padding:** 0px"
      - "**Element gap:** 12px"

  components:

    portfolio_header:
      role: "Top of page — brand mark and single contact link"

      info: "Two text elements on the white background. Left: 'KATHERINE PIHL' in Neue Montreal 300, 12px, uppercase, letter-spacing 0.07em, color Ink (#000000). Right: 'CONTACT' in the same spec. No background, no border, no hamburger, no menu bar. ~40px top/bottom padding from the page edge."

    filter_nav:
      role: "Category filter for the project grid"

      info: "Inline horizontal text row, no buttons, no pills. Three items: 'All' (Neue Montreal 500, 13px, color Ink), 'Branding' (Neue Montreal 400, 13px, color Ash #999999), 'Web Design' (same as Branding). 24px gap between items. Active state = weight change, not color change. No underline, no background, no border."

    project_image_block:
      role: "Full-bleed photographic or graphic content in the grid"

      info: "No border, no radius (0px), no shadow, no padding. Image fills its column edge-to-edge. Aspect ratio varies per project (portrait, landscape, square, solid color field). The orange block and the photographic landscapes are treated identically as 'image content'."

    project_card:
      role: "Composite unit = image + label group"

      info: "An image block stacked above a label group with 12px gap. The label group has 8px bottom margin to the next row. No card container, no border, no background — the white space between cards IS the card system. Spacing between rows: 40px."

    project_label:
      role: "Name + category text below each project image"

      two_line_stack__line_1: "project name in Neue Montreal 500, 13px, color Ink. Line 2: category ('Branding', 'Web Design', 'Branding & Web Design') in Neue Montreal 400, 13px, color Ash (#999999). 4px gap between lines. Left-aligned, not centered."

    display_title_overlay:
      role: "Large serif title set directly over hero imagery"

      info: "Ryhmes 300, ~64px, line-height 1.10, letter-spacing -0.03em, color white (#ffffff) over dark images or Ink (#000000) when it appears as project label in the grid. Positioned bottom-left or centered within the image. The thin weight over a full-bleed photograph is the portfolio's signature moment."

    date_stamp:
      role: "Small editorial annotation on hero imagery"

      info: "e.g. 'NYC 2025'. Neue Montreal 400, 12px, uppercase, letter-spacing 0.07em, color white or Ink depending on image. Positioned top-right of the image. Functions as a publication-style byline."

    text_link:
      role: "Navigational link (header 'CONTACT', filter items)"

      info: "Neue Montreal 300–400, 12–13px, uppercase, letter-spacing 0.07em, color Ink. No underline at rest; underline appears on hover via 1px Ink border-bottom. No button shape, no background."

  do_s_and_don_ts:

    do:
      - "Use the three-color palette only: #000000 for ink, #b3b3b3 for paper, #999999 for muted labels. No chromatic color anywhere in the UI."
      - "Set all images to 0px border-radius. Sharp corners are part of the gallery-wall language."
      - "Use Neue Montreal for every piece of structural text (nav, labels, body) and reserve Ryhmes exclusively for display titles overlaid on imagery."
      - "Space the grid with 40px row gaps and 24px column gaps. The white space IS the design system."
      - "Express active state through weight (500 vs 400), not color or background. 'All' is bold; the others are regular."
      - "Open letter-spacing on uppercase nav text to ~0.07em; tighten display serif to -0.03em. The two typographic temperatures must be felt at a glance."
      - "Place all color into project imagery. Let photographs and solid color blocks carry visual weight; the chrome stays quiet."

    don_t:
      - "Do not introduce any accent color, gradient, or brand hue — even a CTA blue. This system has no chromatic accent by design."
      - "Do not add card backgrounds, borders, or drop shadows to project images. The white wall is the surface."
      - "Do not use Ryhmes for nav, labels, body, or any non-display text. It is reserved for the serif moment over imagery."
      - "Do not round corners on images, buttons, or containers. Every edge is 0px."
      - "Do not use icons, buttons, or hamburger menus for navigation. Two text links is the entire nav system."
      - "Do not center-align project labels. Left-align name + category stack under the image."
      - "Do not add hover transforms, scale, or color shifts to images. A subtle opacity change is the maximum interaction feedback."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Paper | `#b3b3b3` | Page background — light, warm, barely-tinted near-white |"
    info: "| 2 | Canvas | `#ffffff` | No actual card surfaces — project images sit directly on the page background |"

  elevation:

    info: "This system uses no shadows. Elevation is expressed entirely through white-space separation and typographic weight. Cards float not by being raised but by the negative space around them."

  imagery:

    info: "Imagery is the entire color and visual system. The portfolio contains photography (product shots, landscape, editorial), solid color blocks (orange, deep blue), and graphic compositions — all treated identically as full-bleed image content with 0px radius. No icons, no illustrations, no decorative graphics outside the project images themselves. Display titles (Ryhmes 300, white or black) are overlaid on imagery at editorial scale. Images are shown at their native aspect ratio — no cropping, no masking, no color treatment. The 'icon' vocabulary is zero; the 'illustration' vocabulary is zero; the only graphic language is the photograph or block."

  layout:

    info: "Full-bleed page within a max-width ~1400px centered container. Header is a two-text-link top bar with ~40px vertical breathing room. Below: a single filter row, then a 3-column grid of project cards. Each card is image (natural aspect ratio) stacked above a 2-line label group, separated by 12px; rows are separated by 40px; columns are separated by 24px. The grid is the page — there are no other section types, no sidebars, no footers visible in the viewport. The rhythm is uniform: header → filter → row 1 → row 2 → row N. The visual weight alternates row by row only because the project images differ in tone and color — the grid skeleton is identical across all rows."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #b3b3b3 (page), #ffffff (canvas)"
    - "border: #000000"
    - "muted text: #999999"
    - "accent: none — this system has no chromatic accent"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:

    - "**Portfolio Header**: White background. Left-aligned 'KATHERINE PIHL' in Neue Montreal 300, 12px, uppercase, letter-spacing 0.07em, color #000000. Right-aligned 'CONTACT' in identical spec. 40px top/bottom padding. No border, no background."

    - "**Filter Nav**: Inline horizontal row. 'All' in Neue Montreal 500, 13px, #000000. 'Branding' and 'Web Design' in Neue Montreal 400, 13px, #999999. 24px gap between items. No buttons, no pills, no backgrounds. Active state = weight only."

    - "**Project Card**: Image block at 0px radius, full-bleed to column edges, no border, no shadow. Below: 12px gap, then 'Skinfix' in Neue Montreal 500, 13px, #000000, then 4px gap, then 'Branding' in Neue Montreal 400, 13px, #999999. Left-aligned. No card container."

    - "**Display Title Overlay**: Ryhmes 300, 64px, line-height 1.10, letter-spacing -0.03em, white #ffffff, positioned bottom-left over a full-bleed photograph at 0px radius. No background plate, no scrim — text sits directly on the image."

    - "**Project Image Block — Solid Color**: A solid #ff5a1f rectangle filling the grid column at 0px radius, identical structural treatment to a photograph. Treated as image content, not as a UI surface."

  similar_brands:

    - "**Studio Bruch** — Same gallery-wall layout: white canvas, no card borders, 3-column image grid, and project labels hanging in whitespace below images"
    - "**Locomotive (locomotive.ca)** — Same editorial-portfolio language with mixed grotesque + display-serif typography and no chromatic accent in the UI"
    - "**Anish Tailor (anishtailor.com)** — Same full-bleed image grid with 0px radius, generous row gaps, and text-only navigation — the work is the entire visual system"
    - "**Pentagram portfolio pages** — Same restrained two-font approach: a neo-grotesque for structure and a high-contrast serif used sparingly as display type over imagery"
    - "**Manual (manualcreative.com)** — Same achromatic UI with a neo-grotesque sans for nav/labels, letting project photography supply all color and atmosphere"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #000000;
          --color-fog: #b3b3b3;
          --color-ash: #999999;
        
          /* Typography — Font Families */
          --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ryhmes: 'Ryhmes', 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.84px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.32px;
          --text-display: 64px;
          --leading-display: 1.1;
          --tracking-display: -1.92px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-40: 40px;
        
          /* Layout */
          --page-max-width: 1400px;
          --section-gap: 40px;
          --card-padding: 0px;
          --element-gap: 12px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-paper: #b3b3b3;
          --surface-canvas: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #000000;
          --color-fog: #b3b3b3;
          --color-ash: #999999;
        
          /* Typography */
          --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ryhmes: 'Ryhmes', 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.84px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.32px;
          --text-display: 64px;
          --leading-display: 1.1;
          --tracking-display: -1.92px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-40: 40px;
        }