精選 · 開放 · 免費
Perkybros
一個乾淨、以排版為主導的事務所作品集，搭配溫暖的中性背景。
AgencyPortfolioCleanTypographyPremium
01
設計氣質 DNA
品牌塑造設計工藝雄心慣例
一個強調清晰度與大膽排版、專注於工藝的現代設計工作室作品集。
02
色彩
#1E1F20Ink
#F5F1E7BG
#9E9A91Muted
rgba(30,31,32,0.2)Line
高對比的單色調核心，搭配溫暖的米白色背景。
03
字型
geometric-sans · transitional-serif
- display
48px · 500 - headline
40px · 400 - body
18px · 400
標題使用幾何無襯線字體並以大寫呈現。 · 內文使用過渡襯線字體。 · 小型標籤使用幾何無襯線字體並以大寫呈現。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
採用一致的 4 為基準的縮放比例，建立緊密且有意義的空間關係。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
互動元素與分隔線使用細微的 1px 下方邊框。
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
靈活的格線佈局，搭配大型、非結構化的影像區域。
07
動效與互動
220msmicro
300mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
hover 時的細微顏色與背景過渡。 · 流暢的邊框顏色過渡。
連結與按鈕的標準顏色/背景過渡。 · 無可見的自訂點擊動畫。
08
組件
- button 基於文字的導覽，採用大寫樣式與細微的 hover 過渡效果。
- card 簡單的佈局，由大型影像後接文字標籤組成。
- chip 極簡的文字指示器（例如：'03 of 06'）。
- input 無可見元素。
- hero 全寬的攝影呈現，並疊加導覽功能。
09
文案語氣與禁用清單
- 語氣 專業、自信且注重工藝。
- 標題風格 直接且採用大寫。
- 按鈕文案 極簡的文字形式。
- 不要使用陰影 — 截圖顯示為完全平面的設計。
- 不要使用圓角 — 截圖顯示所有邊緣都是銳利的。
- 不要使用複雜的漸層 — 截圖顯示為實色、平面的色彩填充。
- 不要使用密集的文字佈局 — 截圖顯示寬大的邊距與大型排版。
- 不要使用鮮豔的霓虹色 — 截圖顯示柔和的土色調與高對比的單色調。
- 不要使用通用的無襯線字體作為內文 — 截圖顯示描述使用過渡襯線字體。
- 避免: 裝飾性圖案
- 避免: 圓角
- 避免: 陰影
- 避免: 漸層
- 避免: 鮮豔的霓虹色
- 避免: 密集的文字區塊
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（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
Perky Bros 是一個品牌塑造與設計事務所的作品集。它使用溫暖的米白色背景 (#F5F1E7) 和高對比的深墨色 (#1E1F20)，營造出乾淨、精緻的視覺感受。排版結合了用於大寫標題和導覽的幾何無襯線字體，以及用於內文的過渡襯線字體。佈局寬敞且基於格線，以大型攝影內容為特色。關鍵禁忌：1) 不要使用圓角；設計使用銳利的、0 半徑邊緣。2) 不要使用陰影；表面完全平整。3) 不要使用複雜的漸層；堅持使用實色填充。4) 不要使用密集的文字佈局；保持充足的 padding 與邊距。
en · zh-CN · zh-TW · ja · ko