---
version: alpha
name: Spatial Portfolio Index Interface
description: "An architecture, photography, and studio portfolio design system for black-white project indexes, horizontal work rails, strong image fields, project metadata, and restrained scroll transitions. The system is abstracted from public Awwwards metadata for a high-scoring architecture studio case, but it does not copy that studio's logo, project names, photography, video, or exact motion."

colors:
  primary: "#000000"
  on-primary: "#FEFEFE"
  primary-hover: "#242424"
  primary-focus: "#6B6B6B"
  canvas: "#FEFEFE"
  canvas-soft: "#F3F1EC"
  ink: "#000000"
  ink-muted: "#4A4A4A"
  ink-subtle: "#777777"
  surface-card: "#FEFEFE"
  surface-muted: "#F3F1EC"
  surface-inverse: "#000000"
  inverse-ink: "#FEFEFE"
  hairline: "#D9D7D0"
  hairline-strong: "#9B9890"
  photo-warm: "#D8D2C6"
  photo-cool: "#C6CDD3"
  plan-blue: "#41566F"
  site-green: "#687A5B"
  archive-paper: "#ECE6DA"
  warning: "#A86C1D"
  danger: "#9D2D2D"
  success: "#3D744F"

typography:
  display-xl:
    fontFamily: Inter
    fontSize: 76px
    fontWeight: 620
    lineHeight: 0.95
    letterSpacing: 0
  display-lg:
    fontFamily: Inter
    fontSize: 52px
    fontWeight: 620
    lineHeight: 1
    letterSpacing: 0
  display-md:
    fontFamily: Inter
    fontSize: 38px
    fontWeight: 620
    lineHeight: 1.08
    letterSpacing: 0
  headline:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 640
    lineHeight: 1.16
    letterSpacing: 0
  title:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 680
    lineHeight: 1.22
    letterSpacing: 0
  body-lg:
    fontFamily: Inter
    fontSize: 17px
    fontWeight: 430
    lineHeight: 1.58
    letterSpacing: 0
  body:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 430
    lineHeight: 1.55
    letterSpacing: 0
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 460
    lineHeight: 1.48
    letterSpacing: 0
  caption:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 760
    lineHeight: 1.35
    letterSpacing: 0
    textTransform: uppercase
  mono:
    fontFamily: SFMono-Regular
    fontSize: 12px
    fontWeight: 520
    lineHeight: 1.45
    letterSpacing: 0

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  pill: 9999px

spacing:
  base: 8px
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 64px
  section: 104px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: 11px 16px
  button-secondary:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: 11px 16px
  project-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 12px
  project-meta-chip:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 7px 10px
  horizontal-rail:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: 0
  detail-panel:
    backgroundColor: "{colors.surface-inverse}"
    textColor: "{colors.inverse-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 24px
  archive-table:
    backgroundColor: "{colors.archive-paper}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: 12px

motion:
  rail-scroll:
    purpose: "Move through a bounded set of projects while preserving project titles, progress, arrows, and keyboard navigation."
    properties: "transform, scroll-snap, opacity"
    duration: "220ms to 520ms"
    fallback: "Use a vertical project stack with the same metadata and explicit pagination."
  project-reveal:
    purpose: "Reveal the selected project's location, year, discipline, and detail path."
    properties: "opacity, transform, clip-path"
    duration: "180ms to 420ms"
  detail-transition:
    purpose: "Connect index selection to a detail panel without hiding navigation."
    fallback: "Use a direct anchor jump or route transition with no scroll hijack."

layout:
  hero: "First viewport shows the studio name or portfolio category, selected project, metadata, and at least one visible route into the archive or project detail."
  grid: "12-column desktop grid, 6-column tablet grid, single-column mobile stack. Rails use fixed card widths and expose a partial next item."
  density: "Low-chrome visual field, but high information clarity: project number, name, place, year, type, service, and detail status remain scan-visible."
  media: "Use licensed photography, generated architectural placeholders, project diagrams, floor-plan abstractions, or real owned project images. Do not copy case-study imagery."

guidance:
  do:
    - "Make project indexing visible in the first viewport: number, title, location, year, service, and status."
    - "Use black and white as structural polarity, then add warm paper, plan blue, and site green for functional evidence."
    - "Constrain horizontal scrolling to portfolios, galleries, and archive rails with arrows, progress, partial next item, and keyboard paths."
    - "Give every image-led section a text fallback that explains the selected project."
  dont:
    - "Do not use horizontal scrolling for long-form reading, pricing, forms, legal text, or dense documentation."
    - "Do not copy the source studio's logo, photography, videos, project names, or exact motion."
    - "Do not make a black-white landing poster without a working project index."
    - "Do not hide navigation behind scroll hijacking or cursor-only interactions."

