Clean Girl -- Design Aesthetic Reference

Typography

Light, Airy & Refined

Understated elegance through thin weights, generous spacing, and quiet sophistication

Display / Cormorant Garamond Light

Quiet Luxury

Heading / Cormorant Garamond Regular

Editorial Elegance

Subheading / Outfit Light

Modern Geometric Clarity

Body / DM Sans Regular

Warm humanist text for comfortable reading. Clean Girl embraces readability wrapped in quiet sophistication.

Italic Accent / Cormorant Garamond

effortlessly polished, always intentional

UI Label / Outfit

Buttons & Interface Labels

Type Scale

3.5rem Aa

2.75rem Aa

1.85rem Aa

1.25rem Aa

1rem Aa

0.75rem Aa

Font Pairings

Cormorant Garamond 300 + DM Sans 400
Editorial luxury, skincare branding, quiet elegance

Outfit 300 + Inter 400
Modern minimalism, app-like clarity, polished simplicity

Jost 200 + DM Sans 300
Airy sophistication, fashion-forward, ultra-light

Color Palette

Warm Neutrals & Soft Accents

Ivory, beige, oat, and taupe layered with hints of dusty rose and sage whisper

Ivory Cream

#FAF7F2

Warm White

#FFFDF8

Oat Milk

#F0EAE0

Soft Beige

#E8DFD2

Champagne

#D9CEBD

Warm Taupe

#B5A898

Latte

#A08E7D

Cocoa

#7A6B5D

Espresso

#4A3F35

Dusty Rose

#D4A5A5

Blush Nude

#E8C4B8

Sage Whisper

#B8C4B2

Cloud Gray

#E5E1DC

Dewy Highlight

#FFF5EC

Components

Curated Design Elements

Each component reflects the disciplined simplicity and warm polish of the Clean Girl aesthetic

Luminous Surfaces

Soft gradients and subtle gloss effects that mimic the glass-skin look. Interfaces feel fresh, hydrated, and dewy rather than flat or matte.

Glow Gradient

Tonal Layering

Depth is created through subtle value shifts within the same warm hue family. Monochromatic layering replaces high-contrast color combinations.

Neutral Depth

Generous White Space

Breathing room is essential. Content is carefully spaced with wide margins, giving each element room to exist quietly and confidently.

Layout Spacing

Satin Textures

Subtle background textures that suggest smooth fabric, cream, or soft paper. Nothing rough or industrial -- everything feels like cashmere.

Texture Soft

Thin Elegant Borders

When borders appear, they are 1px, low-opacity, and warm-toned. They define without confining, adding structure with the lightest possible touch.

Borders Minimal

Seamless Transitions

Hover states and page transitions feel smooth and effortless. Animations are gentle and restrained, matching the no-effort philosophy.

Motion Hover

Effects Showcase

Soft, Luminous & Intentional

CSS techniques that capture the dewy, polished quality of the Clean Girl aesthetic

Dewy Glow

Radial Luminescence

Soft radial gradients create the signature glass-skin glow effect

Satin Sheen

Satin Gradient

Warm tonal gradients with a subtle animated light sweep

Glass Skin

Frosted Backdrop

Backdrop blur with layered color orbs for translucent depth

Layered Depth

Monochromatic Layers

Stacked surfaces with tonal shifts creating gentle spatial depth

Blush Tonal

Warm Tonal Pulse

Soft rose gradient with a pulsing radial glow center

Shadow Depth

Graduated Shadows

Barely-there shadows in three intensities for layered elevation

Buttons

Polished Interactions

Warm, understated button styles with gentle hover transitions

Simplicity is the ultimate sophistication. In design, every element should feel intentional yet unstrained -- as if it could not have been placed anywhere else.

Clean Girl Design Philosophy