rootworkBrand
The client's chain runs from people to communities, gardens, crops, harvests, marketplace, requests, local demand and better decisions. That chain is a network, so the identity shows the network under the soil. Roots join your crop to a neighbour's request, and a match is two roots meeting.
Colour
A committed strategy. Beetroot carries the brand, and chlorophyll appears only on live matches and the one series that matters in a chart. Neutrals are tinted toward beet, never grey. Contrast ratios are measured live on this page against the colour each swatch is used on.
Chart ramp
Status vocabulary
One pill per state, used the same way everywhere. Semantic colours are for states only; the brand colour is never a status except "yours".
Typography
Bricolage Grotesque for display: a grotesque with optical sizes and slightly irregular, hand-set letters, so the headings feel human without being twee. Atkinson Hyperlegible for everything else, designed by the Braille Institute so that it reads at a glance in direct sun.
Marketing scale · fluid
--fs-displayGrow what Brunswick wants.--fs-h1Fourteen neighbours want coriander.--fs-h2Your zucchini glut, sold before it's picked--fs-leadSilverbeet, 2.4 kg spare, collected from the CERES shed on Saturday at 10 a.m. by Aisha from Fitzroy North.Product scale · fixed
28 display4.2 kg by 12/0122 displayMorning, Priya.18 displayBed 2 · Silverbeet 'Fordhook Giant'16 bodyWater deeply before 8 a.m. BOM forecasts 31° on Thursday in Brunswick East.14 bodyPickup at the CERES shed, Roberts St, Brunswick East VIC 305713 mutedPosted 26/09/2026 · 400 m away · 3 people askedtabular$12.50 · $8.00 · $110.00 · 0412 345 678Space, shape, depth
Organic instrument. Soft-cornered white faces sit on a beet-toned ground, and depth comes from tone, not shadow. A single hairline separates rows. Actions are pills. The app is built for one-handed use in the garden (48px controls), and admin tightens to 38px at a desk. Roots, not rules, connect related things.
--r-ctl 8px--r-card 12px--r-lg 20px--r-full pill--bw 1px · --bw-strong 1.5px--elev-pop--h-ctl 48px · row 56px--h-ctl 38px · row 44pxSpacing · 4px base
Controls
Every variant, size and state. Hover, focus and pressed are live; tab through with the keyboard to see the focus ring.
Buttons
Text inputs
Choice
Date, notes, photo
Surfaces & data
Faces, lists, tabs, accordions, tables with a bulk bar, and the layers: sheet, drawer, modal, toast and tooltip.
Face with list
Tabs, accordion, tooltip
When can I sell homegrown produce?
What happens if nobody collects?
Table with sort, select and bulk bar (admin density)
| Box | Buyer | Growers | Pickup | Total | Status | ||
|---|---|---|---|---|---|---|---|
| RW-2041 | Spring greens | Hannah Leigh | 3 | CERES shed | $32.00 | Packing | |
| RW-2040 | Herb bundle | Dev Patel | 2 | Lygon St cart | $14.00 | Packing | |
| RW-2039 | Family box | Sophie Tran | 4 | Fitzroy CFC | $48.00 | Collected | |
| RW-2038 | Spring greens | Liam O'Brien | 3 | CERES shed | $32.00 | Payment failed |
Layers
In the app, layers are bottom sheets that slide up from the tab bar. You'll see them in the phone frame from Batch 2.
Domain components
The components only this product has. These are what show the system was made for Rootwork rather than borrowed from somewhere else.
Crop rows, rooted to requests · tap a crop to hear its note
Match web · tap a neighbour to match
Four people within 1.5 km asked for silverbeet this week.
Crop stage track
02/08
14/08
01/09
now
~20/10
Harvest forecast
More zucchini than you'll eat, around 12/01. Six neighbours asked for zucchini this month. Pre-list it now and they'll be told first.
Listing and request
Rainbow silverbeetFree
Coriander, 6 bunches$2.50
Hannah · Brunswick East · by SundayOpen
Planting signal · wanted vs grown nearby
Beetroot bar is demand; lime bar is supply. A long beet bar with a short lime one is a gap, and gaps become "What should I grow?" recommendations.
Seed loader · replaces the spinner
Weather-aware care
Sound
Sound is synthesised in the browser with no audio files, so it works offline. It stays off until the user turns it on, and admin is silent by default. Every crop owns a note on a C-major pentatonic scale, which can't clash, so a garden plays its own tune. Sounds mark the moments that matter; routine taps stay quiet.
The crop scale
Motion
Roots grow, nothing bounces. Transitions use ease-out curves over 140 to 360 ms, and root lines take 1.4 s. Only transform, opacity and stroke-dashoffset animate. With reduced motion switched on, everything appears drawn and the sound still plays.
--dur-1 140ms--dur-2 220ms--dur-3 360ms · ease-out--dur-grow 1400ms · 110ms staggerpulse on the node, 700msFeedback & states
The unhappy paths are designed, not left to chance.
Empty · first run
Nothing planted yet
Add your first crop, or ask the garden designer for a layout that fits your space.
Zero results
No one nearby wants okra yet
We'll tell you the moment someone asks. Or widen the search to 5 km.
Loading skeleton
Offline in the plot
Permission denied
Success · error
Iconography
One family on a 24px grid with a 1.7 stroke and rounded joins, drawn for this product and inlined as SVG. No emoji, no icon font.
Bans
Written down, so they are enforced.
- No forest green, kraft paper, leaf logos or script type.
- No terracotta and sage on an oatmeal ground.
- Lime marks live matches only; it is never decoration.
- Roots connect real things. No decorative squiggles.
- No gradient text, no glass, no glow.
- No shadow on resting faces; depth comes from tone.
- No emoji as icons. One icon family.
- No bounce or elastic easing.
- No sound without the user turning it on. No sound on routine scrolling.
- No three equal cards as the answer to every section.
- No lorem, no dead links, no browser pop-up boxes.
- No text on a photo without a scrim.