Surface

testing

Patterns


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

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

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

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

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

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

surface-pattern-dots

surface-pattern-grid

surface-pattern-lines

surface-pattern-cross

surface-pattern-zigzag

surface-pattern-checker

Tints


tint-uvu-green

tint-wolverine-green

tint-dark-green

tint-valley-green

tint-meadow-green

tint-dark

Solids

Background colors alos have a class for applying background colors on elmetnts out-side of surface or skin - example class (.bg-uvu-green)


surface-uvu-green

surface-wolverine-green

surface-dark-green

surface-valley-green

surface-meadow-green

surface-light

surface-dark

Glass

Glass (blur) works with surface-img-ref*


glass-sm

glass-md

glass-lg

FX - boring needs work

FX works with surface-img-ref*


surface-gloss

surface-glow

surface-shimmer

Themes

preset combos - need work


surface-theme-1

surface-theme-2

surface-theme-3

surface-theme-4



Skin

Skin is for applying directly to an element


Surface

Uses a span or div with sruface classes applied to inject in any element


Surface and Skin share the same image classes, theme classes, tint utilities, blur utilities, and FX utilities.


Surface 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos eligendi sapiente reprehenderit soluta qui. Officiis totam ullam, aliquam repudiandae distinctio debitis praesentium! Ullam eaque, corrupti laborum ad quia sed ipsa.

Surfcace 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos eligendi sapiente reprehenderit soluta qui. Officiis totam ullam, aliquam repudiandae distinctio debitis praesentium! Ullam eaque, corrupti laborum ad quia sed ipsa.



Surface 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos eligendi sapiente reprehenderit soluta qui. Officiis totam ullam, aliquam repudiandae distinctio debitis praesentium! Ullam eaque, corrupti laborum ad quia sed ipsa.

Surface 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos eligendi sapiente reprehenderit soluta qui. Officiis totam ullam, aliquam repudiandae distinctio debitis praesentium! Ullam eaque, corrupti laborum ad quia sed ipsa.



 
Surface = 
<div class="relative">
  <span class="surface surface-theme-2"></span>
  <div class="content">Text</div>
</div>

Skin = 
<div class="skin surface-theme-2">
  <div class="content">Text</div>
</div>


Surface System Guide

Purpose

The Surface System injects flexible backgrounds, overlays, blur, and effects into any container without disturbing its content. Add <span class="surface [modifiers]"></span> into any block.

Core Concepts

  • Base Background: Image, pattern, or color (on the .surface span)
  • Overlay: Static color applied using ::before
  • Tint and Effects: Blur, gloss, shimmer via ::after

Setup Rules

  • Parent container must have position: relative;
  • .surface is absolutely positioned with inset: 0; and z-index: -2;
  • ::before adds base overlay color
  • ::after adds tint, blur, and special effects

Class Modifiers

  • Background Images: .surface-img-ref1, .surface-img-ref2, etc.
  • Solid Colors: .surface-color-black, .surface-color-white
  • Patterns: .surface-pattern-grid, .surface-pattern-dots
  • Tint Colors: .tint-dark, .tint-light, .tint-uvu-green
  • Blur Strengths: .glass-sm, .glass-md, .glass-lg
  • Effects: .surface-gloss, .surface-glow, .surface-shimmer
  • Themes: .surface-theme-1 to .surface-theme-4

Surface Layer Order

  1. Base Layer: Background image or color (on .surface)
  2. Overlay Layer: Color wash (::before)
  3. FX Layer: Tint, blur, effects (::after)
  4. Content: Your normal page text, images, etc.

Example Usage

<section class="hero">
  <span class="surface surface-gloss tint-uvu-green glass-md surface-img-ref3"></span>
  <div class="hero-content">
    <h1>Welcome to the Future</h1>
    <p>Seamless surface background integration.</p>
  </div>
</section>

Cheat Sheet

What You Want Class to Add
Background image.surface-img-refX
Pattern.surface-pattern-xxx
Solid color.surface-color-xxx
Tint overlay.tint-xxx
Blur effect.glass-sm, .glass-md, .glass-lg
Special effects.surface-gloss, .surface-shimmer, .surface-glow
Prebuilt themes.surface-theme-#

Developer Tips

  • Test surfaces for readability against text.
  • Adjust blur strength to improve contrast.
  • Combine images, tints, and patterns carefully for best visuals.
  • Use prebuilt themes for consistency across multiple sections.