A premium streetwear catalog that feels like a cinematic lifestyle magazine.
02
Color
#333333Ink
#FFFFFFBG
#F2F2F2BG soft
#D9D9D9Muted
rgba(51, 51, 51, 1.0)Line
Strict monochrome canvas designed to retreat entirely into the background, letting vibrant, real-world photography drive the visual interest.
03
Typography
transitional-serif · humanist-sans
display28px · 300
body12px · 300
nav10px · 500
Typography is universally set to uppercase with generous tracking. · Hero headlines transition to a serif typeface to add editorial weight. · Body copy is kept extremely small (12px) to prioritize visual space for photography.
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
96px
A steady 4px base grid that utilizes generous whitespace to let full-bleed photography breathe.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 9999px
1px solid borders are the primary UI dividers, using ink or white depending on the background overlay.
06
Layout
1440container
12columns
24pxgutter
768 / 1024breakpoints
Full-bleed hero sections that transition into tight, 4-column product grids.
07
Motion & Interaction
200msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth color and transform transitions on standard hover states.
Subtle opacity shifts or background color fills on interactive elements. · Immediate state change on primary call-to-action buttons.
08
Components
buttonGhost buttons defined by sharp 1px borders and uppercase tracking, featuring zero border-radius.
cardTight, edge-to-edge image cards with zero padding or border-radius, forming a continuous visual grid.
chipN/A
inputN/A
heroMassive full-viewport cinematic imagery featuring bottom-left aligned serif text and ghost action buttons.
09
Voice & Don'ts
ToneSophisticated, confident, and lifestyle-oriented, letting the photography do the heavy lifting.
HeadlinesEditorial and season-focused (e.g., 'Kith Summer 2026'), set in a refined serif typeface.
CTAsDirect, uppercase, and utilitarian, using small geometric sans-serif text.
Don't use rounded corners on buttons — the screenshot shows sharp, rectangular 0px border-radius UI elements.
Don't use large, bold sans-serif headlines — the screenshot shows refined, lightweight serif typography for display text.
Don't use bright, saturated background colors — the screenshot shows a strict white (#FFFFFF) and off-white (#F2F2F2) UI surface.
Don't use heavy drop shadows or 3D effects — the screenshot shows flat, 2D border-based UI components.
Don't use mixed-case sentence typography — the screenshot shows strict ALL-CAPS formatting with wide tracking.
Don't use small, constrained image containers — the screenshot shows full-bleed, edge-to-edge photography that dominates the viewport.
Avoid: Avoid loud promotional language or discount-driven banners.
Avoid: Avoid rounded corners on primary UI components.
Avoid: Avoid cluttering the visual hierarchy with secondary UI elements.
Captured from the live site · real computed styles
11
System prompt
Kith is a premium streetwear brand with a photography-first, editorial aesthetic. The design system relies on a strict monochrome canvas (#FFFFFF background, #333333 ink) to let vibrant, full-bleed lifestyle photography drive the visual interest. Typography pairs a refined transitional-serif for display text with a clean humanist-sans (proxima-nova) for UI, always heavily tracked and uppercased. Critical rules: never use rounded corners (maintain sharp 0px rectangles), avoid heavy shadows or 3D effects, and always prioritize the hero image over UI chrome. Use ghost buttons with 1px solid borders for primary calls-to-action to maintain visual lightness.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
