A calming, professional design language inspired by coastal waters. Built for Dolphin AI with accessibility and scalability at its core. Now with dual themes, environmental effects, and scroll-based transitions.
The philosophy behind every decision in Ocean Modern.
Like still water, our interfaces communicate trust through restraint. We use teal gradients and soft shadows to create depth without overwhelming the user.
Movement in Ocean Modern mimics water—gentle lifts, soft pulses, and wave-like transitions. Nothing jerky. Everything flows.
We create visual hierarchy through layering and subtle gradients, not harsh contrasts. Every element should feel approachable, never intimidating.
Teal is serious but not cold. Our palette balances ocean depths with foam and sand—professional enough for B2B, warm enough for humans.
Ocean Modern supports both light and dark contexts. Use light for forms and applications, dark for marketing and landing pages.
Foam → White → Sand gradient. Use for sign-up forms, dashboards, and data-entry interfaces.
Slate-900 base with video backgrounds and gradient overlays. Use for hero sections and promotional content.
A palette derived from the ocean's natural gradient—from deep blues through teal to foam and sand.
Ocean Modern creates immersive experiences with clouds, waves, parallax scrolling, and color transitions that respond to user interaction.
The page background interpolates from sky blue at the top to foam/sand at the bottom as the user scrolls, creating a journey from sky to shore.
// Color transition using linear interpolation const skyBlue = { r: 224, g: 242, b: 254 }; // #e0f2fe const foam = { r: 240, g: 253, b: 250 }; // #f0fdfa const sand = { r: 254, g: 252, b: 232 }; // #fefce8 // As user scrolls: sky → foam (top), sky → sand (bottom) const topColor = lerpColor(skyBlue, foam, scrollPercent); const bottomColor = lerpColor(skyLight, sand, scrollPercent);
SVG filter-based clouds with diverse shapes that scroll faster than the page (1.5x parallax), creating depth.
/* Cloud filter using feTurbulence + feDisplacementMap */ <filter id="cloud-filter"> <feTurbulence type="turbulence" baseFrequency="0.015" numOctaves="3" seed="5" /> <feDisplacementMap in="SourceGraphic" scale="30" /> <feGaussianBlur stdDeviation="4" /> </filter> /* Parallax: clouds move 1.5x faster than scroll */ clouds.style.transform = `translateY(${-scrollY * 1.5}px)`;
Layered SVG waves with staggered timing create organic ocean movement. Waves appear when scrolling near the bottom.
/* Four wave layers with staggered durations */ .wave-back { animation: wave 80s linear infinite; fill: #2d6b6c; } .wave-mid { animation: wave 60s linear infinite; fill: #4a9d9e; } .wave-front { animation: wave 45s linear infinite; fill: #67b8b8; } .wave-foam { animation: wave 35s linear infinite; fill: #99e6e6; } /* Scroll-triggered visibility */ .ocean-container { opacity: 0; transition: opacity 0.5s ease; } .ocean-container.visible { opacity: 1; }
Interactive elements built with the Ocean Modern token system.
Animations that feel like gentle water movement—never jarring, always purposeful.
Hover over each card to see the animation.
--duration-fast (150ms) — Micro-interactions: hover states, focus rings--duration-normal (300ms) — Standard transitions: buttons, cards, inputs--duration-slow (500ms) — Emphasis transitions: modals, page transitions--duration-slower (700ms) — Dramatic effects: hero animations, revealsA three-tier system that enables theming and maintainability.
/* ═══════════════════════════════════════════════════ TIER 1: PRIMITIVES (Raw values, never used directly) ═══════════════════════════════════════════════════ */ --color-teal-600: #4a9d9e; --color-foam: #f0fdfa; --color-sand: #fefce8; --space-4: 1rem; /* ═══════════════════════════════════════════════════ TIER 2: SEMANTIC (Purpose-driven, themeable) ═══════════════════════════════════════════════════ */ --color-brand-primary: var(--color-teal-600); --color-bg-secondary: var(--color-foam); --color-bg-tertiary: var(--color-sand); /* ═══════════════════════════════════════════════════ TIER 3: COMPONENT (Specific usage) ═══════════════════════════════════════════════════ */ --btn-padding-y: var(--space-4); --input-border-width: 2px;
Why three tiers? Primitives give you raw values to reference. Semantic tokens give meaning (what is "primary"?). Component tokens make specific decisions. To theme the system, you only change Tier 2.
Essential values at a glance.