Design System
The layers of our design system, where one informs the next.
Foundation
What guides our design decisions.
Priorities
- Our most important users are from our academia, but the website needs to be usable by non-experts, new students, potential donors, and community members (neighborhood residents, high school teachers and students, etc).
- We would like to provide customization where possible.
- Ensure that Library sites are accessible and follow practices of universal design.
Design Intent
Value-pair scales that guide design decisions, useful for discussion and alignment.
Observations
User research findings organized by theme that directly inform our design priorities.
Guidelines
General guidelines instead of specific rules for components and patterns.
Grouping Content
Rules for using backgrounds, borders, and shadows to group related content without visual over-nesting.
Color Usage Guidelines
Short guidance for applying color at page and component levels using the 60-30-10 rule.
Copywriting Guidelines
Standards for voice, naming, and editorial style across all library interfaces and content.
Implementation
Cheat sheet for implementation rather than rulesets.
Tokens
SCSS and CSS variables including typography, spacing, borders, shadows, and transitions. See also the complete color palette.
Token Tables
Generated reference for every token, with its CSS variable, SCSS variable, utility classes and value. Read from the stylesheet at build time, so it cannot go stale.
Components
Reusable UI components and patterns for the design system.
Templates
Page Layouts and common page layout patterns for structuring content.
Typography
Font families, sizes, weights, and line heights used throughout the design system. Includes a narrative example.
Event Tracking
Custom event labeling schema for GA4 analytics using data-ga-* attributes on interactive elements.