A soft, editorial palette dominated by muted pastels and warm off-whites, allowing the photography to take center stage.
03
Typography
transitional-serif · geometric-sans
display50px · 400
display32px · 400
body17px · 400
body15px · 400
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
A generous, airy spacing that emphasizes the editorial and premium feel.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Thin, 1px borders in a dark color or muted opacity, used primarily for buttons and outlines.
rgba(0, 0, 0, 0.03) 0px 2px 4px 0px
06
Layout
1440container
12columns
24pxgutter
768 / 1024breakpoints
A split-screen hero layout alternating between large photography and text blocks, creating a strong editorial rhythm.
07
Motion & Interaction
300msmicro
500mssmall
1000msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth fade transitions for elements appearing on scroll · Hover opacity transitions on interactive elements
Subtle opacity change or color shift on text and buttons. · Immediate response with a transition effect.
08
Components
buttonA simple, rectangular button with a thin dark border, no background fill, and dark text.
cardMinimalist cards that rely heavily on high-quality photography and large typography.
chipSimple, small text labels for categories like 'Home Decor'.
inputNot prominently featured in the visible hero area.
heroA split-screen or full-width layout with large photography on one side and a text block with a headline and CTA on the other.
09
Voice & Don'ts
TonePoetic, elegant, and descriptive.
HeadlinesLarge, poetic headlines that evoke a mood rather than just describing a product (e.g., 'The Poetry of Green').
CTAsSimple, direct, and understated (e.g., 'Shop Now').
Don't use bright, saturated primary colors — screenshot shows a palette of muted pastels like #FDF8EB and #F8EEEE.
Don't use heavy, bold sans-serif fonts for headlines — screenshot shows a transitional-serif font for display text.
Don't use drop shadows or heavy 3D effects on cards — screenshot shows a flat, clean design with minimal borders.
Don't use rounded corners on main containers — screenshot shows sharp, rectangular elements and buttons.
Don't overcrowd the layout with multiple columns of dense text — screenshot shows a generous use of white space and single-column text blocks.
Don't use all-caps text for headlines — screenshot shows title case used for poetic headlines.
Avoid: Hard-sell language
Avoid: Aggressive call-to-actions
Avoid: Technical jargon
Avoid: Cluttered layouts
Avoid: Loud, neon colors
11
System prompt
This site is a premium, curated e-commerce platform for artful home decor and lifestyle objects. It positions itself as a poetic and elegant brand, using a soft, muted palette (e.g., bg #FDF8EB, ink #313131) and a sophisticated mix of a transitional-serif font for display headlines and a geometric-sans for body text (Moderat and Domaine). The layout is airy and editorial, often utilizing split-screen hero sections that pair high-quality photography with poetic text. Key constraints include avoiding loud colors, heavy drop shadows, and aggressive marketing language, focusing instead on a calm, refined, and gallery-like browsing experience with simple, bordered 'Shop Now' buttons.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
