Color Palette & Utilities

Official brand color swatches, text contrast guidelines, and CSS utility classes for the Edmon Low Library design system.

Text Colors

Use these CSS class names to apply brand-compliant colors to text elements.

Brand & Core Text Classes

Class Name	Preview	Usage / Notes
`.osu-orange`	Oklahoma State Orange	Primary brand accent
`.color-primary`	Primary Text Color	Default primary text
`.color-secondary`	Secondary Text Color	Subtitles and secondary labels
`.color-shade-darkest`	Darkest Shade	High-contrast body text
`.color-shade-darker`	Darker Shade	Subtle body text
`.color-shade-dark`	Dark Shade	Muted content text
`.color-shade`	Standard Shade	Neutral borders and text
`.color-shade-lightest`	Lightest Text	Dark-background contrast text
`.color-shade-white`	White Text	Dark-background body text

Background Colors

Background utility classes for content blocks, card containers, and highlighted sections.

.bg-color-primary Primary

.bg-color-secondary Secondary

Lightened text applied

.bg-color-shade-darkest Darkest

.bg-color-shade-darker Darker

.bg-color-shade-dark Dark

.bg-color-shade Neutral

.bg-color-shade-lightest Lightest

.bg-color-shade-white White

HTML Implementation Examples

Example Snippets

Applying Background & Text Shade Classes

<!-- Highlight Box with Darkest Shade Background -->
<div class="bg-color-shade-darkest color-shade-white p-4 rounded">
  <h3 class="osu-orange">Featured Announcement</h3>
  <p>This content box uses the dark shade background with white text.</p>
</div>

Color Palette & Utilities - Edmon Low Library