精選 · 開放 · 免費
Oudolf
景觀建築師 Piet Oudolf 的極簡作品集網站，以排版連結填充花園影像。
EditorialCleanPhotographicPortfolioRefined
01
設計氣質 DNA
風景花園編輯式攝影極簡
一個精選的景觀建築作品集。
02
色彩
#808080Ink
#FFFFFFBG
rgba(128,128,128,0.6)Line
單色灰階調色盤，搭配攝影圖像填充
03
字型
geometric-sans · humanist-sans
- display
60px · 300 - body
15px · 400 - caption
12px · 400
04
間距
4px
8px
16px
24px
32px
48px
60px
4px 基礎單位，寬裕的垂直節奏
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
互動元素無邊框或僅底部細線
06
版面
1280container
12columns
60pxgutter
768 / 1024breakpoints
寬版單欄佈局，內邊距寬裕
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
捲動時淡入 · 流暢的透明度過渡
文字內的背景圖像變得可見 · 導航至專案頁面
08
組件
- button 極簡文字連結，帶底部邊框
- card 帶背景圖像的排版列表項目
- input 隱藏的搜尋欄位
- hero 帶攝影圖像填充的專案排版列表
09
文案語氣與禁用清單
- 語氣 寧靜、精緻、專業
- 標題風格 極簡、小寫導航文字
- 按鈕文案 低調、純文字
- 勿使用亮色強調色——截圖顯示為單色灰階調色盤
- 勿使用粗邊框或陰影——截圖顯示為無邊框的平面表面
- 勿使用裝飾性圖示——截圖僅顯示簡潔箭頭與搜尋圖示
- 勿使用複雜佈局——截圖顯示為寬敞的單欄佈局
- 勿使用粗體字——截圖顯示整體採用輕字重字體
- 勿使用漸層背景——截圖顯示為純白背景
- 避免: 鮮豔色彩
- 避免: 裝飾性元素
- 避免: 複雜動畫
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是景觀建築師 Piet Oudolf 的極簡作品集網站。設計採用單色灰階調色盤（#808080, #FFFFFF）搭配寬裕的留白。排版方面，主要專案列表使用輕字重幾何無襯線字體，內文則使用人文主義無襯線字體。佈局為寬裕的單欄設計，搭配 60px 溝距。關鍵禁忌：勿使用亮色強調色、勿使用粗邊框或陰影、勿使用複雜動畫。此網站值得收錄，在於其對排版的純熟運用，將文字作為視覺元素，並以攝影花園影像填充文字。
en · zh-CN · zh-TW · ja · ko