CURATED · OPEN · FREE

Zaha Hadid Architects

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

architecturestudio

↓ Download design system (11 MB)Open in OpenDesign

Visit: https://www.zaha-hadid.com

📦 Browse pack contents →

Identity DNA

parametricsculpturalfuturisticarchitectural

A parametric architectural structure made interactive

Color

#ffffffInk

#000000BG

#1d1d1dBG soft

#d0d0d0Muted

rgba(0, 0, 0, 0.1)Line

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

Typography

geometric-sans · humanist-sans

display48px · 300
heading16px · 700
body12px · 400

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 2px

md · 6px

lg · 8px

pill · 50px

1px solid rgba(255, 255, 255, 0.15)

4px 4px 8px 0px rgb(0, 0, 0) · 0px 32px 68px 0px rgba(0, 0, 0, 0.3)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Background image carousel with directional arrow navigation · Scroll-based vertical reveal of additional modules

Cursor changes to pointer for all interactive elements; subtle opacity shifts on text links · Triggers module expansion or background transition

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

Voice & Don'ts

Tone Authoritative, visionary, and institutional
Headlines Bold, uppercase, and minimal
CTAs Understated, uppercase text links or a simple 'Go' button

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
Avoid: Friendly or casual language
Avoid: Overly descriptive or lengthy sentences
Avoid: Bright, saturated color accents

Inside the pack — real screenshots

Zaha Hadid Architects — 桌面首屏（hero） — 桌面首屏（hero）

Zaha Hadid Architects — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko