精選 · 開放 · 免費
Hypebeast
一個大膽、具權威感的數位雜誌，聚焦於高端街頭服飾與生活風格文化。
editorialstreetwear
01
設計氣質 DNA
街頭服饰文化時尚高端編輯
高端時尚雜誌的數位門面。
02
色彩
#00469BAccent
#111111Ink
#888888Ink soft
#FFFFFFBG
#F5F5F7BG soft
rgba(238,238,238,1)Line
高對比單色調，搭配單一權威藍色點綴。
03
字型
grotesque-sans · humanist-sans
- display
48px · 700 - h3
24px · 700 - body
18px · 400 - small
12px · 500
標題使用緊湊字距與粗體字重以增強視覺衝擊。 · 內文保持簡潔易讀的人文主義風格。 · 導覽與分類標籤一律使用大寫字母。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
標準 4px 網格，搭配寬鬆 padding 以區隔內容。
05
表面 (圓角 / 陰影 / 邊線)
sm · 2px
md · 4px
lg · 0px
pill · 999px
使用細緻的淺灰色線條，謹慎地分隔內容區塊。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
不對稱多欄網格，用於建立編輯層級。
07
動效與互動
150msmicro
300mssmall
0msmedium
ease-in-outeasing
互動狀態下快速、細微的色彩過渡。
文字與圖示的細微色彩變化。 · 立即回饋，無沉重反饋效果。
08
組件
- button 極簡風格，多為文字按鈕或幽靈按鈕。
- card 以圖片為主的卡片，裝飾極簡，依賴強烈的字體排印。
- chip 簡單的大寫文字標籤，用於「遊戲」或「鞋款」等分類。
- input 簡潔的搜尋欄，帶有底部邊框。
- hero 大型、主導性的首頁橫幅區域，呈現單一主要編輯作品。
09
文案語氣與禁用清單
- 語氣 具權威感、冷靜且深諳文化脈絡。
- 標題風格 直接、大膽且具宣示性。
- 按鈕文案 內斂，通常整合為文字連結或簡潔按鈕。
- 勿使用圓角卡片——截圖顯示為直角或 2px 圓角。
- 勿在 UI 元素上使用投影——截圖為平面設計。
- 勿使用多彩漸層背景——截圖為純白色。
- 勿使用裝飾性襯線字體——截圖使用簡潔的無襯線字體類別。
- 勿將所有文字置中對齊——截圖顯示標題採用強烈的左對齊。
- 勿使用明亮的主色調按鈕——截圖僅使用單一深藍色點綴。
- 避免: 俏皮的語言
- 避免: 明亮、霓虹般的色彩
- 避免: 過多的裝飾性元素
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Hypebeast 是一個專注於街頭服飾、時尚與文化的高端數位編輯平台。其設計 DNA 以大膽的單色調色板（#FFFFFF 背景、#111111 墨色）為特徵，搭配單一權威藍色點綴（#00469B）。字體以粗體 grotesque-sans 標題與簡潔 humanist-sans 內文為主，且一律採用左對齊。關鍵設計準則包括：避免過多裝飾或明亮色彩、維持高對比以利閱讀、運用寬鬆留白讓攝影作品主導視覺。佈局採用整潔的多欄網格，透過字體與圖片配置優先建立視覺層級。核心互動效果細微，依賴快速的色彩過渡來實現 hover 狀態。
en · zh-CN · zh-TW · ja · ko