Coralis — Island Dive Resort

coralis-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Coralis is the landing page for a fictional overwater dive resort, and its whole visual language is aquatic and hand-shaped rather than gridded. The surface is a warm sand #F7F2E7 (--sand) that washes into pale aqua #e4f4f5 down the page, with deep marine teal #0B3A4A (--marine) doing the heavy lifting for text and dark sections. The voltage is a turquoise–coral pair: lagoon #1FB6C9 (--turq) fills the spa section and tints italic accents, while a warm coral #FF7E6B (--coral) powers the glowing CTA, price tags and accent tiles; palm green #2F7D58 (--palm) is the quiet third accent on eyebrows and ocean tiles. The signature moves are unmistakable: every photo is masked into an organic "pebble" blob (border-radius: 62% 38% 34% 66% / …), villa cards gently bob with an anime.js float, animated white caustic-light ripples drift across the hero like sun on water, and the all-inclusive package sits inside a giant asymmetric card with a hand-drawn 70px 120px 80px 120px radius. Type pairs an airy, light-weight italic Cormorant Garamond display against a calm Manrope body, with 11px uppercase eyebrows tracked out to 0.35em. The geometry is soft, fluid and oceanic — nothing here is a hard rectangle except the section bands.

Colors

Brand / Voltage. --turq #1FB6C9 is the lagoon brand color — it fills the entire spa section, tints italic display accents ("sky and reef", "tide"), and colors the seaplane icon chip. --coral #FF7E6B is the action/warmth voltage: the .coral-cta fill, the dual-glow shadows beneath it, every "From $… / night" price label, the hero status dot, and the "Sandbank Dinners" tile. --palm #2F7D58 is a supporting green for section eyebrows and the "Reef Dives" tile.

Surface. --sand #F7F2E7 is the page background and the package card body; it gradient-washes into aqua-mist #e4f4f5 across the villas section and is the solid background of the experiences section. --marine #0B3A4A is the deep teal used both as the dominant text color on light surfaces and as the fill for the marine experience tile, the footer, and the lower half of the package band. hero-cyan #9bf0fb is a one-off bright cyan for the hero's italic "paradise".

Text. Headings and primary copy use --marine #0B3A4A. Secondary/body copy on light surfaces uses text-body #3a5a64, a muted slate-teal. On dark and turquoise sections text is white (often at 70–85% opacity); footer body is footer-text #cfe4ea.

Hairlines. Borders are translucent white rgba(255,255,255,0.10) (footer divider, dark-section rules) or a faint coral rgba(255,126,107,0.35) on the "Couples Spa" stillness tile.

Gradient. A diagonal marine scrim (hero-scrim) darkens the hero's lower-left for legibility; villas-gradient runs sand→aqua-mist top to bottom.

Typography

Two Google Fonts, loaded via one @import (Cormorant Garamond + Manrope). Cormorant Garamond (.font-display, serif) is the display face — used light (300–400) and very often italic for an elegant, editorial resort voice. Manrope (.font-body, sans-serif) carries all body, navigation and label text, leaning light (300) for paragraphs and semibold (600) for eyebrows and CTAs. Both are open-source; no substitution needed.

Layout

Base unit 4px on the Tailwind scale. The page is a single-column stack of full-bleed sections: a h-screen (min-h-[680px]) photographic hero; a 3-column villas grid where cards are staggered vertically (md:mt-20, md:mt-8) to read as floating; a CSS multi-column masonry of experience tiles (columns-1 → lg:columns-3, break-inside-avoid); a 12-column spa split (4/8) with overlapping pebble thumbnails poking out of the main image; a two-band package section (turquoise top half, marine bottom) with a centered max-w-5xl card straddling the seam; and a marine footer. Content max-width is max-w-7xl with px-6 sm:px-10 gutters. Whitespace is generous — py-24 to py-36 vertical rhythm — and the composition deliberately breaks the grid with overlap and organic shapes.

Elevation & Depth

Depth comes from large, soft, marine-tinted drop shadows rather than neutral greys: villa images carry 0 30px 60px -15px rgba(11,58,74,0.4), the spa hero 0 40px 80px -20px rgba(11,58,74,0.55), and the package card a dramatic 0 50px 100px -25px rgba(11,58,74,0.65). The coral CTA is a special case — an inset white ring plus a dual coral+turquoise glow (0 14px 36px -8px rgba(31,182,201,0.55) and 0 6px 20px -6px rgba(255,126,107,0.6)) that intensifies on hover. The hero uses two animated white caustic light layers in soft-light/overlay blend modes for depth-on-water. Floating pebble thumbnails get a 6px white border to lift them off the photo behind.

