Design Aesthetic Reference

Liquid Fluid Design

Organic blob shapes, flowing gradients, and gentle morphing animations that create interfaces feeling alive, warm, and endlessly fluid.

Soft, Rounded Letterforms

Liquid typography pairs rounded display faces with clean, readable body text to reinforce the organic aesthetic throughout.

Display / Hero
Flowing Forms
Heading XL
Organic shapes that breathe and morph
Heading
Soft gradients and gentle motion
Body Text
Liquid design embraces irregularity, asymmetry, and gentle motion, producing digital experiences that breathe and shift like living organisms. Every surface flows with organic warmth.
Light Body
Translucent layers of color blend softly at the edges, creating depth through atmospheric perspective rather than hard borders or dramatic drop shadows.
Caption
Generous whitespace lets organic forms breathe naturally across every viewport.

Font Stack

Display Font Comfortaa
Body Font Quicksand
Display Weight 700
Heading Weight 600 - 700
Body Weight 300 - 400
Body Size 1rem / 16px
Line Height 1.75
Letter Spacing 0.01 - 0.02em
Text Transform Sentence case (warm)
Character Rounded, organic, soft

Pastel Gradients and Soft Hues

Harmonious color transitions flow like watercolor on wet paper, evoking calmness, trust, and organic warmth.

Lavender Mist
#C3B1E1
Rose Quartz
#F7CAC9
Soft Coral
#FF8A80
Peach Cream
#FFDAB9
Sky Wash
#A8D8EA
Mint Foam
#B5EAD7
Lilac Dream
#DCD0FF
Ocean Depth
#5B7FFF
Warm Violet
#9B6DFF
Cloud White
#F8F6FF
Soft Ivory
#FFF8F0
Deep Ink
#2D2B55

Signature Gradients

Warm Flow
Cool Drift
Sunset Melt
Ocean Pulse

Fluid Cards and Surfaces

Rounded corners, soft shadows, and translucent layers create floating surfaces that feel organic and alive.

Organic Blobs

Amorphous shapes with smooth curves and no sharp corners serve as backgrounds, masks, and decorative elements that evoke natural forms.

Layered Depth

Semi-transparent shapes stacked at varying opacities create atmospheric perspective and a sense of gentle depth throughout the interface.

Gentle Motion

Slow, meditative morph animations with 8-15 second cycles create a calm, fluid feeling that makes every element feel alive.

Glassmorphism Variants

Frosted glass effects layered over gradient blobs combine depth and atmospheric softness.

Warm Glass

Frosted translucent surfaces float over warm gradient blobs, creating a soft layered composition with organic depth.

Discover

Ocean Glass

Cool ocean-toned gradients behind frosted glass create an aquatic, immersive atmosphere with flowing visual energy.

Dive In

Liquid Motion and Visual Effects

Morphing SVGs, lava lamp blobs, water ripples, gooey metaballs, and melting transitions bring the fluid aesthetic to life.

SVG Morphing Blob

SMIL-animated SVG paths morph between organic shapes, creating complex concave curves impossible with CSS border-radius alone.

Lava Lamp Blobs

Soft gradient blobs rise and fall within a container, morphing shape as they move like viscous liquid in a lava lamp.

Water Ripple Effect

Concentric rings expand outward from a center point, fading as they grow to simulate the gentle disturbance of a water surface.

Gooey Metaballs

SVG blur and color matrix filters cause overlapping shapes to merge like liquid blobs combining under surface tension.

Melting Transitions

Shapes gradually deform downward as if melting, with border-radius shifting to create viscous, dripping visual effects.

Floating Blob Field

Multiple organic blobs drift independently at varying speeds, creating a layered atmospheric background of gentle motion.

Wavy Borders

Undulating edges replace hard lines, created via SVG paths and curved CSS shapes.

Warm Undulation

Rose to lavender gradient flow

The curved boundary between header and body creates a natural, organic transition that feels like liquid flowing between two surfaces.

Cool Undulation

Sky to lilac gradient flow

Wavy section dividers eliminate hard horizontal rules, using SVG paths that undulate gently to maintain the liquid design language.

Interactive Hover States

Blob shapes morph and expand on interaction, reinforcing the liquid feel.

Morphing Shape

Border-radius shifts on hover, creating a living organic response

Expanding Glow

Gradient wash expands from center on hover, flooding the card softly

Floating Rise

Gentle upward lift with elevated shadow simulates buoyant liquid motion

Let Rigid Layouts Dissolve

Embrace organic flow and build interfaces that feel warm, human, and endlessly alive. Every shape breathes, every gradient flows.