SYSTEMS · ACCESSIBILITY · THEMING · SCALE

The system that made everything else possible

A cross-product design system built after the products already existed. Tokens, themes, WCAG standards, and a contribution model that kept it alive across teams.

Retrofitting consistency

Like most design systems, this one started after the product existed. Multiple applications, inconsistent components, accessibility gaps, and no shared language between design and engineering. The core system was built from an audit of production components, updated to support flexibility for the future.

Create a unified component system across multiple products without disrupting anything already shipped.

Four requirements, no disruption

Documentation

Shared understanding built into Figma for designers and Storybook for developers. Same source of truth, two interfaces.

Themes

At least three themes for the core platform, with architecture to support additional applications and white-label products.

Accessibility

WCAG 2.1 AA standards integrated at the component level. Not a mandate, but a goal baked into every decision.

Tokenization

Every unique element gets a defined token. Swap a value in one place, update everywhere. Consistent between Figma and Storybook.

Foundations first

Color, spacing, typography, and iconography were defined before any components. Colors were built in partnership with the brand team and audited against what already existed in production. We defined tokens for everything: text, inputs, buttons, links, tables, backgrounds.

Spacing runs on a 5pt grid, not the 8pt grid I'd used previously. There are tradeoffs to both, but 5pt gave us finer control for the dense, data-heavy interfaces legal tech demands.

Typography was consolidated from multiple typefaces down to Helvetica Now with pre-defined weights by use case. No italics. For icons, we moved from Font Awesome to Material Icons Sharp for cleaner visual consistency.

Typography + Iconography

The existing product contained multiple different typefaces, so we made a choice to reduce that to just Helvetica Now with a few of its variations. No italics, weights pre-defined by use. For icons, we moved away from Font Awesome and onto Material Icons Sharp.

Components at scale

The system has dozens of components. Buttons alone come in 7 styles with multiple variants covering icon options, color treatments, and built-in prototyped states. Inputs became complex fast: multiple styles with labels, help text, character counts, error/focused/disabled states, all multiplied across four themes with different borders and radii.

Keeping it alive

A design system that nobody maintains is just a snapshot. I set up a contribution model where developers could suggest updates, propose interaction patterns, and flag gaps. I pushed designers on my team to challenge the system's constraints while working and document any new interaction needs with rationale.

At startup scale, Slack was sufficient for working through contributions. I'm aware that doesn't scale. At JP Morgan Chase, where the system served hundreds of designers and developers, I helped run a design guild with working sessions, feedback channels, and user testing on usage guidelines. The governance model has to match the organization's size.

Why this work matters for AI products

Every AI feature I designed at Filevine was built on this system. The chat redesign used these components. The payment portal used these tokens. AI Fields, Doc Review, and the workspace concepts all inherited consistent interaction patterns and accessibility standards. A strong system doesn't just maintain quality across products. It accelerates every new thing you build on top of it.

NEXT PROJECT

Legal AI Chat

Making an AI tool that lawyers actually use, powered by LLMs and proprietary embeddings.

Read case study →