caseStudy:
  source: "Awwwards Nine To Five Site of the Day listing, April 8 2026"
  url: "https://www.awwwards.com/sites/nine-to-five"
  analysis: "The public Awwwards page lists Nine To Five as a Site of the Day architecture and design studio case with a 7.52 score, a #000000 and #FEFEFE palette, elements for About, Homepage Scroll, and Project Detail, and tags including Architecture, Photography, Clean, Flat Design, Gallery, Content architecture, GSAP, Vue.js, and Nuxt.js. This resource extracts the reusable pattern: black-white portfolio polarity, horizontal project browsing, image-led archive rhythm, and content architecture for project details."
---

# Spatial Portfolio Index Interface

Use this design system for architecture studios, interior design practices, photography portfolios, spatial brands, property project libraries, and editorial archives where the work itself must be visible, searchable, and inspectable.

The system turns black-white minimalism into a usable portfolio structure. It pairs severe monochrome contrast with warm paper surfaces, project metadata, bounded horizontal rails, selected-work detail panels, and calm scroll transitions. The first screen should never be only a mood image; it should show what project is selected, where it is, when it happened, what discipline it belongs to, and how to open the detail view.

## Overview

The core idea is a project index with spatial presence. Architecture and photography sites often use large imagery, sparse typography, and horizontal movement, but those choices only work when the interface still exposes orientation. Users should always understand the current project, the next project, and the route back to the archive.

Use the style when the content set is finite, curated, and image-led. It is strongest for 6 to 40 projects with strong names, locations, years, and categories. For text-heavy knowledge bases, pricing pages, onboarding, forms, or legal content, use the monochrome typography and metadata language but switch to vertical navigation.

## Colors

### Monochrome Polarity

- `primary`, `ink`, and `surface-inverse` are pure black. Use them for the main project index, primary actions, detail panels, and high-contrast caption bars.
- `canvas`, `on-primary`, and `inverse-ink` are near-white. They keep the system crisp without the glare of layered cool grays.
- `primary-hover` and `primary-focus` provide visible interactive states. Do not rely on subtle opacity alone.

### Spatial Neutrals

- `canvas-soft`, `photo-warm`, and `archive-paper` create quiet warmth for plans, captions, and archive tables.
- `photo-cool` supports photographic placeholders, empty project states, and image skeletons.
- `hairline` and `hairline-strong` are the main structure. Use 1px lines for frames, rails, dividers, and metadata tables.

### Evidence Accents

- `plan-blue` marks drawings, floor plans, diagrams, and technical project evidence.
- `site-green` marks landscape, sustainability, material provenance, or environmental attributes.
- `warning`, `danger`, and `success` are functional states only.

## Typography

Use Inter or a comparable neo-grotesk for the full system. The tone is precise and contemporary, with no decorative serif layer.

- `display-xl` is for studio, archive, or selected-project names only. Keep line height tight and letter spacing at `0`.
- `display-lg` and `display-md` are for section heads and project-detail titles.
- `title`, `body`, and `body-sm` carry metadata, cards, captions, and panels.
- `caption` is uppercase by role, not by decoration. Use it for project numbers, status, discipline, and rail controls.
- `mono` is reserved for measurements, coordinates, project IDs, timestamps, and technical labels.

## Layout

The first viewport should be a portfolio work surface, not a marketing hero. A strong default structure is:

1. Top navigation with studio identity, archive routes, and one contact action.
2. Split hero with selected-project metadata on one side and image or plan field on the other.
3. Bounded horizontal rail beneath or beside the selected project, with the next item partially visible.
4. A detail panel or archive table visible below the fold to prove the page has depth.

Use a 12-column desktop grid. A common composition is 5 columns for index and metadata, 7 columns for image and rail. On tablet, keep the selected project above the rail. On mobile, collapse the rail into a vertical stack because horizontal scroll becomes too easy to miss and too hard to compare.

Horizontal layout is appropriate for portfolio rails, gallery sequences, moodboard thumbnails, and project archives where each item is similarly sized. It is not appropriate for long reading, dense product comparison, forms, settings, or documentation.

## Elevation & Depth

