Adopting Cupcake

The Design System is flexible and allows for progressive adoption by product teams.

Steps

The Design System is adopted per product across gradual steps in priority order. These steps serve as milestones to track adoption across all products no matter the pace of an individual product team.

Steps

Suggested Criteria

Step 0

Non Adopter

Branding / visual language is out of date.
Product is obviously not complying with System.
Interface is dated and inconsistent with latest conventions.

Step 1

Plan & Dependency

Codebase has system NPM dependency.
Team has compiled, tuned, and organized System assets for integration and extension.
Team shows adoption commitment via roadmap and backlog.

Step 2

Visual Language

Color
Typography
Icons
Styles applied to non-Cupcake components.

Step 3

Priority Components

Buttons
Forms: Checkboxes, Radios, Text, Select
Switches
Data Tables
List Groups

Step 4

Full Adoption

Team has adopted every relevant UI component, including:

Modals
Dialogs
Notifications

Working With the Cupcake Team

Please consider contacting the Cupcake team to discuss your objectives and approach. A collaborative conversation will help you identify the following for your product’s adoption:

Timing: When might you start design and engineering work (potentially need more support) and complete the adoption process?
Priorities: What Cupcake features are most relevant to your product? Knowing this will help our team to recommend effective techniques and shortcuts for planning and breaking down the work.
Depth: Not every Cupcake feature may be relevant or feasible to integrate into your product. What are the priorities and/or limitations?
Customization: How can you extend Cupcake to suit your product’s needs, and are any of those extensions relevant for the Cupcake team to support within the library itself?

This adoption plan is adapted from Nathan Curtis’ excellent work here!