Design System
Architecture

Overview

The "Orbit" Design System was initiated to unify a fragmented ecosystem of 12 distinct internal tools. Over the years, inconsistent UI patterns had led to increased technical debt and a disjointed user experience. My goal was to architect a system that not only provided visual consistency but also accelerated development velocity by 40%.

The Problem

• Inconsistency: Buttons, inputs, and modals behaved differently across apps.
• Slow Iteration: Developers were rebuilding common components from scratch.
• Accessibility Gaps: Several tools failed WCAG 2.1 AA standards.

The fragmentation wasn't just visual, it was structural. We identified 14 different shades of blue in production and 5 different date picker implementations. This chaos meant onboarding new designers took weeks as they navigated the "tribal knowledge" required to design a simple form.

Process & Discovery

1. The Audit

We started by printing out screenshots of every key view in our ecosystem. The "Wall of Shame" (as we affectionately called it) revealed the extent of the redundancy. We categorized elements into atoms, molecules, and organisms, following Brad Frost's Atomic Design methodology.

Initial component audit and clustering workshop

2. Tokenization

Before building components, we defined our design tokens. We established a semantic naming convention for colors, spacing, typography, and elevation.

3. Documentation

A system is only as good as its documentation. We utilized Storybook for the engineering team and Zeroheight for designers, ensuring that usage guidelines, dos and don'ts, and accessibility notes were right next to the component code.

The Outcome

The Orbit system successfully bridged the gap between design and engineering. We saw a significant reduction in QA tickets related to UI bugs, and the onboarding time for new product designers dropped from 3 weeks to 4 days.