Cloud Lavender
Pillow-soft lavender, rounded everything, and a sky that never gets dark.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
A bedtime palette for products that should feel like exhaling. Lavender haze drifts behind chubby rounded type, cards float on soft shadows like cumulus, and every corner is at least 24px. Gentle, unhurried and quietly confident.
Cloud Lavender is a soft-UI system for products whose job is to lower the heart rate. It borrows from late-2010s clay-render illustration and the rounded, friendly geometry of children's picture books, but keeps an adult restraint. A lavender mesh fills the canvas like evening sky; white cards float above it on long, low-opacity shadows; type is heavy, round and tight so it reads as warm rather than loud. Nothing is sharp, nothing is saturated, nothing moves fast. The feeling is a pillow you can trust.
Principles
- Round every corner — 28px on cards, full pill on buttons and inputs.
- Lift with shadow, never with borders.
- Keep saturation low; the only strong colour is the violet CTA.
- Let blobs and mesh do the decoration — no icons louder than the type.
- Slow everything down: nothing animates faster than 600ms.
Motion
Sections condense out of a 12px blur like fog clearing; cards rise 6px on hover with a slight overshoot, and the hero blobs breathe in scale over a slow 9-second loop.
Do & don't
Do
- ✓ Use radii of 20px or more on every container.
- ✓ Tint shadows with violet rather than black.
- ✓ Let the mesh background bleed under the nav pill.
Don't
- ✕ Don't use pure black text or pure grey.
- ✕ Don't put borders on cards — shadow only.
- ✕ Don't use blush or sky for text.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 370 lines of DESIGN.md in total.
More like this
All Pastel & Soft →
Butter Yellow
No. 022Sunny butter, a fat friendly grotesk and halftone dots like a cereal box.
Lilac Dream
No. 024Iridescent lilac haze, a whispering serif and light that seems to float.
Mint Sorbet
No. 025Cold mint, a chunky grotesk and stickers slapped on like a gelato cart.
Nursery Blue
No. 026Baby-blue skies, bubbly type and corners soft enough for a toddler.
Peach Fuzz
No. 027Velvety peach, a soft-bellied serif and the warmth of brushed wool.
Nordic Calm
No. 031Scandinavian winter light: cool greys, frost blue, soft corners and a lot of air.