精選 · 開放 · 免費

Highsnobiety

一個聚焦街頭服飾文化與時尚新聞的頂級編輯平台。

editorialstreetwear

Highsnobiety 網站截圖

↓ 下載設計系統包 (31 MB)在 OpenDesign 中開啟

原站: https://www.highsnobiety.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

編輯街頭服飾頂級文化

一本融合時尚、文化與商業的頂級街頭服飾雜誌。

02

色彩

#263D43Accent

#000000Ink

#020202Ink soft

#FFFFFFBG

#F0F0F0BG soft

#E0E0E0BG quiet

#737373Muted

rgba(0,0,0,0.1)Line

高對比單色調，搭配低飽和度的橄欖/卡其色作為編輯強調。

03

字型

grotesque-sans

display36px · 900
headline20px · 700
body17px · 400
caption14px · 400

標題與導覽使用大寫字母與緊湊的字距。 · 內文採用舒適的行高以利閱讀。 · 主要字體是一款自訂的 grotesque 無襯線字體 (HS Sans)。

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

以 4px 為基數，確保一致的垂直節奏與內距。

05

表面 (圓角 / 陰影 / 邊線)

sm · 4px

md · 8px

lg · 12px

pill · 999px

細緻的 1px 邊框（底部加粗），使用 #000000 或 #737373。

0px 1px 0px 0px rgba(0,0,0,1) · 0px 0px 0px 0px rgba(0,0,0,0.12) · 0px 0px 0px 0px rgba(0,0,0,0.08)

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

經典的編輯網格，設有一個突出的主視覺區域，後接內容區塊。

07

動效與互動

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

覆蓋層的平滑透明度過渡 (2s)。 · 元素的細微變換動畫 (1s)。 · 使用者介面互動的快速過渡 (0.2s 邊框/透明度)。

文字連結出現底線；互動元素有細微的色彩變化。 · 透過狀態變化或輕微縮放提供即時視覺回饋。

08

組件

button 通常極簡，常僅是帶有底線的文字，或全寬的「OK」式區塊按鈕。
card 以圖片為主的文章卡片，常包含大型主圖與下方的文字。
chip 大寫、帶有方框的標籤，如「SPRING '26 ISSUE」，並帶有邊框。
input 用於搜尋或隱私權切換的標準表單輸入欄位。
hero 全寬攝影背景，疊加大型排版文字。

09

文案語氣與禁用清單

語氣權威、冷靜、引領潮流。
標題風格 粗體、大寫、直接，常使用大規模的排版。
按鈕文案 直接且功能性的，常以簡潔文字或全寬按鈕呈現。

請勿使用明亮、霓虹色彩 — 螢幕截圖顯示的是黑、白與低飽和度大地色調的調色盤。
請勿使用裝飾性或手寫體字體 — 螢幕截圖顯示的是乾淨、粗體的 grotesque 無襯線字體。
請勿使用厚重的陰影效果 — 螢幕截圖顯示的是扁平化設計，只有細微或無陰影。
請勿使用小型、密集的文字區塊 — 螢幕截圖顯示的是寬鬆的行高與清晰的層級結構。
請勿四處使用圓角 — 螢幕截圖顯示的是銳利或僅帶極微細圓角的邊緣。
請勿使用鮮豔的漸層 — 螢幕截圖顯示的是實色區塊與攝影背景。
避免: 俏皮或異想天開的語言
避免: 過多的標點符號
避免: 柔軟、圓潤的形狀

10

包內真實截圖

Highsnobiety — 桌面首屏（hero） — 桌面首屏（hero）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Highsnobiety — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Highsnobiety 是一個頂級的街頭服飾與文化編輯平台。其設計基因植根於高對比的單色調色盤，主要使用 #000000 與 #FFFFFF，並偶爾點綴如 #263D43 與 #737373 等低飽和度的強調色。字體是一款自訂的 grotesque 無襯線字體 (HS Sans)，標題與導覽使用粗體、大寫風格，內文則採用舒適的 1.6 行高。關鍵設計規則：避免任何異想天開或圓潤的元素，絕不使用明亮或霓虹色彩，並維持嚴謹、乾淨的編輯網格。務必優先考慮大型、具衝擊力的影像與清晰的排版層級結構，而非裝飾性綴飾。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko