Onyx Inc.|2025

Forge Component Library

Architected a multi-brand component library supporting 3 distinct brand identities from a single codebase. Built a token pipeline that transforms design tokens from Figma into platform-specific outputs for web, iOS, and Android.

Role

Senior Design Technologist

Timeline

Feb 2025 - Jul 2025

Team

1 Designer, 2 Engineers, 1 Brand Strategist

Impact

3 brands / 1 codebase / 120+ tokens

Forge Component Library project cover

Overview

Onyx Inc. operates three consumer brands that share a technology stack but have distinct visual identities. Forge was designed to be a single component library that could express all three brands through a token-swapping architecture, eliminating the need for separate codebases.

The Problem

Maintaining three separate component libraries was unsustainable. Bug fixes had to be replicated three times, feature parity was always lagging, and the engineering cost of supporting three UIs was eating into product development time. The brands needed independence in visual expression but shared infrastructure underneath.

Process

Project Phases

01

Brand Analysis

2 weeks

Worked with brand and marketing teams to decompose each identity into its fundamental design primitives. Identified what was structurally shared (layout, interaction patterns) versus what was visually distinct (color, typography, iconography).

Deliverables

Brand decomposition matrixShared vs. unique pattern mapBrand token specifications
02

Token Architecture

3 weeks

Designed a layered token system where global tokens define the palette and a brand layer maps semantics. Each brand gets its own theme file that swaps the visual layer without touching component logic.

Deliverables

Multi-tier token schemaBrand theme files (x3)Token transformation pipelineFigma variables per brand
03

Component Abstraction

6 weeks

Refactored existing components to decouple visual presentation from structure and behavior. Created a component API that accepts theme context and renders brand-appropriate styles automatically.

Deliverables

Refactored component libraryTheme provider architectureCross-brand StorybookVisual diff testing
04

Platform Outputs

4 weeks

Extended the token pipeline to generate platform-specific outputs: CSS custom properties for web, Swift asset catalogs for iOS, and XML resources for Android. A single source of truth flowing to all platforms.

Deliverables

Web output (CSS vars)iOS output (Swift)Android output (XML)CI/CD pipeline integration

Results

Outcomes

3

Brand identities from a single codebase

120+

Design tokens in the shared system

67%

Reduction in UI maintenance overhead

3x

Faster brand-specific feature rollout

Reflection

"Multi-brand systems require a deep investment in abstraction upfront, but the compounding returns are enormous. The key insight was separating 'what it does' from 'how it looks' at every level of the stack."
Multi-brandToken PipelineCross-platform