UVU 26'

ux/ui design systems & web guide

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

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.

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.

Kit needs*

  • Logo package
  • Fonts / links & downloads??
  • Images package
  • raw css vs sass or less, I have been using raw but use whatever is best for third party or compile into minified file.
  • Need to check for class collisions naming conventions.
Questions / Ideas / Research notes
  • As the pages move to complete they will need to be checked for semantics, they started out correct but I am doing ton of movment and things get off.
  • Where should the guide live?
  • Identify content owners on thinngs like,stats and enrollment numbers.
  • Add as many code samples as possible for all elements allowing developer / third party systems to copy and paste for consitancy.
  • Develop a Content gathering, curating and management process.
  • Test each element in app and systems for consistancy.
  • Do we have a lab, or what is are testing situation?
  • Add a section on how, why, and types for download files files (pdf,zip, etx) and...
  • Is font awesome ok with apps? see icon page for notes
  • Are we still looking at personization and myUVU integration? on .edu
  • Make sure Modern campus is installed with its full capabilty if still using, pretty sure yes.
    • Uses XSLT and XML (dated but stable).
    • Not a modern backend like React, Node, or headless APIs.
    • Not well-suited for dynamic, app-like content — better for static marketing and academic sites.
    • Modern Campus is editor-friendly, stable, and template-driven.
    • Headless CMSs are API-first, developer-friendly, and highly dynamic.
    • Modern Campus lacks modern backend extensibility, real-time personalization, and frontend flexibility.
  • Editable regions
    • Editable regions allow non-technical users to update parts of a page via WYSIWYG.
    • Defined in .pcf files using XML and rendered with XSL/Velocity.
    • Useful for inserting dynamic elements like buttons, structured blocks, etc.
  • Strengths of Modern Campus CMS
    • Non-Technical Editor Friendly
    • Granular Permissions and Workflows
    • Static HTML Publishing
      • pages publish as static HTML fast, secure, and low maintenance. good or bad? exp.. footer
      • No reliance on databases or runtime server-side logic for public content.
    • Accessibility Support
    • Reusability and Shared Assets, yay lets use these.
    • Secure and Stable
    • Versioning and History
    • Training and Support

Page types – examples of page (audience) types, not necessarily template types.

We need to identify content as we build up the sites so content is captured in format (form).

University Secondary & Sub Pages

Sites within the university website are asked to follow basic guidelines to ensure they provide the most efficient and up-to-date information.

Prospective Students.

Definition: Individuals who are considering applying to or enrolling at the university. This includes high school students, transfer students, adult learners, and anyone exploring higher education opportunities at the institution.

The University’s Prospective Students page highlights the experiences and growth opportunities available to help shape a prospective student’s future, including the following details:

  • Degree programs and courses that support career development and advancement
  • Academic experience, including class sizes and open-admission policies
  • Student life experience, including campus safety, diversity, and inclusion
  • General campus information, such as accessibility and connected campus features
  • Athletics and extracurricular programs
  • Application, admission, and enrollment process

Current Students.

Current Students – Definition: Students who are actively enrolled in courses at the university, whether part-time or full-time, across undergraduate, graduate, or continuing education programs.

The University’s Current Students page is intended to provide the following information:

  • Current student status information (provided by myUVU)
  • Parking and transportation options, including bus passes
  • On-campus and nearby housing information
  • Clubs and student organizations
  • Athletics and sports programs

Community

The University’s Community page is intended to provide the following information:

Community – Definition: Members of the broader public, including local residents, partners, visitors, alumni, and organizations that interact with or benefit from university programs, resources, and outreach efforts.

  • Graduate outcomes and workforce success data
  • Sustainability efforts and environmental impact
  • Transparency in university growth and strategic goals
  • Educational opportunities for seniors and youth
  • Campus events, including arts, athletics, presentations, and conferences
  • Parking and transportation information

Faculty and Staff

Faculty and Staff – Definition: University employees responsible for teaching, research, administration, and operations. Faculty refers to academic instructors, professors, and researchers, while Staff includes administrative, technical, and support personnel who help run the university.

The University’s Faculty and Staff page is intended to provide the following information:

  • Health and wellness programs and services
  • Financial information, including paystubs, tax documents, and schedules (available through myUVU)
  • Training and professional development opportunities

Others - need official definitions on all of these.

Utility sites:
  • Graduation already in the que for update maybe a good one to start with.
  • About
  • Schools and Colleges
  • Deparment / programs
  • ...