A high-end editorial spread for a boutique candle brand.
02
Color
#dec39dAccent
#000000Ink
#ffffffBG
#f7f7f7BG soft
#808080Muted
rgba(0,0,0,0.5)Line
A restrained, monochromatic base with warm photographic tones and a soft sandy accent.
03
Typography
transitional-serif · humanist-sans
display56px · 200
h132px · 200
body20px · 100
small13px · 300
Use transitional-serif for all large-scale display copy. · Use humanist-sans for navigation, buttons, and functional UI elements. · Maintain very light font weights (100-300) across all text. · Apply uniform 0.5px letter-spacing to improve readability.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Spacious, asymmetric layouts with generous whitespace between elements.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Minimal borders; use 1px solid rgba(0,0,0,0.5) for subtle separation.
06
Layout
1440container
12columns
24pxgutter
768 / 1024breakpoints
Full-bleed hero images followed by single-column text sections.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.2, 0, 0.1, 1)easing
Gentle opacity and position fades on page load. · Smooth hover transitions on text links.
Subtle opacity change or underline appearance. · Immediate visual feedback via state change.
08
Components
buttonMinimalist text links with a 1px bottom border.
cardClean photographic cards with no background or border.
chipSmall uppercase sans-serif labels.
inputClean sans-serif inputs with subtle bottom borders.
heroFull-bleed photographic hero with large serif text overlay.
09
Voice & Don'ts
TonePoetic, evocative, and calm.
HeadlinesEvocative serif sentences that set a mood.
CTAsSimple, direct text links with a bottom border.
Don't use bold weights for body text — screenshot shows very thin, light weights (100-300) instead.
Don't add heavy drop shadows to UI elements — screenshot shows completely flat surfaces.
Don't use rounded corners on components — screenshot shows sharp, 0px radius edges.
Don't use a dark mode — screenshot shows a predominantly white and light background.
Don't use high-chroma, saturated accent colors — screenshot shows a muted, earthy tan accent.
Don't crowd the layout with elements — screenshot shows generous whitespace and minimalist arrangement.
Captured from the live site · real computed styles
11
System prompt
Design a premium, editorial e-commerce experience for a boutique candle brand. The aesthetic is minimal and refined, using a monochromatic black-and-white base with warm photographic tones. Typography should be very light (transitional-serif for headlines, humanist-sans for UI) with uniform 0.5px letter-spacing. Key colors include white (#ffffff), off-white (#f7f7f7), black (#000000), and a muted sandy tan (#dec39d). Avoid heavy font weights, rounded corners, drop shadows, or aggressive sales copy; maintain a calm, poetic, and spacious layout.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
