CURATED · OPEN · FREE

Isla Beauty

A premium skincare brand offering concentrated, effective beauty products with a minimalist, modern aesthetic.

01

Identity DNA

A luxury skincare brand that combines clean aesthetics with scientific efficacy.

02

Color

A warm, sophisticated palette dominated by creamy off-whites and charcoal, punctuated by a vibrant, energetic red accent that demands attention.

03

Typography

transitional-serif · humanist-sans

• display64px · 400

Use transitional-serif for bold, expressive display headlines. · Use humanist-sans for clear, readable body copy and navigation. · Maintain tight letter-spacing for display text to create a refined feel.

04

Spacing

A consistent 4px grid provides structure, with generous spacing in promotional areas to maintain a premium, uncluttered feel.

05

Surfaces

Thin, subtle borders using black or dark grays define interactive elements and sections without being heavy.

rgba(0, 0, 0, 0.06) 0px 2px 8px 0px · rgba(0, 0, 0, 0.1) 0px 5px 10px 0px

06

Layout

A clean, centered layout with a persistent top navigation bar and large, immersive photographic sections.

07

Motion & Interaction

Smooth fade-in transitions for modal overlays. · Subtle hover transitions on interactive elements. · Transformations for moving promotional banners.

Subtle color or opacity changes on interactive elements to provide clear feedback. · Immediate visual response, often accompanied by a transition to a new state or modal.

08

Components

• button Minimalist buttons with subtle borders or solid fills, often using uppercase text and pill-shaped or slightly rounded corners.
• card Clean product presentations that rely on high-quality photography and generous whitespace.
• chip Simple text-based selection chips for filtering or questionnaire options.
• input Clean, unobtrusive input fields with minimal borders.
• hero A full-width, immersive photographic hero section with large, expressive typography overlaid.

09

Voice & Don'ts

• Tone Confident, minimalist, and benefit-driven.
• Headlines Expressive and often conversational, using a mix of serif and sans-serif typefaces for emphasis.
• CTAs Direct and action-oriented, often using uppercase text in buttons.

• Don't use complex gradients — the screenshot shows solid, clean background colors instead.
• Don't use dark mode — the site uses a light, creamy color scheme throughout.
• Don't use playful or rounded sans-serif fonts for display — the screenshot uses a transitional-serif for expressive headlines.
• Don't use heavy drop shadows on components — the screenshot shows very subtle, soft shadows for elevation.
• Don't use bright neon or primary colors — the screenshot uses a specific, vibrant red accent against a muted, warm palette.
• Don't use multi-column text blocks — the screenshot uses generous whitespace and centered, single-column layouts for readability.
• Avoid: Cluttered or busy layouts
• Avoid: Loud or neon colors
• Avoid: Overly complex typography

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

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