Depth should come from overlap, cropping, image scale, and contrast rather than shadows. The default surface stack is flat:

- 1px hairlines define the archive grid and project panels.
- Inverse panels can sit on the light canvas with no shadow.
- Image fields may crop into adjacent columns, but text must never overlap unreadably.
- If elevation is needed for overlays, use a small shadow under 16px blur and keep it rare.

The system should feel like a gallery table, plan wall, or studio archive: physical enough to organize work, restrained enough to keep attention on the projects.

## Shapes

Use square or near-square geometry. `rounded.none`, `xs`, `sm`, and `md` are the default. `lg` is allowed for media cards when it matches the rest of the app. `pill` is reserved for compact metadata chips and progress indicators.

Avoid soft decorative blobs, large capsule sections, or oversized rounded containers. The visual language is architectural: edges, frames, columns, crops, and rails.

## Components

### Buttons

Primary buttons are black with near-white text. They should be compact, direct, and placed near a project action such as "Open project", "View archive", or "Request portfolio". Secondary buttons are outlined or white-filled with a hairline.

### Project Cards

Project cards have stable dimensions. Each card needs a visual field, project number, title, location, year, and one discipline tag. Hover or focus can reveal a short detail, but the basic identity must remain visible at rest.

### Horizontal Rail

Rails must be bounded. Always include:

- Visible previous and next controls.
- A progress count such as `03 / 12`.
- A partial next item on desktop.
- Scroll snap or equivalent stable positioning.
- Keyboard and reduced-motion support.
- Mobile vertical fallback.

### Detail Panel

The detail panel uses inverse color to create a decisive reading zone. Include project facts, services, selected image count, and a clear "open detail" path. It should not replace the archive; it confirms the selected project and gives a next step.

### Archive Table

Archive tables are useful when a portfolio has many projects. Keep rows tight: number, project, place, year, type, status. On mobile, convert rows into stacked project summaries.

## Do's and Don'ts

Do make the first viewport informative: selected work, project rail, metadata, and detail route.

Do use monochrome as an ordering system. Black is for action, index, and inversion; white is for viewing; warm paper is for archive and notes.

Do make horizontal motion purposeful and bounded. It should help users browse a finite set of visual works, not trap them in a scroll performance demo.

Do use owned, licensed, generated, or abstract project visuals. Plans, section drawings, material crops, and spatial silhouettes can work when real photography is unavailable.

Don't copy source case photography, studio names, project names, logos, video, cursor behavior, or exact transitions.

Don't hide project facts behind hover-only behavior. Touch and keyboard users need the same information.

Don't use the pattern for reading-heavy pages unless the main content remains vertical.

Don't let large images push navigation, progress, or metadata out of the first viewport.

## Responsive Behavior

Desktop can use a horizontal rail with a partial next card and side-by-side selected detail. Use stable widths such as `clamp(260px, 28vw, 420px)` for rail cards and prevent hover states from resizing the rail.

Tablet should keep the selected project image and metadata together, then place rail controls below. Avoid two independent scroll areas.

Mobile should convert the rail into stacked cards with clear project numbers and a sticky or repeated route back to the archive. If horizontal thumbnails remain, they should be secondary, not the only navigation path.

Respect `prefers-reduced-motion`. Replace scroll-scrubbed transitions with static section entrances, direct route changes, and visible progress text.

## Iteration Guide

Start by mapping the project metadata. Before choosing layout, list the fields users need to compare: place, year, discipline, area, service, client type, material, status, image count, and awards. The strongest visual system will fail if the archive data is thin.

Next, choose the browsing model. Use a horizontal rail only when the work set is curated and image-led. Use archive tables or filtered grids when the set is large or comparison-heavy.

Then define image policy. Real project images are ideal, but generated placeholders, plan abstractions, silhouettes, and material crops can support early prototypes. Keep placeholder style distinct from final photography so teams do not mistake mock visuals for real assets.

Finally, test first-viewport comprehension. A reviewer should be able to answer: What project is selected? Where is it? What type of work is it? How do I see the next project? How do I open the detail page?

## Known Gaps

This resource does not provide production photography, maps, floor plans, or studio identity assets. It describes the interface grammar for organizing such content.

The black-white palette can become severe for consumer lifestyle brands. Add warmer neutrals, material colors, or editorial imagery when the brand needs more softness.

Horizontal rails require careful implementation. Validate keyboard access, focus visibility, reduced-motion behavior, scroll snapping, and mobile fallback before using the pattern in production.