# Oudolf · Design system migration spec

> Source: https://oudolf.com  ·  Curated by OpenDesign  ·  en

> This site is worth including for its innovative use of typography as a visual container for imagery.

## 1. Identity DNA

The system functions as a curated portfolio of landscape architecture projects, where the digital environment is treated with the same restraint and precision as a garden. Every element is selected and placed to create a sense of quiet, considered space, allowing the photographic work to breathe.

**One-liner:** A minimalist portfolio site for landscape architect Piet Oudolf, featuring typographic links filled with garden imagery.
**Keywords:** landscape · gardens · editorial · photography · minimal
**Analogy:** A curated portfolio of landscape architecture projects.

## 2. Color

A monochromatic gray scale forms the foundational palette, a deliberate absence of chroma that defers entirely to the photographic content. The color system is not applied; it is the neutral ground upon which the imagery is exhibited.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#808080` | body text |
| `--ink-soft` | `#808080` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--muted-soft` | `rgba(128,128,128,0.6)` | weak hint |
| `--line` | `rgba(128,128,128,0.6)` | divider |

**Color principle:** Monochromatic gray scale with photographic fills

The governing principle is subordination: the interface must never compete with the photographic subject.

## 3. Typography

Typographic voice is split between a light-weight geometric sans-serif for primary navigation and a humanist sans-serif for supporting text. The category choices prioritize clarity and quietness over distinct personality, using weight and scale to create hierarchy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.25 | 300 | -0.5px | main project list |
| body | 15px | 1.86 | 400 | 0px | footer text |
| caption | 12px | 1 | 400 | 0px | labels |

## 4. Spacing

A 4px base unit establishes a generous vertical rhythm, creating ample negative space that frames content like generous garden beds.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 60 px
- **Rhythm:** 4px base unit, generous vertical rhythm

## 5. Surfaces

Surfaces are defined by absence; the system employs flat, borderless fields with no drop shadows. Depth is implied solely through the layering of text and photographic backgrounds.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** none or subtle bottom borders on interactive elements

## 6. Layout

The skeleton is a single, wide column with generous internal padding, rejecting multi-column complexity in favor of a focused, linear reading path. This structure prioritizes the project list as the central navigational and visual element.

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

**Skeleton:** wide single-column layout with generous padding

## 7. Motion & Interaction

Motion philosophy is one of quiet emergence and disappearance, achieved through fade-in and smooth opacity transitions. The intent is to guide attention without drawing attention to the mechanism itself, like a subtle shift in light.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - fade-in on scroll
  - smooth opacity transitions

- **Hover:** image background becomes visible inside text
- **Click:** navigates to project page
- **Transition:** opacity and background-image transitions
- **Keyboard:** standard tab navigation

## 8. Voice & Don'ts

The editorial voice is quiet, refined, and professional, speaking through minimalist lowercase navigation and understated text-based calls to action. It avoids all decorative flourish, letting the work and the typography carry the message.

- **Tone:** quiet, refined, professional
- **Headline style:** minimalist, lowercase navigation
- **CTA style:** understated, text-based
- **Avoid:** loud colors / decorative elements / complex animations

### Don'ts
- ❌ don't use bright accent colors — screenshot shows a monochromatic gray palette
- ❌ don't use heavy borders or shadows — screenshot shows flat, borderless surfaces
- ❌ don't use decorative icons — screenshot shows only simple arrows and search icon
- ❌ don't use complex layouts — screenshot shows a generous single-column layout
- ❌ don't use bold typography — screenshot shows light-weight fonts throughout
- ❌ don't use gradient backgrounds — screenshot shows solid white backgrounds

The system deliberately rejects bright accents, heavy ornamentation, and complex animations, maintaining a disciplined focus on typographic and photographic fundamentals.

## System Prompt (paste into AI tool)

```
This is a minimalist portfolio site for landscape architect Piet Oudolf. The design uses a monochromatic gray palette (#808080, #FFFFFF) with generous whitespace. Typography features a light-weight geometric sans-serif for the main project list and a humanist sans-serif for body text. The layout is a generous single-column design with 60px gutters. Critical don'ts: don't use bright accent colors, don't use heavy borders or shadows, and don't use complex animations. The site is worth including for its masterful use of typography as a visual element, where text is filled with photographic garden imagery.
```
