精選 · 開放 · 免費

Christopherireland

一位攝影師與導演的精緻作品集，具備嚴格的編輯式節制

PortfolioPhotographicEditorialCleanRefined

Christopherireland 網站截圖

↓ 下載設計系統包 (4 MB)在 OpenDesign 中開啟

原站: https://christopherireland.net

📦 瀏覽包內檔案 →

01

設計氣質 DNA

極簡主義編輯式攝影導演風格

將高端印刷雜誌版面轉譯至網路

02

色彩

#000000Ink

#5D5B5BInk soft

#F2F1ECBG

#BBBBBBMuted

rgba(0,0,0,1)Line

在溫潤的米白色底上嚴格使用單色墨水，無任何彩色強調

03

字型

didone-serif · geometric-sans · monospace

display96px · 400
heading63px · 400
body16px · 400

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

充裕的垂直間距，並搭配一致的 30px 標頭內距

05

表面 (圓角 / 陰影 / 邊線)

sm · 0px

md · 0px

lg · 0px

pill · 0px

一條 1px 的水平分隔線區隔標頭與內容區域

06

版面

1200container

12columns

24pxgutter

768 / 1024breakpoints

雙欄版面，左側為文字導覽，右側為大型精選圖片

07

動效與互動

200msmicro

300mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

互動狀態下平滑的背景色與透明度過渡

文字連結與類別標題上的細微過渡 · 直接導覽至相應區塊

08

組件

button 基於文字的導覽連結，懸停時帶有簡潔的底線
card 無；內容以平坦的列表呈現，搭配大型類別標題
chip 無
input 無
hero 全版寬、由字體主導的標頭，呈現攝影師姓名

09

文案語氣與禁用清單

語氣精緻、沉靜且專業
標題風格 大型全大寫或標題式的大寫字母襯線體字型
按鈕文案 內斂的文字連結

勿使用鮮豔的強調色——截圖顯示嚴格的黑白色調搭配米白色底
勿使用圓角——截圖顯示完全平坦、矩形的美學
勿使用陰影——截圖顯示無深度效果的簡潔版面
勿使用小而緊密的段落——截圖顯示充裕的留白與大型標題
勿使用裝飾性無襯線體作為標題字型——截圖使用高對比襯線體作為展示
勿使用複雜的格線覆蓋層——截圖依賴簡單的對齊與留白
避免: 鮮豔色彩
避免: 裝飾性元素
避免: 繁雜背景

10

包內真實截圖

Christopherireland — 桌面首屏（hero） — 桌面首屏（hero）

Christopherireland — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Christopherireland — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Christopherireland — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

此網站是為名為 Christopher Ireland 的攝影師與導演打造的精緻作品集。設計 DNA 建立在嚴格的編輯式節制上，使用溫潤的米白色（#F2F1EC）背景與純單色墨水（#000000、#5D5B5B）。字體是主要的表達工具，採用 Didone 襯線體作為大型展示標題，幾何無襯線體作為內文字型。版面特色在於極度充裕的留白與簡潔的雙欄結構。關鍵限制包括避免任何鮮豔的色彩強調、消除圓角或陰影以維持平坦的印刷感，以及不使用任何複雜的裝飾性 UI 元件。整體基調精緻而沉靜。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko