精選 · 開放 · 免費
Nofilter
一個乾淨、以排版為驅動力的時尚與攝影編輯平台。
EditorialCleanPremiumTypographyGallery
01
設計氣質 DNA
時尚編輯攝影極簡高級
高端時尚雜誌網站
02
色彩
#333333Ink
#FFFFFFBG
rgba(51, 51, 51, 1)Line
單色調色盤,透過高對比的白色背景黑色文字強調內容。
03
字型
grotesque-sans
- display
120px · 400 - heading
35px · 400 - body
24px · 400 - small
15px · 400
所有文字使用 pragmatica 無襯線字體。 · 導覽連結採用全大寫。 · 作者與日期行設定為較小的內文字號。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
一致的 padding 與 margin,以 4px 為基數。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
主要容器使用 1px solid rgb(51, 51, 51) 邊框。
06
版面
1400container
12columns
24pxgutter
768 / 1024breakpoints
基於網格的編輯式佈局,搭配大型視覺素材與不對稱欄位。
07
動效與互動
0msmicro
0mssmall
0msmedium
lineareasing
游標指標表示可點擊元素。 · 游標指標表示可點擊元素。
08
組件
- button 採用全大寫樣式與游標指標的文字連結。
- card 帶有大型視覺素材的文章邊框容器。
- chip 無
- input 無
- hero 橫跨寬度的大型排版標題。
09
文案語氣與禁用清單
- 語氣 權威、精緻、極簡。
- 標題風格 直接且具衝擊力,大型排版。
- 按鈕文案 低調、以文字為基礎的導覽。
- 請勿使用裝飾性字體 — 螢幕截圖顯示全篇使用 pragmatica 無襯線字體。
- 請勿添加背景漸層 — 螢幕截圖顯示純白色背景。
- 請勿在卡片上使用陰影 — 螢幕截圖顯示平面、帶邊框的容器。
- 請勿使用圓角 — 螢幕截圖顯示銳利的矩形元素。
- 請勿引入鮮豔的強調色 — 螢幕截圖顯示單色調色盤。
- 請勿以不必要的元素使佈局顯得擁擠 — 螢幕截圖顯示充足的留白。
- 避免: 請勿使用裝飾性字體。
- 避免: 請勿添加背景漸層。
- 避免: 請勿在卡片上使用陰影。
- 避免: 請勿使用圓角。
- 避免: 請勿引入鮮豔的強調色。
- 避免: 請勿以不必要的元素使佈局顯得擁擠。
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個採用極簡單色調設計的高端時尚編輯網站。設計依賴於使用 pragmatica 無襯線字體的粗體排版,以及與乾淨白色背景形成高對比的視覺素材。主要顏色為背景 #FFFFFF 與文字及邊框 #333333。關鍵禁忌:請勿使用裝飾性字體;請勿添加背景漸層;請勿在卡片上使用陰影;請勿使用圓角;請勿引入鮮豔的強調色。佈局基於網格,強調大型排版與編輯攝影。
en · zh-CN · zh-TW · ja · ko