Building a shared design language — and the tools to support it — for all of Great American Insurance Group's internal and external applications, serving designers, developers, and product teams across the enterprise.
As Great American Insurance Group's product portfolio grew, so did the fragmentation. Without a shared design language, each team made its own decisions about color, typography, spacing, and components — leading to applications that looked and behaved differently from one another, even within the same ecosystem.
The consequences were felt across the organization. Designers reinvented patterns from scratch on every project. Developers built the same components multiple times across different codebases. And product teams without dedicated UX support had little guidance for building anything consistent at all.
"How might we create a single design language — and the tools to support it — that serves designers, developers, and product teams across every application in the enterprise?"
Three problems drove the effort:
A design system lives or dies by adoption. From the beginning, the team recognized that we weren't just building a component library — we were building a product whose users were designers and developers. That framing shaped every decision we made.
Working as one of three UX designers on the effort, I contributed to both the design language itself and the experience of consuming it. The system needed to feel approachable for teams without UX resources, rigorous enough for engineering teams building at scale, and flexible enough to serve applications as different as a customer-facing portal and an internal claims tool.
A comprehensive Figma component library serving as the single source of truth — covering all core UI patterns, states, variants, and usage guidance. Designed to be consumed directly in product work without modification.
A coded Vue component library mirroring the Figma components 1:1, built on an internally developed application with usage documentation and a live code playground for direct consumption.
The centerpiece of the system was a tight relationship between design and code. Every Figma component had a direct coded counterpart in Vue — same naming, same structure, same states. This design-to-dev parity was intentional: it eliminated the translation layer where inconsistencies typically creep in.
The documentation app served a particularly important purpose for teams without dedicated UX designers. Rather than making design decisions from scratch, those teams could rely on the system as a self-service design resource — picking components, reading usage guidance, and building with confidence that the result would be consistent with the broader product ecosystem.
The v1 design system launched approximately one year after the effort kicked off. Outcomes and adoption metrics will be added here — check back soon.