Blue Tides

blue-tides-design · alpha

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

Overview

Blue Tides is the landing page for "Coralline," a fictional ocean-restoration collective, and it reads like a printed nature monograph that learned to swim. The base surface is a warm paper sand (#F2EDE2) carrying near-black ink (#141210) text, but the page repeatedly submerges into deep reef teal (#2A4A5C) — the hero is a radial-gradient(ellipse at 50% -10%,#3b6577,#2A4A5C,#1a3340) seascape, and the "program" section literally descends from sand to reef via a linear-gradient(180deg,#F2EDE2,#c8c6a8,#5e7d7a,#2A4A5C). Against this, a single warm voltage of coral (#E87A68) lights every eyebrow, CTA, map pin and emphasis, with algae green (#4A8A6A) as a secondary accent. The type story is the centerpiece: Fraunces (an optical-size serif run with SOFT 100, WONK 1 variation settings) sets enormous clamp(3.5rem,11vw,11rem) light-weight headlines with negative tracking and italic Latin species names (Montipora capitata), while Inter handles body and uppercase wide-tracked eyebrows. Geometry is deliberately organic: nothing is a plain rectangle — cards are squircle (border-radius 28%), droplet and freeform blob shapes, and the scene breathes with animated coral blobs, drifting fish, rippling map pins and a scroll-scrubbed before/after reef wipe.

Colors

Brand / voltage. coral #E87A68 is the one warm signal color: section eyebrows ("01 · The Threat"), the nav "Sponsor a reef" hover, donate slider accent, map pins, the featured-tier badge, and italic headline emphasis (sea's). algae #4A8A6A is the secondary accent — the featured donation tier fill, "Monitoring" map dots, method-02 card, and the Tabler UI icons.

Surface. sand #F2EDE2 (CSS --sand) is the page background and, inverted, the text/foreground color on every dark section. reef #2A4A5C (--reef) is the immersive deep surface — hero gradient base, the sites section, the stat tiles, and the large bento media card. ink #141210 (--ink) is body text on sand and the surface of the footer and dark accent cards. white appears only at low opacity (white/40, white/50, white/60) to frost glassy stat/tier cards over sand.

Text. On sand, headings and body are ink, with body often dropped to ink/80. On reef/ink surfaces, text is sand, frequently at opacity-60–80 for secondary copy and opacity-50 for muted labels.

Hairlines. Borders are thin and translucent: ink/10–ink/20 on sand (section dividers, card outlines), sand/15–sand/20 on reef (the footer rule, map frame, stat-grid lines created by a gap-px background).

Gradients. Three named gradients do the heavy lifting: the hero seascape radial, the sand→reef depth-descent linear on the program section, and the subtle caustic light-from-above radial overlaid on the hero.

Typography

Two Google Fonts: Fraunces (ital,opsz,wght axes, weights 300–900) as the display/serif voice and Inter (300–700) as the body/UI voice; Tabler icons-webfont is loaded for icons. Fraunces is applied with font-variation-settings:"SOFT" 100,"WONK" 1 for a soft, slightly quirky cut, and italic species names use Fraunces italic 500. If substituting, Fraunces is open-source (Google Fonts) so no fallback is needed; Inter likewise.

Layout

Base unit is Tailwind's 4px scale. Content sits in max-w-7xl (program in max-w-6xl) with px-6 md:px-12 gutters and a py-28 md:py-40 vertical rhythm. The page is a long single-column scroll narrative with numbered sections (01–05). Signature structural moves: a full-bleed min-h-screen hero with absolutely-positioned floating blobs and fish over a photo; a 12-column biomorphic bento grid mixing squircle, droplet and blob cards of varying spans; a centered depth-descent timeline with a gradient vertical spine and alternating left/right steps pinned by glowing circular markers; a dotted-SVG world map with absolutely-positioned glass pins; and a footer anchored by a giant clamp-scaled "Keep the tide-line rising." headline. Whitespace is generous and editorial; the fixed header uses mix-blend-difference so it reads against any section.

Elevation & Depth

Depth comes mostly from color, blur and organic shape rather than drop shadows. Glass: .glass = rgba(240,232,210,.08) + backdrop-filter:blur(14px) + 1px sand/25 border (hero CTA, map tooltips); some cards use backdrop-blur over white/60. Grain & caustics: a tiny radial-gradient dot pattern (.grain, 3px tile) and the caustic light radial sit over the hero for an underwater texture. Shadow is sparse — the featured donation tier carries shadow-xl and slight scale/translate to pop forward; the pin-glow keyframe animates an expanding coral box-shadow ring on map pins. Otherwise depth is hairline borders and the breathing blurred blobs (filter:blur(1–4px)) layered behind content.

Shapes

Roundness is the brand. Almost nothing is a plain rectangle: .squircle (border-radius:28%) for bento and tier cards, .droplet / .blob-3 (50% 50% 50% 50% / 30% 30% 70% 70%) for egg-shaped tiles, freeform .blob-1/ .blob-2 for the ambient background organisms, rounded-[2rem] (32px) for image and map frames, rounded-xl (12px) for glass tooltips, and rounded-full pills for chips, the nav button, and tier buttons. The tier-card hover even morphs its rising fill from a soft 40% 40% 0 0 / 12% 12% 0 0 arc to square.

Components

• Nav CTA — transparent pill, 1px border-current, rounded-full, px-4 py-2; hover inverts to filled with reef text. Header is fixed with mix-blend-difference.
• Hero glass CTA — .glass pill, sand text, uppercase tracked label ("Explore ↓"); hover background → coral.
• Stat tile — reef fill, sand text, Fraunces 48px light figure over a tiny uppercase label; tiles separated by gap-px hairlines.
• Bento card — biomorphic media cards on reef/algae/coral/ink fills, squircle/droplet/blob radii, hover-magnet lift, video/photo backgrounds.
• Tier card — squircle, white/50 fill + ink/15 border (featured = solid algae, shadow-xl, scaled up); hover raises a colored .fill from the bottom and flips text to sand. Buttons: full-width border-current pills.
• Chip / badge — rounded-full coral or algae pills, e.g. "Most popular," "2002 · thriving."
• Map pin — coral/algae dot with pin-glow pulse and ripple-ring; selected pins show a glass rounded-xl tooltip with species name.
• Range sliders — native input[type=range] with accent-coral, driving the donate calculator and the before/after reef wipe.
• Footer newsletter — borderless email input on a sand/40 bottom rule with a coral "Join →" button.

Motion

Heavily animated and ambient. CSS keyframes: breathe/breathe-slow (blobs scale+rotate, 7s/11s), drift (vertical float, 14s), fish-swim-1/2 (fish translate across viewport, 28s/36s/42s), ripple (pin rings expand+fade, 3s), pinpulse (coral shadow ring, 2.5s), scrollcue (bounce, 2s). Transitions: hover-magnet lift (.4s soft cubic-bezier), tier-card .fill rise (.7s cubic-bezier with radius morph), tier text color (.5s). GSAP + ScrollTrigger + Lenis power the scroll layer: a scrubbed before/after reef wipe (clip-path inset) tied to the problem section, count-up number animations, hero blob parallax (yPercent), an H1 reveal (y+fade, power3.out 1.2s), and H2s that blur-in (blur(14px)→0) on scroll. Lenis provides smooth scrolling synced to the GSAP ticker.

Iconography

Two icon systems. Tabler icons-webfont (ti ti-*, outline) for UI/meaning — ti-dna-2, ti-wave-sine, ti-plant-2, ti-activity, ti-microscope, ti-school, ti-scuba-mask, ti-flask, ti-speakerphone — typically tinted algae or coral, sized text-2xl–4xl (24–36px). game-icons marine SVGs (tropical-fish, school-of-fish, jellyfish, coral, plant-seed) used decoratively, recolored via CSS filter:invert/sepia/saturate/hue-rotate to coral, algae or sand tints; the small brand mark is an inline currentColor SVG. Sizes range from 10–16px ambient fish up to 56px (w-14) tier-card glyphs.

Do's and Don'ts

• Do keep coral as the single warm voltage and algae as the lone secondary accent; reserve them for eyebrows, CTAs, pins and emphasis.
• Do use Fraunces light at large clamp sizes with negative tracking for display, and Fraunces italic 500 for Latin species names.
• Do keep shapes organic — squircle/droplet/blob and full pills — and let the blobs/fish breathe and drift behind content.
• Do alternate sand and reef surfaces, inverting text color accordingly.
• Don't introduce hard drop shadows or sharp rectangular cards; depth is glass, grain, hairlines and blurred blobs.
• Don't add new hues — stay within sand/reef/ink + coral/algae.
• Don't set body in the serif or run display in Inter; keep the two voices distinct.

Known Gaps

• Numeric design tokens (sizes, spacing) come from Tailwind utility classes (text-5xl ≈ 48px, py-28 ≈ 112px, rounded-[2rem] = 32px) interpreted at Tailwind defaults; exact rendered pixels depend on the Tailwind v4 browser build.
• The hero photo, fish SVGs, and tier/method imagery are remote CDN assets (Pexels/Unsplash/jsDelivr game-icons); only their roles and CSS filters are documented, not the image content.
• game-icon tint colors are produced by stacked CSS filter chains that approximate coral/algae/sand rather than exact hex values.
• Gradient color stops (e.g. hero #3b6577/#1a3340, depth #c8c6a8/#5e7d7a) are one-off values read directly from inline styles, not part of the named token palette.