Token Tables
Bootstrap Theme Colors
Bootstrap's theme slots, remapped onto the brand palette. Setting these drives every .text-*, .bg-*, .border-*, .btn-* and .alert-*, so component styles should consume these rather than the brand tokens above. These are only partly semantic. Primary, success, info and warning describe a role. Secondary, light and dark describe an appearance, so they say nothing about when to use them — a genuinely semantic name would read like "subtle text on a dark surface". Treat the appearance-named slots as Bootstrap's vocabulary rather than as this system's roles, and prefer a purpose-named token where one exists.
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
.alert-primary .bg-primary .border-primary .btn-primary .focus-ring-primary .link-underline-primary .list-group-item-primary .table-primary .text-bg-primary .text-primary
|
#800000 |
Maroon. Reserved for calls to action. | |||
.alert-secondary .bg-secondary .border-secondary .btn-secondary .focus-ring-secondary .link-underline-secondary .list-group-item-secondary .table-secondary .text-bg-secondary .text-secondary
|
#585f6b |
Dark Greystone | |||
.alert-success .bg-success .border-success .btn-success .focus-ring-success .link-underline-success .list-group-item-success .table-success .text-bg-success .text-success
|
#789d4a |
Ivy | |||
.alert-info .bg-info .border-info .btn-info .focus-ring-info .link-underline-info .list-group-item-info .table-info .text-bg-info .text-info
|
#007396 |
Lake | |||
.alert-warning .bg-warning .border-warning .btn-warning .focus-ring-warning .link-underline-warning .list-group-item-warning .table-warning .text-bg-warning .text-warning
|
#eaaa00 |
Goldenrod | |||
.alert-light .bg-light .border-light .btn-light .focus-ring-light .link-underline-light .list-group-item-light .table-light .text-bg-light .text-light
|
#e8ebef |
Light Greystone | |||
.alert-dark .bg-dark .border-dark .btn-dark .focus-ring-dark .link-underline-dark .list-group-item-dark .table-dark .text-bg-dark .text-dark
|
#2f3640 |
Black |
Semantic Surfaces and Text
Low-contrast surfaces and de-emphasised text. These override Bootstrap's own roles, so the matching utilities work unchanged: .bg-body-tertiary, .bg-body-secondary and .text-body-secondary.
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
.bg-body-tertiary
|
#f9fafc |
Subtlest page surface. Use for inset panels and code blocks. | |||
.bg-body-secondary
|
#e8ebef |
Slightly recessed surface, one step stronger than tertiary. | |||
.text-body-secondary
|
#585f6b |
De-emphasised body text. Opaque, unlike Bootstrap's translucent default. | |||
| — | #f9fafc |
Active accordion surface. |
Interactive and Inline Text Colors
Links use the Lake family, not Primary. Maroon is reserved for calls to action so that a page's primary action stays visually unique.
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
| — | #007396 |
— | |||
| — | #002a3a |
— | |||
| — | #007396 |
— |
Active State Colors
Active states use the Lake family for consistent interaction feedback.
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
| — | — | #007396 |
— | ||
| — | — | #007396 |
— | ||
| — | — | #ffffff |
— |
Body
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
.bg-body
|
#ffffff |
— | |||
.text-body
|
#2f3640 |
— |
Focus Ring
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
| — | rgba(62, 177, 200, 0.8) |
— |
Typography
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
| — | — | "UChicago Sans Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
— |
Breadcrumb Overrides
Level 3 component tokens. They live here because Bootstrap reads them while building its component styles, which happens after this file is imported.
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
| — |
on .breadcrumb |
— | 0.75rem |
— | |
| — |
on .breadcrumb |
— | 0.5rem |
— | |
| — |
on .breadcrumb |
— | 0 |
— | |
| — |
on .breadcrumb |
— | 0 |
— | |
|
on .breadcrumb |
— | #585f6b |
— | ||
|
on .breadcrumb |
— | #585f6b |
— |
Accordion Overrides
Level 3 component tokens. See the note on Breadcrumb Overrides above.
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
|
on .accordion |
— | #ffffff |
— | ||
| — |
on .accordion |
— | var(--ucl-info-bg-extra-subtle) |
— | |
|
on .accordion |
— | #2f3640 |
— | ||
|
on .accordion |
— | #2f3640 |
— | ||
| — |
on .accordion |
— | 0 0 0 0.25rem rgba(0, 115, 150, 0.25) |
— |
styles/base/_layout.scss
| Class | Notes |
|---|---|
Secondary column surface, marked by a maroon left edge. Use for supporting content beside the main column, not for content the page depends on. Typically used inside .col-lg-4. |
styles/components/_breadcrumb.scss
| Class | Notes |
|---|---|
| Disclosure control inside a breadcrumb, for a trail segment that expands into sibling pages. Inherits the trail's size and weight so it does not read as a button. | |
Wrapper for the menu opened by .breadcrumb-section-toggle. Tightens Bootstrap's dropdown so it reads as part of the trail rather than a menu. |
styles/components/_buttons.scss
| Class | Notes |
|---|---|
| Bootstrap's button, restyled system-wide to a pill radius. Every button variant inherits this, so there is no square-cornered button in the system. | |
The standard action. Use for every button on a view except the one primary action, which is .btn-primary. Reads as an outlined secondary button. |
|
| Outlined button for use on a dark or image background, where the standard variants would have too little contrast. | |
| Destructive action, outlined with a heavier border so it reads as needing deliberate intent. Reserve for actions that lose data. |
styles/components/_header.scss
| Class | Notes |
|---|---|
| Top bar holding the site logo, shortcut links and the mobile nav toggle. Sits above the global navbar and is separated from it by a bottom border. | |
Multi-column layout for a global-navbar dropdown, grouping links under headings. Only valid inside #global-navbar. Named in Bootstrap's .dropdown-* namespace but defined here, not by Bootstrap. |
|
Heading for one group of links inside .dropdown-layout. Only valid inside #global-navbar. Named in Bootstrap's .dropdown-* namespace but defined here, not by Bootstrap. |
|
Shortcut links shown inside the collapsed mobile menu, where the logo-bar shortcuts are hidden. Only valid inside #global-navbar. |
|
Search region of the global navbar. Only valid inside #global-navbar. |
|
Input wrapper inside .global-navbar-search, positioned so the submit button can overlay the field. Only valid inside #global-navbar. |
|
Submit control overlaid on the right of .global-navbar-search-field. Only valid inside #global-navbar. |
styles/components/_footer.scss
| Class | Notes |
|---|---|
| Site footer. Bootstrap has no footer component, so this is ours: a dark surface with white links and unstyled lists. | |
Column heading inside .footer. Only meaningful within .footer. |
|
Centred block inside .footer, used for the logo and closing text. Legacy name kept for compatibility with existing footer markup. |
styles/components/_accordion.scss
| Class | Notes |
|---|---|
| Bootstrap's accordion. | |
Two-column accordion. Wrap the items in a Bootstrap .row with two columns; they stack below md. Each item keeps its own border and radius, since they are no longer a single vertical stack. |
styles/components/_panel.scss
| Class | Notes |
|---|---|
Bordered container for grouping related content. Equivalent to .card.rounded-3.p-3, as a single class. Use for a group that needs a visible boundary; use spacing alone when the grouping is already obvious. |
|
Modifier for .panel that draws the border in maroon, marking the one group on a page that matters most. Do not use more than once per view. |
Primary Brand Colors
The core UChicago palette. Brand tokens are the raw material of the system: prefer the semantic tokens further down when styling components, and reach for these only when defining a new semantic role.
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
| — | #800000 |
— | |||
| — | #f9fafc |
— | |||
| — | #e8ebef |
— | |||
| — | #a2a9b4 |
— | |||
| — | #585f6b |
— | |||
| — | #474f5b |
— | |||
| — | #2f3640 |
— |
Secondary Brand Colors - Goldenrod Family
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
| — | #f3d03e |
— | |||
| — | #eaaa00 |
— | |||
| — | #cc8a00 |
— |
Secondary Brand Colors - Terracotta Family
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
| — | #eca154 |
— | |||
| — | #de7c00 |
— | |||
| — | #a9431e |
— |
Secondary Brand Colors - Ivy Family
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
| — | #a9c47f |
— | |||
| — | #789d4a |
— | |||
| — | #13301c |
— |
Secondary Brand Colors - Forest Family
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
| — | #9caf88 |
— | |||
| — | #275d38 |
— | |||
| — | #284734 |
— |
Secondary Brand Colors - Lake Family
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
| — | #3eb1c8 |
— | |||
| — | #007396 |
— | |||
| — | #002a3a |
— |
Secondary Brand Colors - Violet Family
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
| — | #86647a |
— | |||
| — | #59315f |
— | |||
| — | #41273b |
— |
Secondary Brand Colors - Brick Family
| Swatch | CSS variable | SCSS variable | Utility classes | Value | Notes |
|---|---|---|---|---|---|
| — | #b46a55 |
— | |||
| — | #a4343a |
— | |||
| — | #643335 |
— |