nathan_riley___style_reference:
  info: "> Gallery wall in a black void. A monochrome portfolio where the grid of atmospheric renders is the only color, and a single oversized serif name card anchors the center like a magazine cover floating over the work."

  theme: "light"

  info: "Nathan Riley's portfolio is a monochrome art gallery rendered as a full-bleed image mosaic — a tight grid of atmospheric 3D renders that fills every pixel, with the artist's name floating in a single pale-rose card at the center. The palette is ruthlessly reduced to three values: pure black, pure white, and a warm dark gray, so all visual energy comes from the imagery itself rather than color. Typography is custom-serif, ultra-light at display weight, and stretched to a 238px hero that dominates the center card like a magazine masthead. The system has no rounded corners, no shadows, no gradients, and no button fills — navigation is a row of small pill-shaped text chips at the bottom, and the overall feel is that of a curated exhibition catalog printed on white paper with one large editorial title."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Text, image grid gutter borders, hairline dividers, nav chip outlines — the structural ink that defines the grid structure and typography |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, nav chip backgrounds, card surface — the gallery wall behind everything |"
    info: "| Warm Charcoal | `#393939` | `--color-warm-charcoal` | Central name card surface, secondary text, soft borders — the mid-tone that makes the pale-rose card read as a distinct layer without breaking the monochrome |"
    info: "| Blush Card | `#e8c4c0` | `--color-blush-card` | Background of the central name card — the only chromatic accent, a dusty rose that warms the otherwise pure black-and-white system |"

  tokens___typography:

    font1___font1___detected_in_extracted_data_but_not_described_by_ai____font_font1:
      - "**Weights:** 300, 400"
      - "**Sizes:** 12px, 238px"
      - "**Line height:** 0.8, 1.1"
      - "**Letter spacing:** -0.04"
      - "**Role:** font1 — detected in extracted data but not described by AI"

    custom_display_serif___hero_name_display_and_small_print__the_238px_size_with_line_height_0_80_and__0_04em_tracking_creates_a_tightly_cropped_masthead_that_feels_printed__not_rendered__weight_300_at_display_size_is_the_signature___it_whispers_rather_than_shouts__giving_the_name_editorial_weight_through_restraint_rather_than_boldness__the_italic_treatment_in_the_screenshot_adds_a_calligraphic_warmth_that_contrasts_the_rigid_grid_around_it_____font_custom_display_serif:
      - "**Substitute:** GT Sectra Display, Tiempos Headline, or Domaine Display Light"
      - "**Weights:** 300, 400"
      - "**Sizes:**"
      - "**Line height:** 0.80, 1.10"
      - "**Role:** Hero name display and small print. The 238px size with line-height 0.80 and -0.04em tracking creates a tightly cropped masthead that feels printed, not rendered. Weight 300 at display size is the signature — it whispers rather than shouts, giving the name editorial weight through restraint rather than boldness. The italic treatment in the screenshot adds a calligraphic warmth that contrasts the rigid grid around it."

    custom_body_serif___body_copy__bio_description__nav_chip_text__and_link_labels__tight_line_height_1_10_at_small_sizes_creates_a_dense__catalog_like_feel__the__0_025em_tracking_tightens_the_letterforms_for_compact__refined_small_text_that_reads_as_label_or_caption_rather_than_prose_____font_custom_body_serif:
      - "**Substitute:** GT Sectra, Söhne Buch, or Publico Text"
      - "**Weights:** 400"
      - "**Sizes:**"
      - "**Line height:** 1.10"
      - "**Role:** Body copy, bio description, nav chip text, and link labels. Tight line-height 1.10 at small sizes creates a dense, catalog-like feel. The -0.025em tracking tightens the letterforms for compact, refined small text that reads as label or caption rather than prose."

    font2___font2___detected_in_extracted_data_but_not_described_by_ai____font_font2:
      - "**Weights:** 400"
      - "**Sizes:** 12px, 14px, 16px"
      - "**Line height:** 1.1"
      - "**Letter spacing:** -0.025"
      - "**Role:** font2 — detected in extracted data but not described by AI"

    ui_sans_serif___ui_sans_serif___detected_in_extracted_data_but_not_described_by_ai____font_ui_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.1"
      - "**Role:** ui-sans-serif — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.1 | -0.3px | `--text-caption` |"
      info: "| body-sm | 14px | 1.1 | -0.35px | `--text-body-sm` |"
      info: "| body | 16px | 1.1 | -0.4px | `--text-body` |"
      info: "| display | 238px | 0.8 | -9.52px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 29 | 29px | `--spacing-29` |"
      info: "| 38 | 38px | `--spacing-38` |"

    border_radius:

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

    layout:

      - "**Card padding:** 38px"
      - "**Element gap:** 6px"

  components:

    image_grid_tile:
      role: "Primary content unit — each cell of the mosaic"

      info: "A 3D-rendered image or photograph filling its grid cell edge-to-edge. No padding, no border, no radius, no shadow. Tiles abut directly with 2px black gutter lines or hairline gaps acting as the only separation. The image is the surface — no container chrome."

    central_name_card:
      role: "The artist's identity card anchored over the grid"

      info: "Fixed-position card centered on the viewport with #e8c4c0 dusty-rose background and 38px padding all sides. Contains the display serif name at 238px weight 300-400 italic, line-height 0.80, letter-spacing -0.04em. Below: a bio paragraph at 14-16px weight 400, charcoal text, tight 1.10 line-height. A small 'PROFILE >' link in monospace-style caps at 12px. No border, no shadow, no radius — the color contrast alone separates it from the image grid."

    pill_navigation_chip:
      role: "Social/contact link in the bottom bar"

      info: "White (#ffffff) background, no visible border, 9999px border-radius for a fully rounded pill shape. Text is 12-14px weight 400 in uppercase tracking, black (#000000). Chips sit in a horizontal row with 6px gap between them. No fill state, no hover color shift evident — the pill shape and size do all the work."

    profile_link:
      role: "Secondary text link inside the name card"

      info: "Small uppercase or mono-style text at 12px, likely with a '>' or arrow glyph. Functions as a tertiary navigation affordance, styled as a text label rather than a button. No underline, no color change — spatial relationship to surrounding text is the only hierarchy cue."

    masonry_grid_container:
      role: "Page-level layout structure"

      info: "Full-bleed CSS grid covering the entire viewport. No max-width constraint, no centering, no margins. Image tiles arranged in a masonry-like pattern with varying row heights to accommodate different aspect ratios. Black 2px lines or minimal gaps form the grid lattice. The grid is the page — there is no header, no footer bar, no sidebar."

    image_gutter_divider:
      role: "Hairline separation between grid cells"

      info: "2px black (#000000) lines or minimal gap between adjacent image tiles. Functions as a gallery wall mount system — thin, structural, invisible until you look for it. No decorative role, purely organizational."

    bio_description_block:
      role: "Text body inside the central name card"

      info: "14-16px custom body serif, weight 400, line-height 1.10, color #393939 or #000000. Uppercase or small-caps treatment with -0.025em tracking. Reads as a credit line or exhibition wall text — compressed, label-like, not narrative prose. Max-width constrained within the card to maintain a narrow text column beside or below the oversized name."

  do_s_and_don_ts:

    do:
      - "Use only the three neutral values plus the single dusty-rose card color — never introduce a new hue, the system is intentionally monochrome"
      - "Set display name text at 238px with line-height 0.80 and -0.04em letter-spacing to reproduce the editorial masthead effect"
      - "Use 9999px radius exclusively for nav pill chips — all other elements stay at 0px radius"
      - "Keep all image tiles edge-to-edge with no padding, no rounded corners, and no shadows — the grid is the layout, not a container"
      - "Anchor the central name card with #e8c4c0 background and 38px padding on all sides as the single non-monochrome surface"
      - "Use custom serif at weight 300-400 for all display text — never substitute a sans-serif headline, the serif is the brand"
      - "Maintain 6px gap between nav chips and 2px between image grid cells to keep spacing tight and structural"

    don_t:
      - "Do not add any new color — no blues, greens, or warm tones beyond the single blush card background"
      - "Do not use border-radius on cards, images, or content containers — only pill nav chips get radius"
      - "Do not apply shadows or elevation effects to any component — the system is flat, relying on color contrast and grid structure for depth"
      - "Do not add gradients of any kind — the palette is solid only"
      - "Do not use sans-serif for headlines or display text — the custom serif at extreme sizes is the signature element"
      - "Do not constrain the image grid with a max-width container — the grid must be full-bleed edge-to-edge"
      - "Do not add header navigation, footers, or sidebar chrome — the floating name card and bottom pill row are the entire navigation system"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#ffffff` | Full-viewport page background behind the image mosaic |"
    info: "| 2 | Image Tile | `#000000` | Image cells fill the grid; black serves as the gutter/border color between cells |"
    info: "| 3 | Blush Name Card | `#e8c4c0` | Central floating card with the artist's name — the single non-grayscale surface |"
    info: "| 4 | Nav Pill | `#ffffff` | Small pill-shaped chips in the bottom nav row |"

  imagery:

    info: "The entire site IS imagery — a dense grid of 3D-rendered atmospheric scenes: surreal garden pools, floating furniture, overgrown ruins, lavender fields, golden orbs, mountain landscapes at sunset. All renders share a cohesive mood: soft natural light, painterly atmosphere, dreamlike scale, muted natural palettes (pinks, greens, golds, blues within the art itself). The images are full-bleed, no rounded corners, no overlays, no captions — each render is a self-contained frame in the gallery wall. The photography/3D style is editorial-surreal, reminiscent of Thomas Demand or teamLab installations, where natural and architectural elements exist in impossible gentle arrangements."

  layout:

    info: "Full-bleed image mosaic covering 100% of the viewport with no page-level container. A fixed/aspected masonry grid of 3D renders tiles the entire screen edge-to-edge with hairline gaps. A single dusty-rose name card is centered in the viewport (not the page) as a floating overlay, positioned dead-center like a magazine cover pasted on a gallery wall. A horizontal row of small pill-shaped nav chips sits near the bottom of the central card. No traditional header, no footer bar, no sidebar — the image grid IS the page structure, and the centered card is the only interruption. Navigation is minimal: a bottom row of contact links inside the card."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border/gutter: #000000"
    - "accent surface (name card): #e8c4c0"
    - "secondary text: #393939"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "*Create a full-bleed image mosaic page*: white (#ffffff) canvas. CSS grid filling 100vw × 100vh with 6-8 columns of image tiles, each tile flush edge-to-edge with 2px black (#000000) gaps. No padding, no margins, no border-radius on any tile. Images fill their grid cells completely with object-fit cover."

    - "*Create the central floating name card*: 38px padding on all sides, background #e8c4c0 (dusty rose), no border, no shadow, no radius. Name text at 238px custom serif weight 300, italic, #000000, line-height 0.80, letter-spacing -0.04em. Bio paragraph below at 14px custom serif weight 400, #393939, line-height 1.10, -0.025em tracking. Small 'PROFILE >' link at 12px below bio."

    - "*Create the bottom nav row*: horizontal flex row with 6px gap between items. Each chip is a pill (9999px border-radius), white (#ffffff) background, no border, 16px horizontal padding, 2px vertical padding. Text inside is 12-14px custom serif weight 400, uppercase, #000000, letter-spacing -0.025em. Chips contain: EMAIL, TW, IG, NFTS."

    - "*Create a gallery grid image tile*: one cell of the mosaic, filling its grid area completely. The image is a 3D-rendered atmospheric scene (soft light, surreal natural/architectural composition). No border-radius, no padding, no overlay text, no shadow. The tile's edge is defined only by the 2px black gap to neighboring tiles."

  elevation_philosophy:

    info: "This design system has zero elevation. No box-shadows, no drop-shadows, no glow effects, no z-axis depth cues. The flatness is deliberate — the image mosaic already creates visual depth through the photographic content, and adding shadows would break the gallery-wall metaphor where prints are mounted flush against the wall. The single non-flat element is the floating name card, which separates from the grid not through shadow but through its unique dusty-rose color against the monochrome surroundings. Depth comes from color contrast and grid positioning, not from simulated light."

  similar_brands:

    - "**Daniel Arsham** — Same art-portfolio-as-mosaic approach with grid-based image presentation and minimal text chrome"
    - "**teamLab** — Dense image-grid portfolios with no traditional navigation, where the artwork is the layout"
    - "**James Turrell** — Minimalist artist portfolio with restrained palette where the work itself provides all visual interest"
    - "**Refik Anadol** — Full-bleed media-mosaic landing pages with a single centered identity element floating over imagery"
    - "**COS (cosstores.com)** — Same editorial restraint with custom serif display type at extreme sizes and a strictly achromatic palette"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-pure-black: #000000;
          --color-paper-white: #ffffff;
          --color-warm-charcoal: #393939;
          --color-blush-card: #e8c4c0;
        
          /* Typography — Font Families */
          --font-font1: 'font1', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-custom-display-serif: 'Custom Display Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-custom-body-serif: 'Custom Body Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-font2: 'font2', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.1;
          --tracking-caption: -0.3px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.1;
          --tracking-body-sm: -0.35px;
          --text-body: 16px;
          --leading-body: 1.1;
          --tracking-body: -0.4px;
          --text-display: 238px;
          --leading-display: 0.8;
          --tracking-display: -9.52px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-16: 16px;
          --spacing-29: 29px;
          --spacing-38: 38px;
        
          /* Layout */
          --card-padding: 38px;
          --element-gap: 6px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-image-tile: #000000;
          --surface-blush-name-card: #e8c4c0;
          --surface-nav-pill: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-pure-black: #000000;
          --color-paper-white: #ffffff;
          --color-warm-charcoal: #393939;
          --color-blush-card: #e8c4c0;
        
          /* Typography */
          --font-font1: 'font1', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-custom-display-serif: 'Custom Display Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-custom-body-serif: 'Custom Body Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-font2: 'font2', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.1;
          --tracking-caption: -0.3px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.1;
          --tracking-body-sm: -0.35px;
          --text-body: 16px;
          --leading-body: 1.1;
          --tracking-body: -0.4px;
          --text-display: 238px;
          --leading-display: 0.8;
          --tracking-display: -9.52px;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-16: 16px;
          --spacing-29: 29px;
          --spacing-38: 38px;
        }