CURATED · OPEN · FREE

MVRDV

A bold, image-driven architecture studio site featuring massive typography over full-bleed project photography.

architecturestudio
MVRDV screenshot
↓ Download design system (132 MB)Open in OpenDesign

Visit: https://www.mvrdv.nl

📦 Browse pack contents →

01

Identity DNA

architectureurbanismresearchinnovativesocial

An architectural studio's portfolio showcasing large-scale structural projects and bold design concepts.

02

Color

#000000Ink
#ffffffBG
rgba(0,0,0,0.2)Line

Monochrome palette of black and white, relying entirely on photographic content for visual interest.

03

Typography

grotesque-sans

Display type is strictly uppercase and tightly tracked. · Body text is standard sentence case with normal weight. · Bold weight is reserved for specific emphasis.

04

Spacing

4px
8px
16px
24px
32px
48px
64px
96px

Generous vertical rhythm with large padding blocks (approx 56px top/bottom) for clear section separation.

05

Surfaces

sm · 4px
md · 8px
lg · 12px
pill · 999px

Thin 1px black borders used for buttons and dividers.

rgba(0,0,0,0.4) 0px 0px 2px 0px · rgba(0,0,0,0.2) 0px 0px 5px 0px

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Full-bleed hero images alternating with stark white content sections.

07

Motion & Interaction

100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth transitions for color and transform properties. · Fast opacity fades for interactions.

Immediate response with color or transform changes on a short 100-200ms timescale. · Subtle transform shifts.

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

MVRDV — 桌面首屏（hero）
桌面首屏（hero）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MVRDV — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

This is a premium architecture studio portfolio characterized by massive, bold typography and full-bleed architectural photography. The palette is strictly monochromatic, utilizing only black (#000000) and white (#ffffff) to create high contrast. The typography categories are grotesque-sans, with display text set in large, tightly tracked uppercase. Critical constraints include avoiding any color accents, avoiding rounded UI shapes, and never adding shadows to the primary layout components. The layout relies on stark alternation between photographic hero sections and clean white content blocks to convey a sense of scale and vision.

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