01 · Surfaces
Page canvas
Base page background and text role tokens.
UVU page canvas
The base page surface uses system background and text colors.
Overview page
This page is a general visual audit for 130 guide elements. It uses existing Master 05 classes only, removes the former custom overview card system, and keeps detail-page links out until the next pass.
130
guide elements
16
categories
0
custom classes
7 elements
Surfaces
Foundational surfaces that establish depth, grouping, and page hierarchy.
02 · Surfaces
Section surface
Full-width or contained section regions for page rhythm.
Section surface
Use a contained surface to group related guide content.
03 · Surfaces
Card
Self-contained content object for modules and previews.
Student success card
Cards hold one focused message, link, or task.
04 · Surfaces
Panel
Framed grouping region for structured content and controls.
Panel heading
Panels frame structured information and controls.
05 · Surfaces
Tile
Whole-surface link or action block for indexes and dashboards.
06 · Surfaces
Banner
Horizontal message strip for section or page context.
07 · Surfaces
Hero
High-impact entry region with primary message and action.
7 elements
Overlays
Temporary surfaces that sit above the page while preserving focus and context.
15 · Overlays
Modal
Dialog-style overlay for blocking tasks or focused content.
Info modal
Grouped triggers open matching modal items by index.
Contact modal
Backdrop click, Escape, and this close button all close the modal.
16 · Overlays
Drawer
Slide-in panel for secondary navigation, tools, or settings.
17 · Overlays
Dropdown
Compact menu or option list revealed from a trigger.
Dropdown menu
This dropdown is positioned as an overlay and closes on outside click.
18 · Overlays
Popover
Anchored contextual content for lightweight supporting information.
Popover note
Inline dropdown mode keeps the note in normal page flow.
19 · Overlays
Backdrop
Overlay layer that separates elevated UI from page content.
Backdrop layer
Overlay patterns use a darkened page layer behind active content.
20 · Overlays
Tooltip
Small hover/focus description for compact controls.
UVU helper tip
21 · Overlays
Toast overlay
Timed status message placed above the page flow.
Application saved
13 elements
Inputs and Forms
Native-first form controls styled through shared component rules and role tokens.
22 · Inputs and Forms
Text input
Single-line text entry with label and help text.
Use your preferred name.
23 · Inputs and Forms
Textarea
Multi-line text entry for longer messages.
24 · Inputs and Forms
Select
Native choice menu with required-state support.
25 · Inputs and Forms
Checkbox
Independent binary choice with native input semantics.
26 · Inputs and Forms
Radio
Mutually exclusive option group with fieldset/legend.
27 · Inputs and Forms
Switch
Boolean control using the guide slider-toggle sample.
The guide switch sample uses slider-toggle.
28 · Inputs and Forms
File upload
Native file input with label and supported-format help text.
PDF, JPG, or PNG.
29 · Inputs and Forms
Range slider
Continuous numeric input for values like volume or intensity.
30 · Inputs and Forms
Color input
Native color picker used only when appropriate for tools.
31 · Inputs and Forms
Date input
Native date picker with explicit label.
32 · Inputs and Forms
Time input
Native time picker with explicit label.
33 · Inputs and Forms
Date-time input
Native combined date and time picker.
34 · Inputs and Forms
Fieldset group
needs love
Related controls grouped with a visible legend.
8 elements
Actions
Interactive controls that move users forward, submit choices, or open related content.
35 · Actions
Primary button
Main action on a section or component.
36 · Actions
Secondary button
Supporting action with lower visual priority.
37 · Actions
Button sizes
Small, medium, large, and full-width sizing options.
38 · Actions
Full-width button
Block-level action used in narrow or stacked layouts.
39 · Actions
Button group
Related actions presented as a coordinated set.
40 · Actions
Icon button
Compact action with a visible label or accessible name.
41 · Actions
Link button
Anchor styled as a button when navigation is the action.
42 · Actions
Disabled action
needs love
Non-interactive state that remains visibly disabled and accessible.
Unavailable link
Use
aria-disabled when an anchor visually remains in
the flow.
9 elements
Feedback and Status
User-facing messages for success, warnings, errors, progress, and system state.
43 · Feedback and Status
Info alert
Neutral message with helpful context.
Note: Registration support is available.
44 · Feedback and Status
Success alert
Positive confirmation after a completed action.
Success: Your request was saved.
45 · Feedback and Status
Warning alert
Caution message before or after risky action.
Warning: Check deadlines before submitting.
46 · Feedback and Status
Error alert
Failure message requiring attention or correction.
Error: A required field needs attention.
47 · Feedback and Status
Banner notification
Page-level message across a wider region.
48 · Feedback and Status
Toast notification
Short-lived overlay status message.
Saved to your plan
49 · Feedback and Status
Inline validation
Field-level help, error, or success message.
Enter a complete email address.
50 · Feedback and Status
Empty state
Message for zero-result or unavailable content conditions.
No items yet
Add a saved program to start your list.
51 · Feedback and Status
Loading progress
Progress indicator for loading, upload, or completion states.
11 elements
Data Display
Tables, lists, stats, tags, and charts for structured information.
52 · Data Display
Table
Standard tabular information with clear headers.
| Service | Status |
|---|---|
| Advising | Open |
| Tutoring | Open |
53 · Data Display
Responsive table
Scrollable or wrapped table presentation for narrow screens.
| Program | College | Format |
|---|---|---|
| Biology | Science | On campus |
| Digital Media | Engineering | Hybrid |
54 · Data Display
Stat card
Large number and label pairing for quick metrics.
97
Core elements
55 · Data Display
Graph/chart
Visual data display using the graph component rules.
1
2
3
4
Bars use color, radius, spacing, and bottom alignment utilities.
56 · Data Display
Key-value list
Compact label/value pairs for facts and specs.
- Campus
- Orem
- Term
- Fall
- Status
- Open
57 · Data Display
Definition list
Semantic term and description pairs.
- Certificate
- A focused credential that supports career growth.
- Degree
- A full academic program of study.
58 · Data Display
Ordered list
Sequence where order changes meaning.
- Choose a program.
- Meet with advising.
- Register for classes.
59 · Data Display
Unordered list
General grouped bullets.
- Admissions
- Financial Aid
- Student Success
60 · Data Display
Dash list
Editorial list style for short scannable points.
- Use concise copy.
- Keep actions clear.
- Check accessibility.
61 · Data Display
Tag/pill
Small categorical metadata label.
62 · Data Display
Badge
Compact status or count label.
New
8 elements
Micro-elements
Small visual primitives that support clarity, scannability, and accessibility.
63 · Micro-elements
Focus ring
Universal keyboard-visible focus treatment.
Tab to focus
Focus-visible outlines are defined globally.
64 · Micro-elements
Icon
Reusable icon glyph through the existing icon utility system.
Icon tokens render through the shared icon utility.
65 · Micro-elements
Divider
Subtle visual separator between content groups.
Section start
Section end
66 · Micro-elements
Code token
Inline technical token or class-name display.
Use container-lg to constrain page width.
67 · Micro-elements
Label
Visible descriptor for form controls and metadata.
68 · Micro-elements
Helper text
Secondary guidance connected to an input or control.
Find this number in myUVU.
69 · Micro-elements
Shadow
Elevation utility for raised surfaces.
Shadow surface
Shadows add separation from the page.
70 · Micro-elements
Radius
Corner rounding utility for surfaces and media.
Rounded corner sample
4 elements
Disclosure
Patterns that reveal, hide, switch, or organize content panels.
71 · Disclosure
Accordion
Expandable stacked content regions.
Meet with UVU admissions for next steps.
72 · Disclosure
Tabs
Mutually exclusive content panels with keyboard support.
First tab panel.
Second tab panel.
73 · Disclosure
Details summary
needs love
Native disclosure for simple optional content.
What is a Wolverine?
A Wolverine is UVU spirit in action.
74 · Disclosure
Show/hide toggle
needs love
Control that reveals or hides a related region.
6 elements
Media
Images, figures, galleries, backgrounds, and embedded media rules.
75 · Media
Responsive image
Image that scales safely with width and preserves ratio.
76 · Media
Figure
Image and caption grouping with semantic figure markup.
77 · Media
Image ratio
Aspect-ratio utility for consistent image crops.
78 · Media
Gallery
Grouped image layout with consistent spacing.
79 · Media
Background image
Decorative or contextual background treatment.
Background image
80 · Media
Video/embed
needs love
Responsive embedded media container.
7 elements
Typography
Type roles, scale, and font assignments that preserve the UVU voice.
81 · Typography
Heading scale
H1 through H6 using Stratum and heading role tokens.
Heading one
Heading two
Heading three
82 · Typography
Paragraph
Body copy using Arial and body role tokens.
UVU paragraphs use the body font, readable line height, and system spacing.
83 · Typography
Lead/callout text
Prominent supporting copy for intros and callouts.
Lead copy introduces important page content.
84 · Typography
Small text
Secondary small copy, notes, and helper text.
Small text supports hints, captions, and compact labels.
85 · Typography
Link text
Inline navigational or reference link styling.
Return to top with the default link style.
86 · Typography
Primary font role
Stratum brand voice for headings, nav, and labels.
Primary font role for headings and action text.
87 · Typography
Secondary font role
Proxima Nova accent role for callouts and display moments.
Secondary font role for large display copy.
10 elements
Layout and Structure
Containers, grids, spacing, and structural utilities used to compose full pages.
Live container width options
These bars use the actual container classes at page width so the differences are visible.
container-full · 100%
container-xl · clamp(350px, 98%, 2000px)
container-lg · clamp(320px, 90%, 1536px)
container-md · clamp(280px, 85%, 1280px)
container-sm · clamp(260px, 80%, 1024px)
container-fixed container-lg · max-width 1200px
88 · Layout and Structure
Container widths
Shared max-width wrappers for consistent page rhythm.
container-full
container-xl
container-lg
container-md
container-sm
container-fixed container-lg
89 · Layout and Structure
Grid
Column-based layout system for content regions.
grid-cols-1
1
2
1
2
3
1
2
3
4
90 · Layout and Structure
Flex
Directional layout utility for rows, stacks, and alignment.
flex
wrap
flex-h item
flex-h item
91 · Layout and Structure
Stack
Vertical rhythm pattern for grouped children.
Stack heading
Stack item one
Stack item two
92 · Layout and Structure
Gap
Child spacing utilities for grid and flex layouts.
xs
xs
xs
md
md
md
93 · Layout and Structure
Padding
Inner spacing utilities using the locked scale.
Padding utility adds inner space.
94 · Layout and Structure
Margin
Outer spacing utilities using the locked scale.
Margin utility creates outer space.
95 · Layout and Structure
Column span
Responsive grid child span utilities.
col-span-2
col-span-1
col-span-1
col-span-4
96 · Layout and Structure
Sticky
needs love
Positioning utility for anchored or persistent UI.
Sticky sample
Sticky positioning keeps local UI anchored.
97 · Layout and Structure
Z-index
needs love
Layering utilities tied to z-index role tokens.
Layered surface
Navigation and overlay shells define z-index layers.
10 elements
Colors and Themes
Color tokens, theme wrappers, and contrast helpers used across the guide.
98 · Colors and Themes
Brand palette
Core UVU green palette used for identity and emphasis.
UVU green
Wolverine
Valley
Meadow
99 · Colors and Themes
Surface tints
Soft background fills for subtle grouping and page rhythm.
sage
seahaze
warm grey
off white
100 · Colors and Themes
Color swatch
Compact visual chip for color reference tables.
101 · Colors and Themes
Text color utilities
Text color classes connect copy to the shared token palette.
UVU green text
Wolverine green text
Secondary grey text
102 · Colors and Themes
Background utilities
Background classes apply token fills without custom CSS.
Token background sample
103 · Colors and Themes
Wolverine theme
Theme wrapper that adapts local surfaces, headings, lists, and buttons.
104 · Colors and Themes
Darkforest theme
Alternate theme wrapper for darker branded content blocks.
105 · Colors and Themes
Notification colors
System feedback colors shared by alerts, callouts, and field messages.
Info
Success
Warning
Error
106 · Colors and Themes
Dark mode toggle
Footer include adds the working fixed toggle and script hook.
needs love
Dark mode control
The footer include owns the live toggle so the overview does not duplicate the ID.
107 · Colors and Themes
Contrast checker tool
Guide tool area for validating accessible color pairings.
needs love
Tool page exists, but the overview only marks the coverage point.
9 elements
Utility Systems
Spacing, borders, radius, shadow, lists, copy helpers, and layout utilities.
108 · Utility Systems
Spacing scale
Small through large spacing tokens applied as padding utilities.
in-xs
in-sm
in-md
in-lg
109 · Utility Systems
Directional padding
Side and axis padding utilities support precise page pacing.
top right bottom left
110 · Utility Systems
Directional margin
Outer spacing utilities separate components without custom rules.
margin sample
111 · Utility Systems
Child spacing
Parent-based child spacing keeps repeated content consistent.
First child
Second child
Third child
112 · Utility Systems
Border utilities
Border size and color classes combine as reusable box styles.
bs-sm border-uvu-green
113 · Utility Systems
Radius scale
Corner radius utilities support cards, media, and pills.
sm
md
lg
full
114 · Utility Systems
Shadow scale
Elevation utilities create visual depth without new CSS.
sm
md
lg
115 · Utility Systems
Opacity scale
Opacity utilities support decorative layers and muted surfaces.
sm
md
lg
116 · Utility Systems
Copy helper
Small action hook used by code and builder examples.
container-lg
9 elements
Motion and Interaction
Animation, hover, sliders, tabs, and M Plugin behavior samples.
117 · Motion and Interaction
Fade animation
Animation utility pair for entrance motion.
Fade in
Animation classes should respect reduced motion.
118 · Motion and Interaction
Slide animation
Directional slide utilities for guided content reveals.
119 · Motion and Interaction
Stagger group
Parent stagger class animates child items in sequence.
120 · Motion and Interaction
Hover lift
Element-level hover state for link cards and action cards.
121 · Motion and Interaction
Parent hover
Parent class applies a shared hover style to child cards.
122 · Motion and Interaction
Tabs to accordion
Responsive M Plugin mode switches tabs to accordion behavior.
Overview
Tabs by default, accordion at medium and up.
Details
The same target group changes behavior responsively.
123 · Motion and Interaction
M Plugin slider
Indexed slider panels with synced triggers.
Slide one
Student services overview.
Slide two
Program planning reminder.
124 · Motion and Interaction
Autoplay control
Slider autoplay support with a dedicated play/pause trigger.
Autoplay one
Automatically advances until paused.
Autoplay two
User interaction pauses the rotation.
125 · Motion and Interaction
Reduced motion notice
Footer include contains the reduced-motion notice block.
Reduce motion message area.
5 items
Needs Love
Coverage points that exist in markup or behavior, but do not yet have a clear default guide style sample.
126 · Needs Love
Skip link visual state
needs love
The guide documents skip links, but there is no dedicated
skip-link class in the loaded CSS.
127 · Needs Love
Native details styling
needs love
Native disclosure works, but default styling is not yet a polished component style.
Student checklist
Meet with advising before registration.
128 · Needs Love
Fieldset spacing
needs love
Fieldset and legend semantics are covered, but the default visual treatment needs a stronger sample.
129 · Needs Love
Disabled link button
needs love
Disabled buttons are native, but disabled anchor behavior still needs a clear default pattern.
130 · Needs Love
Video placeholder
needs love
Responsive video containers exist, but empty or poster-only video states need a stronger default treatment.
Video placeholder
It seems that you have reduce motion enabled!