Cupcake Design System: Complete Ecosystem
Building an enterprise design system from the ground up that unified 50+ financial applications, serving thousands of developers and hundreds of thousands of end users across multiple acquisitions and platform migrations.
Project Overview:
When Ipreo set out to unify 50+ disparate financial applications into a cohesive platform suite, we needed more than just a component library. We needed a complete design system ecosystem that could scale across teams, technologies, and business transformations.
This is the case study of identifying the need, building the team, and delivering Cupcake - a design system that fundamentally changed how our organization built software.
Impact: From initial concept to enterprise standard, Cupcake has enabled countless product launches, survived multiple corporate acquisitions (IHS Markit, S&P Global), and continues to serve thousands of developers and hundreds of thousands of end users.
The Challenges
Ipreo had ambitious plans to streamline 50+ diverse financial applications into a unified platform suite. Without a design system, each team was building in silos, creating massive inconsistency & technical debt across products serving hundreds of thousands of users.
Fragmented UI Landscape
- No Single Source of Truth: Each team building their own components
- Massive Inconsistency: Same patterns implemented 50+ different ways
- Duplicated Effort: Teams solving the same problems repeatedly
- Growing Tech Debt: Maintenance costs compounding across products
Design Team Challenges
- No Design Standards: Each designer creating their own patterns
- Handoff Friction: Countless hours speccing every detail
- Implementation Gaps: Designs not matching production
- Siloed Knowledge: No shared understanding across domain teams
Business Impact
- Slow Time-to-Market: Every feature built from scratch
- Poor User Experience: Inconsistent interactions across platform
- Scalability Concerns: No way to support platform unification goals
- Integration Risk: Upcoming acquisitions would amplify problems
The Solution
I identified the need and built a comprehensive design system ecosystem from the ground up. Starting with an interface inventory, I engaged the aligned UX, product, & engineering verticals, secured executive support, and delivered a multi-layered system that became the foundation for all product development.
Three-Tier Design System Architecture
Built a scalable, technology-agnostic design system with three distinct layers: design foundations, core HTML/SCSS library, and framework-specific implementations.
Design Foundations
Shared Sketch library with design tokens, patterns, and comprehensive persona guidance
Cupcake Core (HTML/SCSS)
Technology-agnostic foundation with design tokens, utilities, and base components
Cupcake Sprinkles (Angular)
Production-ready Angular component library built via internal hackathon
Comprehensive Documentation Platform
Built a Jekyll-based documentation site that unified all design system resources with embedded Storybook for live component examples.
Centralized Knowledge
Single source of truth for design guidelines, code examples, and usage patterns
Live Components
Embedded Storybook showing interactive examples with real component code
Quality & Governance
Implemented comprehensive testing, linting, and visual regression tools to ensure code quality and consistency.
SCSS Unit Tests
True testing framework
Code Linting
Stylelint enforcement
Visual Regression
Percy integration
CI/CD Pipeline
Travis CI automation
Design Foundation Examples
The shared Sketch library became the single source of truth for all designers. Every component included comprehensive overrides, states, and persona-specific variants to ensure consistency before a single line of code was written.
These examples showcase the level of detail in the design library - from interactive menus to complex card layouts, ensuring designers could work efficiently while maintaining system standards.
System Architecture & Implementation
Built on a foundation of design tokens and technology-agnostic principles, Cupcake's layered architecture enabled rapid adoption across diverse technology stacks while maintaining consistency.
Three-Layer Architecture
Design Foundations
Shared design language and visual standards that ensure consistency before code.
Shared symbols, overrides, & design patterns
Colors, typography, spacing, & visual properties
Context-specific patterns for each user type
Cupcake Core (HTML/SCSS)
Technology-agnostic foundation that can be used with any framework or vanilla JS.
Variables for all visual properties
Spacing, layout, & type helpers
Buttons, forms, cards, & more
True, Stylelint, Percy CI/CD
Framework-Specific Libraries
Production-ready component libraries built on top of Cupcake Core.
Full Angular component library with TypeScript
Teams built React wrappers as needed
Extensible architecture for new tech stacks
Documentation & Tooling
Markdown-based documentation
Interactive component examples
@cupcake-ds packages
Automated testing and deployment
Code Quality & Testing
From day one, Cupcake Core was built with comprehensive testing and quality gates. This included SCSS unit tests with True, strict Stylelint rules, visual regression testing with Percy, and continuous integration via Travis CI.
The static HTML/SCSS library used Gulp and Handlebars to generate extensive component examples, making it easy to catch visual regressions and test cross-browser compatibility. This foundation of quality gave teams confidence to adopt Cupcake across critical production applications.
Business Impact & Success Metrics
Cupcake transformed how our organization builds software, delivering measurable impact across development velocity, design efficiency, and business outcomes. The system scaled through multiple acquisitions and continues to serve thousands of users.
Development Velocity
Design Efficiency
Business Value
Cultural Transformation
Beyond metrics, Cupcake fundamentally changed how our organization thinks about product development:
- Design Thinking: No one approaches UX/UI without considering Cupcake
- Collaboration: Cross-functional teams working from shared foundation
- Quality Focus: Developers and designers aligned on excellence
- Efficient Meetings: Less time debating, more time building
- Onboarding Success: New team members productive immediately
- Innovation: Teams focus on features, not infrastructure
Documentation Platform
The Jekyll-based documentation site unified all design system resources into a single, searchable platform. Each component page included design guidelines, HTML examples, SCSS tokens, and when applicable, embedded Storybook instances showing live Angular components.
This approach meant designers could prototype with HTML/SCSS, and developers could seamlessly transition to framework-specific implementations - all while referencing the same source of truth.
View Documentation
Cupcake Sprinkles: The Angular Library
Born from an internal hackathon, Sprinkles became the Angular implementation of Cupcake. Built in Storybook, it provided production-ready components that teams could drop into their applications immediately.
The hackathon victory secured executive buy-in and proper resourcing, allowing us to build a robust component library with comprehensive examples, interactive documentation, and TypeScript support. This created a community of UI developers contributing their best work for the entire organization to benefit from.
View SprinklesKey Learnings & Strategic Insights
Building Cupcake from the ground up taught invaluable lessons about organizational change, technical architecture, & scaling design systems. Here are the most critical insights.
Start with the Interface Inventory
Before building anything, understand what exists. The interface inventory process revealed patterns, inconsistencies, and opportunities that became the foundation for prioritization. It also created early buy-in by showing designers their work in aggregate.
Build a Coalition, Not Consensus
You don't need everyone's agreement to start. Identify passionate advocates early & empower them. Our internal roadshows focused on demonstrating value to product & technology owners, which created momentum that naturally brought skeptics along.
Technology-Agnostic = Future-Proof
Building Cupcake Core in HTML/SCSS was crucial. When teams needed React, Vue, or other frameworks, they could build on the same foundation. This decision enabled adoption across diverse technology stacks and survived multiple technology migrations.
Documentation is a Product
"If it isn't documented, it didn't happen." The Jekyll documentation site became as important as the code itself. By integrating Storybook to connect design & code examples, we created a single source of truth that teams actually used.
Hackathons Create Momentum
The Sprinkles Angular library started as a hackathon project. By recruiting the best UI developers & showcasing value through a working prototype, we won executive support & proper resourcing. Sometimes you need to build first, ask permission second.
Quality Gates Prevent Tech Debt
Implementing True testing, Stylelint, Percy visual regression, and CI/CD from day one was non-negotiable. These guardrails prevented inconsistencies from creeping in and gave teams confidence that Cupcake was production-ready and trustworthy.
The Long Game: Scaling Through Acquisitions
Cupcake's true test came during the IHS Markit acquisition and subsequent S&P Global merger. Because the system was built on solid principles, documented comprehensively, and technology-agnostic, it became the foundation for platform integration rather than a barrier.
Cupcake tokens adapted for IHS branding without rewriting application code
Design system thinking became embedded in organizational DNA
Cupcake principles influenced merged product portfolio strategies
Real-World Impact
Since launch, dozens of applications, features, and product experiences have been built with Cupcake. Here are a few examples of the design system in action across our enterprise platform suite
Production Applications
Cupcake transformed how teams build software across the organization. Every new feature, page, and application starts with Cupcake components, ensuring consistency and dramatically reducing development time.
These examples showcase real applications built on the Cupcake foundation - from data dashboards to complex financial workflows. While intentionally redacted to protect intellectual property, they demonstrate the system's flexibility and production readiness at scale.