---
name: Oudolf
description: "This site is worth including for its innovative use of typography as a visual container for imagery."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#808080"
  secondary: "#808080"
  neutral: "#808080"
  muted-soft: "rgba(128,128,128,0.6)"
  line: "rgba(128,128,128,0.6)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 60px
    lineHeight: 1.25
    fontWeight: 300
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 15px
    lineHeight: 1.86
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 60px

---

## Overview

A minimalist portfolio site for landscape architect Piet Oudolf, featuring typographic links filled with garden imagery.

*A curated portfolio of landscape architecture projects.*

## Colors

Monochromatic gray scale with photographic fills

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#808080`)** — uses `ink` token
- **Secondary text (`#808080`)** — uses `ink-soft` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(128,128,128,0.6)`)** — uses `line` token

## Typography

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

## Layout

wide single-column layout with generous padding

*Rhythm:* 4px base unit, generous vertical rhythm

## Elevation & Depth

- Borders: none or subtle bottom borders on interactive elements

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** minimal text links with bottom border
- **card:** typographic list item with background image
- **input:** hidden search field
- **hero:** typographic list of projects with photographic fills

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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