Design Tokens
The foundational design decisions that make up the University of Chicago Library design system.
Colors
Semantic Colors
primary is reserved for call-to-action elements. Use info (Lake) for active states, links, and inline code emphasis.
-
Primary →
$ucl-maroon -
Secondary →
$ucl-greystone-dark -
Success →
$ucl-ivy -
Info →
$ucl-lake -
Warning →
$ucl-goldenrod - Danger → Bootstrap default
-
Light →
$ucl-greystone-light -
Dark →
$ucl-greystone-darkest
View the complete color palette and semantic colors for the design system.
Spacing
Spacing rules are documented in Grouping Content, where whitespace is treated as a grouping system.
Grouping Content
See Grouping Content.
Spacing Utilities Demo
.p-0
.p-1
.p-2
.p-3
.p-4
.p-5
.card>.card-body or
.border.rounded-2
Standard grouped content
.btn.btn-primary
.sidebar or
.bg-light
Static secondary content
.card.shadow>.card-body
Elevated floating surface
Transitions & Animations
Transition Duration
0.15s - Base transition duration for hover states
0.3s - Standard transition for interactive elements
0.6s - Longer transitions for major state changes
Easing Functions
ease - Default (cubic-bezier(0.25, 0.46, 0.45, 0.94))
ease-in-out - Smooth acceleration and deceleration