Lehigh Clutch Style Guide

Colors 

<h2>Website Accent Colors</h2>
<ul class="swatch-list">
    <li>
        <div class="swatch" style="background-color: #ffe41e;"></div>
        <div class="name">Gold</div>
        <div class="hex">#ffe41e</div>
        <div class="var">$gold</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #fffbe1;"></div>
        <div class="name">Beige</div>
        <div class="hex">#fffbe1</div>
        <div class="var">$gold_20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #80c7bc;"></div>
        <div class="name">Teal</div>
        <div class="hex">#80c7bc</div>
        <div class="var">$teal_60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #8ac3ea;"></div>
        <div class="name">Blue</div>
        <div class="hex">#8ac3ea</div>
        <div class="var">$blue_75</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #502d0e;"></div>
        <div class="name">Lehigh Brown</div>
        <div class="hex">#502d0e</div>
        <div class="var">$lehigh_brown</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #2b5870;"></div>
        <div class="name">Dark Blue (Teal)</div>
        <div class="hex">#2b5870</div>
        <div class="var">$blue_k60</div>
    </li>
</ul>

<h2>UCPA Approved Colors</h2>
<ul class="swatch-list">
    <li>
        <div class="swatch" style="background-color: #502d0e;"></div>
        <div class="hex">#502d0e</div>
        <div class="var">$lehigh_brown</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #f6f4f2;"></div>
        <div class="hex">#f6f4f2</div>
        <div class="var">$lehigh_brown_02</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #dec8b2;"></div>
        <div class="hex">#dec8b2</div>
        <div class="var">$lehigh_brown_20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #9f7549;"></div>
        <div class="hex">#9f7549</div>
        <div class="var">$lehigh_brown_60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #83541e;"></div>
        <div class="hex">#83541e</div>
        <div class="var">$lehigh_brown_80</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #ffe41e;"></div>
        <div class="hex">#ffe41e</div>
        <div class="var">$gold</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #fffbe1;"></div>
        <div class="hex">#fffbe1</div>
        <div class="var">$gold_20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #fdeca1;"></div>
        <div class="hex">#fdeca1</div>
        <div class="var">$gold_60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #fde780;"></div>
        <div class="hex">#fde780</div>
        <div class="var">$gold_80</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #d5bf4d;"></div>
        <div class="hex">#d5bf4d</div>
        <div class="var">$gold_k20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #ef483e;"></div>
        <div class="hex">#ef483e</div>
        <div class="var">$red</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #ffded5;"></div>
        <div class="hex">#ffded5</div>
        <div class="var">$red_20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #fa9d88;"></div>
        <div class="hex">#fa9d88</div>
        <div class="var">$red_60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #e8564d;"></div>
        <div class="hex">#e8564d</div>
        <div class="var">$red_95</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #c53c33;"></div>
        <div class="hex">#c53c33</div>
        <div class="var">$red_k20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #f69576;"></div>
        <div class="hex">#f69576</div>
        <div class="var">$coral</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #ac1d15;"></div>
        <div class="hex">#ac1d15</div>
        <div class="var">$dark red</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #88c6bc;"></div>
        <div class="hex">#88c6bc</div>
        <div class="var">$teal</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #e8f3f0;"></div>
        <div class="hex">#e8f3f0</div>
        <div class="var">$teal_20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #80c7bc;"></div>
        <div class="hex">#80c7bc</div>
        <div class="var">$teal_60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #6ba69e;"></div>
        <div class="hex">#6ba69e</div>
        <div class="var">$teal_k20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #3d6762;"></div>
        <div class="hex">#3d6762</div>
        <div class="var">$teal_k60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #0e524e;"></div>
        <div class="hex">#0e524e</div>
        <div class="var">$dark teal</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #81b0d2;"></div>
        <div class="hex">#81b0d2</div>
        <div class="var">$blue</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #dee9f4;"></div>
        <div class="hex">#dee9f4</div>
        <div class="var">$blue_20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #8ac3ea;"></div>
        <div class="hex">#8ac3ea</div>
        <div class="var">$blue_75</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #5394b8;"></div>
        <div class="hex">#5394b8</div>
        <div class="var">$blue_k20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #2b5870;"></div>
        <div class="hex">#2b5870</div>
        <div class="var">$blue_k60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #d0cac2;"></div>
        <div class="hex">#d0cac2</div>
        <div class="var">$grey</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #f4f3f2;"></div>
        <div class="hex">#f4f3f2</div>
        <div class="var">$grey_20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #e1dfda;"></div>
        <div class="hex">#e1dfda</div>
        <div class="var">$grey_60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #ada8a2;"></div>
        <div class="hex">#ada8a2</div>
        <div class="var">$grey_k20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #6a6764;"></div>
        <div class="hex">#6a6764</div>
        <div class="var">$grey_k60</div>
    </li>
