Surface

REBUILDING THIS - DO NOT USE

Overview

The surface system lets you add a visual background layer inside a normal content block without changing the page layout much. Use it for guide pages, callouts, cards, promo rows, section breaks, and feature banners.

There are two ways to use it: surface and skin.

Use `surface` when you want a background layer inside a container

<div class="in-lg color-white">
  <span class="surface surface-img-ref3 tint-dark glass-md"></span>
  <h3>Apply to UVU</h3>
  <p>Start your next step with admissions and enrollment resources.</p>
</div>

Use `skin` when the classes should live on the element itself

<div class="skin surface-img-ref3 tint-dark glass-md color-white in-lg">
  <h3>Apply to UVU</h3>
  <p>Start your next step with admissions and enrollment resources.</p>
</div>

How the pieces work together

Base: choose a fill, pattern, image ref, slope, or theme
Tint: add a color wash for contrast or brand color
Glass: add blur over image refs when needed
FX: add gloss, glow, or shimmer for extra emphasis

Best practice

Start with one strong base, then add only what helps readability. On guide pages, patterns, simple fills, and light themes usually fit better than heavy FX. Image refs and blur work best in feature sections, promos, or highlight blocks.

Base fills

These are the simplest surface options. Use them for utility sections, content grouping, alerts, headers, and quick callouts.

surface-uvu-green

surface-wolverine-green

surface-dark-green

surface-valley-green

surface-meadow-green

surface-light

surface-dark

surface-color-light

surface-color-dark

When to use base fills

When the page already has enough visual variety
When the content is more important than the treatment
When you need a quick branded section without added texture

Patterns

Patterns add texture without changing structure. They work well for guide pages because they keep the layout simple while adding visual separation.

surface-pattern-dots

surface-pattern-grid

surface-pattern-lines

surface-pattern-cross

surface-pattern-zigzag

surface-pattern-checker

Pattern plus options

surface-pattern-plus is more configurable than the other patterns. It uses step, strength, and color helper classes.

surface-pattern-plus • plus-step-24 • plus-mid • plus-color-green

surface-pattern-plus • plus-step-16 • plus-strong • plus-color-wolverine

surface-pattern-plus • plus-step-40 • plus-faint • plus-color-haze

surface-pattern-plus • plus-step-28 • plus-strong • plus-color-wolverine

surface-pattern-plus • plus-step-16 • plus-faint • plus-color-haze

surface-pattern-plus • plus-step-32 • plus-mid • plus-color-green

When to use patterns

Dots: softer decorative texture
Grid: utility, reference, and documentation content
Lines: subtle motion or direction
Cross / Checker / Zigzag: stronger texture for callouts or promos
Plus: branded pattern when you want more control

Tints

Tints are overlay helpers. Use them over image refs, slopes, or patterns when you need more contrast or a branded color wash.

tint-uvu-green

tint-wolverine-green

tint-dark-green

tint-valley-green

tint-meadow-green

tint-sage-green

tint-light

tint-dark

How to use tints well

Use tint-dark when white text needs more contrast
Use green tints when you want brand color over a photo or pattern
Use tint-light for subtle wash effects on darker bases

Image references

Image refs are background image helpers. They are most useful when paired with a tint or blur.

surface-img-ref1

surface-img-ref2

surface-img-ref3

surface-img-ref4

surface-img-ref5

surface-img-ref6

surface-img-ref7

surface-img-ref8

surface-img-ref9

surface-img-ref10

Good image recipes

surface-img-ref3 tint-dark
surface-img-ref4 tint-dark glass-md
surface-img-ref2 tint-uvu-green glass-sm

Glass

Glass adds blur. It is usually paired with image refs and sometimes with tints.

surface-img-ref1 • glass-sm

surface-img-ref2 • glass-md

surface-img-ref3 • glass-lg

When to use glass

glass-sm for a light softening effect
glass-md for balanced readability
glass-lg when the photo is busy and text needs more help

FX

FX classes add extra polish. These are best used sparingly on feature cards or callouts, not everywhere on a guide page.

surface-img-ref1 • surface-gloss

surface-img-ref2 • surface-glow

surface-img-ref3 • surface-shimmer

FX guidance

surface-gloss adds a polished highlight
surface-glow adds a brighter visual push
surface-shimmer adds the most movement

Slopes

Slopes create angled two-color surfaces. Use surface-slope with a cut value, a direction, and two color values.

surface-slope • slope-35 • slope-lr • slope-a-uvu • slope-b-dark

surface-slope • slope-50 • slope-tb • slope-a-uvu • slope-b-light

