CURATED · OPEN · FREE
Glossier
A modern direct-to-consumer beauty brand blending minimalist design with playful, warm photography.
beauty ecommerce clean
01
Identity DNA
beauty skincare minimal playful modern
A friendly, minimalist beauty editor who wears pink and drinks iced coffee.
02
Color
#000000Ink
#101010Ink soft
#FFFFFFBG
#F7F7F7BG soft
#666666Muted
rgba(0,0,0,0.06)Line
High-contrast black and white foundation with soft warm neutrals, relying on photography and pink product accents for color.
03
Typography
grotesque-sans · monospace
display 130px · 400h1 32px · 500body 16px · 400small 12px · 400All caps for navigation and small labels · Tight letter spacing for display text · Body text remains regular weight for readability
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Standard 4px grid with generous whitespace between sections.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Thin 1px black borders for buttons and input fields, no rounded corners.
06
Layout
1440 container
12 columns
24px gutter
768 / 1024 breakpoints
Full-width photographic hero sections with overlaid large typography.
07
Motion & Interaction
220ms micro
400ms small
800ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
Fade-in transitions for modal overlays and content sections. · Smooth font-size and opacity transitions for interactive elements.
Standard pointer cursor, likely subtle opacity or color transitions. · Immediate response with standard cursor feedback.
08
Components
button Outlined rectangular buttons with black borders and black text. card Clean, borderless content blocks relying on typography and photography. chip None visible. input Simple rectangular input with a 1px border and placeholder text. hero Full-bleed lifestyle photography with massive white typographic overlay. 09
Voice & Don'ts
Tone Playful, conversational, and intimate. Headlines Short, punchy, often lowercase or sentence case with a hint of attitude. CTAs Direct, action-oriented, and slightly informal (e.g., 'Fetch the look'). Don't use vibrant neon colors — screenshot shows a strictly black, white, and soft pink palette. Don't round component corners — screenshot shows sharp, square edges on buttons and modals. Don't use drop shadows for elevation — screenshot shows flat, borderless design for most elements. Don't use serif typography — screenshot shows a consistent use of clean, geometric sans-serif fonts. Don't crowd elements with tight padding — screenshot shows generous white space around text and images. Don't use heavy gradients for backgrounds — screenshot shows solid colors and photographic backgrounds. Avoid: Corporate jargon Avoid: Aggressive sales language Avoid: Overly formal terminology 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
This is a clean, modern beauty e-commerce site. The design DNA is defined by a stark black and white foundation with soft pink accents. Typography is a clean grotesque sans-serif (Apercu family) used with tight tracking for display and generous whitespace for readability. The layout is full-bleed and photographic, relying on large lifestyle imagery rather than complex UI elements. Critical don'ts: Do not use rounded corners on UI components; the aesthetic is sharp and geometric. Do not introduce vibrant, high-chroma accent colors; the palette is strictly neutral with a soft pink accent. Do not use serif fonts; the entire system is built on clean sans-serif categories. The interaction model is standard for e-commerce with smooth opacity transitions for modals and overlays.
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: Worth including as a prime example of 'clean' modern DTC design that uses photography and typography as the primary design drivers rather than complex UI components.
