UVU Design System: General Overview
UVU Design System (utility-first, lightweight, token-driven framework)
The UVU Design System is a utility-based, token-driven collection of styles and components created to ensure a consistent, accessible, and modern digital presence for Utah Valley University (UVU) across all platforms. Built on responsive, mobile-first, and cross-browser principles, it uses UVU’s design tokens (colors, spacing, typography) as the foundation. The system emphasizes accessibility, performance, and brand consistency, while remaining lightweight and flexible enough to integrate with UVU websites and third-party platforms.
Note: This is a work-in-progress draft and updated frequently. Last update 03.02.26
This Project has been forked, an updated version is being worked on in a new project folder
- Added responsive double border.Content Containers
- Added background page.Backgrounds / Patterns
one-shot animation on with two calls can freeze
- update vars and tokens.
- update dark mode colors, check contrast.
- update card options, card's page changed to - Content Containers
- update / extend icon's - Icons
- look at seperating hover scale into a seprate call
- fix button colors on banners and heros
- add parent level targeting to Content Containers
- add media adaptation to Content Containers Color Adaptation map
Global Accessibility Commitment
The UVU Design System is built to ensure all digital products are inclusive and accessible. It undergoes ongoing testing with assistive technologies and user feedback from people with disabilities. By following WCAG 2.1 AA standards and including AAA elements where possible, the system ensures features such as screen reader support, high contrast, keyboard navigation, and responsive design are part of every build—creating a welcoming digital experience for everyone.
Third-Party Application Requirements
Any third-party sites or external applications that integrate with UVU systems or that represent the university must follow UVU’s design system standards for branding and accessibility. This includes:
Consistent Branding: Use approved UVU logos, fonts, and color tokens to ensure brand consistency across all platforms.
Accessibility Compliance: All sites and systems that represent UVU must meet WCAG 2.1 Level AA or higher to ensure accessibility and inclusivity within the UVU digital ecosystem.
Guide only - Menu keyboard navigation
Arrow keys on menu only
- TAB key - DOWN or RIGHT arrow key
Select next focusable element - SHIFT+TAB key - UP or LEFT arrow key
Select previous focusable element - M key - Open / Close Menu
- X key - Close Menu
Sometimes you wear stretchy pants in your room. It's for fun.
– Nacho Libre
Dark Mode - needs work
It seems that you have reduce motion enabled!