Onyx Design System

A rapidly growing financial services platform had fragmented design language across multiple products. Material Design was the foundation, but teams interpreted and implemented components inconsistently. Material's out-of-the-box components didn't cover complex financial workflows. Engineers rebuilt similar components repeatedly. Design debt accumulated. Handoff averaged 3.2 hours per component.

• Material Design components didn't address complex financial workflows or data density.
• Engineers rebuilt similar components in isolation across 15 product teams.
• No common design language between cross-functional teams.
• Adobe XD lacked developer-friendly features and enterprise collaboration; tooling itself was a bottleneck.

The system had to serve 60+ engineers distributed across 15 product teams and a 2-person design team that needed to support all of them. The architecture problem was leverage: how does a 2-designer team ship at the velocity of a 60-engineer team without becoming the bottleneck themselves?

Four architectural decisions:

• extend, not replace · extended Material Design rather than starting over, preserving the established mental model while addressing enterprise needs.
• token-first · design tokens as foundational layer for scalability and maintenance, not as a styling afterthought.
• atomic methodology · tokens → atoms → molecules → organisms → templates, with composition rules at each tier.
• responsive-native · responsive considerations built into every component at the foundation level, not bolted on later.

Designer (me) + 2 engineers. Sequenced to land tokens and primitives before composition.

• research (6 weeks) · pattern audit across all product interfaces; interviews across 15 teams; competitor analysis.
• tokens (4 weeks) · extended Material foundations; systematic typography scale; spacing and sizing systems.
• component architecture (8 weeks) · nucleus-based component library; financial workflow extensions; data-density and regulatory-compliance patterns.
• documentation (4 weeks) · usage docs, interactive component library with code examples, governance processes.
• implementation + training (6 weeks) · production rollout, training across teams, feedback loops for continuous improvement.

• 40% faster feature development cycles.
• 94% positive satisfaction rating from designers and engineers.
• 70+ engineers across 15 product teams adopted the system.
• Unified user experience across all products.
• Improved accessibility through enforced color-contrast and typography standards.

Onyx was the pre-AI foundation. By the time it was in production across two brands, five failure modes had stacked up that no amount of more designers could fix:

• no source of truth · no Code Connect between Figma and production code; drift kept happening because nothing authoritatively said what a component was.
• no production documentation · how components actually interacted in production was tribal knowledge. Every new feature required re-deriving it.
• two-brand scale · maintaining the system across two brands took too long. Each new component feature was hard to track and easy to lose.
• figma make prototypes · designers were prototyping in Figma Make and getting sign-off on designs the production stack couldn't actually render. Figma Make didn't know our stack. Stakeholders were approving things that would never ship as designed. Hosted prototype URLs had nowhere to live and kept getting lost.
• generative-AI drift · once designers started using generative AI to design, drift accelerated. The system had no mechanism for keeping AI-generated work inside the contract.

The AI-augmented v2 attacks all five directly. Code Connect mapping Figma to the production stack. Component-interaction documentation as a pipeline, not tribal knowledge. Hosted prototype surfaces that know the stack. AI-orchestrated review gates that catch drift before sign-off rather than after.