01 — Role
Leading the rebuild.
I’m leading the design system rebuild for Concord. I audited existing interface patterns, identified where components had drifted into overlapping, inconsistent versions of the same thing, and architected a semantic token framework to replace the patchwork underneath. I used AI-assisted analysis to accelerate the initial audit of the legacy LESS implementation, then built and refined the token architecture directly in Figma.
02 — Problem
Assembled, not designed.
Concord serves two related but different needs: it’s a tool for browsing and reading scripture, and a tool for building citation lists for church readings and personal study. The interface fell behind in design quality and began to not serve those roles well.
Saturated fills and dark shadows added visual weight to a product whose purpose is closer to quiet study than software navigation. Inconsistent corner radii and overlapping components made the product feel assembled rather than designed, and made every new feature harder to build than it should have been. In short, the program seemed antiquated and needed a refresh.
03 — Auditing What Existed
Find the overlap before building anything new.
Before building anything new, I audited the existing interface and found components that had been built multiple times, slightly differently, with no shared standard tying them together. That overlap was the clearest sign the product needed a real foundation, not another one-off addition.
04 — Architecting the Foundation
50 primitives. 35 tokens. One semantic layer.
I built a semantic token framework spanning color, typography, spacing, and theming: 50 color primitives across 6 hue ramps, 35 semantic tokens across global and content-specific categories, a 21-token typography scale across 5 responsive modes, and a 9-step spacing scale.
The framework supports Light, Dark, and High Contrast themes today, built on a shared semantic layer designed so future themes extend the system instead of requiring structural changes.
05 — Working from the Legacy Code
AI-assisted analysis. Built by hand.
Concord’s existing styles lived in undocumented LESS files with no consistent pattern behind them. I used AI-assisted analysis to translate those legacy implementation patterns faster and inform the early architecture decisions, then built and refined the real system by hand in Figma.
06 — Outcome
The foundation is built. Implementation is next.
This work is in progress. The token foundation and consolidated component patterns are built. Implementation in the live product hasn’t started yet. What exists today is the foundation the next phase of Concord will be built on — consistent, scalable, and built to support both how people read and how they compile what they’ve found.
Reflection
The instinct here was the same one I bring to every system: find where a product has drifted into inconsistency, audit what’s actually there instead of assuming, then build the foundation that lets everything after it move faster. Concord didn’t need more features bolted onto a shaky base. It needed the base rebuilt first.