Institutional workDesign systemICPSR

One design system for more than 20 research archives, each with its own brand.

Mosaic is ICPSR’s shared design system. I ran its three-month pilot, helped define its key components, and have led it since August 2024.

Leading
Aug 2024 – now
My role
Design system lead, ICPSR
Leads
A UX engineer and me
With
ICPSR’s UX engineers and product designers
Mosaic operating modelFoundation to governance loop
  1. PrinciplesCriteriaClarity, consistency, accessibility, performance, governed evolution.
  2. TokensFoundationColor, type, spacing, state and theme values shared across products.
  3. ComponentsLibraryReusable UI with Figma and implementation rules kept in sync.
  4. PatternsUsageResearch product flows, forms, search, review and data display models.
  5. GovernanceLoopPromotion path from product-specific work to stable system assets.
Principles and tokens sit under the components. A governance loop decides which product work moves into the system.

What I covered

Overall role Design system lead Steps 2–5

  1. 01FindNot my part
  2. 02ResearchLessons learned
  3. 03DirectionSystem principles, Direction workshop
  4. 04BuildPilot, Component definition, Component library
  5. 05OperateStewardship, Theming for archives
1Find

Before the UX team ICPSR’s products had grown apart long before there was a UX team. The organization formed one partly to fix that, so a shared design system was part of the team’s brief from the start.

2Research itLessons learned

A year and a half in, Mosaic was showing where it strained.

After about 1.5 years of Mosaic in operation, I looked at how teams were actually using it. I came out with eight lessons.

  1. 01Simpler is betterFewer dependencies, especially between Bootstrap 5 and React, make the system easier to scale and maintain.
  2. 02Code convergence is hardMoving patterns across HTML, CSS and React adds complexity unless the system defines cleaner boundaries.
  3. 03Foundations matterMissing design tokens made larger components harder to build, update and reason about.
  4. 04Categories need sharper definitionsAtoms, molecules, organisms, patterns and templates need clearer ownership and promotion criteria.
  1. 05Import workflows need structureTeams need a more organized way to bring Mosaic components into real product work.
  2. 06Snowflakes need a place to matureProject-specific components, like a one-off hero for one ICPSR site, should go through a lab phase first.
  3. 07Docs should separate common from experimentalOfficial docs cover repeatable components. Project patterns stay visible without bloating the core.
  4. 08AI changes the system contractTokens, rules and docs must be structured for AI agents, within institutional security and privacy limits.
3Set directionSystem principlesDirection workshop

Seven principles for what Mosaic builds, reuses and keeps experimental.

I led a workshop with UX designers and UX engineers to turn those lessons into a direction for the next Mosaic. The principles cover interface quality and how the system is governed.

Mosaic design principles
  1. 01Clarity over complexityLayouts, labels and interactions should feel obvious and predictable, especially for new users.
  2. 02Consistency builds trustReuse established patterns before reinventing, so users can carry what they know across products.
  3. 03Performance is a featureFast pages, responsive interactions and reliable services matter as much as visual polish.
  4. 04Accessibility from the startSupport diverse contexts, abilities, devices, geographies and backgrounds from the component layer up.
  5. 05Simplicity over decision fatigueEvery element should earn its place by supporting a core task or decision.
  6. 06Delight without disruptionPersonality belongs where it reduces stress or helps understanding, never where it hurts performance, clarity or focus.
  7. 07Built to evolveClear boundaries between system-owned patterns, third-party tools, experimental work and AI-assisted workflows.
Designing for AI-assisted work

For AI agents to build with Mosaic, tokens need predictable names, components need clear usage rules, and docs need to separate stable, experimental and project-specific patterns. Security and privacy rules keep AI tools out of some workflows, so the plan keeps tokens and component definitions in sync between code and Figma without sending sensitive product context through unmanaged AI tools.

4BuildPilotComponent definitionComponent library

I ran the pilot, and the system came back to me two years later.

My three-month pilot showed a shared system could work. My predecessor then set up Mosaic’s basic structure, and for two years the product designers, me included, defined its key components. In August 2024 I took over as lead.

  1. 3 monthsPilotMy pilot tested whether a shared system could work, and it validated the concept.
  2. After the pilotStructureMy predecessor set up Mosaic’s basic structure.
  3. 2 yearsComponentsProduct designers, me included, defined the key components.
  4. Aug 2024LeadMosaic came back to me. I refined the components and added the missing ones.
  5. NextNew directionThe workshop in step 3 set the principles for the next version.
Who the system had to serve
  1. 01UX designersA component library in Figma to reference and build from.
  2. 02UX engineers and developersA code library of accessible, documented components they can drop into any product.
  3. 03Client-facing teamsA coherent product story to tell funders.
5OperateStewardshipTheming for archives

More than 20 archives share one set of components and keep their own brands.

Each archive sets its own theme tokens for color, typography and spacing. The components underneath don’t change. ICPSR’s primary color is navy, for example, while one branded archive uses purple.

Same components, two archive themes · illustration
ICPSRPrimary: navyFind data for your researchSearch studiesBrowse topicsRestricted dataTheme: serif type, navy primary
A branded archivePrimary: purpleFind data for your researchSearch studiesBrowse topicsRestricted dataTheme: sans type, purple primary
An archive changes theme tokens: primary and secondary colors, typography, spacing. The components and guidelines stay the same. Drawn to illustrate; the colors and fonts are not ICPSR’s actual values.
System1design system

One component library and one Figma source of truth for ICPSR’s product teams.

Adoption20+ICPSR archives

run on Mosaic through a shared template.

Tokens3-tiertoken architecture
Next projectFile ServiceA reusable file-ingestion service with direct uploads and real-time status.