CURATED · OPEN · FREE

Topicals

A bold, editorial skincare brand that uses oversized typography and high-contrast photography to convey science-backed, inclusive formulations.

01

Identity DNA

A bold, modern skincare brand that combines clinical efficacy with a playful, inclusive, and high-fashion editorial aesthetic.

02

Color

A high-contrast palette anchored by deep charcoal and crisp white, with a vibrant coral-red accent that provides energetic focal points.

03

Typography

geometric-sans · humanist-sans

• display120px · 700
• heading42px · 500
• body14px · 400
• label12px · 500

Use geometric sans-serif for massive display text and primary headlines. · Use humanist sans-serif for body text and UI elements to maintain readability. · Apply tight letter-spacing to large display text for a compact, impactful look. · Ensure body text remains legible with a size of 14px or larger.

04

Spacing

A combination of tight, 4px-based spacing for UI elements and generous whitespace for editorial sections.

05

Surfaces

Borders are primarily used to define input states or button edges, typically 1px solid black.

06

Layout

A full-bleed hero section dominated by a massive typographic wordmark and a large product photograph, followed by a two-column editorial section.

07

Motion & Interaction

Fade-in animations for content elements. · Smooth color transitions for interactive elements. · Linear transitions for text and background color changes.

Interactive elements like buttons and links change background or text color with a smooth 0.2s linear transition. · A subtle change in background or border color indicates the active state.

08

Components

• button Buttons feature a clean, minimal design with a 2px border-radius, 14px sans-serif text, and a transparent background that fills with a solid color on hover.
• card Content cards rely on high-quality photography and generous whitespace rather than traditional card boundaries or shadows.
• chip Small, uppercase labels with a 1px border and rounded corners are used for tags and secondary information.
• input Input fields use a simple 1px border with a 2px border-radius, maintaining a clean and functional appearance.
• hero A full-viewport hero section featuring an oversized typographic wordmark and a central product shot against a dark background.

09

Voice & Don'ts

• Tone Confident, inclusive, and scientifically grounded, with a touch of playfulness.
• Headlines Bold, oversized, and direct, often using a single word or a short, impactful phrase.
• CTAs Simple and action-oriented, using a clean sans-serif font and a transparent button style.

• Don't use decorative or script fonts — the screenshot shows a consistent use of clean, geometric and humanist sans-serif typefaces.
• Don't use a light or colorful background for the hero section — the screenshot shows a dark charcoal background with white text.
• Don't use excessive shadows or borders on cards — the screenshot shows a clean, photography-driven layout without heavy containers.
• Don't use a multi-color palette — the screenshot shows a focused palette of black, white, and a single vibrant coral accent.
• Don't use large, rounded corners on buttons or inputs — the screenshot shows a 2px border-radius for a sharper, more tailored look.
• Don't use a small, cluttered layout — the screenshot shows massive typography and generous whitespace to create an editorial feel.
• Avoid: Avoid overly technical jargon, overly decorative elements, or a clinical, sterile aesthetic.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

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