← Work / Concord Design System
Design SystemsIn progress

Concord Design System Rebuild

Nearly a decade of incremental changes left Concord’s interface a mess of overlapping patterns. Navigation worked differently screen to screen, accordions and tables had been built multiple times with no shared rule, and input forms varied from one screen to the next. Concord is used daily by people reading scripture on their own and by those preparing readings for church congregations. The interface stopped serving either group well. I audited what was there, found the overlap, and rebuilt from there.

Role
Lead Designer, Design Systems
Status
In Progress
Org
Christian Science Publishing Society
54
color primitives across 6 hue ramps
45
semantic tokens
21
typography tokens across 5 responsive modes
10
step spacing scale
3
themes on a shared semantic layer

01 — Role

Leading the rebuild.

I’m leading the design system rebuild for Concord. I audited the existing interface, found where the same component had been built three different ways with no standard behind any of them, and built a semantic token framework to replace what was there. AI-assisted analysis helped me move through the legacy LESS codebase faster. Everything after that I built by hand in Figma.

02 — Problem

Assembled, not designed.

Concord does two things: it’s a reading tool for browsing scripture, and a citation tool for building study lists and church readings. The interface stopped serving either of those well.

Saturated fills and dark shadows loaded up a product people sit with for long stretches. Cool neutrals, softer edges, and lighter visual weight make extended reading easier. The icon set was also overdue — we moved to Untitled UI, which replaced a dated library with something clean and consistent. The program needed to feel less blunt. The structural problems just made that harder to fix.

03 — Auditing What Existed

Find the overlap before building anything new.

I audited the existing interface before writing a single new component. What I found was the same pattern built multiple times, slightly differently, with nothing tying the versions together. That was the signal. The product didn’t need more components. It needed a foundation those components could actually share.

04 — Architecting the Foundation

54 primitives. 45 tokens. One semantic layer.

Primitive color ramps for brand colors, neutrals, and feedback colors. These primitives fed into 45 semantic tokens across multiple categories including surfaces, text, borders, interaction states, and more. A 21-token typography scale across 5 responsive modes and a 10-step spacing scale round out the foundation.

Light, Dark, and High Contrast themes all run on the same semantic layer. Adding a new theme later means extending the system, not restructuring it.

05 — Working from the Legacy Code

AI-assisted analysis. Built by hand.

Concord’s existing styles were buried in LESS files with no consistent pattern behind them. I used AI-assisted analysis to move through those files faster and get an initial read on the architecture, then built the real system by hand in Figma. The AI got me oriented. The design work was mine.

06 — Outcome

The foundation is built. Implementation is next.

The token foundation and consolidated component patterns are done. I walked the development team through the reworked system and they were on board immediately. They called it straightforward to implement. That reaction matters. A system developers don’t resist is one that actually gets built.

Reflection

Every system project I’ve worked on starts the same way: audit what’s actually there before assuming anything needs to be added. Concord was no different. The interface didn’t need new features. It needed the ground under it fixed first.