精選 · 開放 · 免費
Guillaumetomasi
一個藝術攝影作品集,以實驗性佈局搭配扭曲的影像元素與粗體排版。
StudioGalleryPhotographicCleanExperimental
01
設計氣質 DNA
實驗性藝術編輯攝影扭曲
一個運用數位扭曲與拼貼的數位藝術畫廊或攝影師作品集。
02
色彩
#000000Ink
#FFFFFFBG
rgba(0,0,0,1.0)Line
嚴格的單色調,所有色彩變化皆來自攝影作品。
03
字型
grotesque-sans
- display
66px · 400 - body
23px · 400 - meta
20px · 400
所有文字嚴格使用大寫。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
不對稱,帶有浮動、拼貼般的定位。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
無。元素依賴構圖與間距。
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
自由形式拼貼。影像與文字有意地重疊。
07
動效與互動
220msmicro
400mssmall
1000msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
緩慢、平滑的過渡用於內容揭示。
指標游標。 · 指標游標。
08
組件
- button 無可見元素。
- card 無可見元素。
- chip 無可見元素。
- input 無可見元素。
- hero 大型排版與浮動影像重疊,帶有數位扭曲。
09
文案語氣與禁用清單
- 語氣 藝術、抽象、極簡。
- 標題風格 粗體、大寫、片段化或詩意。
- 按鈕文案 大寫、等寬、低調。
- 不要使用基於格線的對齊——畫面截圖顯示的是自由形式拼貼佈局。
- 不要在元素上使用陰影——畫面截圖顯示的是平面構圖。
- 不要使用混合的字重——畫面截圖顯示的是統一字重(400)。
- 不要使用小寫文字——畫面截圖顯示的是全大寫文字。
- 不要使用 border-radius——畫面截圖顯示的是嚴格的矩形元素。
- 不要使用高飽和度的背景色——畫面截圖顯示的是極簡的白色背景。
- 避免: 字面描述。
- 避免: 明亮、不自然的色彩。
- 避免: 僵化的對齊。
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
將此定位為實驗性攝影作品集或藝術工作室網站。關鍵色彩是極簡的白色(#FFFFFF)與深黑色(#000000),所有色彩皆來自攝影作品本身。排版使用幾何感、大寫的 grotesque-sans 字體。關鍵的設計禁忌包括:避免使用陰影、避免圓角、避免小寫文字。佈局是自由形式、重疊的拼貼,而非僵化的格線。過渡緩慢而平滑。
en · zh-CN · zh-TW · ja · ko