Design Tokens - Colors

Bootstrap Semantic Colors

Semantic utility colors for communicating state and intent. Use primary for call-to-action emphasis, and use info (Lake) for active states and interactive emphasis.

Using Semantic Colors

Example of available semantic color classes based on `info`:

Property Classes

• .bg-info
• .bg-info-subtle
• .border-info
• .border-info-subtle
• .focus-ring-info
• .link-info
• .link-underline-info
• .text-bg-info
• .text-info
• .text-info-emphasis

Component Classes

• .alert-info
• .btn-info
• .btn-outline-info
• .list-group-item-info
• .table-info

Brand Color Families

The following colors are established by the UChicago Brand Guidelines. Except for the Grestone Family which has been tinted into cooler shades of grey for color balance, and have a few shades added.

These family values are Sass tokens by default and can be exposed as CSS variables when runtime usage is needed (see `src\styles\base\_global.scss`). To expose them as utility classes, extend Bootstrap's utility map.