Design guide
How this site was drawn, not just built.
Flatwater Collective is a concept site for a community nonprofit. The brief: hopeful without being saccharine, warm without being vague. Here's the system behind it.
Palette: a river at golden hour
Four colors, all pulled from the same imagined scene. No pure white, no pure black, no neon. The palette should feel like it was mixed on a watercolor tray, not picked from a framework.
Warm paper
Background. The page itself reads like a storybook page, not a screen.
#F7F1E3
River blue
The water. Calm, muted, never electric. Used for water bands and secondary panels.
#5B87A6
Sunset coral
Warmth and action. Golden-hour light, accents, and the donate button.
#E8896B
Deep pine
Text and anchoring. A green-black that keeps contrast high without the harshness of pure black.
#2E4B3F
Type: a storyteller and a plain talker
Two Google fonts, loaded with next/fontso there's no layout shift. One tells the story, one handles the logistics.
Display · Lora
Calm water isn't a luxury.
Lora is a brushed, contemporary serif with calligraphic roots. It reads like a well-loved picture book: warm and literary, but crisp on screen. We chose it over Gelasio because its curves render softer at display sizes, which suits the hand-illustrated scene.
Body · Karla
Sliding scale down to zero. One-page intake forms.
Karla is a grotesque with a slightly quirky, humanist warmth. It keeps body copy, labels, and buttons friendly and legible without competing with the serif. Bold Karla in letterspaced caps does all the wayfinding.
Signature technique: the layered-terrain hero
The hero is a living storybook illustration built from six stacked SVG bands. Here's how it works and why it belongs on a nonprofit site.
Six terrain bands, one scene
Sky, hazy far hills, sunset mid hills, pine treeline, river, and foreground reeds are separate absolutely-positioned SVG layers. Each is a hand-drawn path filled with a palette color, so the scene stays crisp at any width and weighs almost nothing.
Parallax that behaves like depth
Framer Motion's useScroll drives a useTransform per band. The sky drifts 12% of scroll distance, the reeds 74%. Farther things move less, exactly as they do from a moving canoe, and the flat illustration gains real depth.
Line art that draws itself on
Birds, the canoe with two paddlers, and the reeds are stroke-only paths animated from pathLength 0 to 1, staggered over the first three seconds. It reads as an illustrator's pen finishing the scene while you watch. Afterward, gentle infinite loops keep the canoe bobbing and the reeds swaying.
Why this fits a nonprofit
Community organizations sell trust and feeling, not features. Photography can read as stock, and slick gradients read as tech. A hand-drawn landscape that moves like the real place says: humans made this, about a place they love. And because it's SVG and transforms, it's fast, accessible, and disabled cleanly under prefers-reduced-motion.
Design principles
The landscape is the brand
There's no abstract logo system here. The identity is a place: a river, hills, a treeline, reeds. Every section borrows from that scene, so the whole site feels like one continuous illustration you're paddling through.
Soft edges, honest words
Curved wave dividers between every section, generous corner radii, no hard rectangles. But the copy stays plain and specific: dollar amounts, session counts, one-page intake forms. Softness in the visuals earns directness in the words.
Motion like water, not like software
Everything drifts, bobs, or draws itself on. Nothing snaps, bounces, or pops. Reveals ease upward like something surfacing. All motion respects prefers-reduced-motion and falls back to a still illustration.
Numbers told humanly
Impact stats lead with people, not metrics: “1,400 families found calm water,” not “1,400 clients served.” Each number carries a one-line footnote that explains why it matters.