CURATED · OPEN · FREE

Hypebeast

A bold, authoritative digital magazine for premium streetwear and lifestyle culture.

editorialstreetwear

↓ Download design system (21 MB)Open in OpenDesign

Visit: https://hypebeast.com

📦 Browse pack contents →

Identity DNA

streetwearculturefashionpremiumeditorial

A high-end fashion magazine's digital front door.

Color

#00469BAccent

#111111Ink

#888888Ink soft

#FFFFFFBG

#F5F5F7BG soft

rgba(238,238,238,1)Line

High-contrast monochrome with a single authoritative blue accent.

Typography

grotesque-sans · humanist-sans

display48px · 700
h324px · 700
body18px · 400
small12px · 500

Headlines use tight letter-spacing and heavy weight for impact. · Body text maintains a clean, readable humanist style. · Navigation and category labels are consistently uppercase.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Standard 4px grid with generous padding for content separation.

Surfaces

sm · 2px

md · 4px

lg · 0px

pill · 999px

Thin, light gray lines used sparingly to separate content sections.

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Asymmetric multi-column grid for editorial hierarchy.

Motion & Interaction

150msmicro

300mssmall

0msmedium

ease-in-outeasing

Quick, subtle color transitions for interactive states.

Subtle color change for text and icons. · Immediate response, no heavy feedback.

Components

button Minimalist, often text-based or ghost buttons.
card Image-heavy cards with minimal decoration, relying on strong typography.
chip Simple uppercase text labels for categories like 'Gaming' or 'Footwear'.
input Clean search bar with a bottom border.
hero Large, dominant hero section featuring a single major editorial piece.

Voice & Don'ts

Tone Authoritative, cool, and culturally savvy.
Headlines Direct, bold, and declarative.
CTAs Understated, often integrated as text links or simple buttons.

Don't use rounded corners on cards — screenshot shows sharp or 2px radius corners.
Don't use drop shadows on UI elements — screenshot shows flat design.
Don't use a multi-colored gradient background — screenshot shows solid white.
Don't use decorative serif fonts — screenshot uses clean sans-serif categories.
Don't center-align all text — screenshot uses strong left alignment for headlines.
Don't use bright primary colors for buttons — screenshot uses a single deep blue accent.
Avoid: Playful language
Avoid: Bright, neon colors
Avoid: Excessive decorative elements

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Hypebeast is a premium digital editorial platform focusing on streetwear, fashion, and culture. Its design DNA is characterized by a bold, monochromatic palette (#FFFFFF background, #111111 ink) with a single authoritative blue accent (#00469B). Typography is dominated by heavy grotesque-sans for headlines and clean humanist-sans for body text, all consistently left-aligned. Critical design rules include: avoid excessive decoration or bright colors, maintain high contrast for readability, and use generous white space to let photography dominate. The layout is a clean, multi-column grid that prioritizes visual hierarchy through typography and image placement. Key interactions are subtle, relying on quick color transitions for hover states.

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