moizuqaili
All work
Design SystemsEnterprise SaaS

Prism Design System

120+ component multi brand token system

Platform
Web, iOS and Android
Built for
40+ product teams
What I delivered
Tokens, 120+ components, docs
Tools
Figma Variables, Storybook
01

Executive summary

One token architecture powering four brands, three platforms and 120+ accessible components.

0+

Components

Verified post-launch

↓0%

Color values

Verified post-launch

0%

Faster UI delivery

Verified post-launch

02

The problem

Four product lines maintained separate libraries with 1,400 color values and no shared accessibility baseline.

03

Research insights

  1. 1Teams forked components when theming required overrides.
  2. 2Designers wanted semantic, not raw, tokens.
  3. 3Docs were read only when embedded in Figma.
04

Constraints

WCAG 2.2 AA everywhereWeb, iOS, Android parityZero breaking releases
05

Interactive prototype

This is the real design system workspace. Inspect Button states, drag the brand tokens and watch every component and contrast score update, then fix failing pairs in Accessibility and publish.

Foundations/Button
MSA⌘ K

Button

Triggers a single action. Use one Primary per view; pair with Secondary for the alternative.

1,284 instances98% adoption
Save changesPrimary · M · Defaultradius 8px · density 1.00

State matrix · click any cell to inspect

24 specs · all tokenised
DefaultHoverPressedFocusDisabledLoading
Primary
Secondary
Ghost
Danger

1 · Components

Click any cell in the state matrix or use the inspector to see every Button variant, size and state, with the matching code.

2 · Tokens

Drag hue, lightness, radius and density. Every component and contrast score updates live, and changed tokens highlight before you publish.

3 · Accessibility

Contrast checks rerun on every change. Select a failing pair and apply the smallest fix, then preview the UI through colour blindness filters.

06

Solution walkthrough

01

Three tier tokens

Primitive, semantic and component tiers let brands swap values without touching components.

02

Figma to code pipeline

Tokens sync from Figma Variables to CSS, Swift and Kotlin on every merge.

03

Contribution model

A lightweight RFC flow turned consumers into contributors.

Next case study

Kare Pulse