精選 · 開放 · 免費
Snogproductions
以大膽、影像為主的創意製作工作室作品集，特色為巨大的紅色標誌字型與混亂的專案視覺畫廊。
StudioPhotographicBold TypographyPortfolioPremium
01
設計氣質 DNA
創意工作室製作大膽畫廊
高端創意製作工作室的作品集
02
色彩
#EE242FAccent
#000000Ink
#FFFFFFBG
rgba(238, 36, 47, 1)Line
純白背景作為中性畫布，襯托單一高飽和紅色強調色與豐富的彩色影像。
03
字型
condensed-grotesque · grotesque-sans
- display
172px · 700 - body
14px · 700
導覽文字統一採用大寫與粗體 · 展示用標誌字型主導佈局頂部 · 字型層級極簡，主要只有標誌字型與連結
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
不規則畫廊佈局仰賴大面積留白，而非嚴格的網格系統。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 200px
無結構性邊框，僅影像內容與備註中提到的 1px 邊框寬度規則。
06
版面
12columns
24pxgutter
768 / 1024breakpoints
不對稱的分散式畫廊，不同尺寸的影像相互重疊並浮現於白色背景上。
07
動效與互動
50msmicro
50mssmall
50msmedium
lineareasing
元素採用極簡、近乎即時的 0.05 秒過渡
互動元素上游標變為指標 · 標準連結導覽
08
組件
- button 純文字大寫連結，游標顯示為指標
- card 邊對邊的專案影像，無內距或邊框
- hero 巨大的紅色字型疊加於垂直排列的專案海報畫廊上。
09
文案語氣與禁用清單
- 語氣 自信、大膽、直接
- 標題風格 巨大、緊縮、大寫的標誌字型
- 按鈕文案 簡潔的大寫文字連結
- 勿使用柔和或粉彩色調——截圖顯示為純白背景搭配單一粗體紅色強調
- 勿將所有內容對稱置中——截圖顯示為不對稱的分散式畫廊佈局
- 勿使用纖細、精緻的字型——截圖顯示為巨大、超粗體的緊縮標誌字型
- 勿為影像卡片添加內距或邊框——截圖顯示影像邊對邊或自由浮現
- 勿實作緩慢、大幅度的動畫——截圖事實顯示為快速的 0.05 秒過渡
- 勿依賴複雜的 UI 元件——截圖僅顯示文字連結與浮現的專案影像
- 避免: 細膩動畫
- 避免: 柔和色調
- 避免: 置中對稱佈局
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此網站為一個以極端視覺自信定義的創意製作工作室作品集。使用純白背景（#FFFFFF）作為畫布，搭配巨大的超粗體紅色緊縮標誌字型（#EE242F）與具衝擊力的分散式專案影像畫廊。字型以展示用字型（Druk）172.8px 為主，導覽則採用次要 grotesque sans（GT Zirkon）14px 大寫。關鍵色彩嚴格限於紅色（#EE242F）與黑色（#000000）搭配白色背景。重要禁忌：1）勿使用如陰影或邊框等細膩 UI 元件，因佈局仰賴原始、浮現的攝影。2）勿對稱排列內容，因分散式畫廊為刻意不對稱設計。3）勿使用長而流暢的動畫，因互動模型依賴近乎即時的 0.05 秒過渡。
en · zh-CN · zh-TW · ja · ko