A Design Reference
Light, airy, and inspired by the sea -- integrating elements of ocean, sand, and sky into every detail
Coastal Style draws inspiration from shoreline environments -- the Hamptons, Western France, and the Mediterranean coast. It emphasizes natural light, open spaces, and relaxed elegance, with a palette pulled directly from the shore: sky, sea, sand, driftwood, and weathered stone.
The approach is casual yet polished, favoring soft, diffused visual weight over hard edges and heavy shadows. Indoor-outdoor flow, layered neutrals with blue accents, and an emphasis on natural materials define its character.
This page is both a reference for and a demonstration of the Coastal Style aesthetic.
Nautical elements, marine life, stripes, wave forms, and natural textures combine to evoke the shoreline.
Anchors, lifebuoys, ship wheels, compass roses, and rope knots bring maritime tradition to every design.
Seashells, starfish, coral, seahorses, and fish silhouettes add organic coastal character.
Horizontal or vertical stripe patterns, particularly navy and white, channel classic seaside style.
Undulating, organic wave forms serve as borders, dividers, and background textures throughout.
Woven fibers, rope, driftwood grain, linen weave, and sand ripples bring tactile warmth to surfaces.
Sun-bleached, salt-worn, and naturally aged surfaces convey the passage of time by the coast.
Abundant whitespace evoking open skies and wide beaches. Let content breathe.
Polished but never stiff or overly formal. Approachable sophistication.
Blurred boundaries between content sections, seamless transitions throughout.
A restrained base palette punctuated by ocean tones for anchoring.
Avoid hard edges and heavy shadows in favor of gentle gradients and subtle depth.
Textures and patterns drawn from organic, coastal materials ground the design.
Drawn from the coast itself -- crisp whites, ocean blues, warm sands, and sunset corals create a harmonious, inviting scheme.
Approach: Let white and cream dominate for an airy feel. Use blue sparingly but consistently as the signature accent. Ground the palette with warm neutrals (sand, driftwood, clay), and apply coral or sunset orange minimally for energy on calls-to-action. Layer opacity with translucent blues and seafoams for overlays.
Clean, open letterforms with generous spacing. Light weights. Rounded terminals. Serif headings with sans-serif body text.
| Font | Style | Usage | Preview |
|---|---|---|---|
| Playfair Display | Elegant transitional serif | Headlines, hero text | Aa Bb Cc |
| Libre Baskerville | Classic, readable serif | Subheadings, pull quotes | Aa Bb Cc |
| Lora | Brushed, calligraphic serif | Headlines, feature titles | Aa Bb Cc |
| Source Sans 3 | Clean, humanist sans-serif | Body text, UI elements | Aa Bb Cc |
| Nunito | Rounded, friendly sans-serif | Body text, navigation | Aa Bb Cc |
| Josefin Sans | Vintage geometric sans | Display text, captions | Aa Bb Cc |
| Seaweed Script | Flowing coastal script | Decorative accents, taglines | Aa Bb Cc |
| Caveat | Casual handwritten | Annotations, informal labels | Aa Bb Cc |
Open layouts with generous padding, asymmetric balance, full-width heroes, rounded cards, and wave-shaped section dividers.
Generous padding and margin throughout. Let content breathe like open skies and wide beaches.
Max-width of 1100--1400px with ample side margins for comfortable, expansive reading.
Rounded-corner cards with soft shadows for grouping. Like smooth pebbles on the shore.
SVG curves and clip-paths separate content blocks organically, echoing the shoreline.
Natural, organic placement rather than rigid symmetry. Horizontal flow like a shoreline.
Large gradient washes spanning the viewport. Hierarchy through weight and color, not density.
Gradients, glass effects, nautical stripes, weathered textures, and translucent overlays bring the coastal aesthetic to life in code.
Sky-to-sea gradient using mist, sky blue, and seafoam. Subtle sand-to-white for content sections.
linear-gradientTranslucent white with backdrop-filter blur. Evokes found sea glass -- smooth, luminous, worn by the tide.
backdrop-filterRepeating linear gradient creates classic navy-and-white ticking stripes. Maritime tradition in pure CSS.
repeating-linear-gradientSVG turbulence noise for linen grain. Bleached text with white text-shadow for a sun-worn feel.
feTurbulence text-shadowOcean primary, outlined secondary, and warm coral call-to-action.
How coastal materials translate into web design equivalents.
| Physical Material | Web Equivalent |
|---|---|
| Weathered Driftwood | Muted taupe/gray backgrounds, subtle grain texture overlays |
| White-Washed Wood | Off-white backgrounds with faint horizontal striping patterns |
| Linen / Cotton Fabric | Light textured backgrounds, canvas noise via background-image |
| Woven Rattan / Wicker | Crosshatch or woven SVG pattern overlays at low opacity |
| Sea Glass | Frosted glass backdrop-filter: blur() effects with translucent tints |
| Smooth Pebbles | Rounded corners, gentle shadows, muted gray palette |
| Sand | Warm beige gradients, grainy texture backgrounds |
| Rope / Jute | Thick decorative borders, knotted divider elements |
| Ceramic / Pottery | Rounded card shapes with earthy shadow tones |
| Sheer White Curtain | Semi-transparent white overlays, soft veil effects |
Coastal Style branches into distinct regional and tonal interpretations.
Expansive, luminous, and comfortable. Crisp white and navy blue dominate. Tailored, preppy refinement with ticking stripes and premium natural materials.
Lagoon colors meet ochre and terracotta. Arched shapes, botanical motifs, and wrought-iron accents evoke the sun-drenched shores of Southern Europe.
California-casual with clean lines. Avoids overt beach themes. Neutral-dominant with subtle blue accents, woven textures, and generous whitespace.