KOA Design System & Component Library
Rebuilt KOA's product foundation from scratch (new design system, new component library, new framework) aligned to brand for the first time in over a decade.
A design system that looked nothing like KOA.
When I joined KOA, their internal applications shared a design system. Technically. In practice it was a collection of contradictions. The primary UI color was teal, about as far from KOA's brand yellow and red as possible. Thirteen unregulated shades of gray were used throughout the application with no rules governing their use. The root font size was 13px. A free icon pack with inconsistent stroke weights and fill styles was mixed throughout. The K2 application logo was orange and gray on top of a gray header. A new user looking at the application would have had no way to identify it as a KOA product. Underneath the visual layer, the applications ran on AngularJS 1.5 (out of official support since December 2021) with Bootstrap 3 handling UI components. AngularJS was not component-based: adding a new page required a route configuration file, a controller, a separate HTML template, and a separate stylesheet at minimum.
Treat the design system and the framework decision as one problem.
The design system and frontend modernization couldn't be solved independently: the right framework choice would determine what the component library could do, and the component library needed to ship alongside the design system for either to have real adoption. I started by making the case for a complete rebuild rather than an incremental patch, then tackled both decisions in parallel.
I began with my own evaluation of current options, then surveyed all developers across the product teams to understand their experience and preferences, then formed a working group with two senior developers to evaluate the shortlist. We narrowed to Vue, React, and Svelte. React was ruled out for being server-side-oriented and overly complex for their use case. Svelte won on template readability for developers coming from C# backgrounds, compile-time performance with no runtime overhead, and rapid market growth. I presented the full rationale and modernization roadmap at KOA's 2025 annual meeting.
Built new color bands using Material Design's methodology as a reference: 50 to 900 step scales anchored to KOA's brand yellow and red. Separate bands for success, error, warning, a neutral grayscale, and a blue accent with split-complementary harmony to the brand colors for focus and selected states.
Color tokens organized into four semantic groups (text, surface, foreground, and border), named for intent rather than value so purpose was legible from the name alone. Shadows followed an elevation model rather than a size model. All tokens implemented as CSS custom properties with light and dark theme values, enabling dual consumption by both new Svelte apps and legacy AngularJS apps without framework-specific adapters.
Built in Svelte 5 with TypeScript and SCSS, documented in Storybook with prop documentation, usage guidelines, and stories demonstrating key variants. After the initial component set was complete, usage patterns were audited and additional tokens added to reduce one-off overrides going forward.
Supporting documentation written in Confluence covering the design system rationale, a style guide, naming conventions and project structure standards, an AngularJS-to-Svelte transition guide, a Svelte and TypeScript cheat sheet, and a new app setup guide currently being converted into a reusable starter template.
One design language. Two frameworks. Zero ambiguity about what to use or why.
The KOA design system and component library shipped as the foundation for the Messaging Center (the first product built entirely on the new stack) and has since been adopted by the SSO application hub. The library contains 40+ components used across two of KOA's three product teams, with the K2 redesign in planning that will extend adoption to the full organization. The Figma component library mirrors the coded components with the same token system, maintaining a single source of truth between design and implementation.
What shipped, and what it moved.
- Replaced a decade-old design system bearing no resemblance to KOA's brand with a token-based system built directly on brand foundations
- CSS custom property token architecture designed for dual consumption, used natively by new Svelte applications and inherited by legacy AngularJS apps during the migration window
- Reduced frontend complexity dramatically: a new app feature that would have required multiple files and configurations in AngularJS now ships from a single Svelte route
- A new application feature was fully implemented on the frontend in a single day because all required components already existed in the library
- Figma component library mirrors the coded components using the same token system, maintaining a single source of truth between design and implementation
The blue accent band I added for focus and selected states was a reasonable decision at the time, but in retrospect I could have used the neutral gray band instead, keeping the palette more strictly tied to the brand without sacrificing accessibility or clarity. The blue works, but it introduces a color with no direct relationship to KOA's visual identity. I'd also prioritize getting the K2 redesign on the development roadmap earlier. The business case for modernizing the highest-traffic internal application is clear, but competing against revenue-driving initiatives is a structural challenge that requires building stakeholder alignment before it becomes urgent rather than after.