UMD Libraries Design System

Project at a Glance

Adapting a marketing-focused design system for research and content needs

The University of Maryland released a new school-wide design system built for institutional marketing. For the Libraries, whose primary purpose is helping patrons find and access research resources, the system's marketing-focused design language and inflexible components weren't fit for purpose. The redesign focused on rationalizing the system's complexity, establishing an accessibility-first component library, and bridging design and production through a shared token framework.

Problem

A marketing-focused design system optimizes for visual impact and institutional promotion — the opposite of what a content-heavy, research-driven library website requires. The base system offered no customization options and lacked components for core library needs like search, chat, etc.

Solution

Rearchitected the design system for library content needs through two moves: restraint — simplifying and standardizing what existed, reducing typography from 25 styles to 11 and clarifying component hierarchy — and extension — building net-new components grounded in a shared design token framework bridging Figma and production.

Impact

Launched a library website natively meeting WCAG 2.1 AA compliance across 20+ components, open-sourced for adoption by other institutions.

Poject detail

For a detailed look at the design process, and implementation journey, see below.

Figma Slide

Case Study Design Deck

The new design system is now live at UMD Libraries Digital Collections. Explore the interface and new functionality.

Live Product

UMD Libraries Digital Collections

The design system will also roll out to UMD Libraries' Main Website in mid-2026 — stay tuned for updates.

Interested in the implementation details? Check out the open-source GitHub repositories.

GitHub Repository

UMD Libraries Theme

GitHub Repository

Search Web Components