New Unified Design System

Summary

I'm currently leading the creation of a brand new design system. Starting from a component library, my work includes: - Selecting which components to use and which to remove - Modifying component variants - Ensuring accessibility of all components - Defining and maintaining design tokens - Defining typography styles - Defining usage guidelines - Creating patterns around functional reusable design blocks - Creating a responsive page scaffolding for all applications - Communicating cross-functionally to keep engineering, design, and leadership in alignment

Summary

Goals

Create one unified design system to replace two existing
Get up and running quickly with minimal engineering effort

Enable WCAG 2.2 AA accessibility conformance
Improve design + engineering efficiency

My Role

Lead the design efforts for:
- components and variants
- design tokens
- documentation
Collaborate with design leadership for:
- responsive page scaffolding

Background

Acquia inherited two design systems through acquisition:

One built in React
One built in Angular

This created inconsistent experiences and a maintenance burden. To unify the systems and meet accessibility goals without rebuilding from scratch, we purchased PrimeOne, a component library available in both frameworks.

Process Breakdown

Audit & Sift Components

Challenge: PrimeTek includes many more components and variants than we use.

Approach:

Audited both legacy systems to identify required components
Prioritized only what was in active use
Kept a few “nice-to-have” components if they supported existing patterns or improved UX

Result: Removed 34% of the default components (and countless variants) to reduce clutter and confusion; archived for future use if needed.

Kept vs. archived components

Drastic reduction in button variants (this isn't even a third of the original)

Before

After

Modify Component Structure

Objective: Align more complex components with Acquia's current patterns.

Actions Taken:

Examine components across existing design systems
Restructure PrimeOne components

Result: Components that are familiar to users and designers of both systems.

Fusion of two modal components into one

illustration of how a new dialog component was modelled after the two current ones

Theming with Design Tokens

Objective: Align component visuals with Acquia’s brand and WCAG AA standards

Actions Taken:

Used bundled token system from PrimeTek as a base
Updated brand colors, spacing, radii, and contrast
Introduced custom semantic tokens (e.g., {button.primary.background} → {primary.color} → {brand.600})

Tool: Tokens Studio for Figma
Challenge: Learning curve with token sets and plug-in behavior
Solution: Leaned on PrimeTek documentation and support; created a semantic token structure for long-term maintainability

Sample of custom design tokens added

Iterating While in Use

Reality: Several new product UIs were being built while the design system was still under construction.

Benefits:

Real-time feedback from designers on component needs and layout constraints
Informed decisions on tokens, variants, and usage rules

Constraint:

To maintain low maintenance, avoided non-token-based component changes unless absolutely necessary
Balanced creating new components with adapting product designs to available tools

Collaboration Tools: