Saas and Web design
EveryGrove: an all-in-one field operations platform for tree-care and arborist- designing a themeable design system for a field-ops SaaS
EveryGrove runs a tree-care business end to end — an AI voice receptionist ("Willow"), GPS-mapped photo proposals, crew dispatch, bilingual work orders, timecards, and invoicing.
The app was capable but visually undifferentiated: it shipped on the stock shadcn/ui theme, default blue, untouched, with no design system underneath it.
My role
I was brought in for two workstreams:
a visual refresh of the web app for their V3 release, and a rebuild of the marketing site in Framer with a tight deadline of 1 month.
This is a case study about working within tight constraints: a real codebase I couldn't restructure, a design tool on its free tier, a scope I had to respect, and a small async team — and about directing AI tooling to move fast without losing design judgment.
Problem
No design identity. Stock shadcn blue, so the product looked like a template.
No system. Colours, radii, and component styles weren't documented anywhere; each screen risked drifting.
A hard constraint I couldn't touch. The app was built in React + Tailwind + shadcn-style CSS variables. I could re-theme it but not restructure it.
Insights
Every component in the app already referenced design tokens rather than hard-coded colours. If the tokens were designed properly, one change would re-skin the entire product — light and dark.
So the first deliverable wasn't a screen. It was a system: a drop-in theme whose token names matched the codebase exactly, a re-tuned semantic palette for the parts the base theme couldn't reach (status badges, calendar events), and a short list of the few hard-coded colours that needed per-component fixes. The result: one paste re-themed the bulk of the app; a five-item list covered the rest.
Design Direction
I set out to make the product feel calm, confident, and premium — a tool people trust with their business. That led to a clear set of decisions: charcoal surfaces, generous corner radii, pill-shaped controls, a single soft green as the accent, and white text for clarity.
I arrived at the palette through deliberate iteration, testing a few directions on real screens before committing to the charcoal-and-green system that held up best across the app.
The decision that gives the product its feel is a rule I set early: green is a scarce, deliberate moment — the primary action, the active state, a highlight, a price — and never a large fill. Roughly three green moments per screen. Everything else stays charcoal and white, with muted semantic colour reserved for status. That restraint is the difference between "premium" and "loud," and it's the principle I enforced across every screen.
The work
With the system in place, I redesigned the core surfaces:
Leads — a card grid and a list view, status carried by a muted semantic palette.
Calendar — a week-view scheduler with an event-colour system and an unscheduled-jobs panel.
A "My Day" dashboard — a launchpad opening the app on what matters that morning: today's schedule, money that needs attention, and an action queue surfacing only what's waiting on the user, including calls flagged by the AI receptionist. Designed in both owner and crew variants.
Maps — the highest-contrast fix: the live map was a bright default that broke the dark UI, so I moved it to dark tiles with job-state-coloured pins, making the whole page feel intentional.
Proposal & work-order editing — reworked the editable-document experience, including the "Willow" AI assistant, which I designed to open with a discoverable set of its actual capabilities rather than a blank prompt, then collapse out of the way.
A single reusable list-table pattern — recognising that five pages (Leads, Clients, Proposals, Invoices, Work Orders) shared one layout, I designed the pattern once rather than mocking each, and flagged it to the developers as build-once.
Mobile — reworked the proposal editor for small screens, moving the AI assistant to a bottom sheet and stripping non-essential chrome so the document gets the screen.
Because the developers used AI coding tools, I wrote the developer handoff (the CSS, application steps, and the hard-coded-colour exceptions) to paste straight into their tooling, plus in-file documentation covering the usage rules and how to work in the design system without breaking it.