精選 · 開放 · 免費
Artworld Agency
一個高對比度、以排版為主導的創意代理商作品集。
StudioAgencyPortfolioEditorialTypography
01
設計氣質 DNA
代理商編輯風格攝影創意
一個以古典排版優雅呈現的創意人才精選畫廊。
02
色彩
#000000Ink
#FFFFFFBG
#BABABAMuted
rgba(0,0,0,0.1)Line
採用嚴謹的高對比單色調,以優先呈現創意作品與排版層次。
03
字型
didone-serif · humanist-sans
- display
75px · 300 - h1
75px · 300 - body
16px · 300 - caption
12px · 300
使用 'Cardinal Fruit' (didone-serif) 作為大型展示文字與藝術家姓名。 · 使用 'Graphik' (humanist-sans) 搭配字重 300 作為內文與較小的 UI 元素。 · 嚴格保持所有排版使用單一字重 (300),以營造統一、精緻的美學。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
在排版區塊之間運用寬裕、非結構化的留白,讓文字得以舒展。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
無;區隔透過間距與排版達成。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
乾淨的單欄排版流動,並有一個錨定於底部的大型標誌。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.77, 0, 0.18, 1)easing
元素在滾動時出現的細微淡入過渡效果。 · hover 狀態時平滑的顏色過渡效果。
文字顏色從黑色過渡為白色,通常在深色背景覆蓋層上發生。 · 游標為 pointer 以表示可點擊的連結。
08
組件
- button 簡單的文字連結,游標為 pointer,依賴 hover 顏色過渡效果。
- card 無可見元素;內容以平面的排版列表呈現。
- chip 無可見元素。
- input 無可見元素。
- hero 一個錨定於視埠底部的全幅大型排版展示。
09
文案語氣與禁用清單
- 語氣 精緻、具權威感且沉靜自信。
- 標題風格 大型、古典的襯線字體,引人注目。
- 按鈕文案 極簡的文字連結,無縫融入排版之中。
- 勿使用鮮豔的強調色——截圖顯示嚴謹的黑白單色調色板
- 勿使用粗體字重——截圖顯示所有文字皆為輕體 (300)
- 勿使用 border-radius——截圖顯示純矩形、銳角的版面
- 勿使用複雜的卡片版面——截圖顯示平面的文字列表
- 勿添加裝飾性陰影——截圖顯示無任何立體或投影效果
- 勿混合多種字體——截圖純粹依賴襯線/無襯線字體的搭配
- 避免: 雜亂的版面
- 避免: 不協調的色彩
- 避免: 俏皮的 UI 元素
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Artworld Agency 是一個精緻、以排版為主導的創意作品集。其設計 DNA 建立在嚴謹的黑白單色調色板 (#000000 墨色, #FFFFFF 背景) 上,以優先呈現創意作品。排版採用顯著的 didone-serif 作為展示文字 (藝術家姓名),搭配簡潔的 humanist-sans 作為內文,兩者皆嚴格使用輕字重 (300)。關鍵設計規則:勿引入強調色,勿使用粗字重,且勿添加如陰影或圓角等裝飾元素。版面依賴寬裕的留白,並有一個錨定於頁面底部的大型排版標誌。
en · zh-CN · zh-TW · ja · ko