精選 · 開放 · 免費
Pentagram
一個展示多元跨領域作品的精品設計機構作品集。
studiobrandingeditorial
01
設計氣質 DNA
高端設計作品集極簡主義編輯式
一個精心策劃的高端設計專案畫廊。
02
色彩
#1a1a1aInk
#767676Ink soft
#ffffffBG
#8c8c8cMuted
rgba(26, 26, 26, 1.0)Line
以高對比的黑白為基礎,搭配灰階中間調。
03
字型
grotesque-sans · humanist-sans
- display
52px · 500 - heading
32px · 400 - body
19px · 400 - small
16px · 400 - tiny
13px · 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
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Pentagram 是一個高端跨領域設計工作室作品集。設計特點是極度克制,採用單色調色盤(墨色:#1a1a1a,背景:#ffffff,柔和色:#767676),讓攝影專案作品成為焦點。字體簡潔且功能化,內文使用 humanist-sans,標題使用 grotesque-sans,字體大小範圍從 13px 到 52px。關鍵特徵包括充裕的留白、全出血影像與極簡的介面框架。關鍵設計限制:絕不使用裝飾性字體、避免鮮豔的強調色、維持大型字體比例,並保留內容區塊間明顯的垂直節奏。
en · zh-CN · zh-TW · ja · ko