CURATED · OPEN · FREE

Represent

A minimalist, bold fashion editorial site focused on strong typography and full-bleed photography.

fashionstreetwear

↓ Download design system (3 MB)Open in OpenDesign

Visit: https://representclo.com

📦 Browse pack contents →

Identity DNA

streetwearpremiumminimalboldeditorial

A high-end streetwear lookbook presented as a clean, editorial magazine.

Color

#AE0200Accent

#000000Ink

#575757Ink soft

#F7F7F7BG

#C7C7C7Muted

rgba(0,0,0,0.1)Line

High-contrast monochrome with a singular deep red accent for emphasis.

Typography

grotesque-sans

display48px · 700
h232px · 600
body16px · 400
caption12px · 400

Use uppercase for navigation, tags, and secondary UI elements. · Maintain tight tracking for large display typography.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

80px

96px

8px base with 4px micro-steps for tight UI elements.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 9999px

1px solid rgba(0,0,0,0.1)

rgba(0, 0, 0, 0.3) 0px 0px 24px 0px

Layout

1440container

12columns

24pxgutter

768 / 1024breakpoints

Full-bleed photography with overlaid text, transitioning to a clean grid for product listings.

Motion & Interaction

200msmicro

300mssmall

500msmedium

ease-in-outeasing

Smooth opacity and transform transitions on hover and scroll. · Subtle fading for image transitions.

Subtle opacity changes or slight scaling on interactive elements. · Immediate visual feedback via transition effects.

Components

button Solid black rectangular buttons with white uppercase text, occasionally with pill-shaped variants.
card Clean product cards with no borders, focusing on imagery.
chip Uppercase, bold text chips for filtering.
input Minimalist inputs with a 1px solid bottom border.
hero Full-screen, high-impact photographic hero with overlaid typography.

Voice & Don'ts

Tone Minimal, direct, and premium.
Headlines Bold, uppercase, and condensed.
CTAs Action-oriented, uppercase, and highly visible.

Don't use decorative fonts — screenshot shows a strict reliance on bold grotesque sans-serifs.
Don't use rounded corners on primary UI elements — screenshot shows sharp, rectangular edges.
Don't use a multi-color palette — screenshot shows a strict monochrome base with a single red accent.
Don't use subtle drop shadows on cards — screenshot shows flat surfaces or very heavy, specific shadows.
Don't use mixed case in primary navigation — screenshot shows exclusive use of uppercase for UI labels.
Don't use soft, pastel backgrounds — screenshot shows a stark white or light gray (#F7F7F7) base.
Avoid: Cursive fonts
Avoid: Loud gradients
Avoid: Cluttered layouts

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a premium streetwear fashion site that utilizes a minimalist editorial aesthetic. The design DNA is rooted in high-contrast monochrome (black #000000 on white #F7F7F7) with bold, uppercase grotesque-sans typography (STKBureau). The layout relies heavily on full-bleed photographic heroes and a structured 12-column grid. Key accent is a deep red (#AE0200). Critical donts: do not use rounded corners on primary elements, do not introduce decorative or script fonts, and do not use a multi-color palette. The overall feel is clean, bold, and highly restrained.

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