Design Aesthetic Reference
Dreamy color transitions, aurora-inspired luminosity, and gentle chromatic blending — interfaces that feel painted by light.
Typography
geometric sans-serifs with rounded warmth, refined serifs for elegance
Display / Outfit 700
Dreamy Light
Heading / DM Serif Display
Elegant Gradient Headlines
Subheading / Outfit 300
Soft, airy subheadings that breathe
Body / Inter 400
Clean, highly legible body text with open letter-spacing. Optimized for reading against gradient-tinted backgrounds with medium weight and generous line height.
Friendly / Rubik 400
Rounded, approachable text for buttons and tags
UI Label / Inter 600
Interface Labels & Captions
Outfit 600 + Inter 400
Modern, clean, professional softness
DM Serif Display + Rubik 400
Elegant warmth, editorial quality
Outfit 300 + Rubik 300
Ultra-light, airy, wellness-focused
Color Palette
sunrise spectra, aurora phenomena, and atmospheric warmth
Components
translucent surfaces floating above atmospheric color fields
Multiple overlapping radial gradients blend together to create organic, multi-directional color fields that feel hand-painted rather than computed.
Background CSSCards and modals use backdrop-filter blur over gradient backgrounds, creating depth through translucency rather than shadow alone.
Glassmorphism DepthUndulating bands of soft color reference the northern lights, animated with slow breathing keyframe movements across the viewport.
Animation AtmosphereBorder radii of 16-32px on cards, fully rounded pill buttons, and soft circular accents reinforce the gentle, approachable character throughout.
Layout ShapeDisplay typography carries gradient fills via background-clip, used sparingly on hero headlines for a luminous, multi-hued effect.
Typography VisualA fine noise texture at very low opacity layered over gradients adds tactile quality and prevents banding artifacts in smooth transitions.
Texture DetailDesign Principles
softness, atmosphere, translucency, and intentional subtlety
Every edge, shadow, and transition should feel gentle. Nothing should jolt or jar the viewer. Replace hard lines with diffused borders, swap solid drops for colored glows, and let every interaction ease rather than snap.
Hierarchy is established by layering translucent surfaces over gradient fields rather than by stark color contrast or heavy borders. Frosted glass panels create visual depth while letting the atmospheric background breathe through.
Restraint is key — gradients should feel like natural light, not a color explosion. Two or three harmonious hues per gradient, never a full rainbow. Progressive disclosure of complexity rewards closer inspection.
The aesthetic communicates human warmth. Even blue-dominant palettes carry enough warm undertone to feel inviting rather than clinical. Generous whitespace filled with gradient color makes empty areas feel intentional and luminous.
Visual Effects
all dreamy effects achieved with pure CSS, no image assets
Layered radial gradients at different positions create organic, painterly color blends.
Blurred gradient bands over dark backgrounds simulate the undulating northern lights.
Backdrop-filter blur with translucent white creates depth over gradient fields.
CSS mask compositing creates a gradient stroke around any element.
Layered colored box-shadows create a warm, luminous orb that pulses gently.
Animated border-radius creates fluid, morphing shapes that echo natural forms.
Interactive Elements
warm pills, frosted glass, and ghost variants
Soft Gradient design treats the entire canvas as a living, breathing color field — serene, sophisticated, and effortlessly modern, like light refracting through morning mist.— The Soft Gradient Manifesto
The Soft Gradient aesthetic embraces dreamy color transitions, frosted glass depth, aurora-inspired motion, and intentional subtlety. Let every interface feel atmospheric, calming, and effortlessly modern.
Back to the Top