Neutral canvas letting vibrant photography drive the visual energy.
03
Typography
grotesque-sans
display26px · 500
body16px · 400
small14px · 400
micro12px · 400
Navigation and category labels are typically uppercase. · Headlines use mixed-case or uppercase with tight spacing. · Body copy uses standard sentence case.
04
Spacing
4px
8px
16px
20px
24px
32px
50px
A flexible 4px base grid driving consistent internal component padding and layout gaps.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Solid 1px black borders for standard interactive elements.
rgba(0, 0, 0, 0.4) 0px 4px 8px 0px
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A fluid grid system that adapts from full-bleed photography to multi-column product layouts.
07
Motion & Interaction
100msmicro
150mssmall
400msmedium
cubic-bezier(0, 1, 0.5, 1)easing
Smooth 0.15s ease-in transitions for standard UI state changes. · 0.8s cubic-bezier transitions for larger element movements.
State changes are indicated through subtle background or text color transitions. · Standard pointer interactions for interactive elements.
08
Components
buttonHigh-contrast solid blocks (typically black background with white text) without rounded corners.
cardA clean, structured layout for product displays, featuring a dominant image and minimal textual information.
inputMinimalist rectangular fields defined by a bottom border.
heroFull-bleed photographic imagery combined with large typography and a prominent call-to-action.
09
Voice & Don'ts
ToneDirect, concise, and confident.
HeadlinesShort, punchy, and often stylized with specific capitalization.
CTAsClear and urgent, frequently utilizing all-caps text.
Don't use soft, rounded corners on buttons — screenshot shows sharp, rectangular UI elements.
Don't rely on a single strong accent color — screenshot shows a predominantly monochrome palette driven by photography.
Don't use thin or script typography — screenshot shows bold, solid sans-serif typefaces.
Don't clutter the layout with excessive borders — screenshot shows clean, open space defining elements.
Don't use low-contrast text for navigation — screenshot shows stark black text on light backgrounds.
Don't use decorative drop shadows on standard UI elements — screenshot shows a flat, clean aesthetic.
Captured from the live site · real computed styles
11
System prompt
GANNI is a premium Scandinavian fashion e-commerce platform with a bold, minimalist aesthetic. The design relies heavily on high-quality, full-bleed photography set against a stark, neutral canvas of black (#000000) and off-white (#F1F1F1), with a muted gray (#686A6A) used for secondary text. The typography is exclusively a bold grotesque sans-serif, frequently using all-caps for navigation and calls-to-action. Critical constraints for replicating this design include avoiding rounded corners on buttons and inputs, ensuring sharp rectangular shapes are used throughout, and steering clear of any single dominant accent color that competes with the imagery. Always maintain a strict, clean grid with ample negative space.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
