CURATED · OPEN · FREE

Byredo

A premium fragrance house blending stark minimalism with sculptural typography.

beautyfragrance

↓ Download design system (22 MB)Open in OpenDesign

Visit: https://www.byredo.com

📦 Browse pack contents →

Identity DNA

luxuryminimalistscandinavianfragrancepremium

A high-end art gallery dedicated to olfactory compositions

Color

#000000Ink

#ffffffBG

#f5f5f5BG soft

#767676Muted

rgba(229, 231, 235, 1)Line

Strictly monochromatic typography to ensure the colorful product imagery remains the focal point

Typography

stencil-sans · geometric-sans

display120px · 400
h128px · 400
body14px · 400
caption10px · 400

Spacing

4px

8px

12px

16px

24px

28px

48px

64px

96px

Generous vertical spacing in footer columns; consistent internal padding of 28px for cards and interactive areas

Surfaces

sm · 4px

md · 6px

lg · 20px

pill · 9999px

1px solid rgba(229, 231, 235, 1)

rgba(0,0,0,0) 0 0 0 0 · rgb(128,128,128) 0 0 5px 0

Layout

1440container

12columns

24pxgutter

768 / 1024breakpoints

Full-bleed imagery overlays; strictly structured multi-column footer grid

Motion & Interaction

220msmicro

300mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle 300ms fades for opacity and transform interactions · Color and fill transitions on interactive elements

Color and opacity shifts with 300ms cubic-bezier transition · Immediate visual response followed by state change

Components

button Minimal outline or text-based actions with subtle hover transitions
card Clean white cards with minimal border radius for product details
chip Pill-shaped status indicators with rounded borders
input Minimalist underlined text fields with ample whitespace
hero Immersive full-viewport photography with stark white overlay typography

Voice & Don'ts

Tone Authoritative, understated, and luxury-focused
Headlines Short, punchy, and often uppercase
CTAs Subtle, text-based, and completely unobtrusive

don't use a vibrant accent color — screenshot shows a strictly monochromatic palette
don't apply heavy drop shadows — screenshot shows mostly flat surfaces or subtle gray shadows
don't use highly decorative serif fonts — screenshot shows geometric sans and custom stencil fonts
don't clutter the interface with multiple competing elements — screenshot shows a single dominant focal point
don't use rounded card corners (large radius) — screenshot shows small 4px-6px radii on interactive elements
don't use heavy font weights — screenshot shows a uniform 400 weight across all text elements
Avoid: Excessive exclamation points
Avoid: Loud or promotional language
Avoid: Decorative borders or ornaments

Inside the pack — real screenshots

Byredo — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Design a premium, minimalist luxury e-commerce interface that prioritizes editorial photography over UI elements. Use a strict monochromatic palette with a white (#ffffff) background, deep black (#000000) typography, and subtle grays (#767676, #f5f5f5) for secondary elements; do not introduce any vibrant accent colors. Utilize a geometric sans-serif for body text and a custom stencil-sans for bold logotypes, maintaining a uniform 400 font weight. Critical constraints: never use heavy drop shadows, avoid large border-radius values, and ensure the UI recedes to let the product imagery command full attention. Typography should be widely tracked (0.35px) and predominantly uppercase to reinforce the luxury positioning.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko