A high-fashion gallery where the product is the sculpture.
02
Color
#111111Ink
#343434Ink soft
#FFFFFFBG
#F3F4F6BG soft
#858585Muted
rgba(229,231,235,1.0)Line
Strict monochrome palette relying entirely on large-scale photography for visual interest and emotion.
03
Typography
transitional-serif · humanist-sans
display56px · 700
heading28px · 400
body16px · 400
caption12px · 400
Maintain strict hierarchy between the bold serif logotype and the clean sans-serif UI elements. · Keep line heights tight for large display text to maintain a compact, editorial feel. · Use generous tracking and uppercase styling sparingly for utility labels like 'TOP 20 BESTSELLER'.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Flexible and breathing; generous whitespace is used to elevate the product photography and maintain a premium, uncluttered feel.
A top-heavy visual layout starting with a full-width editorial hero, followed by clean, left-aligned product grids and generous vertical padding.
07
Motion & Interaction
150msmicro
220mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Subtle opacity and background-color transitions for interactive elements. · Smooth height and transform transitions for expanding menus and modals. · Subtle scale effects on hover for product cards.
Subtle background-color or opacity shifts on primary buttons and links. · Immediate feedback via state changes, maintaining a responsive feel.
08
Components
buttonHigh-contrast primary buttons with solid black backgrounds and white text; pill-shaped variants for secondary actions.
cardMinimalist product cards with large imagery, clean sans-serif typography, and minimal borders.
chipPill-shaped elements, often used for quick navigation or filtering.
inputClean text inputs with subtle bottom borders or enclosed in soft rounded containers.
heroFull-bleed, high-resolution photographic canvases that prioritize visual impact over text.
09
Voice & Don'ts
ToneSophisticated, silent, and purely visual; the design speaks through photography rather than copy.
HeadlinesBold, often serif-based, maintaining a strong editorial presence.
CTAsDirect, high-contrast, and minimalist, often using all-caps or clean sans-serif.
don't use bright neon colors — the palette is strictly monochrome (#111111, #FFFFFF, #858585).
don't clutter the UI with dense text blocks — the layout prioritizes breathing room and white space.
don't use playful or rounded sans-serif fonts — the typography is a refined transitional serif paired with a clean humanist sans.
don't add heavy drop shadows or 3D effects — surfaces are mostly flat with very subtle, soft shadows.
don't use a vibrant or high-chroma accent color — the site relies entirely on black, white, and photography for color.
don't use complex grid layouts with many columns — the structure is clean, mostly single-column or simple 12-column grids.
Captured from the live site · real computed styles
11
System prompt
Gentle Monster is a luxury eyewear e-commerce site with a stark, editorial design. The palette is strictly monochrome, using deep black (#111111) for text, white (#FFFFFF) for backgrounds, and light gray (#F3F4F6) for subtle surfaces. Typography pairs a bold transitional serif for the logotype with a clean humanist sans-serif for the UI. The layout is spacious, prioritizing large-scale photography and generous whitespace over dense information. Critical donts: never use bright or saturated accent colors; avoid cluttered, dense text layouts; do not use heavy or complex drop shadows. The site feels like a curated digital gallery, using restraint and negative space to elevate the product imagery.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
