Literal palette helpers
Exact helpers such as .bg-c-uvu-700 stay literal and do not remap in dark mode.
UVU color system prototype Guide colors removed
This page is built as the next swatch pass. It uses the Master layout/component structure, but all color references come from the new c color system.
Theme status loading.
Exact helpers such as .bg-c-uvu-700 stay literal and do not remap in dark mode.
Role helpers such as .bg-c-card, .text-c-body, and .border-c-default remap for contrast.
Alpha helpers use RGB tokens and readable suffixes such as -alpha-16. They do not use element opacity.
The guide icon marks the original/source Master color inside the new tone scale. The row below each family is a dark-mode usage preview. It does not change the literal color values.
| Color family | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|---|---|---|---|---|---|---|---|---|---|---|---|
UVU--c-uvu-main#185c33 |
50#eef7f1 | 100#d9ecdf | 200#b7dcc4 | 300#8bc49f | 400#5ca977 | 500#358a55 | 600#247142 | 700#185c33 | 800#114528 | 900#0b301d | 950#061a10 |
| UVU dark role preview Dark preview sample |
Card--c-uvu-900 | Text--c-uvu-100 | Muted--c-uvu-300 | Border--c-uvu-600 | Accent--c-uvu-400 | — | — | — | — | — | — |
Wolverine--c-wolverine-main#008a40 |
50#e9f8ef | 100#cdefda | 200#9fe1ba | 300#68ce94 | 400#31b56e | 500#0f9d52 | 600#008a40 | 700#006c33 | 800#07552c | 900#064625 | 950#022815 |
| Wolverine dark role preview Dark preview sample |
Card--c-wolverine-900 | Text--c-wolverine-100 | Muted--c-wolverine-300 | Border--c-wolverine-600 | Accent--c-wolverine-400 | — | — | — | — | — | — |
Valley--c-valley-main#78be3f |
50#f2faec | 100#e2f4d4 | 200#c7e9ad | 300#a7db7e | 400#78be3f | 500#63a832 | 600#4c8426 | 700#3d6822 | 800#33531f | 900#2b461c | 950#13250b |
| Valley dark role preview Dark preview sample |
Card--c-valley-900 | Text--c-valley-100 | Muted--c-valley-300 | Border--c-valley-600 | Accent--c-valley-400 | — | — | — | — | — | — |
Meadow--c-meadow-main#c5d97a |
50#fbfdf3 | 100#eef5d0 | 200#c5d97a | 300#b3cc5a | 400#9db642 | 500#7f952f | 600#627424 | 700#4c5a20 | 800#3f4a1e | 900#36401c | 950#1c220b |
| Meadow dark role preview Dark preview sample |
Card--c-meadow-900 | Text--c-meadow-100 | Muted--c-meadow-300 | Border--c-meadow-600 | Accent--c-meadow-400 | — | — | — | — | — | — |
Seahaze--c-seahaze-main#c4d6c1 |
50#f4f8f3 | 100#e3ece1 | 200#c4d6c1 | 300#a4bea0 | 400#7f9f79 | 500#64845e | 600#4e6949 | 700#40553c | 800#354632 | 900#2e3b2c | 950#172016 |
| Seahaze dark role preview Dark preview sample |
Card--c-seahaze-900 | Text--c-seahaze-100 | Muted--c-seahaze-300 | Border--c-seahaze-600 | Accent--c-seahaze-400 | — | — | — | — | — | — |
Drift--c-drift-main#275d38 |
50#eff7f1 | 100#d8ebde | 200#b4d8be | 300#85bc96 | 400#589b6d | 500#3b7f50 | 600#2e6641 | 700#275d38 | 800#1d452b | 900#183925 | 950#0c1f14 |
| Drift dark role preview Dark preview sample |
Card--c-drift-900 | Text--c-drift-100 | Muted--c-drift-300 | Border--c-drift-600 | Accent--c-drift-400 | — | — | — | — | — | — |
Dark green--c-dark-green-main#154734 |
50#eef7f3 | 100#d7ebe2 | 200#b2d7c7 | 300#83baa0 | 400#589877 | 500#397b5d | 600#2b6049 | 700#214c3a | 800#154734 | 900#12372a | 950#071f17 |
| Dark green dark role preview Dark preview sample |
Card--c-dark-green-900 | Text--c-dark-green-100 | Muted--c-dark-green-300 | Border--c-dark-green-600 | Accent--c-dark-green-400 | — | — | — | — | — | — |
Super--c-super-main#212724 |
50#f3f5f4 | 100#e4e8e6 | 200#cbd3cf | 300#a8b5ae | 400#82918a | 500#66746d | 600#505b56 | 700#424b46 | 800#383f3b | 900#212724 | 950#121613 |
| Super dark role preview Dark preview sample |
Card--c-super-900 | Text--c-super-100 | Muted--c-super-300 | Border--c-super-600 | Accent--c-super-400 | — | — | — | — | — | — |
Neutral--c-neutral-main#2b2b2b |
50#fbfbfb | 100#f2f2f2 | 200#d0d0d0 | 300#b8b8b8 | 400#9f9f9f | 500#8c8c8c | 600#686868 | 700#505050 | 800#3a3a3a | 900#2b2b2b | 950#000000 |
| Neutral dark role preview Dark preview sample |
Card--c-neutral-900 | Text--c-neutral-100 | Muted--c-neutral-300 | Border--c-neutral-600 | Accent--c-neutral-400 | — | — | — | — | — | — |
Warm grey--c-warm-main#f2f0eb |
50#fbfaf7 | 100#f2f0eb | 200#e1ddd3 | 300#ccc5b6 | 400#b4aa96 | 500#9b907c | 600#817664 | 700#675e50 | 800#504a40 | 900#37332d | 950#1d1b18 |
| Warm grey dark role preview Dark preview sample |
Card--c-warm-900 | Text--c-warm-100 | Muted--c-warm-300 | Border--c-warm-600 | Accent--c-warm-400 | — | — | — | — | — | — |
Sage--c-sage-main#66824f |
50#f2f6ef | 100#e1ead9 | 200#c6d7b8 | 300#a7bf91 | 400#839f68 | 500#66824f | 600#4f663d | 700#3f5132 | 800#34432a | 900#2b3824 | 950#142013 |
| Sage dark role preview Dark preview sample |
Card--c-sage-900 | Text--c-sage-100 | Muted--c-sage-300 | Border--c-sage-600 | Accent--c-sage-400 | — | — | — | — | — | — |
Gold--c-gold-main#fff3cd |
50#fff9e2 | 100#fff3cd | 200#ffe69b | 300#ffd666 | 400#ffc233 | 500#f5ad00 | 600#c28500 | 700#856404 | 800#664d03 | 900#5a4b00 | 950#332800 |
| Gold dark role preview Dark preview sample |
Card--c-gold-900 | Text--c-gold-100 | Muted--c-gold-300 | Border--c-gold-600 | Accent--c-gold-400 | — | — | — | — | — | — |
Red--c-red-main#faeae9 |
50#fff1f0 | 100#faeae9 | 200#f3c7c2 | 300#e9958c | 400#db6257 | 500#c83c31 | 600#a52c24 | 700#81231d | 800#661f1a | 900#4a1612 | 950#2a0a08 |
| Red dark role preview Dark preview sample |
Card--c-red-900 | Text--c-red-100 | Muted--c-red-300 | Border--c-red-600 | Accent--c-red-400 | — | — | — | — | — | — |
Info--c-info-main#eef4f2 |
50#f4f9f8 | 100#eef4f2 | 200#d4e3df | 300#b4ccc5 | 400#8cada2 | 500#6c9286 | 600#55766d | 700#465f58 | 800#3b504a | 900#154734 | 950#0b241b |
| Info dark role preview Dark preview sample |
Card--c-info-900 | Text--c-info-100 | Muted--c-info-300 | Border--c-info-600 | Accent--c-info-400 | — | — | — | — | — | — |
Alpha is available as one descriptive class pattern: .bg-c-uvu-700-alpha-16,
.text-c-uvu-700-alpha-80, and .border-c-uvu-700-alpha-32.
Current steps: -alpha-08 -alpha-16 -alpha-24 -alpha-32 -alpha-48 -alpha-64 -alpha-80.
| Family | 08 | 16 | 24 | 32 | 48 | 64 | 80 |
|---|---|---|---|---|---|---|---|
UVU--c-uvu-700 | .bg-c-uvu-700-alpha-08 | .bg-c-uvu-700-alpha-16 | .bg-c-uvu-700-alpha-24 | .bg-c-uvu-700-alpha-32 | .bg-c-uvu-700-alpha-48 | .bg-c-uvu-700-alpha-64 | .bg-c-uvu-700-alpha-80 |
Wolverine--c-wolverine-600 | .bg-c-wolverine-600-alpha-08 | .bg-c-wolverine-600-alpha-16 | .bg-c-wolverine-600-alpha-24 | .bg-c-wolverine-600-alpha-32 | .bg-c-wolverine-600-alpha-48 | .bg-c-wolverine-600-alpha-64 | .bg-c-wolverine-600-alpha-80 |
Valley--c-valley-400 | .bg-c-valley-400-alpha-08 | .bg-c-valley-400-alpha-16 | .bg-c-valley-400-alpha-24 | .bg-c-valley-400-alpha-32 | .bg-c-valley-400-alpha-48 | .bg-c-valley-400-alpha-64 | .bg-c-valley-400-alpha-80 |
Sage--c-sage-500 | .bg-c-sage-500-alpha-08 | .bg-c-sage-500-alpha-16 | .bg-c-sage-500-alpha-24 | .bg-c-sage-500-alpha-32 | .bg-c-sage-500-alpha-48 | .bg-c-sage-500-alpha-64 | .bg-c-sage-500-alpha-80 |
Gold--c-gold-100 | .bg-c-gold-100-alpha-08 | .bg-c-gold-100-alpha-16 | .bg-c-gold-100-alpha-24 | .bg-c-gold-100-alpha-32 | .bg-c-gold-100-alpha-48 | .bg-c-gold-100-alpha-64 | .bg-c-gold-100-alpha-80 |
Red--c-red-100 | .bg-c-red-100-alpha-08 | .bg-c-red-100-alpha-16 | .bg-c-red-100-alpha-24 | .bg-c-red-100-alpha-32 | .bg-c-red-100-alpha-48 | .bg-c-red-100-alpha-64 | .bg-c-red-100-alpha-80 |
Info--c-info-100 | .bg-c-info-100-alpha-08 | .bg-c-info-100-alpha-16 | .bg-c-info-100-alpha-24 | .bg-c-info-100-alpha-32 | .bg-c-info-100-alpha-48 | .bg-c-info-100-alpha-64 | .bg-c-info-100-alpha-80 |
Neutral--c-neutral-900 | .bg-c-neutral-900-alpha-08 | .bg-c-neutral-900-alpha-16 | .bg-c-neutral-900-alpha-24 | .bg-c-neutral-900-alpha-32 | .bg-c-neutral-900-alpha-48 | .bg-c-neutral-900-alpha-64 | .bg-c-neutral-900-alpha-80 |
These helpers are the safe default for page UI. They remap between light and dark mode while palette helpers remain fixed.
.bg-c-page + .text-c-body
.bg-c-card + .border-c-default
.bg-c-panel + .text-c-muted-text
.bg-c-subtle for soft tinted surfaces.
Structural role
Use header role helpers when a header or nav area needs its own mode-aware surface.
See header exampleText roles
Body copy uses .text-c-p or .text-c-body. Links use .text-c-link.
Each role has one family decision, then maps bg, text, border, icon, heading, and link tokens for light and dark mode.
Uses one role family with separate bg, text, border, icon, heading, and link tokens.
Review role tokensUses one role family with separate bg, text, border, icon, heading, and link tokens.
Review role tokensUses one role family with separate bg, text, border, icon, heading, and link tokens.
Review role tokensUses one role family with separate bg, text, border, icon, heading, and link tokens.
Review role tokensUses one role family with separate bg, text, border, icon, heading, and link tokens.
Review role tokensUses one role family with separate bg, text, border, icon, heading, and link tokens.
Review role tokensUses one role family with separate bg, text, border, icon, heading, and link tokens.
Review role tokensUses one role family with separate bg, text, border, icon, heading, and link tokens.
Review role tokensUses one role family with separate bg, text, border, icon, heading, and link tokens.
Review role tokensThese examples use Master layout/component structure and only new swatch color references for color.
Header role example
A mode-aware header surface using only swatch color roles.
Student resources
Use role colors for default UI so the card stays readable when the site theme changes.
Meet with an advisor, check registration dates, and review financial aid tasks.
Dark preview example
This block is a dark preview sample. It shows how surface, text, border, links, and buttons should hold contrast.
Muted text remains readable without becoming the main visual focus.
Open paletteRole tokens remap this message to dark-safe values.
Warning uses gold role tokens with dark contrast.
Old Master color variable names are mapped to the new --c-* tokens so older pages can transition safely.
These aliases are not the design source for new work.
Sage is now a solid palette. The old --color-sage-green alias points to a new alpha value instead of being the source color.