A premium lifestyle magazine meets a high-end consumer electronics catalog.
02
Color
#000000Ink
#2E2E2EInk soft
#FFFFFFBG
#F5F5F5BG soft
#BFBFBFMuted
rgba(0,0,0,0.1)Line
High-contrast neutrals with extensive use of black and white, relying on rich, warm-toned photography to provide color.
03
Typography
grotesque-sans
display64px · 400
h148px · 400
body16px · 400
Use a clean, modern grotesque sans-serif (like the declared 'aktiv-grotesk') for all text. · Maintain a regular weight (400) for most text, with a slight increase (500) for specific emphasis. · Keep line heights tight but readable, around 1.2 for headlines and 1.3 for body text.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
A base-4 system providing consistent spacing, with significant vertical padding for large sections (e.g., 112px).
05
Surfaces
sm · 4px
md · 8px
lg · 20px
pill · 9999px
Thin, 1px borders in a light neutral gray (#BFBFBF) or solid black (#000000) for defined containers.
0 1px 3px rgba(0,0,0,0.1)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A wide, full-bleed layout with centered content containers, utilizing significant whitespace and large imagery.
07
Motion & Interaction
100msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 1, 1)easing
Fade and slide transitions for content revealing. · Smooth, quick opacity changes for hover states.
Subtle opacity changes or slight color shifts on interactive elements. · Immediate visual feedback, often through a slight scale or opacity reduction.
08
Components
buttonHighly rounded, pill-shaped buttons with a solid black or white background and contrasting text.
cardClean, minimal cards often using full-bleed lifestyle photography with overlaid text.
chipN/A in screenshots, but would follow the pill-shaped button style.
inputN/A in screenshots.
heroA massive, full-viewport cinematic image or video with a large, centered headline and a single prominent call-to-action button.
09
Voice & Don'ts
ToneConfident, premium, and lifestyle-oriented.
HeadlinesDirect, benefit-driven, and concise.
CTAsSimple, action-oriented, and clear (e.g., 'Shop all').
Don't use a cluttered or busy layout — screenshot shows generous whitespace and a single focal point.
Don't use low-contrast text — screenshot shows high-contrast white text on dark images or black text on white backgrounds.
Don't use sharp, square corners — screenshot shows highly rounded, pill-shaped buttons and some rounded containers.
Don't use a wide variety of font weights — screenshot shows a heavy reliance on a single, regular weight (400).
Don't use vibrant, neon accent colors — screenshot shows a palette driven by neutrals and the colors within lifestyle photography.
Don't use complex, multi-element hero sections — screenshot shows a single, dominant image with a minimal text overlay.
Captured from the live site · real computed styles
11
System prompt
Sonos is a premium audio brand whose website emphasizes lifestyle photography and bold, clean typography. The core palette is high-contrast black (#000000) and white (#FFFFFF), with light grays (#F5F5F5) and a single accent of black on white or vice-versa; no dominant high-chroma accent exists. The typography is a clean, modern grotesque sans-serif, used primarily in a regular weight (400). Critical design rules: 1) Prioritize large, cinematic lifestyle imagery that fills the viewport. 2) Use highly rounded, pill-shaped buttons for all primary calls to action. 3) Maintain extreme minimalism with generous whitespace and a single, focused headline per section. 4) Avoid technical clutter, multiple font weights, and vibrant accent colors that would distract from the premium, aspirational feel.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