</ul>

<h2>Base Colors</h2>
<ul class="swatch-list">
    <li>
        <div class="swatch" style="background-color: #ffffff;"></div>
        <div class="hex">#ffffff</div>
        <div class="var">$white</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #f1f1f1;"></div>
        <div class="hex">#f1f1f1</div>
        <div class="var">$off-white</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #000000;"></div>
        <div class="hex">#000000</div>
        <div class="var">$black</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #333333;"></div>
        <div class="hex">#333333</div>
        <div class="var">$grey_darkest</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #e1e1e1;"></div>
        <div class="hex">#e1e1e1</div>
        <div class="var">$grey_light</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #f8f8f8;"></div>
        <div class="hex">#f8f8f8</div>
        <div class="var">$grey_lightest</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #212529;"></div>
        <div class="hex">#212529</div>
        <div class="var">$base_font</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #F0F0F0;"></div>
        <div class="hex">#F0F0F0</div>
        <div class="var">$drop_shadow</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #327D9A;"></div>
        <div class="hex">#327D9A</div>
        <div class="var">$hyperlink</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #335671;"></div>
        <div class="hex">#335671</div>
        <div class="var">$hyperlink_breadcrumb</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #202124;"></div>
        <div class="hex">#202124</div>
        <div class="var">$background_darkmode</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #6896BB;"></div>
        <div class="hex">#6896BB</div>
        <div class="var">$hyperlink_darkmode</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #595959;"></div>
        <div class="hex">#595959</div>
        <div class="var">$drop_shadow_darkmode</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #722723;"></div>
        <div class="hex">#722723</div>
        <div class="var">$maroon</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #742e2a;"></div>
        <div class="hex">#742e2a</div>
        <div class="var">$maroon_light</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #040c21;"></div>
        <div class="hex">#040c21</div>
        <div class="var">$navy_darkest</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #1d2a4d;"></div>
        <div class="hex">#1d2a4d</div>
        <div class="var">$navy_dark</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #011b1e;"></div>
        <div class="hex">#011b1e</div>
        <div class="var">$teal_darkest</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #011f23;"></div>
        <div class="hex">#011f23</div>
        <div class="var">$teal_dark</div>
    </li>
</ul>
 
<h2>Website Accent Colors</h2>
<ul class="swatch-list">
  {% for accent_color in accent_colors %}
    <li>
      <div class="swatch" style="background-color: {{ accent_color.value }};"></div>
      <div class="name">{{ accent_color.name }}</div>
      <div class="hex">{{ accent_color.value }}</div>
      <div class="var">${{ accent_color.hex_name }}</div>
    </li>
  {% endfor %}
</ul>

<h2>UCPA Approved Colors</h2>
<ul class="swatch-list">
  {% for ucpa_item in ucpa_items %}
    <li>
      <div class="swatch" style="background-color: {{ ucpa_item.value }};"></div>
      <div class="hex">{{ ucpa_item.value }}</div>
      <div class="var">${{ ucpa_item.name }}</div>
    </li>
  {% endfor %}
</ul>

<h2>Base Colors</h2>
<ul class="swatch-list">
  {% for base_color in base_colors %}
    <li>
      <div class="swatch" style="background-color: {{ base_color.value }};"></div>
      <div class="hex">{{ base_color.value }}</div>
      <div class="var">${{ base_color.name }}</div>
    </li>
  {% endfor %}
</ul>
 
