This page documents the visual system for this concept: a mutual insurer that wanted to look like it was run by people, not by an actuarial table. Every choice below is trying to answer one question — how do you make insurance feel warm without feeling unserious?
Insurance branding defaults to corporate blue because blue reads as “trustworthy institution.” We wanted the opposite association — trustworthy neighbor. Warm cream and terracotta borrow from ceramics and craft, not finance. Sage grounds it so the warmth doesn’t tip into “sales-y.”
Warm Cream
#FBF3E7
Primary background
Terracotta
#D97B4F
Primary accent, CTAs
Sage Green
#7C9473
Secondary accent, mutual/trust cues
Charcoal
#2B2620
Body text, dark sections
Paper White
#FFFDF9
Card surfaces
Display
Bricolage Grotesque
A grotesque with rounded joints and a slightly handmade irregularity — it has enough personality to feel warm in headlines but doesn’t collapse into “quirky startup” territory. It carries weight without feeling stiff, which is exactly the line a mutual insurer needs to walk.
Body / UI
Nunito Sans
Rounded terminals echo the display face without competing with it. It stays legible at small sizes for policy details and disclosures, which matter more here than in most industries — people are reading fine print, so the font doing that reading needs to be effortless.
Insurance sells an abstraction: “protection.” Most insurers illustrate that abstraction with stock photos of smiling families on a porch. We wanted a visual metaphor instead of a stand-in photo — something soft, dimensional, and a little squishy that stands for the idea of being cushioned from a hard landing.
Built with Three.js via @react-three/fiber, the hero blob is a distorted sphere using drei’s MeshDistortMaterial. On hover, @react-spring/three animates the scale and distortion amount with a soft, underdamped spring, so the blob compresses and wobbles like actual clay instead of snapping to a value.
The satellite blobs orbiting the hero shape stand in for home, auto, and life — three small, distinct forms held in orbit around one core idea of coverage. The same technique repeats at a smaller scale on each policy card, so the motif reads as a system, not a one-off hero effect.
Outside the 3D hero, the site leans on a flat, layered paper-cut aesthetic: organic blob shapes tucked behind sections at low opacity, cards with hard layered drop shadows (see .paper-shadow in globals.css) that mimic stacked cut paper, and generous rounded corners everywhere. It ties the illustrated imagery, the 3D blobs, and the flat UI together into one coherent handmade world instead of three different visual languages fighting each other.