精選 · 開放 · 免費

Pentagram

一個展示多元跨領域作品的精品設計機構作品集。

studiobrandingeditorial

Pentagram 網站截圖

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

原站: https://pentagram.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

高端設計作品集極簡主義編輯式

一個精心策劃的高端設計專案畫廊。

02

色彩

#1a1a1aInk

#767676Ink soft

#ffffffBG

#8c8c8cMuted

rgba(26, 26, 26, 1.0)Line

以高對比的黑白為基礎，搭配灰階中間調。

03

字型

grotesque-sans · humanist-sans

display52px · 500
heading32px · 400
body19px · 400
small16px · 400
tiny13px · 400

04

間距

4px

8px

12px

16px

24px

32px

48px

64px

96px

一致的 4px 基準，區段之間保留充裕的留白。

05

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

sm · 4px

md · 8px

lg · 0px

pill · 9999px

無可見邊框；透過間距與背景色變化實現區隔。

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

全出血主視覺圖片，後接結構化的網格區段。

07

動效與互動

150msmicro

300mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

UI 元素採用平滑的透明度與變形過渡。 · 懸停時有細微的縮放或淡入淡出。

文字連結有細微顏色變化或底線；互動元素有輕微縮放或聚焦效果。 · 即時回應，搭配平滑過渡。

08

組件

button 簡約的文字導覽連結，帶有底線懸停效果。
card 大型攝影專案卡片，搭配極簡的文字覆蓋。
hero 全寬攝影幻燈片，配有大型字體覆蓋層與描述性中繼資料。

09

文案語氣與禁用清單

語氣權威、專業且自信。
標題風格 大型、簡潔且直接的字體陳述。
按鈕文案 細膩的文字型行動呼籲，常整合於導覽或描述區塊中。

不要使用多色調色盤——截圖顯示為嚴格的單色方案，由攝影提供色彩。
不要使用裝飾性或手寫字體——截圖顯示為簡潔、功能性的 grotesque-sans 字體。
不要使用陰影或複雜漸層——截圖顯示為平面設計，透過空間實現清晰區隔。
不要使用擁擠的佈局與過小的間距——截圖顯示有充裕的留白與清晰的層次。
不要在主要容器上使用圓角——截圖顯示為銳利、矩形的專案卡片。
不要使用粗體、飽和的強調色——截圖顯示所有色彩趣味皆來自攝影內容。
避免: 俏皮的語言
避免: 鮮豔的色彩
避免: 裝飾性元素

10

包內真實截圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Pentagram — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Pentagram 是一個高端跨領域設計工作室作品集。設計特點是極度克制，採用單色調色盤（墨色：#1a1a1a，背景：#ffffff，柔和色：#767676），讓攝影專案作品成為焦點。字體簡潔且功能化，內文使用 humanist-sans，標題使用 grotesque-sans，字體大小範圍從 13px 到 52px。關鍵特徵包括充裕的留白、全出血影像與極簡的介面框架。關鍵設計限制：絕不使用裝飾性字體、避免鮮豔的強調色、維持大型字體比例，並保留內容區塊間明顯的垂直節奏。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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