DTC Beauty Storefront

StyleRef·@styleref·

Extract your style to start building your Style Board.

Made with this StyleRef

Same style, different prompts.

One home screen, alone in the frame — the style at the size a card shows it.

A desktop storefront: sidebar, filters, product cards and a campaign banner.

Loose UI parts under one treatment — the components a beauty storefront ships.

A product landing page where oversized type sits behind the hero object.

Onboarding, routine home and product detail — one style across three screens.

Description

Blush and clay neutrals, a Didone display over a geometric sans, full-pill controls, no borders and unhurried transitions. The direct-to-consumer look, specified tightly enough to build.

Typography

Light, Regular, Aa, Bb, Typography

Font FamilyDidone

Line HeightRelaxed

Font WeightsLight, Regular, Medium

Letter SpacingWide

Type ScaleResponsive

Text Case

Title Case for display; sentence case for UI and body

Font Pairing Strategy

Display + Body

Hierarchy

Strong contrast

Text Visual Role

Secondary visual element

Light & Shadow

Lighting Mood Style

Studio-flat

Key Light Style

Diffused

Shadow Type

Diffuse

Shadow Density

Faint

Lighting Presence

Implied

Container / Boundary

Container presence

Implicit (visual edges only)

Corner treatment

Fully rounded

Padding rules

Generous

Custom Style Items

Display Type Rule

Didone only for headings and product names; never use it for UI labels, controls, or body copy.

Accent Allocation

Reserve blush for primary actions and price emphasis; use quiet green only for in-stock status.

Surface Separation

Separate borderless surfaces through faint warm tonal shifts, never strokes.

Product Layout

Two-column product grid with large imagery, comfortable gutters, and generous vertical section gaps.

UI & Web

Color Theme

Light

Background Tone

Warm off-white

Accent Strategy

Single functional accent

Semantic Colors

Error + Warning

Layout Archetype

Marketing page

Density

Comfortable

Spacing Scale

Loose modular

Surface Layers

Two-layer (page + card)

Elevation Approach

Background contrast only; floating add-to-bag bar is the sole elevated element

Shadow Technique

Single wide soft drop shadow beneath floating add-to-bag bar only

Border Philosophy

Borderless

Corner Radius Scale

Large (16–24px)

Card Style

Filled tint

Button Shape

Full pill

Button Hierarchy

Primary + Secondary + Ghost

Icon Style

Outline / Stroke

Icon Weight

Thin (1px)

Navigation Pattern

Bottom tab bar

Navigation Style

Sticky solid

Hover Treatment

Opacity change

Focus Ring Style

Solid offset ring

Animation Philosophy

Functional only

Transition Speed

Deliberate (350–500ms)

Shape Language

Shape Basis

Hybrid

Primitive Dominance

Rectangles, Freeform curves

Edge Sharpness

Fully rounded

Negative Space Usage

Dominant

Angle Usage

None

Surface, Material & Detail

Surface Treatment

Matte

Imperfection Level

Polished

Colors

#FBF6F140%Usage: Background

#3A2E2A18%Usage: Typography

#E9C8C215%Usage: Primary action and price emphasis

#EFE4DA12%Usage: Surface separation

#C4A79A7%Usage: Supporting accents

#8A7F785%Usage: Secondary text

#5E7A633%Usage: In-stock state

Palette Size

6–8 colors

Color Temperature

Warm

Saturation Range

Muted

Contrast Strategy

Value contrast

Hue Relationships

Analogous

Gradient Policy

Subtle gradients only

Color Dominance

Background-dominant

Black & White Point

Lifted blacks + Rolled-off highlights

Accessibility Level

WCAG AA

Output Format

Creative Discipline

UI/UX

Medium

Digital

Platform

Mobile

Mood & Personality

Sophisticated, Elegant, Calm, Minimalist, Clean

Energy Level

Mellow

Spatial Structure & Hierarchy

Perspective Style

Flat

Hierarchy Clarity

Moderate

Symmetry

Near symmetry

Balance Type

Center-weighted

Layout Axis

Vertical

Grid System

Column grid

Visual Density

Airy

Guardrails

Avoided Visuals

sale-badge clutter; countdown timers; bordered cards; dense grids; serif body text; glossy surfaces

Avoided Colors

saturated red urgency colour; bright saturated colours

Allowed Visuals

warm tonal surface shifts; large product imagery; soft blush primary action; quiet green in-stock state; spacious two-column product grid; floating add-to-bag bar

......X