# DTC Beauty Storefront

A sophisticated, minimalist UI/UX style for DTC beauty brands, featuring blush and clay neutrals, Didone display, and full-pill controls.

| | |
|---|---|
| Style | DTC Beauty Storefront |
| Category | UI/UX |
| Tags | minimalist, elegant, clean, calm, sophisticated, beauty, ecommerce, digital, mobile, desktop |
| Author | @styleref (https://styleref.io/u/styleref) |
| Palette | #fbf6f1 #3a2e2a #e9c8c2 #efe4da #c4a79a #8a7f78 |
| Published | 2026-07-03 |
| Canonical URL | https://styleref.io/share/67o4t69q-0699bdeb8bc6 |

## Specification

Paste this into any AI tool. Keep the attribution line and the canonical URL.

STYLE REFERENCE — HARD CONSTRAINT (HIGHEST PRIORITY)

This style must be applied to ALL generated content (text, image, video).
If any part of the request conflicts with this style, the style OVERRIDES the request.
STYLE DEFINITION (to be operationally enforced):

DTC Beauty Storefront

 • Output Format: Creative discipline: UI/UX; Digital; Mobile.
 • Container / Boundary: Container: Implicit (visual edges only); Fully rounded Corners; Padding: Generous.
 • Mood & Personality: Sophisticated, Elegant, Calm, Minimalist, Clean; Energy: Mellow.
 • Colors: Palette: Solid Colors: [ #FBF6F1 40% (Background),  #3A2E2A 18% (Typography),  #E9C8C2 15% (Primary action and price emphasis),  #EFE4DA 12% (Surface separation),  #C4A79A 7% (Supporting accents),  #8A7F78 5% (Secondary text),  #5E7A63 3% (In-stock state)]; 6–8 colors; Warm temperature; Saturation: Muted; Value contrast; Hue relationships: Analogous; Subtle gradients only; Color dominance: Background-dominant; Black/White point: Lifted blacks + Rolled-off highlights; Accessibility: WCAG AA.
 • Typography: Didone; Light, Regular, Medium; Text case: Title Case for display; sentence case for UI and body; Font pairing: Display + Body; Hierarchy: Strong contrast; Type scale: Responsive; Relaxed (1.6); Letter spacing: Wide; 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.
 • Spatial Structure & Hierarchy: Flat perspective; Hierarchy: Moderate; Symmetry: Near symmetry; Balance: Center-weighted; Layout axis: Vertical; Grid system: Column grid; Visual density: Airy.
 • Surface, Material & Detail: Surface treatment: Matte; Imperfection level: Polished.
 • Shape Language: Hybrid; Primitive dominance: Rectangles, Freeform curves; Edge sharpness: Fully rounded; Negative space usage: Dominant; Angle usage: None.
 • 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: 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; Borders: 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: Bottom tab bar; Nav style: Sticky solid; Hover: Opacity change; Focus ring: Solid offset ring; Animation: Functional only; Transition speed: Deliberate (350–500ms).
 • Guardrails: Avoid Visuals: sale-badge clutter; countdown timers; bordered cards; dense grids; serif body text; glossy surfaces; Avoid 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.
 •  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..


ENFORCEMENT RULE: Before finalizing the output, internally verify that ALL elements comply with the style definition above. If compliance is uncertain, simplify or soften the output until it fully matches the style. Generated by StyleRef.io

## Other formats and live access

The specification above is the portable default. Tool-specific builds and a
ready-to-commit STYLE.md are available without a login:

**REST** (anonymous, read-only)

```
https://styleref.io/api/v1/styles/67o4t69q-0699bdeb8bc6?format=flux        # also: midjourney, diffusion, json
https://styleref.io/api/v1/styles/67o4t69q-0699bdeb8bc6/style.md           # a ready-to-commit STYLE.md
```

**MCP** (Streamable HTTP at `https://styleref.io/api/mcp`)

```
styleref://gallery/67o4t69q-0699bdeb8bc6
styleref://gallery/67o4t69q-0699bdeb8bc6/style.md
```

Or call the `get_style` tool with `ref` set to the slug above, and
`apply_style_to_prompt` to wrap a request for a specific tool.

Attribution: this style was created by @styleref. Keep the `Generated by StyleRef.io`
line and the canonical URL when you use a compiled spec, and credit the author.

Source: https://styleref.io/share/67o4t69q-0699bdeb8bc6