Reference trips across the motu
Our art team spent spring photographing dawn skies from Piha Beach, Lake Tekapo, and New Brighton Pier. Each location gave us unique colour stories: teal spray over volcanic rock, lilac reflections on calm lake water, and fiery orange slicing through mist. We fed those palettes into our design moodboards before building any gradients.
Back at the studio we projected the photos onto the wall, painted loose blobs with acrylics, and mapped where light naturally diffuses. That analogue vibe guided the digital mesh points you now see across the site.
The CSS gradient mesh recipe
We layered three radial gradients over a linear base. Each radial uses transparent edges so colours whisper into each other instead of clashing. The key is offsetting the circles beyond the viewport — this avoids obvious banding and creates that aurora feeling on scroll.
Because pure CSS runs everywhere, the hero backgrounds remain lightweight. No video loops, no WebGL canvas, just lovingly tuned gradients updated via design tokens.
Performance & accessibility
Gradient-heavy designs can murder readability if you’re not careful. We overlay a subtle frosted layer (backdrop-filter blur) on cards to ensure text contrast remains at least 4.5:1. We also reduced animation intensity for users who enable “prefers-reduced-motion”.
On mobile we dial back saturation to prevent colour crush on OLED screens. Testing on an iPhone SE and a budget Android helped us balance vibrancy with battery life.
Future experiments
Next on our list: generative meshes responding to weather APIs. Imagine logging in from Wellington on a stormy day and seeing moody charcoal gradients coupled with electric teal flashes. We’re prototyping this with progressive enhancement so legacy browsers keep the current static look.
As always, shout in #design-club on Discord if you want to test early builds. We thrive on community feedback.