CURATED · OPEN · FREE

Highsnobiety

A premium editorial platform for streetwear culture and fashion news.

editorialstreetwear
Highsnobiety screenshot
↓ Download design system (31 MB)Open in OpenDesign

Visit: https://www.highsnobiety.com

📦 Browse pack contents →

01

Identity DNA

editorialstreetwearpremiumcultural

A premium streetwear magazine that blends fashion, culture, and commerce.

02

Color

#263D43Accent
#000000Ink
#020202Ink soft
#FFFFFFBG
#F0F0F0BG soft
#E0E0E0BG quiet
#737373Muted
rgba(0,0,0,0.1)Line

High-contrast monochrome with muted olive/khaki accents for editorial highlights.

03

Typography

grotesque-sans

Headlines and navigation use uppercase with tight tracking. · Body text uses a comfortable line-height for reading. · Primary font is a custom grotesque sans-serif (HS Sans).

04

Spacing

4px
8px
16px
24px
32px
48px
64px
96px

Multiples of 4px for consistent vertical rhythm and padding.

05

Surfaces

sm · 4px
md · 8px
lg · 12px
pill · 999px

Thin 1px borders (bottom-heavy) using #000000 or #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

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Classic editorial grid with a prominent hero section, followed by content blocks.

07

Motion & Interaction

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth opacity transitions for overlays (2s). · Subtle transform animations for elements (1s). · Quick transitions for UI interactions (0.2s border/opacity).

Underlines appear on text links; subtle color shifts on interactive elements. · Immediate visual feedback through state changes or slight scaling.

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

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 — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

Highsnobiety is a premium streetwear and culture editorial platform. Its design DNA is rooted in a high-contrast monochrome palette, using #000000 and #FFFFFF as the primary drivers, with occasional muted accents like #263D43 and #737373. The typography is a custom grotesque sans-serif (HS Sans) used in a bold, uppercase style for headlines and navigation, with a comfortable 1.6 line-height for body text. Critical design rules: avoid any whimsical or rounded elements, never use bright or neon colors, and maintain a strict, clean editorial grid. Always prioritize large, impactful imagery and clear typographic hierarchy over decorative flourishes.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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