{
  "ucpa_items": [
    {
      "name": "lehigh_brown",
      "value": "#502d0e"
    },
    {
      "name": "lehigh_brown_02",
      "value": "#f6f4f2"
    },
    {
      "name": "lehigh_brown_20",
      "value": "#dec8b2"
    },
    {
      "name": "lehigh_brown_60",
      "value": "#9f7549"
    },
    {
      "name": "lehigh_brown_80",
      "value": "#83541e"
    },
    {
      "name": "gold",
      "value": "#ffe41e"
    },
    {
      "name": "gold_20",
      "value": "#fffbe1"
    },
    {
      "name": "gold_60",
      "value": "#fdeca1"
    },
    {
      "name": "gold_80",
      "value": "#fde780"
    },
    {
      "name": "gold_k20",
      "value": "#d5bf4d"
    },
    {
      "name": "red",
      "value": "#ef483e"
    },
    {
      "name": "red_20",
      "value": "#ffded5"
    },
    {
      "name": "red_60",
      "value": "#fa9d88"
    },
    {
      "name": "red_95",
      "value": "#e8564d"
    },
    {
      "name": "red_k20",
      "value": "#c53c33"
    },
    {
      "name": "coral",
      "value": "#f69576"
    },
    {
      "name": "dark red",
      "value": "#ac1d15"
    },
    {
      "name": "teal",
      "value": "#88c6bc"
    },
    {
      "name": "teal_20",
      "value": "#e8f3f0"
    },
    {
      "name": "teal_60",
      "value": "#80c7bc"
    },
    {
      "name": "teal_k20",
      "value": "#6ba69e"
    },
    {
      "name": "teal_k60",
      "value": "#3d6762"
    },
    {
      "name": "dark teal",
      "value": "#0e524e"
    },
    {
      "name": "blue",
      "value": "#81b0d2"
    },
    {
      "name": "blue_20",
      "value": "#dee9f4"
    },
    {
      "name": "blue_75",
      "value": "#8ac3ea"
    },
    {
      "name": "blue_k20",
      "value": "#5394b8"
    },
    {
      "name": "blue_k60",
      "value": "#2b5870"
    },
    {
      "name": "grey",
      "value": "#d0cac2"
    },
    {
      "name": "grey_20",
      "value": "#f4f3f2"
    },
    {
      "name": "grey_60",
      "value": "#e1dfda"
    },
    {
      "name": "grey_k20",
      "value": "#ada8a2"
    },
    {
      "name": "grey_k60",
      "value": "#6a6764"
    }
  ],
  "accent_colors": [
    {
      "name": "Gold",
      "hex_name": "gold",
      "value": "#ffe41e"
    },
    {
      "name": "Beige",
      "hex_name": "gold_20",
      "value": "#fffbe1"
    },
    {
      "name": "Teal",
      "hex_name": "teal_60",
      "value": "#80c7bc"
    },
    {
      "name": "Blue",
      "hex_name": "blue_75",
      "value": "#8ac3ea"
    },
    {
      "name": "Lehigh Brown",
      "hex_name": "lehigh_brown",
      "value": "#502d0e"
    },
    {
      "name": "Dark Blue (Teal)",
      "hex_name": "blue_k60",
      "value": "#2b5870"
    }
  ],
  "base_colors": [
    {
      "name": "white",
      "value": "#ffffff"
    },
    {
      "name": "off-white",
      "value": "#f1f1f1"
    },
    {
      "name": "black",
      "value": "#000000"
    },
    {
      "name": "grey_darkest",
      "value": "#333333"
    },
    {
      "name": "grey_light",
      "value": "#e1e1e1"
    },
    {
      "name": "grey_lightest",
      "value": "#f8f8f8"
    },
    {
      "name": "base_font",
      "value": "#212529"
    },
    {
      "name": "drop_shadow",
      "value": "#F0F0F0"
    },
    {
      "name": "hyperlink",
      "value": "#327D9A"
    },
    {
      "name": "hyperlink_breadcrumb",
      "value": "#335671"
    },
    {
      "name": "background_darkmode",
      "value": "#202124"
    },
    {
      "name": "hyperlink_darkmode",
      "value": "#6896BB"
    },
    {
      "name": "drop_shadow_darkmode",
      "value": "#595959"
    },
    {
      "name": "maroon",
      "value": "#722723"
    },
    {
      "name": "maroon_light",
      "value": "#742e2a"
    },
    {
      "name": "navy_darkest",
      "value": "#040c21"
    },
    {
      "name": "navy_dark",
      "value": "#1d2a4d"
    },
    {
      "name": "teal_darkest",
      "value": "#011b1e"
    },
    {
      "name": "teal_dark",
      "value": "#011f23"
    }
  ]
}
  • Content: 
    .swatch-list {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: $white;

  .color-scheme-dark & {
    color: $base_font;
  }

  li {
    margin: 0 2rem 2rem 0;
    width: 200px;

    &:last-of-type {
      margin: 0 0 2rem 0;
    }
  }
}

.swatch {
  display: block;
  height: 200px;
  width: 200px;
}

.hex,
.name,
.var {
  font-size: 1rem;
  text-align: center;
  font-family: monospace;
}

.name {
  text-transform: capitalize;
}
  • URL: /components/raw/colors/colors.scss
  • Filesystem Path: bits/01-global/colors/colors.scss
  • Size: 483 Bytes

Website Accent Colors are the list of colors that are available to pick for website accent colors. UCPA Approved Colors are the official colors in UCPA’s color palette. Base colors are all the other color’s used through out the website.