julia_krantz___style_reference:
  info: "> Darkroom contact sheet — a grid of photographic tiles on pure black, identity spelled in barely-visible weight-300 letterforms."

  theme: "dark"

  info: "Julia Krantz's portfolio operates like a darkroom contact sheet — dense grid of image tiles on near-black, with stark white typography hovering over photography. The canvas is #000000, surfaces are pure darkness, and the only warmth comes from the photographic content inside each tile. Typographic restraint is extreme: ClashDisplay at weight 300 for large display initials (the abbreviated project codes 'Se', 'Fd', 'Ga') creates a barely-there identity mark, while DM Sans at weight 300 handles all body and navigation at 10-14px with wide tracking. The grid is the interface — a mosaic of image tiles with 1px solid rgba(248,248,248,0.12) borders separating them, no rounded corners anywhere, no shadows, no gradients. Color is entirely absent from the UI layer; all chromatic interest is delegated to the photography."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void | `#000000` | `--color-void` | Page canvas, all section backgrounds — the true floor of the UI; every element floats above absolute black |"
    info: "| Salt | `#f8f8f8` | `--color-salt` | All text, links, nav labels, borders, icons — the single foreground tone serving every text and UI edge function against black |"
    info: "| Ash | `#707070` | `--color-ash` | Secondary labels, muted nav text, subdued body copy — mid-tone for visual hierarchy without introducing any hue |"
    info: "| Ghost Line | `rgba(248,248,248,0.12)` | `--color-ghost-line` | Grid tile borders, dividers — rgba(248,248,248,0.12) at 12% opacity; nearly invisible structural seams |"
    info: "| Veil | `rgba(248,248,248,0.45)` | `--color-veil` | Overlay labels, secondary text on image tiles — rgba(248,248,248,0.45) at 45% opacity for text sitting over photography |"

  tokens___typography:

    dm_sans___all_body_copy__navigation_labels__press_list_items__links__captions__weight_300_across_every_size___the_site_refuses_to_bold_anything_in_this_family__keeping_the_text_layer_visually_quiet_against_photography_____font_dm_sans:
      - "**Substitute:** DM Sans (Google Fonts — same family)"
      - "**Weights:** 300"
      - "**Sizes:** 10px, 12px, 13px, 14px"
      - "**Line height:** 1.30 – 1.72"
      - "**Letter spacing:** 0.06em at small sizes (10-12px), 0.07em at 13-14px — wide tracking compensates for the light weight at small sizes"
      - "**Role:** All body copy, navigation labels, press list items, links, captions. Weight 300 across every size — the site refuses to bold anything in this family, keeping the text layer visually quiet against photography."

    clashdisplay___project_initials_on_tiles_44px_weight_300__tracking__0_04em__section_codes_and_labels_12_14px_weight_300__tracking__0_05em_to__0_14em__name_logotype__the_44px_weight_300_display_setting___a_nearly_invisible_letterform_over_a_photograph___is_the_signature_visual_move_of_the_portfolio_____font_clashdisplay:
      - "**Substitute:** Cabinet Grotesk (Fontshare) or Space Grotesk (Google Fonts)"
      - "**Weights:** 300, 500"
      - "**Sizes:** 10px, 12px, 14px, 29px, 44px"
      - "**Line height:** 1.00 at display / 1.72 at text sizes"
      - "**Letter spacing:** -0.04em at 44px display; +0.04em to +0.14em at 10-14px label sizes"
      - "**Role:** Project initials on tiles (44px weight 300, tracking -0.04em), section codes and labels (12-14px weight 300, tracking +0.05em to +0.14em), name logotype. The 44px weight-300 display setting — a nearly invisible letterform over a photograph — is the signature visual move of the portfolio."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.3 | 0.6px | `--text-caption` |"
      info: "| heading | 29px | 1 | -1.16px | `--text-heading` |"
      info: "| display | 44px | 1 | -1.76px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| tiles | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Section gap:** 30px"
      - "**Card padding:** 16px"
      - "**Element gap:** 6px"

  components:

    project_grid_tile:
      role: "Primary portfolio navigation — each tile is a cropped photograph with abbreviated project code overlaid"

      info: "Full-bleed photograph filling the tile. No border-radius (0px). Border: 1px solid rgba(248,248,248,0.12). Project code (e.g. 'Cd', 'Ga') in ClashDisplay 44px weight 300, #f8f8f8, letter-spacing -0.04em, positioned top-left with 16px padding. Sequential number ('01', '02') in DM Sans 10px weight 300, #707070, top-left above the code. Practice/category label in DM Sans 10px weight 300, tracking 0.14em, #707070 below project name. Hover: filter: brightness(0.82) transition 0.4s ease."

    name_logotype:
      role: "Primary identity mark in the top-left header"

      info: "ClashDisplay weight 500, approximately 29px, #f8f8f8, letter-spacing -0.04em. Sits against #000000 background with 16px left padding. No decoration, no logo mark — text is the entire brand."

    navigation_link:
      role: "Top-right global nav: Magic Fabric ↗, Bio, Contact"

      info: "DM Sans 12px weight 300, #f8f8f8, letter-spacing 0.06em. External links include '↗' glyph appended directly. No underline by default. Color transitions to rgba(248,248,248,0.45) on hover over 0.2s ease. No background, no border, no padding block."

    about_bio_block:
      role: "Multi-column text section with label headers"

      info: "Background #000000. Column header label (e.g. 'ABOUT', 'PRESS') in DM Sans 10px weight 300, #707070, letter-spacing 0.07em, uppercase. Body text in DM Sans 13px weight 300, #f8f8f8, line-height 1.72. Paragraph margin-bottom 3px. Column gap 20-32px. Top border: 1px solid rgba(248,248,248,0.12) separating from header."

    press_list_item:
      role: "Numbered external press links within the bio section"

      info: "DM Sans 12px weight 300, #f8f8f8. Number prefix in #707070. '↗' arrow glyph after publication name. Spacing: margin-bottom 3-4px per item. On hover: color transitions from #f8f8f8 to rgba(248,248,248,0.45) over 0.2s ease."

    email_cta_link:
      role: "Contact email in the top-right of the header, the site's only direct CTA"

      info: "DM Sans 12px weight 300, #f8f8f8. Followed by ' →' directional arrow. Letter-spacing 0.06em. Small dot indicator (8px circle, #f8f8f8) sits adjacent — likely an availability indicator. No button chrome — plain text link on black."

    section_divider:
      role: "Horizontal rule separating header from bio section and bio section from grid"

      info: "1px solid rgba(248,248,248,0.12). Full-width of container. No margin offset — content begins immediately below."

    category_label:
      role: "Small uppercase tag beneath project initials on tiles"

      info: "DM Sans 10px weight 300, #707070, letter-spacing 0.14em. Values: 'PRACTICE', 'ARCHIVE', 'BLOG'. All-caps text transform. No background, no border — pure typographic label."

    archive_year_badge:
      role: "Year label on archive tiles (e.g. '· 2009', '· 2011')"

      info: "DM Sans 10px weight 300, rgba(248,248,248,0.45). Preceded by middot separator. Inline after project title on tile."

  do_s_and_don_ts:

    do:
      - "Use #000000 for all backgrounds — the CSS token --bg: #000 is absolute; never substitute dark gray or near-black"
      - "Set all ClashDisplay display headings (44px tile codes) at weight 300 with letter-spacing -0.04em — the ultra-light setting against photography is the signature move"
      - "Apply 1px solid rgba(248,248,248,0.12) for every structural border: tile separators, section dividers, column rules"
      - "Keep all interactive hover states to color/filter transitions only — color: rgba(248,248,248,0.45) for links, filter: brightness(0.82) for image tiles, 0.2s ease"
      - "Use 0px border-radius on every element — tiles, any containers, any interactive elements. The sharp-corner rule is absolute"
      - "Maintain DM Sans weight 300 for all body, nav, and label text — no bold text anywhere in the UI layer"
      - "Express secondary hierarchy through #707070 (section labels, numbers, category tags) — never through size increases or weight changes"

    don_t:
      - "Never add any color to the UI chrome — buttons, links, labels, borders must remain in the #f8f8f8 / #707070 / rgba opacity system only"
      - "Never round corners — no border-radius on tiles, containers, or any interactive element; 0px is non-negotiable"
      - "Never use font weight above 500 — ClashDisplay 500 is the ceiling and used only for the name logotype; DM Sans stays at 300"
      - "Never add box-shadows or elevation — the design has zero shadow tokens; depth comes from contrast with the black canvas only"
      - "Never add hover backgrounds or button fills — interactive states change text opacity or image brightness only, never add a background color"
      - "Never introduce gradients, overlays, or tinted backgrounds — the CSS tokens confirm no gradient system exists; #000 is the only background"
      - "Never separate the category label from its tile project code with more than 4px margin — the tight stacking (4px marginBottom between elements) is the spatial rhythm"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Void Canvas | `#000000` | Base page background, section backgrounds, nav bar |"
    info: "| 2 | Image Tile | `#111111` | Grid project tiles — filled with photography, bordered by Ghost Line 1px |"

  elevation:

    info: "Zero shadows across the entire system. Depth is created purely by the contrast between the black canvas and photographic tile content. No box-shadow values appear anywhere; the 1px rgba(248,248,248,0.12) border is the only surface separator. Hover states use filter: brightness(0.82) — darkening the image rather than lifting the element."

  imagery:

    info: "Photography-dominant — every project grid tile is a full-bleed photographic crop: fashion portraiture, macro textile/material studies, AI-generated imagery, event photography. Photographs are raw-edged, sharp-cornered, zero border-radius. Images are not contained or padded — they fill their tile completely, edge to edge. No lifestyle staging context visible; images are treated as abstract color fields at tile scale, only readable as subjects when enlarged. Color in the UI exists exclusively within these photographs — from vivid AI-generated chromatics to desaturated fashion editorial. The photographic density IS the design: at the grid scale, the tiles form a chromatic mosaic against black. Icons: minimal use of directional glyphs ('↗', '→') inline with text, no standalone icon components. No illustrations, no 3D renders in the UI chrome."

  layout:

    info: "Full-bleed, no max-width container. Header bar spans full width: name logotype pinned left, email and nav pinned right, both at 16px horizontal padding. Bio section below header uses a multi-column horizontal layout — approximately 4-5 text columns (About, Press, Speaking, Podcasts, Links) filling full width with 20-32px column gaps. Grid section below bio: 10-column mosaic of variable-width tiles in rows, each tile filled with photography. Tiles vary in width — some span one column, some two — creating a journalistic contact-sheet rhythm. No gutters visible between tiles except the 1px Ghost Line border. Navigation is a minimal top-right inline set of 3 links. No sidebar, no sticky header. The entire page scrolls vertically with no section anchoring or visual dividers beyond the Ghost Line horizontal rule."

  agent_prompt_guide:

    quick_color_reference:
    - "Page background: #000000"
    - "Primary text / all UI elements: #f8f8f8"
    - "Secondary / muted text: #707070"
    - "Borders / dividers: rgba(248,248,248,0.12)"
    - "Overlay text on images: rgba(248,248,248,0.45)"
    - "No accent colors exist — the palette is purely achromatic"

    example_component_prompts:

    - "**Project Grid Tile**: Black background tile with full-bleed photograph. Top-left: sequential number in DM Sans 10px weight 300 #707070, then project code (e.g. 'Fd') in ClashDisplay 44px weight 300 #f8f8f8 letter-spacing -0.04em, then category label 'PRACTICE' in DM Sans 10px weight 300 #707070 letter-spacing 0.14em. All text padded 16px from edges. Border: 1px solid rgba(248,248,248,0.12). Border-radius: 0px. Hover: filter brightness(0.82) transition 0.2s ease."

    - "**Page Header**: Full-width bar, #000000 background, 16px horizontal padding, 52px height. Left: 'Julia Krantz' in ClashDisplay 29px weight 500 #f8f8f8 letter-spacing -0.04em. Right: 'julia@magicfabricblog.com →' in DM Sans 12px weight 300 #f8f8f8 with small dot indicator, then nav links 'Magic Fabric ↗', 'Bio', 'Contact' in DM Sans 12px weight 300 #f8f8f8 letter-spacing 0.06em, 32px gap between items. Bottom border: 1px solid rgba(248,248,248,0.12)."

    - "**Bio Multi-Column Section**: #000000 background, 16px padding, 5 columns with 32px gaps. Each column starts with an uppercase label ('ABOUT', 'PRESS') in DM Sans 10px weight 300 #707070 letter-spacing 0.07em, margin-bottom 4px. Body text in DM Sans 13px weight 300 #f8f8f8 line-height 1.72. Numbered list items use #707070 for the number and #f8f8f8 for the link text. External links append '↗' glyph."

    - "**Category Label / Tag**: DM Sans 10px weight 300 #707070 letter-spacing 0.14em. Uppercase. No background, no border, no padding. Values are 'PRACTICE', 'ARCHIVE', or 'BLOG'. Sits 4px below project title."

  motion_system:

    two_tier_transition_system: "fast micro-interactions at 0.2s ease for color state changes on hover (links, labels), slower content transitions at 0.4s ease for image filter changes (tile brightness). The single custom easing cubic-bezier(0.22, 0.61, 0.36, 1) is reserved for transforms — a deceleration curve suggesting controlled arrival. No entry animations, no scroll-triggered effects visible. The motion philosophy is minimal: only hover feedback, nothing decorative."

  grid_architecture:

    info: "The project grid is a mosaic with no fixed column count — tiles appear to vary in width (single-column vs double-column span) creating a contact-sheet irregularity. All tiles are flush to each other with 0px gap; the only visual separator is the 1px Ghost Line border. Tile height appears uniform within rows. Sequential numbering (01-13 visible) runs left-to-right, top-to-bottom. The grid is full-bleed with 0px page margins — tiles extend to browser edge. This flat, card-free, shadow-free grid is the dominant layout paradigm of the entire site."

  similar_brands:

    - "**Hiepler & Brunier (photographer portfolio)** — Same black-canvas grid-of-photographs approach where photography provides all color and UI chrome is pure white typography on black"
    - "**Bureau Borsche** — Identical ultra-light weight-300 display typography as identity mark, with text-only brand and no decorative UI elements"
    - "**Cargo Collective (minimal dark template)** — Same mosaic grid of full-bleed images with zero-radius tiles and typographic labels floating over photography"
    - "**Koto Studio portfolio** — Shared achromatic UI-layer philosophy where brand color is entirely absent from chrome and delegated to content imagery"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void: #000000;
          --color-salt: #f8f8f8;
          --color-ash: #707070;
          --color-ghost-line: #f8f8f8;
          --gradient-ghost-line: rgba(248,248,248,0.12);
          --color-veil: #f8f8f8;
          --gradient-veil: rgba(248,248,248,0.45);
        
          /* Typography — Font Families */
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-clashdisplay: 'ClashDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.3;
          --tracking-caption: 0.6px;
          --text-heading: 29px;
          --leading-heading: 1;
          --tracking-heading: -1.16px;
          --text-display: 44px;
          --leading-display: 1;
          --tracking-display: -1.76px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
        
          /* Layout */
          --section-gap: 30px;
          --card-padding: 16px;
          --element-gap: 6px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-tiles: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-void-canvas: #000000;
          --surface-image-tile: #111111;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void: #000000;
          --color-salt: #f8f8f8;
          --color-ash: #707070;
          --color-ghost-line: #f8f8f8;
          --color-veil: #f8f8f8;
        
          /* Typography */
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-clashdisplay: 'ClashDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.3;
          --tracking-caption: 0.6px;
          --text-heading: 29px;
          --leading-heading: 1;
          --tracking-heading: -1.16px;
          --text-display: 44px;
          --leading-display: 1;
          --tracking-display: -1.76px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
        }