Building UC Santa Cruz Library’s First Design System

As part of the UC Santa Cruz Library website redesign, my team and I developed a scalable design system with an inventory of over 20 components, focusing on accessibility and optimization for both web and mobile platforms. 

View Design System

Project Overview

Client - University of California, Santa Cruz Library.

Tools - Figma, FigJam, Google Docs, Trello

Timeline - January 2025 - August 2025 ( 12 Weeks)

Team - 2 UX Designers, 1 Developer

My Role - Collaborated on design and documented the UC Santa Cruz Library’s first design system. Our process included peer research, competitive analysis using Material Design 3 and other established systems, building a component inventory, and iterative design refinement.

Project Impact- We delivered a finished design system approved by stakeholders, which is now in the implementation process to ensure consistency for all users and future designs across the entire website.

The problem without a design system

Before the design system was implemented, the UC Santa Cruz Library website had inconsistencies and fragmentation.

  1. Different pages had been created by various contributors, which led to mismatched typography, colors, and layouts.

  2. There was no unified style or structure, making it harder for users to navigate and for developers to maintain.

  3. Accessibility standards were also applied unevenly, which risked excluding some users.

Some components from the old website

Different buttons and interaction styles

Multiple tab styles and spacing

Harsh shadows and inconsistent icon and link size

Grey background, rounded edges, inconsistant link styling

Inconsistent Search box design, different button sizes

Our goals for the design system

  1. Build the library’s first design system as a foundation for future projects.

  2. Create reusable tokens and components for consistency.

  3. Improve accessibility (WCAG 2.2 compliance).

  4. Provide clear documentation for designers and developers.

Where did we begin?

We started by analyzing the current website components to understand existing patterns and inconsistencies

Component Audit: Compared over 200+ library webpages to document variations in typography, colors, and layouts.

Comparison: Compared over 200+ library webpages to document variations in typography, colors, and layouts.