---
title: "Piet Oudolf design system"
variant: extended
source: https://oudolf.com/
captured_at: 2026-10-12
theme: light
industry: portfolio
generator: Design DNA (https://four.wiralomi.com/style/oudolf-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Piet Oudolf · Design System

> Garden projects rendered as a quiet typographic landscape.

**Theme:** light · **Industry:** portfolio · **Source:** https://oudolf.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Piet Oudolf’s homepage presents public and private garden projects as oversized, image-filled names on a pale, nearly white canvas. Restrained gray navigation and compact footer details keep attention on the gardens and their names.

## North star

Let oversized garden imagery live inside restrained typography, while every interface detail stays quiet and precisely secondary.

## Overview

The visual identity is built on a nearly white canvas, with a quiet gray navigation and a hairline border rather than bright brand accents. Large, light-weight project names dominate the page; garden photography appears clipped inside the letterforms, bringing varied greens and seasonal tones into the typography without turning the interface into a conventional image gallery. Small country abbreviations sit beside the names as subtle metadata. Public and private projects form two long, left-aligned bands, separated by generous white space and labeled vertically at the edge. The footer shifts to a compact multi-column arrangement for address, contact and navigation. UniversLTStd-Light carries the practical interface text, while Maison Neue Book supplies the oversized display treatment. Keep the geometry flat and the color palette restrained so the photographic letterforms provide the page’s main visual richness.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas and footer background; keeps the project typography and garden imagery visually open. |
| Soft Graphite | `#808080` | `--color-soft-graphite` | neutral | Main measured text color for navigation, headings, links and footer content. |
| Quiet Rule | `#999999` | `--color-quiet-rule` | semantic | Thin navigation divider and border detail; use sparingly rather than as a prominent frame. |
| Pale Ash | `#b3b3b3` | `--color-pale-ash` | neutral | Muted navigation and footer text, including low-priority secondary information. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#808080` (Soft Graphite) · `--color-text-muted` → `#b3b3b3` (Pale Ash) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#999999` (Quiet Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#808080` | `#ffffff` | 3.95:1 | AA-large |
| `#b3b3b3` | `#ffffff` | 2.1:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| UniversLTStd-Light | `--font-body` | webfont | 400 | Body copy, navigation, project links, metadata and footer text | Inter |
| Maison Neue Book | `--font-display` | webfont | 300 | Oversized display project names | Manrope |

- **UniversLTStd-Light:** Measured at regular weight for interface text; keep casing natural, tracking neutral and hierarchy understated.
- **Maison Neue Book:** Use a light display weight with neutral tracking; large project names carry the image-filled treatment.

### Type scale — Custom (ratio ≈ 4, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 300 | 1.25 | 0 | — | Maison Neue Book | Large project names, with garden imagery visible within the letterforms. |
| body | 15px | 400 | 1.87 | 0 | — | UniversLTStd-Light | Supporting project information and compact explanatory text. |
| caption | 12px | 400 | 2.33 | 0 | — | UniversLTStd-Light | Country abbreviations and low-priority metadata beside project names. |
| nav | 15px | 400 | 1.87 | 0 | — | UniversLTStd-Light | Brand, section navigation and utility links across the header and footer. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 3, 21, 40, 42, 60 px.
- Section rhythm 40px · element gap — · card padding — · max content width 1290px.

The page uses a broad, single-column project-list composition within the measured 1290px maximum page width. Project names align left in dense, flowing rows, with small country codes offset beside individual entries and vertical labels marking each collection. Public gardens lead, followed by private gardens, then a five-column footer. The measured section gap is 40px; preserve the spacious overall rhythm while letting the display text create tightly packed internal groupings. The header remains a slim horizontal navigation band.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is predominantly flat: no measured shadows, gradients, card surfaces or rounded component treatments. The white canvas and closely related pale section backgrounds create separation through tone and whitespace. Reserve the measured gray border for a quiet navigation hairline, and avoid adding layered panels that compete with the text-and-image effect.

## Imagery

Garden photography is treated as texture inside oversized project-name letterforms, not as a standard grid of standalone image cards. Visible colors vary naturally between foliage, flowers, stone and built settings; these are image content, not additional interface palette colors. Keep image crops close to the letter shapes and maintain readable text silhouettes. No video or decorative illustration treatment is evident.

## Components

### Top navigation

A slim white header with the Piet Oudolf wordmark, section links and a search icon; measured navigation text uses #808080 and a fine #999999 border.

### Project-name links

Oversized, left-aligned garden names form linked rows; measured link text uses #808080, while the visible photographic fill supplies the color.

### Country metadata

Small country abbreviations sit adjacent to project names in subdued gray, distinguishing location without adding a strong badge or container.

### Collection labels

Public gardens and Private gardens appear as small vertical labels along the left edge of their respective project bands.

### Footer information columns

A compact footer organizes address, contact details and navigation links into five measured columns on a white background.

### Measured component styles

- **Link** (“US High Line, High Line,”): transparent background · text #808080 · radius 0px · padding 0px · 400 15px UniversLTStd-Light
- **Navigation item** (“Piet Oudolf Projects Gardens Information”): transparent background · text #808080 · radius 0px · padding 0px · 400 15px UniversLTStd-Light

## Do

- Use a nearly white canvas and muted gray interface text.
- Make project names the primary visual element.
- Treat garden imagery as a fill within display lettering.
- Keep country codes small and secondary.
- Separate public and private project bands with generous whitespace.
- Keep the footer compact, aligned and information-led.

## Don't

- Add bright interface accent colors.
- Place project imagery in conventional rounded cards.
- Use heavy shadows, gradients or layered panels.
- Let metadata compete with the project names.
- Add decorative icons beyond restrained navigation utilities.
- Turn the quiet portfolio into a dense dashboard.

## Agent prompt

Build a new portfolio page in Piet Oudolf’s restrained editorial style. Use Gallery White (#ffffff) as the primary canvas, Soft Graphite (#808080) for main text, Pale Ash (#b3b3b3) for secondary details, and Quiet Rule (#999999) only for a subtle hairline. Set oversized garden or project names in a light display face, and use garden photography clipped into the letterforms as the main visual feature. Keep navigation slim and quiet, with small country metadata beside project names. Organize content in broad left-aligned bands with generous separation, then finish with a compact, aligned multi-column footer. Favor flat surfaces, neutral tracking and natural imagery; avoid cards, shadows, loud accents and unnecessary decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Broad single-column band of large, left-aligned project names, with small location codes and a vertical collection label. | Linked project names, Country-code context | Image-filled display text, Pale canvas, Vertical side label |
| 2 | content-feed | A second left-aligned project-name band continues the typographic list, marked by its own vertical label. | Linked project names, Separate project category | Image-filled display text, Soft pale section band, Vertical side label |
| 3 | footer | Compact five-column footer for address, contact and site navigation. | Contact information, Secondary site navigation | White background, Small gray text, Column alignment |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/oudolf-com