Shapes

The radius story is the headline. Photos are never rectangles — they are masked into three organic "pebble" blobs (.pebble-a/b/c, e.g. 62% 38% 34% 66% / 58% 34% 66% 42%) that read like stones or sea-smoothed shells. Experience tiles use a soft 28px (rounded-[28px]). Interactive elements — CTAs, the eyebrow badge, icon chips, the newsletter field — are full pills (9999px). The package card escalates the organic theme to a hand-drawn asymmetric 70px 120px 80px 120px / 80px 110px 90px 110px. Hard 90° corners appear only on the full-bleed section bands.

Components

• coralCta — coral #FF7E6B fill, white text, pill, px-8 py-4, inset white ring + dual turquoise/coral glow, lifts -2px on hover. Labels: "Reserve Your Lagoon", "Book the Escape", "Join".
• eyebrowBadge — translucent white rgba(255,255,255,0.15) pill with backdrop-blur, 1px white/25 border, 11px uppercase white. "An overwater sanctuary".
• villaCard — transparent; pebble-masked photo with 0 30px 60px -15px marine shadow, then Cormorant title (text-3xl), body, and a coral uppercase price line ("From $1,450 / night").
• experienceTile — 28px tile, p-8, flat color fill (coral / palm / marine, or sand with a coral hairline border), white italic Cormorant title and a numbered uppercase index ("01 — Dining").
• packageCard — sand fill, giant asymmetric organic radius, p-14, deep marine shadow; holds price $12,900, a coralCta, and a perks list with icon chips.
• iconChip — 36px full-circle, tinted-to-feature background (e.g. rgba(31,182,201,0.14)) with matching glyph color, holds a unicode symbol.
• newsletterInput — pill row, rgba(255,255,255,0.05) field with white/20 border, transparent input + coralCta "Join" button (footer).

Motion

Motion is layered and ambient. Two causticDrift keyframe layers translate and scale white light gradients over the hero (11s and 14s, soft-light/overlay) to mimic sun caustics on water. Villa cards and spa thumbnails (.float) bob with anime.js translateY [-8, 8] over 2600ms, alternating. A hero scroll-dot drops 12px and fades on a 1.8s loop. Scroll-in reveals are GSAP ScrollTrigger: .reveal and .reef-tile fade up (autoAlpha 0 → 1, y 28–36px) as they enter, and hero items stagger in at 0.12s intervals. Lenis provides inertial smooth scrolling (lerp 0.09). The coral CTA transitions all properties over 300ms on hover.

Iconography

There is no icon font. UI affordances use typographic glyphs: → arrows on every CTA, and decorative unicode symbols (✈ ♨ ✦ ☼) inside circular icon chips in the package perks list, each tinted to its feature color (turquoise / palm / coral / marine). Sizing is 36px chips holding ~18px glyphs. The look is intentionally typographic and lightweight, consistent with the editorial Cormorant voice.

Do's and Don'ts

• Do mask every photo into a pebble blob radius — it is the core identity.
• Do keep the turquoise/coral voltage pairing; coral is for action and price, turquoise for accents and the spa world.
• Do use light-weight italic Cormorant for display and keep eyebrows 11px uppercase tracked to 0.35em.
• Do reach for large, marine-tinted soft shadows for depth, never neutral grey.
• Don't put hard rectangular corners on imagery or square off the package card.
• Don't introduce flat/neutral drop shadows or pure-black text — text is --marine #0B3A4A or muted #3a5a64.
• Don't overload the coral; it is an accent, not a surface (except CTAs/tiles).
• Don't disable the float/caustic/reveal motion — the calm aquatic life of the page depends on it.

Known Gaps

• Hero/section display sizes are responsive Tailwind step classes (text-6xl … text-8xl, text-5xl/6xl); the clamp() values in tokens are faithful approximations of those breakpoint ranges, not literal CSS in the file.
• letterSpacing values are converted from Tailwind em tracking (0.35em ≈ 3.85px at 11px; 0.18em ≈ 2.16px at 12px).
• The caustic ripple is an animated multi-radial-gradient effect; its motion is described qualitatively. Body weight 300 is the dominant paragraph weight; Manrope is loaded across 300–700.