Skip to main content

UChicago Library Design System

A comprehensive design system for the University of Chicago Library, providing reusable components, design tokens, and development guidelines built on Bootstrap 5.

Quicklinks

The System

Design System

Design principles, color palette, accessibility standards, and design tokens.

Mockups

Exploratory and validation page mockups used to test layout directions and interactions.

Pages

Application-exported pages organized for implementation and visual validation.

Project Methodology

Best practices, setup, naming conventions, and how to add components and pages.

Status & Roadmap

Thie System is based on a planning document hosted here.

🚀 In Progress: This design system is a work in progress stabilization effort aimed for completion by August 2026.
  • Review developer user cases.
  • Finalize the initial set of components and design tokens based on the most common patterns across the library's websites.
  • Add mockups of HTML from LibApps to test styling. ✓ LibApps/LibGuides/Springshare CSS output created.
  • Define two tab patterns: one for complex content without a bounding box (as used in Revised Guides), and one standard pattern where the active tab and content share a single content box.
  • Add a utility to easily copy any <pre> or <code> content.

Quick Facts

Based on Brand Guidelines

Uses the official University of Chicago Library brand colors and typography (UChicago Sans Serif).

WCAG 2.1 Level AA

All components meet accessibility standards for contrast, keyboard navigation, and screen readers.

Built on Bootstrap 5

Leverages Bootstrap's powerful foundation with custom brand overrides and extensions.

Copy-Paste Ready

All components can be directly copied into other projects with minimal dependencies.

Use Cases

This design system is designed to support the main Library website. Other websites will also be supported with multi-platform modularity planned to be considered in the future.

  • Catalog (component library)
  • LibGuides (custom CSS)
  • Book a Room (embedded components)
  • Other library websites and services
  • Digital Repository

Technology Stack

Technology Purpose Version
Eleventy Static site generator 2.0.1+
Bootstrap 5 CSS framework (SCSS) 5.3.2+
Sass SCSS compilation 1.69.5+
FontAwesome Icon library (CDN) Latest

Documentation Navigation