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">Golden Hour</div>
        <div class="hex">#ffe41e</div>
        <div class="var">$golden-hour</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #f5e9ad;"></div>
        <div class="name">First Light</div>
        <div class="hex">#f5e9ad</div>
        <div class="var">$first-light</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #d1e9e8;"></div>
        <div class="name">Mountaintop Mist</div>
        <div class="hex">#d1e9e8</div>
        <div class="var">$mountaintop-mist</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #66b0ff;"></div>
        <div class="name">Bethlehem Sky</div>
        <div class="hex">#66b0ff</div>
        <div class="var">$bethlehem-sky</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: #12354c;"></div>
        <div class="name">Night Sky</div>
        <div class="hex">#12354c</div>
        <div class="var">$night-sky</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: #f5e9ad;"></div>
        <div class="hex">#f5e9ad</div>
        <div class="var">$first-light</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #fcd8d6;"></div>
        <div class="hex">#fcd8d6</div>
        <div class="var">$cherry-blossom</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #ffe41e;"></div>
        <div class="hex">#ffe41e</div>
        <div class="var">$golden-hour</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #eba033;"></div>
        <div class="hex">#eba033</div>
        <div class="var">$autumn-dusk</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #d1e9e8;"></div>
        <div class="hex">#d1e9e8</div>
        <div class="var">$mountaintop-mist</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #66b0ff;"></div>
        <div class="hex">#66b0ff</div>
        <div class="var">$bethlehem-sky</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #5e74ee;"></div>
        <div class="hex">#5e74ee</div>
        <div class="var">$spring-violet</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #12354c;"></div>
        <div class="hex">#12354c</div>
        <div class="var">$night-sky</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #afedc9;"></div>
        <div class="hex">#afedc9</div>
        <div class="var">$patina-green</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #2cb357;"></div>
        <div class="hex">#2cb357</div>
        <div class="var">$valley-green</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #1b3a24;"></div>
        <div class="hex">#1b3a24</div>
        <div class="var">$serenity-garden</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": "first-light",
      "value": "#f5e9ad"
    },
    {
      "name": "cherry-blossom",
      "value": "#fcd8d6"
    },
    {
      "name": "golden-hour",
      "value": "#ffe41e"
    },
    {
      "name": "autumn-dusk",
      "value": "#eba033"
    },
    {
      "name": "mountaintop-mist",
      "value": "#d1e9e8"
    },
    {
      "name": "bethlehem-sky",
      "value": "#66b0ff"
    },
    {
      "name": "spring-violet",
      "value": "#5e74ee"
    },
    {
      "name": "night-sky",
      "value": "#12354c"
    },
    {
      "name": "patina-green",
      "value": "#afedc9"
    },
    {
      "name": "valley-green",
      "value": "#2cb357"
    },
    {
      "name": "serenity-garden",
      "value": "#1b3a24"
    },
    {
      "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": "Golden Hour",
      "hex_name": "golden-hour",
      "value": "#ffe41e"
    },
    {
      "name": "First Light",
      "hex_name": "first-light",
      "value": "#f5e9ad"
    },
    {
      "name": "Mountaintop Mist",
      "hex_name": "mountaintop-mist",
      "value": "#d1e9e8"
    },
    {
      "name": "Bethlehem Sky",
      "hex_name": "bethlehem-sky",
      "value": "#66b0ff"
    },
    {
      "name": "Lehigh Brown",
      "hex_name": "lehigh_brown",
      "value": "#502d0e"
    },
    {
      "name": "Night Sky",
      "hex_name": "night-sky",
      "value": "#12354c"
    }
  ],
  "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.