All work
PrivateAnalytics2024

Verdant

A carbon-tracking analytics suite turning messy supplier data into clear, decision-ready dashboards.

Role
Full-Stack
Timeline
2024
Stack
Vue · D3
Team
5 people
State · private

Not public — by request

private — internal client work

No public demo for this one

This was internal client work under NDA. The write-up and gallery below capture the build — happy to walk through it live.

Request a walkthrough
The problem

Seven products, seven slightly different buttons.

The company had grown to seven web products, each maintained by a different squad. Brand drift was everywhere — three blues that were almost the same, four button heights, inconsistent focus states. Every rebrand was a multi-month, all-hands ordeal.

Leadership wanted one source of truth that designers and engineers could both trust — without slowing any team down.

My role

Lead full-stack — from schema to docs.

I owned the platform end-to-end with a designer and a second engineer. My remit:

  • Architect the token data model and versioning (Postgres + Prisma).
  • Build the editor UI and live documentation site (Next.js, tRPC).
  • Ship the theming engine that pushes tokens to consuming apps at build time.
  • Define the contribution workflow so squads could add components safely.
The solution

Tokens as data, docs as a product.

Every token, component and theme became a versioned database record with a clean API. The docs site renders live, interactive examples straight from that data — never a screenshot, never out of date.

Accessibility was non-negotiable: contrast is validated automatically on every token change, and a component can't ship without passing focus and keyboard checks.

The outcome

One system, adopted fast.

Within two quarters, adoption crossed 90% and the next rebrand shipped in days instead of months.

94%
component adoption across products
−40%
faster page loads after consolidation
3d
to ship a full rebrand, down from months
Gallery

A look inside