surface-slope • slope-65 • slope-tlbr • slope-a-ink • slope-b-light

surface-slope • slope-35 • slope-trbl • slope-a-uvu • slope-b-light

surface-slope • slope-50 • slope-lr • slope-a-ink • slope-b-dark

surface-slope • slope-65 • slope-tb • slope-a-uvu • slope-b-dark

How slopes work

slope-35, slope-50, and slope-65 control the cut amount
Direction classes change the angle flow
slope-a-* and slope-b-* set the two sides of the split

Slopes are good for section headers, campaign blocks, and guide areas that need a stronger visual break.

Themes

Themes are preset surface combos. Use them when you want speed and consistency.

surface-theme-1

surface-theme-2

surface-theme-3

surface-theme-4

When to use themes

When multiple sections need a consistent treatment
When you want a quick surface without building a combo from scratch
When you need fast demos for content editors or developers

Surface vs Skin

Surface inserts a background layer inside a container.

Skin applies the same surface system directly to the element.

Both use the same image refs, pattern classes, tint utilities, blur utilities, FX utilities, slope helpers, and theme classes.

Admissions feature

This uses an image ref plus a dark tint and medium blur. It is a strong pattern for feature cards with white text.

surface-img-ref2 tint-dark glass-md

Quick theme example

This is a fast way to add a ready-made background style to a guide block without reworking the layout.

surface-theme-3

Reference content

Use grid patterns behind resource lists, guide notes, code examples, and setup instructions.

surface-pattern-grid

Strong section break

Use a slope when the page needs a stronger visual change but not a complete redesign.

surface-slope slope-65 slope-trbl slope-a-uvu slope-b-dark

Feature card

Use gloss on a highlight card when you want a little more polish but still want the content to stay readable.

surface-img-ref4 tint-dark surface-gloss

Branded guide block

Use pattern plus when you want a UVU-branded texture without relying on a photo.

surface-pattern-plus plus-step-24 plus-mid plus-color-green

Basic code patterns

Surface =
<div class="in-lg color-white">
  <span class="surface surface-theme-2"></span>
  <div>Text</div>
</div>

Skin =
<div class="skin surface-theme-2 color-white in-lg">
  <div>Text</div>
</div>

Photo recipe =
<div class="in-lg color-white">
  <span class="surface surface-img-ref3 tint-dark glass-md"></span>
  <h3>Campus tours</h3>
  <p>Visit UVU and explore campus.</p>
</div>

Slope recipe =
<div class="in-lg color-white">
  <span class="surface surface-slope slope-65 slope-trbl slope-a-uvu slope-b-dark"></span>
  <h3>Guide section</h3>
  <p>A stronger break between page sections.</p>
</div>

Surface System Guide

Purpose

The surface system gives you a reusable way to add backgrounds, overlays, blur, and effects inside standard page containers. It is useful when you want more visual structure without redesigning the whole guide page.

Recommended order

Choose the base: fill, pattern, image ref, slope, or theme
Add a tint if contrast or brand color is needed
Add glass only when the image needs softening
Add FX only when the section needs extra emphasis

Cheat sheet

Need	Classes
Simple fill	`surface-uvu-green`, `surface-light`, `surface-dark`
Pattern	`surface-pattern-dots`, `surface-pattern-grid`, `surface-pattern-lines`, `surface-pattern-cross`, `surface-pattern-zigzag`, `surface-pattern-checker`
Pattern plus	`surface-pattern-plus` with `plus-step-`, `plus-`, `plus-color-*`
Photo background	`surface-img-ref1` to `surface-img-ref10`
Overlay color	`tint-uvu-green`, `tint-dark`, `tint-light`, and related tint classes
Blur	`glass-sm`, `glass-md`, `glass-lg`
FX	`surface-gloss`, `surface-glow`, `surface-shimmer`
Preset combo	`surface-theme-1` to `surface-theme-4`
Angled split	`surface-slope` with one `slope-`, one direction, and `slope-a-` + `slope-b-*`

Guide page recommendations

Use fills and patterns most often
Use themes for quick repeated examples
Use image refs for highlight sections only
Use slopes to separate major sections
Keep text short inside demos so the surface treatment stays easy to compare

Common combos

surface-pattern-grid tint-light
surface-pattern-plus plus-step-24 plus-mid plus-color-green
surface-img-ref3 tint-dark glass-md
surface-slope slope-65 slope-trbl slope-a-uvu slope-b-dark
surface-theme-2

Dark Mode - needs work

It seems that you have reduce motion enabled!