Coastal Mist
Serene coastal UI using deep navy, pale seafoam, and soft slate blues. Ideal for saas de bem-estar, apps de meditação, turismo costeiro, imobiliárias de praia, clínicas e spas. AI-ready template.
Use case: SaaS de bem-estar, Apps de meditação, Turismo costeiro, Imobiliárias de praia, Clínicas e spas
Historical Context
Coastal Mist draws from a lineage that most designers never bother to trace — the intersection of Scandinavian restraint and Pacific Northwest atmosphere. Think of the fog rolling into Big Sur, or the muted mornings along the Danish coastline. There's a reason wellness brands gravitate toward this palette: it carries the emotional weight of stillness without feeling sterile. The typographic tradition here is rooted in Swiss modernism, but softened. Where Helvetica felt clinical, coastal-inspired systems lean into generous whitespace and optical weight that breathes. The mist metaphor isn't decorative — it's structural. It dictates how layers interact, how contrast is rationed, how information reveals itself gradually rather than shouting. This aesthetic matured in the early 2020s when meditation apps and DTC wellness brands rejected the saturated gradients of tech culture. They needed something that felt human and unhurried. Coastal Mist is what emerged — not a trend, but a tonal commitment to calm as a design value.
When to Use
Reach for Coastal Mist when the product needs to slow people down. Wellness platforms, breathwork apps, coastal hospitality brands, skincare lines that actually mean it when they say 'clean.' It works when your content is sparse and intentional — not when you're hiding information density behind soft colors. If your interface has more than three competing CTAs per screen, this system will fight you. It rewards restraint.
Design Principles
- Atmosphere over decoration — every visual layer should feel like depth in fog, not ornament on a surface
- Typography carries the architecture — let type weight and spacing do the structural work that borders and dividers usually handle
- Contrast is a resource to be rationed — reserve high contrast for single moments of clarity, let everything else recede
- Motion should mimic natural phenomena — slow fades, gentle parallax, nothing that snaps or bounces
- Whitespace is not empty — it's the mist itself, the connective tissue that gives every element room to breathe and mean something
Technical Specs
Colors
Primary
Secondary
Effects
Background com gradiente suave azul-acizentado, sombras delicadas, bordas arredondadas leves, imagens com overlay de neblina, blur sutil em elementos de fundo
Light/Dark
✓ Full / ◐ Partial
Related
Last synced: 4/1/2026