---
name: Foster + Partners
description: "A masterclass in restrained, high-end portfolio design where the interface serves the content, not the other way around."
version: alpha

colors:
  background: "#1A1A1A"
  primary: "#FFFFFF"
  neutral: "#333333"
  bg-soft: "#333333"
  bg-quiet: "#F5F5F5"
  line: "rgba(255, 255, 255, 0.15)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 33px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 2px
  md: 4px
  lg: 8px
  pill: 25px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A minimalist, photography-driven portfolio for a world-renowned architecture practice.

*A prestigious global architecture studio presenting a visual portfolio.*

## Colors

Monochromatic dark UI with high-contrast white typography that recedes to let architectural photography dominate.

- **Background (`#1A1A1A`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#333333`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.15)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

- Headlines use sentence case to maintain a quiet, elegant tone.
- Text is predominantly white to ensure readability over dark backgrounds.
- Minimal variation in font weight keeps the interface uncluttered.

## Layout

Asymmetric grid layout that prioritizes large, immersive imagery.

*Rhythm:* Generous whitespace creates a calm, museum-like browsing experience.

## Elevation & Depth

- rgb(128, 128, 128) 0px 0px 5px 0px
- Borders: Thin, semi-transparent white borders are used for subtle separation.

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 8px
- `pill`: 25px

## Components

- **button:** Minimalist pill-shaped buttons with subtle background transparency.
- **card:** Image-heavy grid items with text overlays, often using gradient fades for legibility.
- **chip:** Small, rounded labels for categories.
- **input:** Minimal, borderless search field integrated into the header.
- **hero:** Full-viewport photographic slideshow with text anchored at the bottom.

## Do's and Don'ts

**Don't:**
- Don't use bright or neon accent colors — screenshot shows a strict monochromatic palette.
- Don't use decorative serif fonts — screenshot uses a clean humanist-sans-serif throughout.
- Don't overcrowd the UI with UI chrome — screenshot lets the architecture photography dominate.
- Don't use hard box shadows or 3D effects — screenshot relies on flat surfaces and subtle transparency.
- Don't use all-caps headlines — screenshot predominantly uses sentence case for a refined tone.
- Don't use a rigid, uniform grid — screenshot shows an asymmetric layout emphasizing visual hierarchy.

---

## System Prompt (paste into AI agent)

```
This is a high-end architectural studio portfolio. The design DNA is defined by a minimalist, photography-driven approach with a strict monochromatic dark palette (#1A1A1A bg, #FFFFFF ink, #333333 muted). Typography relies on a clean humanist-sans-serif (Open Sans) to provide a neutral, elegant voice. Layout is asymmetric, prioritizing full-bleed imagery and generous whitespace to evoke a gallery-like experience. Interactions are subtle, using soft opacity and color transitions. Key donts: never introduce high-chroma accent colors, avoid decorative serifs, do not overcrowd the UI with interface elements, avoid heavy shadows, use sentence case for headlines, and maintain an asymmetric layout. The system should feel like a prestigious, calm, and visually-led architectural archive.
```