CURATED · OPEN · FREE

Ilia

Clean, photographic beauty e-commerce with warm neutrals and refined typography.

Beauty

↓ Download design system (34 MB)Open in OpenDesign

Visit: https://www.iliabeauty.com

📦 Browse pack contents →

Identity DNA

clean beautyminimalistnaturalpremium skincare

A minimalist beauty counter in a sunlit gallery

Color

#271F1FInk

#5E5047Ink soft

#FAF7F8BG

#FFFFFFBG soft

#F5F5F5BG quiet

#756E65Muted

rgba(229, 231, 235, 1)Line

Warm neutrals dominate the background with dark brown as the primary foreground color, creating a high-contrast but soft aesthetic.

Typography

geometric-sans · humanist-sans · ui-monospace

display40px · 400
body16px · 400

Uppercase for navigation and button labels · Tight letter-spacing for large display text · Mixed font weights for hierarchical emphasis

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Base-4 system with consistent 16px gutters and padding

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgb(229, 231, 235) for dividers, 2px solid rgb(39, 31, 31) for primary buttons

0px 4px 6px -1px rgba(0, 0, 0, 0.1) · 0px 2px 4px -2px rgba(0, 0, 0, 0.1)

Layout

1280container

12columns

16pxgutter

768 / 1024breakpoints

Modal overlay with centered white card on left, full-bleed lifestyle photography on right

Motion & Interaction

150msmicro

400mssmall

800msmedium

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

Smooth opacity transitions for modal overlays · Color and background-color transitions on hover · Transform animations for interactive elements

Color and background-color transitions over 0.4s · Transform effects on interactive elements

Components

button Dark brown (#271F1F) filled buttons with white uppercase text, rectangular with 8px radius
card White (#FFFFFF) modal cards with 12px border-radius
chip Category selection buttons in a grid layout with consistent 8px gaps
input Not visible in screenshot
hero Full-viewport split layout with modal overlay and lifestyle product photography

Voice & Don'ts

Tone Inviting, confident, and approachable
Headlines Direct promotional language ('You've Got 15% Off') with large geometric sans-serif
CTAs Clear action-oriented category labels in uppercase

Don't use dark mode — screenshot shows light #FAF7F8 background
Don't use bright accent colors — screenshot shows monochromatic warm neutrals
Don't use script or decorative fonts — screenshot shows clean geometric and humanist sans-serifs
Don't use heavy drop shadows — screenshot shows subtle box-shadows with low opacity
Don't use rounded pill buttons — screenshot shows rectangular buttons with 8px radius
Don't use complex layouts — screenshot shows simple centered modal overlay pattern
Avoid: Don't use bright saturated colors
Avoid: Don't use decorative script fonts
Avoid: Don't use dark mode
Avoid: Don't use complex gradients
Avoid: Don't use aggressive shadows
Avoid: Don't use neon or fluorescent accents

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Clean beauty e-commerce brand with warm neutral palette (#FAF7F8 background, #271F1F text) and refined typography. Uses geometric and humanist sans-serif font categories with tight letter-spacing for display text. Features photographic product imagery with minimalist UI components. Key design principles: restraint in color, emphasis on whitespace, high-contrast typography. Critical don'ts: avoid dark mode, saturated colors, decorative fonts, heavy shadows, complex gradients, or aggressive animations. The modal overlay pattern shows the brand's approach to conversion-focused design.

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