Fove
All palettes

Sky, current, abyss

Tidal Drift

Clear, technical, and calm, with a deep end for authority.

Data productsFinance toolsTechnical decks
Open in editor

Palette story

Tidal Drift

#E6F2FA
Color 1
#B6DAF0
Color 2
#6DB4DE
Color 3
#2C7DB8
Color 4
#114E84
Color 5
#06223F
Color 6

Tidal Drift is a blue system with range. It has pale sky, clean mid blues, saturated current, and a deep abyss tone. That range makes it practical: it can support readable UI, data visualization, subtle brand surfaces, and strong hero imagery without adding unrelated accent colors.

Blue palettes are common, so the job is to avoid looking default. Tidal Drift does that through depth. The darkest tone gives the system weight, while the lighter blues provide air and precision.

How to use it

For product pages, let a mesh gradient move from deep blue to pale sky behind screenshots or diagrams. For dashboards, keep the gradient in larger surfaces and use the ramp for states, charts, and supporting UI.

Color story

The palette follows water from reflective surface to open depth. It is calm, but not passive. There is motion in it, which is why it works well for products that explain systems, data, or decisions.

Live gradients

Put the palette to work.

Remix this palette

Hero background

A full-bleed field with enough motion for a landing page and enough restraint for text.

Split layout

Use the gradient as one half of the composition, then let white space carry the copy.

Feature pillars

Repeat the palette across cards so the page feels like one system, not separate moments.

Design system utility

Ramps, variables, and production handoff.

Use the editorial page for direction, then take the palette into product work with OKLCH ramps and CSS variables.

OKLCH ramps included
c1#E6F2FA
c2#B6DAF0
c3#6DB4DE
c4#2C7DB8
Color 1 - tidal-drift-1#E6F2FA
Color 2 - tidal-drift-2#B6DAF0
Color 3 - tidal-drift-3#6DB4DE
Color 4 - tidal-drift-4#2C7DB8
Color 5 - tidal-drift-5#114E84
Color 6 - tidal-drift-6#06223F