The HarvestMap design system

A warm, hand-drawn system for finding what’s ripe.

Everything below is rendered from the same tokens and components the site uses — colour, type, spacing, the component library, the hand-drawn illustrations and the Scattered Seed whimsy rules. Toggle dark mode from the nav to see the aliases shift.

Design principles

Five rules that keep whimsy from tipping into cliché

Whimsy earns its place

Rotation and motion are subtle and capped. If a flourish doesn’t add delight or clarity, it’s cut.

One hand drew everything

All line art shares a 2px stroke, round caps and a single ink colour, so it reads as one illustrator.

Warm, never candied

The palette is sun-ripened. We reach for tints and washes before pure, saturated hues.

Calm down on small screens

Card rotation and parallax switch off below 768px. Content comes first; whimsy second.

Motion is a guest

Every animation yields completely to prefers-reduced-motion. Nothing essential depends on movement.

Colour

Seven harvest hues + two neutrals

Documented at their light-mode values. Each has tint and dark-mode aliases in the tokens.

Cream#FBF3E7 · Background

Clay#C2602C · Primary

Peach#F2A65A · Accent

Honey#E6B450 · Highlight

Orchard#34503A · Deep green

Moss#8A9A5B · Olive

Berry#8C3A52 · Plum

Ink#2E2419 · Text

Bark#6B5847 · Muted text

Season → colour mapping

Spring Summer Autumn Winter Year-round

Typography

Sentient, Figtree & Gambarino

Sentient · DisplayHeirloom & handpickedHeadings & titles · weights 400 / 500 / 700

Figtree · Body & UIPicked ripe the morning you visit, into padded trays.Body, labels, buttons · 400–700

Gambarino · Whimsy onlyripe & readyAccents & empty states — never body copy.

--fs-display Heirloom & handpicked

--fs-h1 Farms harvesting near you

--fs-h2 What’s ripe, by season

--fs-lead Eat with the calendar — here’s the rhythm of the year.

--fs-body Picked ripe, into padded trays, the morning you visit.

--fs-label IN SEASON NOW

Spacing

An 8px base unit

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-5

24px

space-6

32px

space-7

48px

space-8

64px

space-9

96px

space-10

128px

Radius

Five corner tokens

radius-sm

radius-md

radius-lg

radius-xl

radius-pill

Elevation

Five warm shadows

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

Components

Buttons & badges

Spring Summer Autumn Winter Year-round

Search & filters

Find a farm

Farm row · Directory list

Listings read like a directory

Farms are listed as rows — name, location, type, the crops they grow, and what's in season — no per-farm photos needed. Hover lifts a row; everything stacks cleanly on mobile.

Seasonal banner

Organic blob + a gliding flock

Empty state

Whimsy when there’s nothing to show

Nothing’s sprouted here… yet

No farms match that search just now. Try a different season, or clear your filters to see everyone.

Back to all farms

Iconography & illustration

The hand-drawn library

Ten line illustrations on a shared stroke. The last four are animated — they self-draw on load and keep a gentle idle motion (all paused under reduced-motion).

Basket

Pruning shears

Peach cross-section

Leaf

Path line

Basket texture

Mushrooms · animated

Foragers · animated

Birds · animated

Swaying trees · animated

Motion

Self-drawing reveal1.4s · ease-out
Trees sway6s loop
Birds flap1.6s loop
Blob drift22s alternate
Card hover280ms · organic ease

Accessibility

Body text meets WCAG AA on cream and on dark.
Visible 3px focus rings on every interactive element.
All motion and rotation removed under prefers-reduced-motion.
Illustrations are aria-hidden unless given a label.