University Libraries’ design system

This is how bad design makes it out into the world. Not due to malicious intent, but having no intent at all.

Mike Monteiro, How Designers Destroyed the World


Use components as building blocks to develop new or modify existing content.

Getting started

The design system provides guidelines and code to help quickly create trustworthy, accessible, and consistent digital library services.

The design system takes a content-first approach. When developing web assets, the design reflects the needs of the content to be understood well. Design is important but supplemental for the University Libraries’ web presence.

The design system is thusly presented in the order the Libraries’ considers and develops web assets: based on the principles, content is developed then fine tuned for design requirements before it’s coded into accessible formats and standardized page patterns. Developing consistent language and patterns in code and page layouts improves people’s ability to navigate and complete tasks.

Resources and acknowledgements

All the work on the University Libraries design system is done with adoption of, consideration for, and in collaboration with:

  • University Relations and the Folwell Design System,
  • Libraries’ Communications,
  • and Libraries’ Web Content Management Committee.

Installation notes

The design system is developed to provide tech-stack agnostic tools to deliver a consistent and seamless experience for people regardless of how they come to the content.

Utilizing the guidelines and code from the design system improves experiences and is more efficient for developers, designers, and people coming to the Libraries content. The code in the design system is written with pure semantic HTML5 and CSS3; foundational languages for the Internet that work with all modern frameworks.

No installation is required. The packaged assets the design system generates are available at the University Libraries’ published assets (current unavailable).