Brand Colors
brand & notifications colors
Web Color Ratio
See UVU brand guide on Maintaining a balanced ratio (add link...)
Using Color with Purpose in Web Design
Color is a foundational tool in expressing UVU’s digital identity. On the web, consistent application of the primary color palette reinforces brand recognition and ensures visual cohesion across sites and components.
- Primary colors should dominate the interface used for headers, navigation, buttons, and other core elements.
- Secondary colors function as support tones. Use them to introduce contrast, structure sections, or create visual hierarchy without detracting from primary elements.
- Accent colors should be used sparingly for emphasis such as highlighting a call to action, status alert, or interactive detail.
Maintain a clear color hierarchy: lead with primary, balance with secondary, and apply accents with intent. This approach improves accessibility, visual clarity, and user orientation.
White Space as an Active Element
White space (or negative space) is a critical part of web layout strategy. It's not just background it structures the user experience.
- Improves readability and content focus.
- Creates visual rhythm between text, images, and interactive components.
- Enhances mobile responsiveness and ensures that content doesn’t feel crowded on smaller screens.
Use generous spacing between sections, around buttons, and within containers to help users process information efficiently. When well-applied, white space gives web interfaces a clean, modern feel that reflects UVU’s commitment to clarity, openness, and confident design.
UVU Green
var: --color-uvu-green
class: .color-uvu-green
background class: .bg-uvu-green
Hex: #185c33
Wolverine Green
var: --color-wolverine-green
class: .color-wolverine-green
background class: .bg-wolverine-green
Hex: #008a40
Valley Green
var: --color-valley-green
class: .color-valley-green
background class: .bg-valley-green
Hex: #78be3f
Meadow Green
var: --color-meadow-green
class: .color-meadow-green
background class: .bg-meadow-green
Hex: #c5d97a
Seahaze Green
var: --color-seahaze-green
class: .color-seahaze-green
background class: .bg-seahaze-green
Hex: #c4d6c1
Sage Green
var: --color-sage-green
class: .color-sage-green
background class: .bg-sage-green
Hex: #eff1ef
Dark Green
var: --color-dark-green
class: .color-dark-green
background class: .bg-dark-green
Hex: #154734
Black
var: --color-black
class: .color-black
background class: .bg-black
Hex: #000000
Dark Grey
var: --color-dark-grey
class: .color-dark-grey
background class: .bg-dark-grey
Hex: #2b2b2b
Grey
var: --color-grey
class: .color-grey
background class: .bg-grey
Hex: #8c8c8c
(min on white - borders and icons only)
Light Grey
var: --color-light-grey
class: .color-light-grey
background class: .bg-light-grey
Hex: #ededed
Warm Grey
var: --color-warm-grey
class: .color-warm-grey
background class: .bg-warm-grey
Hex: #f2f0eb
White
var: --color-white
class: .color-white
background class: .bg-white
Hex: #ffffff
Off White
var: --color-off-white
class: .color-off-white
background class: .bg-off-white
Hex: #f8f8f8