---
name: Zaha Hadid Architects
description: "A highly distinctive and expressive architectural portfolio that defies standard UI conventions in favor of a purely visual, immersive experience."
version: alpha

colors:
  background: "#000000"
  primary: "#ffffff"
  neutral: "#d0d0d0"
  bg-soft: "#1d1d1d"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "0.05em"
  heading:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.25
    fontWeight: 700
    letterSpacing: "normal"
  body:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.23
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 2px
  md: 6px
  lg: 8px
  pill: 50px

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

---

## Overview

An immersive, photographic digital archive of a world-renowned architectural studio.

*A parametric architectural structure made interactive*

## Colors

High-contrast monochrome foundation that defers entirely to full-bleed architectural photography.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Muted (`#d0d0d0`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

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

- Strictly uppercase for primary labels and navigation links
- Light weights (300) used for the primary brand identifier to maintain an elegant, airy feel

## Layout

Freeform overlay modules positioned on top of a full-viewport photographic background

*Rhythm:* Irregular, module-based layout driven by image composition rather than strict vertical rhythm

## Elevation & Depth

- 4px 4px 8px 0px rgb(0, 0, 0)
- 0px 32px 68px 0px rgba(0, 0, 0, 0.3)
- Borders: 1px solid rgba(255, 255, 255, 0.15)

## Shapes

- `sm`: 2px
- `md`: 6px
- `lg`: 8px
- `pill`: 50px

## Components

- **button:** Transparent text link with uppercase styling and optional thin bottom border
- **card:** Semi-transparent dark overlay containing text and supporting imagery
- **input:** Simple text field with a minimal 'Go' trigger button
- **hero:** Full-viewport architectural photograph with floating, overlapping information modules

## Do's and Don'ts

**Don't:**
- don't use bright accent colors — screenshot shows a strict monochromatic palette of black, white, and grey
- don't center-align all text — screenshot shows left-aligned text in the primary content modules
- don't use heavy font weights — screenshot shows the logo at weight 300 and body text at 400
- don't use a standard grid layout — screenshot shows a freeform, overlapping modular layout over a photo
- don't use a solid background color — screenshot shows the entire background is a photographic image
- don't use large padding in content modules — screenshot shows tight padding like 6px 10px

---

## System Prompt (paste into AI agent)

```
This is a premium architectural studio portfolio site. It uses a full-viewport photographic background with dark, semi-transparent floating modules for content. The color palette is strictly monochromatic: #000000, #ffffff, and #d0d0d0. Typography is a combination of geometric-sans for display and humanist-sans for body text, mostly uppercase at a small 12px scale. Key critical donts: Do not introduce bright accent colors. Do not use a standard, uniform grid layout. Do not use heavy font weights for the primary branding. The layout is highly experimental and photographic, requiring modules to float freely over high-contrast imagery.
```