Web Color Ratio
The color ratio below reflects the balance used in the guide: a strong brand lead, broad neutral space, and smaller supporting green accents.
Treat this as a planning guide, not a fixed rule. Final combinations should always support WCAG contrast, readable hierarchy, and clear content structure.
Using Color with Purpose in Web Design
Color is a core part of UVU’s digital identity. Consistent use of the palette reinforces recognition, helps organize content, and supports hierarchy across pages and components.
- Primary colors should lead headers, navigation, buttons, and key brand moments.
- Support colors should structure sections, soften surfaces, and add contrast without overwhelming content.
- Status colors should be reserved for alerts, feedback, warnings, and instructional callouts.
Color should never be the only signal. Pair it with clear text, spacing, labels, and icons so meaning stays clear for every user.
Accessibility note: Check foreground and background contrast before publishing. Brand consistency matters, but readability and WCAG compliance should guide final color choices for live content.
White Space as an Active Element
White space is part of the color system. White, off white, warm grey, and the site background keep pages open, improve scanability, and give stronger brand colors room to work.
- Improves readability for long-form text, tables, and supporting details.
- Creates visual rhythm between content blocks, cards, and actions.
- Supports responsive layouts and reduces crowding on smaller screens.
Most page area should remain on light surfaces, with darker and more saturated colors applied intentionally to headings, actions, and feedback.
Brand Palette
Core tokens live in css/tokens/wg-tokens-color.css. Text, background, and border utility classes live in
css/utilities/wg-utilities-color.css.
UVU Green
var: --color-uvu-green
rgb var: --color-uvu-green-rgb
text class: .color-uvu-green
bg class: .bg-uvu-green
border class: .border-uvu-green
Hex: #185c33
Wolverine Green
var: --color-wolverine-green
rgb var: --color-wolverine-green-rgb
text class: .color-wolverine-green
bg class: .bg-wolverine-green
border class: .border-wolverine-green
Hex: #008a40
Valley Green
var: --color-valley-green
rgb var: --color-valley-green-rgb
text class: .color-valley-green
bg class: .bg-valley-green
border class: .border-valley-green
Hex: #78be3f
Meadow Green
var: --color-meadow-green
rgb var: --color-meadow-green-rgb
text class: .color-meadow-green
bg class: .bg-meadow-green
border class: .border-meadow-green
Hex: #c5d97a
Seahaze Green
var: --color-seahaze-green
rgb var: --color-seahaze-green-rgb
text class: .color-seahaze-green
bg class: .bg-seahaze-green
border class: .border-seahaze-green
Hex: #c4d6c1
Sage Green
var: --color-sage-green
rgb var: --color-sage-green-rgb
text class: .color-sage-green
bg class: .bg-sage-green
border class: .border-sage-green
RGBA: rgba(0, 34, 0, 0.06)
Dark Green
var: --color-dark-green
rgb var: --color-dark-green-rgb
text class: .color-dark-green
bg class: .bg-dark-green
border class: .border-dark-green
Hex: #154734
Brand Drift
var: --color-brand-drift
rgb var: --color-brand-drift-rgb
text class: .color-brand-drift
bg class: .bg-brand-drift
border class: .border-brand-drift
Hex: #275d38
Super Green
var: --color-super-green
rgb var: --color-super-green-rgb
text class: .color-super-green
bg class: .bg-super-green
border class: .border-super-green
Hex: #212724
Black
var: --color-black
rgb var: --color-black-rgb
text class: .color-black
bg class: .bg-black
border class: .border-black
Hex: #000000
Dark Grey
var: --color-dark-grey
rgb var: --color-dark-grey-rgb
text class: .color-dark-grey
bg class: .bg-dark-grey
border class: .border-dark-grey
Hex: #2b2b2b
Grey
var: --color-grey
rgb var: --color-grey-rgb
text class: .color-grey
bg class: .bg-grey
border class: .border-grey
Hex: #8c8c8c
Use carefully on white. Best for borders, icons, and support details.
Light Grey
var: --color-light-grey
rgb var: --color-light-grey-rgb
text class: .color-light-grey
bg class: .bg-light-grey
border class: .border-light-grey
Hex: #ededed
Warm Grey
var: --color-warm-grey
rgb var: --color-warm-grey-rgb
text class: .color-warm-grey
bg class: .bg-warm-grey
border class: .border-warm-grey
Hex: #f2f0eb
White
var: --color-white
rgb var: --color-white-rgb
text class: .color-white
bg class: .bg-white
border class: .border-white
Hex: #ffffff
Off White
var: --color-off-white
rgb var: --color-off-white-rgb
text class: .color-off-white
bg class: .bg-off-white
border class: .border-off-white
Hex: #f8f8f8
Site Background
var: --site-bg-color
bg class: .bg-site-bg-color
Hex: #FBFBFB
Used as the default site-level surface.
Surface Tints
The tint system is defined in css/pages/wg-surface-page.css. These classes use
--surface-tint-color and the shared alpha token to add a soft color layer to a surface.
Tints are useful for atmosphere and section styling, but they still need enough text contrast. Use them with readable text colors and avoid low-contrast pairings.
.tint-dark
.tint-light
.tint-uvu-green
.tint-wolverine-green
.tint-dark-green
.tint-valley-green
.tint-meadow-green
.tint-sage-green
System Tokens
These shared aliases connect brand colors to links, text, borders, panels, surfaces, and tint behavior. They support consistent color use across pages and components.
Shared Color Aliases
| Token | Current Value | Purpose | Related Class |
|---|---|---|---|
--alpha | 0.2 | Shared transparency token | .opacity-sm |
--border-1 | var(--color-light-grey) | Default border token | .border-light-grey |
--link | var(--color-uvu-green) | Default link color | .color-uvu-green |
--link-hover | var(--color-wolverine-green) | Hover link color | .color-wolverine-green |
--panel-bg | var(--color-white) | Panel background | .bg-white |
--site-bg-color | #FBFBFB | Site-level background | .bg-site-bg-color |
--surface-0 | var(--site-bg-color) | Base site surface | .bg-site-bg-color |
--surface-1 | var(--color-white) | Primary content surface | .bg-white |
--surface-2 | var(--color-off-white) | Secondary content surface | .bg-off-white |
--text-1 | var(--color-dark-grey) | Primary text color | .color-dark-grey |
--text-2 | var(--color-grey) | Secondary text color | .color-grey |
Tint and Surface Variables
| Token | Use |
|---|---|
--surface-tint-color | Applies the tint layer color for surface treatments |
--surface-color | Base surface color token |
--surface-before-color | Controls the before layer color used in surface effects |
--surface-img | Surface background image source |
--surface-pattern | Pattern layer token |
--surface-blur | Blur amount for layered surface styling |
--surface-after-extra | Extra after-layer styling token |
--surface-after-anim | After-layer animation token |
--surface-pattern-extra | Additional pattern token |
--surface-pattern-extra-size | Extra pattern size control |
--surface-pattern-extra-pos | Extra pattern position control |
--surface-pattern-extra-repeat | Extra pattern repeat control |
Opacity Utilities
| Class | Value | Use |
|---|---|---|
.opacity-sm | 0.2 | Subtle overlays and soft de-emphasis |
.opacity-md | 0.5 | Medium transparency states |
.opacity-lg | 0.9 | Nearly solid overlays and strong layers |
Notifications & Callouts
Notification tokens live in css/tokens/wg-tokens-notification.css, and helper and component classes live in
css/components/wg-notification.css.
Use notification colors with clear text and structure. Status should remain understandable without relying on color alone.
Info
bg var: --color-info-bg
text var: --color-info-text
bg class: .bg-info-bg
text bg class: .bg-info-text
component classes: .alert-info, .toast-info
BG Hex: #eef4f2
Success
bg var: --color-success-bg
text var: --color-success-text
bg class: .bg-success-bg
text bg class: .bg-success-text
component classes: .alert-success, .toast-success
BG Hex: #eaf4e9
Warning
bg var: --color-warning-bg
text var: --color-warning-text
bg class: .bg-warning-bg
text bg class: .bg-warning-text
component classes: .alert-warning, .toast-warning
BG Hex: #fff9e2
Error
bg var: --color-error-bg
text var: --color-error-text
bg class: .bg-error-bg
text bg class: .bg-error-text
component classes: .alert-error, .toast-error, .email-error
BG Hex: #faeae9
Callout Tip
bg var: --color-callout-tip-bg
text var: --color-callout-tip-text
bg class: .bg-callout-tip-bg
text bg class: .bg-callout-tip-text
component class: .callout-tip
BG Hex: #e1e5e3
Callout Important
bg var: --color-callout-important-bg
text var: --color-callout-important-text
bg class: .bg-callout-important-bg
text bg class: .bg-callout-important-text
component class: .callout-important
BG Hex: #fff3cd
Callout Feature
bg var: --color-callout-feature-bg
text var: --color-callout-feature-text
bg class: .bg-callout-feature-bg
text bg class: .bg-callout-feature-text
component class: .callout-feature
BG Hex: #ecedeb
Shared Border
var: --color-border
bg class: .bg-border
Use: shared border color for notification patterns
Reserve warning and important styles for content that truly needs attention.
Reference Tables
These tables collect the current color tokens and classes found in the guide so page authors can use what already exists before adding custom styling.
Brand Color Utilities
| Name | Token | RGB Token | Text Class | Background Class | Border Class |
|---|---|---|---|---|---|
| UVU Green | --color-uvu-green | --color-uvu-green-rgb | .color-uvu-green | .bg-uvu-green | .border-uvu-green |
| Wolverine Green | --color-wolverine-green | --color-wolverine-green-rgb | .color-wolverine-green | .bg-wolverine-green | .border-wolverine-green |
| Valley Green | --color-valley-green | --color-valley-green-rgb | .color-valley-green | .bg-valley-green | .border-valley-green |
| Meadow Green | --color-meadow-green | --color-meadow-green-rgb | .color-meadow-green | .bg-meadow-green | .border-meadow-green |
| Seahaze Green | --color-seahaze-green | --color-seahaze-green-rgb | .color-seahaze-green | .bg-seahaze-green | .border-seahaze-green |
| Sage Green | --color-sage-green | --color-sage-green-rgb | .color-sage-green | .bg-sage-green | .border-sage-green |
| Dark Green | --color-dark-green | --color-dark-green-rgb | .color-dark-green | .bg-dark-green | .border-dark-green |
| Brand Drift | --color-brand-drift | --color-brand-drift-rgb | .color-brand-drift | .bg-brand-drift | .border-brand-drift |
| Super Green | --color-super-green | --color-super-green-rgb | .color-super-green | .bg-super-green | .border-super-green |
| Black | --color-black | --color-black-rgb | .color-black | .bg-black | .border-black |
| Dark Grey | --color-dark-grey | --color-dark-grey-rgb | .color-dark-grey | .bg-dark-grey | .border-dark-grey |
| Grey | --color-grey | --color-grey-rgb | .color-grey | .bg-grey | .border-grey |
| Light Grey | --color-light-grey | --color-light-grey-rgb | .color-light-grey | .bg-light-grey | .border-light-grey |
| Warm Grey | --color-warm-grey | --color-warm-grey-rgb | .color-warm-grey | .bg-warm-grey | .border-warm-grey |
| Off White | --color-off-white | --color-off-white-rgb | .color-off-white | .bg-off-white | .border-off-white |
| White | --color-white | --color-white-rgb | .color-white | .bg-white | .border-white |
| Site Background | --site-bg-color | — | — | .bg-site-bg-color | — |
Notification Tokens and Classes
| Pattern | Tokens | Background Classes | Component Classes |
|---|---|---|---|
| Success | --color-success-bg, --color-success-text | .bg-success-bg, .bg-success-text | .alert-success, .toast-success |
| Error | --color-error-bg, --color-error-text | .bg-error-bg, .bg-error-text | .alert-error, .toast-error, .email-error |
| Warning | --color-warning-bg, --color-warning-text | .bg-warning-bg, .bg-warning-text | .alert-warning, .toast-warning |
| Info | --color-info-bg, --color-info-text | .bg-info-bg, .bg-info-text | .alert-info, .toast-info |
| Callout Tip | --color-callout-tip-bg, --color-callout-tip-text | .bg-callout-tip-bg, .bg-callout-tip-text | .callout-tip |
| Callout Important | --color-callout-important-bg, --color-callout-important-text | .bg-callout-important-bg, .bg-callout-important-text | .callout-important |
| Callout Feature | --color-callout-feature-bg, --color-callout-feature-text | .bg-callout-feature-bg, .bg-callout-feature-text | .callout-feature |
| Shared Border | --color-border | .bg-border | .alert, .toast, .callout, .banner |
Tint Classes
| Class | Uses |
|---|---|
.tint-dark | --surface-tint-color |
.tint-light | --surface-tint-color |
.tint-uvu-green | --surface-tint-color |
.tint-wolverine-green | --surface-tint-color |
.tint-dark-green | --surface-tint-color |
.tint-valley-green | --surface-tint-color |
.tint-meadow-green | --surface-tint-color |
.tint-sage-green | --surface-tint-color |
It seems that you have reduce motion enabled!