Skill Level: 
Intermediate

Background Colors

Primary Brand Background Colors

.unl-bg-scarlet
scarlet #d00000
.unl-bg-cream
cream #fefdfa

Secondary Brand Background Colors

.unl-bg-cerulean
cerulean #42a7c6
.unl-bg-green
green #00784e
.unl-bg-light-green
light green #e7f1ea
.unl-bg-blue
blue #007197
.unl-bg-light-blue
light blue #e7f0f0
.unl-bg-purple
purple #b32d9c
.unl-bg-light-purple
light purple #f7eaf1
.unl-bg-yellow
yellow #ffd74e

User Interface Background Colors

.unl-bg-lightest-gray
lightest gray #f6f6f5
.unl-bg-lighter-gray
lighter gray #ebebea
.unl-bg-light-gray
light gray #e3e3e2 Note that use of .unl-scarlet (this includes links) on .unl-bg-light-gray is not color contrast compliant.
.unl-bg-dark-gray
dark gray #6d6d69
.unl-bg-darker-gray
darker gray #424240
.unl-bg-darkest-gray
darkest gray #242423

Background Images

.unl-bg-grit
grit background pattern

Border Color

Border Color (All Sides)

.unl-b-scarlet
border-color: scarlet #d00000, all sides
.unl-b-cream
border-color: cream #fefdfa, all sides
.unl-b-lightest-gray
border-color: lightest gray #f6f6f5, all sides
.unl-b-lighter-gray
border-color: lighter gray #ebebea, all sides
.unl-b-light-gray
border-color: light gray #e3e3e2, all sides
.unl-b-gray
border-color: gray #c7c8ca, all sides
.unl-b-dark-gray
border-color: dark gray #6d6d69, all sides
.unl-b-darker-gray
border-color: darker gray #424240, all sides
.unl-b-darkest-gray
border-color: darkest gray #242423, all sides

Border Top Color

.unl-bt-scarlet
border-top-color: scarlet #d00000
.unl-bt-cream
border-top-color: cream #fefdfa
.unl-bt-lightest-gray
border-top-color: lightest gray #f6f6f5
.unl-bt-lighter-gray
border-top-color: lighter gray #ebebea
.unl-bt-light-gray
border-top-color: light gray #e3e3e2
.unl-bt-gray
border-top-color: gray #c7c8ca
.unl-bt-dark-gray
border-top-color: dark gray #6d6d69
.unl-bt-darker-gray
border-top-color: darker gray #424240
.unl-bt-darkest-gray
border-top-color: darkest gray #242423

Border Right Color

.unl-br-scarlet
border-right-color: scarlet #d00000
.unl-br-cream
border-right-color: cream #fefdfa
.unl-br-lightest-gray
border-right-color: lightest gray #f6f6f5
.unl-br-lighter-gray
border-right-color: lighter gray #ebebea
.unl-br-light-gray
border-right-color: light gray #e3e3e2
.unl-br-gray
border-right-color: gray #c7c8ca
.unl-br-dark-gray
border-right-color: dark gray #6d6d69
.unl-br-darker-gray
border-right-color: darker gray #424240
.unl-br-darkest-gray
border-right-color: darkest gray #242423

Border Bottom Color

.unl-bb-scarlet
border-bottom-color: scarlet #d00000
.unl-bb-cream
border-bottom-color: cream #fefdfa
.unl-bb-lightest-gray
border-bottom-color: lightest gray #f6f6f5
.unl-bb-lighter-gray
border-bottom-color: lighter gray #ebebea
.unl-bb-light-gray
border-bottom-color: light gray #e3e3e2
.unl-bb-gray
border-bottom-color: gray #c7c8ca
.unl-bb-dark-gray
border-bottom-color: dark gray #6d6d69
.unl-bb-darker-gray
border-bottom-color: darker gray #424240
.unl-bb-darkest-gray
border-bottom-color: darkest gray #242423

Border Left Color

.unl-bl-scarlet
border-left-color: scarlet #d00000
.unl-bl-cream
border-left-color: cream #fefdfa
.unl-bl-lightest-gray
border-left-color: lightest gray #f6f6f5
.unl-bl-lighter-gray
border-left-color: lighter gray #ebebea
.unl-bl-light-gray
border-left-color: light gray #e3e3e2
.unl-bl-gray
border-left-color: gray #c7c8ca
.unl-bl-dark-gray
border-left-color: dark gray #6d6d69
.unl-bl-darker-gray
border-left-color: darker gray #424240
.unl-bl-darkest-gray
border-left-color: darkest gray #242423

