A high-end magazine holiday gift guide translated into a minimalist web experience.
02
Color
#1A0DABAccent
#1F1F1FInk
#515151Ink soft
#FFFFFFBG
#70757AMuted
rgba(0,0,0,0.04)Line
High-contrast editorial palette with a clean white canvas, deep ink text, and a single vibrant Google blue accent for primary actions.
03
Typography
transitional-serif · humanist-sans
display80px · 200
body14px · 400
subtitle24px · 400
Display headlines use a light-weight transitional serif with tight tracking for an elegant, editorial feel. · Body text and UI elements use a clean, highly legible humanist sans-serif. · Product titles are rendered in standard weight sans-serif for maximum readability in grid layouts.
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
96px
A flexible grid with generous white space and varied gutters (16px, 24px) to separate product cards and maintain a clean, breathable layout.
A centered, max-width content container with a prominent, full-width hero section followed by a flexible, masonry-like grid of product cards.
07
Motion & Interaction
100msmicro
250mssmall
500msmedium
cubic-bezier(0.2, 0.0, 0, 1.0)easing
Smooth visibility transitions for dropdowns and overlays. · Subtle background-color changes on hover states. · Standard border-radius transitions for interactive elements.
Subtle visual cues, such as background color changes or shadow shifts, indicate interactivity on cards and buttons. · Direct navigation or expansion of product details.
08
Components
buttonPill-shaped primary buttons with high-contrast background color and white text.
cardProduct cards featuring large, high-quality photography on a soft gray background with a 20px border radius and minimal text.
inputA large, centered search bar with a subtle border, rounded corners, and integrated voice/lens/search icons.
heroA massive, editorially styled headline in a light-weight serif font, centered above a large lifestyle photograph.
09
Voice & Don'ts
ToneInspiring, editorial, and helpful, positioning the platform as a curated guide rather than a mere marketplace.
HeadlinesLarge, elegant, and serif-driven, reminiscent of a high-fashion or lifestyle magazine cover.
CTAsDirect and action-oriented, using high-contrast, pill-shaped buttons.
Don't use a dark background for the main canvas — the screenshot shows a clean, white background for the hero and product grid.
Don't use a bold, heavy sans-serif for the main headline — the screenshot displays 'Holiday 100' in a light-weight transitional serif.
Don't use sharp, square corners for product cards — the screenshot shows a prominent 20px border radius on all cards and images.
Don't use a chaotic or multi-column layout for the hero — the screenshot shows a strictly centered, single-column editorial hero.
Don't use a bright, primary color for the main background — the screenshot uses a pure white (#FFFFFF) canvas to make product images pop.
Don't use a monospace or slab-serif font for body text — the screenshot utilizes a clean humanist sans-serif for readability.
Avoid: Avoiding aggressive 'buy now' language in favor of discovery-focused phrasing.
Avoid: Avoiding cluttered layouts or overwhelming calls to action.
Avoid: Avoiding dark or heavy color palettes that would detract from the product photography.
11
System prompt
This is Google Shopping's 'Holiday 100' curated guide, positioning itself as an editorial discovery tool. The design DNA centers on a clean, white (#FFFFFF) canvas with deep ink (#1F1F1F) text and a single vibrant blue accent (#1A0DAB) for the primary 'Sign in' action. Typography is a key differentiator: the main hero uses a light-weight transitional-serif font (Crimson Pro) for an elegant, magazine-like feel, while UI and body text use a humanist-sans (Google Sans). Layout is centered and breathable, featuring large lifestyle photography and product cards with soft 20px border-radius. Critical don'ts: Never use a dark background, never use a heavy font weight for the display headline, and never use sharp corners for image containers.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
