# Zaha Hadid Architects · Design system migration spec

> Source: https://www.zaha-hadid.com  ·  Curated by OpenDesign  ·  en

> A highly distinctive and expressive architectural portfolio that defies standard UI conventions in favor of a purely visual, immersive experience.

## 1. Identity DNA

The design system for Zaha Hadid Architects translates the studio's parametric ethos into a digital interface. It operates as an interactive architectural structure, where typography and layout behave like sculptural elements suspended within a photographic void.

**One-liner:** An immersive, photographic digital archive of a world-renowned architectural studio.
**Keywords:** parametric · sculptural · futuristic · architectural
**Analogy:** A parametric architectural structure made interactive

## 2. Color

A strictly monochromatic palette of black, white, and grey establishes the foundational contrast. This restraint ensures the full-bleed architectural photography commands every composition without chromatic competition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#1d1d1d` | card background |
| `--ink` | `#ffffff` | body text |
| `--muted` | `#d0d0d0` | placeholder |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High-contrast monochrome foundation that defers entirely to full-bleed architectural photography.

The principle is absolute deferral: color exists only to frame and reveal the built work.

## 3. Typography

Typography is treated as a graphic material, set in geometric and humanist sans-serifs to complement the clean lines of the architecture. The primary voice is a light-weight uppercase, creating a formal yet airy hierarchy across scales.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 300 | 0.05em | site title / logo |
| heading | 16px | 1.25 | 700 | normal | section titles / featured project |
| body | 12px | 1.23 | 400 | normal | main content / navigation |

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

## 4. Spacing

Spacing follows an irregular, module-based rhythm dictated by the composition of the underlying photography rather than a strict vertical baseline.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Irregular, module-based layout driven by image composition rather than strict vertical rhythm

## 5. Surfaces

Depth is achieved through shadow and transparency, not solid fills. Semi-transparent dark surfaces float above the imagery, defined by subtle borders and layered shadows that create a sense of architectural overhang.

- **Radius:** sm 2px · md 6px · lg 8px · pill 50px
- **Shadows:**
  - 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)

## 6. Layout

The layout skeleton is a freeform overlay system. Modules are positioned as sculptural objects atop a full-viewport photographic background, breaking from conventional grid logic to mirror the studio's experimental forms.

- **Container max:** 1280px
- **Paragraph max:** 320px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is purposeful and architectural, using smooth transitions to reconfigure the space rather than merely decorate it. A carousel manages the photographic backdrop, while scroll-based reveals sequentially expose content layers like moving through a building.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Background image carousel with directional arrow navigation
  - Scroll-based vertical reveal of additional modules

- **Hover:** Cursor changes to pointer for all interactive elements; subtle opacity shifts on text links
- **Click:** Triggers module expansion or background transition
- **Transition:** All elements have a CSS transition applied for smooth state changes
- **Keyboard:** Standard tab navigation through interactive elements

## 8. Voice & Don'ts

The editorial voice is authoritative and visionary, matching the institution's stature. Language is minimal and formal, with headlines that are bold, uppercase, and sparse.

- **Tone:** Authoritative, visionary, and institutional
- **Headline style:** Bold, uppercase, and minimal
- **CTA style:** Understated, uppercase text links or a simple 'Go' button
- **Avoid:** Friendly or casual language / Overly descriptive or lengthy sentences / Bright, saturated color accents

### Don'ts
- ❌ 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

The system deliberately avoids friendly casualness, chromatic accents, and standard grid discipline to preserve its immersive, photographic integrity.

## System Prompt (paste into AI tool)

```
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.
```