Colors

Primary Brand Colors

.unl-scarlet
scarlet #d00000
.unl-cream
cream #fefdfa
.unl-gray
gray #c7c8ca

Secondary Brand Colors

.unl-cerulean
cerulean #42a7c6
.unl-green
green #00784e
.unl-light-green
light green #e7f1ea
.unl-blue
blue #007197
.unl-light-blue
light blue #e7f0f0
.unl-purple
purple #b32d9c
.unl-light-purple
light purple #f7eaf1
.unl-yellow
yellow #ffd74e

User Interface Colors

.unl-lightest-gray
lightest gray #f6f6f5
.unl-lighter-gray
lighter gray #ebebea
.unl-light-gray
light gray #e3e3e2
.unl-dark-gray
dark gray #6d6d69
.unl-darker-gray
darker gray #424240
.unl-darkest-gray
darkest gray #242423

Fonts

.unl-font-sans
sans-serif font: Gotham
.unl-font-serif
serif font: Mercury Text
.unl-font-display
display font: Liberator

Heroes

Legacy Hero

Code for legacy hero:

<!-- InstanceBeginEditable name="hero" -->
  <div class="dcf-hero dcf-d-flex dcf-relative unl-hero-legacy unl-bg-darkest-gray">
  <!-- InstanceEndEditable -->
    <div class="dcf-hero-group-1">
      <div class="dcf-breadcrumbs-wrapper">
        <nav class="dcf-breadcrumbs" id="dcf-breadcrumbs" role="navigation" aria-label="breadcrumbs">
          <!-- InstanceBeginEditable name="breadcrumbs" -->
          <ol>
            <li><a href="https://arts.unl.edu/music">Glenn Korff School of Music</a></li>
            <li><a href="https://arts.unl.edu/music/beyond-classroom">Beyond the Classroom</a></li>
            <li><span aria-current="page">Ensembles</span></li>
          </ol>
          <!-- InstanceEndEditable -->
        </nav>
      </div>
      <header class="dcf-page-title" id="dcf-page-title">
        <!-- InstanceBeginEditable name="pagetitle" -->
        <p class="dcf-subhead unl-font-sans unl-cream">Overline lorem ipsum</p>
        <h1 class="dcf-uppercase unl-cream">Undergraduate Page title</h1>
        <p class="dcf-subhead dcf-mt-4 unl-font-sans unl-cream">Subhead lorem ipsum</p>
        <!-- InstanceEndEditable -->
      </header>
      <!-- InstanceBeginEditable name="herogroup1" -->
      <a class="dcf-mt-5 dcf-btn dcf-btn-inverse-primary" href="#">Button 1</a>
      <a class="dcf-mt-5 dcf-btn dcf-btn-inverse-secondary" href="#">Button 2</a>
      <!-- InstanceEndEditable -->
    </div>
    <!-- InstanceBeginEditable name="herogroup2" -->
    <div class="dcf-hero-group-2 dcf-w-100% dcf-overflow-hidden">
      <div class="dcf-h-100% dcf-w-100% dcf-relative">
        <img
          class="dcf-obj-fit-cover dcf-h-100% dcf-w-100% unl-legacy-hero-bg"
          sizes="100vw"
          srcset="wdn/templates_5.0/images/dev/150821-tunnel-325-sm-min.jpg 284w,
                  wdn/templates_5.0/images/dev/150821-tunnel-325-md-min.jpg 505w,
                  wdn/templates_5.0/images/dev/150821-tunnel-325-lg-min.jpg 898w,
                  wdn/templates_5.0/images/dev/150821-tunnel-325-xl-min.jpg 1596w"
          src="data:image/gif;base64,R0lGODlhAQABAAAAADs="
          alt="New students flow onto the field of Memorial Stadium during the annual Tunnel Walk.">
        <small class="dcf-absolute dcf-pin-bottom dcf-pin-right dcf-pt-2 dcf-pr-4 dcf-pb-2 dcf-pl-4 dcf-txt-3xs unl-font-sans unl-cream unl-legacy-hero-caption">Photo by Craig Chandler</small>
      </div>
    </div>
    <!-- InstanceEndEditable -->
  </div>

Letter Spacing

.unl-ls-0
letter-spacing: 0
.unl-ls-1
letter-spacing: .01em
.unl-ls-2
letter-spacing: .06em
.unl-ls-3
letter-spacing: .1em
.unl-ls-h
slightly tighter letter-spacing to match headings
Contributed By: 
IIM