Design Systems

Tecton Design System

Design Systems · Q2 · 2024 — 2026

Tecton's building blocks: color tokens, type, and the components built on them.

overview

Tecton is Q2's design system — the layer of tokens, components, patterns, and documentation that makes consistent, high-quality design possible across a platform spanning hundreds of financial institutions.

It started in 2017 as the framework for extensions — features that run inside Q2's digital banking in their own frame. Tecton gives them the same components, styles, and ways of talking to the platform as everything around them, so they look and behave like part of the product. It reached 1.0 about three years later.

I led design on Tecton from 2024 through 2026. The work wasn't just building components. It was about modernizing the visual language of Q2's platform, shipping aesthetic templates that gave financial institutions meaningful customization within a coherent system, and building the contribution and governance model that lets a distributed team actually use and trust it.

challenge

Tecton's reach is what makes modernizing it hard. It sits underneath Q2's own features and the extensions built on the platform by many teams over many years, each extension running in its own frame. A new look only works if it reaches all of them at once, without every team having to rebuild their work.

approach

The answer was aesthetics: complete looks, selected in the platform's theme configuration. Each aesthetic sets most of the top-level variables that define the system's shape and appearance, so one choice changes the look of the whole system rather than one component at a time.

One aesthetic, chosen in theme configuration, styles Q2's own features and the extensions running inside them.

Extensions had to come along too. The selected aesthetic loads into them as well, and features can read the active theme and react when it changes — so a new look reaches the whole experience, not just the parts Q2 builds itself.

outcome

Full aesthetics support shipped in Tecton in mid-2026, carrying a theme's look through Q2's own features and into the extensions built on top of them.

The work also earned a Q2 GameChanger Award in 2026. I was one of ten employees selected company-wide in the award's first year, recognized for modernizing Q2's design system and platform UI.

further reading