College of Business Style Guide

Colors 

<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: #eee8e5;"></div>
        <div class="hex">#eee8e5</div>
        <div class="var">$lehigh-brown_10</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #ded2cc;"></div>
        <div class="hex">#ded2cc</div>
        <div class="var">$lehigh-brown_20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #9d7766;"></div>
        <div class="hex">#9d7766</div>
        <div class="var">$lehigh-brown_60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #7c4d36;"></div>
        <div class="hex">#7c4d36</div>
        <div class="var">$lehigh-brown_80</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #ffda40;"></div>
        <div class="hex">#ffda40</div>
        <div class="var">$gold</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #fff6da;"></div>
        <div class="hex">#fff6da</div>
        <div class="var">$gold_20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #ffe690;"></div>
        <div class="hex">#ffe690</div>
        <div class="var">$gold_60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #ffdd6d;"></div>
        <div class="hex">#ffdd6d</div>
        <div class="var">$gold_80</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #dbb144;"></div>
        <div class="hex">#dbb144</div>
        <div class="var">$gold_k20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #ff3d3a;"></div>
        <div class="hex">#ff3d3a</div>
        <div class="var">$red</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #ffd8d7;"></div>
        <div class="hex">#ffd8d7</div>
        <div class="var">$red_20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #ff8b86;"></div>
        <div class="hex">#ff8b86</div>
        <div class="var">$red_60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #d23734;"></div>
        <div class="hex">#d23734</div>
        <div class="var">$red_k20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #71c4bc;"></div>
        <div class="hex">#71c4bc</div>
        <div class="var">$teal</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #e3f3f2;"></div>
        <div class="hex">#e3f3f2</div>
        <div class="var">$teal_20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #aadcd6;"></div>
        <div class="hex">#aadcd6</div>
        <div class="var">$teal_60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #60a49f;"></div>
        <div class="hex">#60a49f</div>
        <div class="var">$teal_k20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #386763;"></div>
        <div class="hex">#386763</div>
        <div class="var">$teal_k60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #46b1db;"></div>
        <div class="hex">#46b1db</div>
        <div class="var">$blue</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #dceff8;"></div>
        <div class="hex">#dceff8</div>
        <div class="var">$blue_20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #94d0e9;"></div>
        <div class="hex">#94d0e9</div>
        <div class="var">$blue_60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #3c94b7;"></div>
        <div class="hex">#3c94b7</div>
        <div class="var">$blue_k20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #1d5970;"></div>
        <div class="hex">#1d5970</div>
        <div class="var">$blue_k60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #cec7c0;"></div>
        <div class="hex">#cec7c0</div>
        <div class="var">$grey</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #f5f4f3;"></div>
        <div class="hex">#f5f4f3</div>
        <div class="var">$grey_20</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #e1ddd9;"></div>
        <div class="hex">#e1ddd9</div>
        <div class="var">$grey_60</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #ada6a0;"></div>
        <div class="hex">#ada6a0</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>
    <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: #344654;"></div>
        <div class="hex">#344654</div>
        <div class="var">$grey_dark</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #d7d7d7;"></div>
        <div class="hex">#d7d7d7</div>
        <div class="var">$grey_light</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #f1f1f1;"></div>
        <div class="hex">#f1f1f1</div>
        <div class="var">$grey_lightest</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #888888;"></div>
        <div class="hex">#888888</div>
        <div class="var">$drop_shadow</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #497ba4;"></div>
        <div class="hex">#497ba4</div>
        <div class="var">$hyperlink</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #88c6bc;"></div>
        <div class="hex">#88c6bc</div>
        <div class="var">$highlight-teal</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #81b0d2;"></div>
        <div class="hex">#81b0d2</div>
        <div class="var">$blue-arrow</div>
    </li>
    <li>
        <div class="swatch" style="background-color: #ff4438;"></div>
        <div class="hex">#ff4438</div>
        <div class="var">$go-red</div>
    </li>
</ul>
 
<ul class="swatch-list">
    {% for item in items %}
        <li>
            <div class="swatch" style="background-color: {{ item.value }};"></div>
            <div class="hex">{{ item.value }}</div>
            <div class="var">${{ item.name }}</div>
        </li>
    {% endfor %}
</ul>
 
{
  "items": [
    {
      "name": "lehigh-brown",
      "value": "#502d0e"
    },
    {
      "name": "lehigh-brown_10",
      "value": "#eee8e5"
    },
    {
      "name": "lehigh-brown_20",
      "value": "#ded2cc"
    },
    {
      "name": "lehigh-brown_60",
      "value": "#9d7766"
    },
    {
      "name": "lehigh-brown_80",
      "value": "#7c4d36"
    },
    {
      "name": "gold",
      "value": "#ffda40"
    },
    {
      "name": "gold_20",
      "value": "#fff6da"
    },
    {
      "name": "gold_60",
      "value": "#ffe690"
    },
    {
      "name": "gold_80",
      "value": "#ffdd6d"
    },
    {
      "name": "gold_k20",
      "value": "#dbb144"
    },
    {
      "name": "red",
      "value": "#ff3d3a"
    },
    {
      "name": "red_20",
      "value": "#ffd8d7"
    },
    {
      "name": "red_60",
      "value": "#ff8b86"
    },
    {
      "name": "red_k20",
      "value": "#d23734"
    },
    {
      "name": "teal",
      "value": "#71c4bc"
    },
    {
      "name": "teal_20",
      "value": "#e3f3f2"
    },
    {
      "name": "teal_60",
      "value": "#aadcd6"
    },
    {
      "name": "teal_k20",
      "value": "#60a49f"
    },
    {
      "name": "teal_k60",
      "value": "#386763"
    },
    {
      "name": "blue",
      "value": "#46b1db"
    },
    {
      "name": "blue_20",
      "value": "#dceff8"
    },
    {
      "name": "blue_60",
      "value": "#94d0e9"
    },
    {
      "name": "blue_k20",
      "value": "#3c94b7"
    },
    {
      "name": "blue_k60",
      "value": "#1d5970"
    },
    {
      "name": "grey",
      "value": "#cec7c0"
    },
    {
      "name": "grey_20",
      "value": "#f5f4f3"
    },
    {
      "name": "grey_60",
      "value": "#e1ddd9"
    },
    {
      "name": "grey_k20",
      "value": "#ada6a0"
    },
    {
      "name": "grey_k60",
      "value": "#6a6764"
    },
    {
      "name": "white",
      "value": "#ffffff"
    },
    {
      "name": "off-white",
      "value": "#f1f1f1"
    },
    {
      "name": "black",
      "value": "#000000"
    },
    {
      "name": "grey_darkest",
      "value": "#333333"
    },
    {
      "name": "grey_dark",
      "value": "#344654"
    },
    {
      "name": "grey_light",
      "value": "#d7d7d7"
    },
    {
      "name": "grey_lightest",
      "value": "#f1f1f1"
    },
    {
      "name": "drop_shadow",
      "value": "#888888"
    },
    {
      "name": "hyperlink",
      "value": "#497ba4"
    },
    {
      "name": "highlight-teal",
      "value": "#88c6bc"
    },
    {
      "name": "blue-arrow",
      "value": "#81b0d2"
    },
    {
      "name": "go-red",
      "value": "#ff4438"
    }
  ]
}
  • Content: 
    /* UCPA color guide */
/* Lehigh Brown */
$lehigh-brown: #502d0e;
$lehigh-brown_10: #eee8e5;
$lehigh-brown_20: #ded2cc;
$lehigh-brown_60: #9d7766;
$lehigh-brown_80: #7c4d36;

/* Gold */
$gold: #ffda40;
$gold_20: #fff6da;
$gold_60: #ffe690;
$gold_80: #ffdd6d;
$gold_k20: #dbb144;

/* Red */
$red: #ff3d3a;
$red_20: #ffd8d7;
$red_60: #ff8b86;
$red_k20: #d23734;

/* Teal */
$teal: #71c4bc;
$teal_20: #e3f3f2;
$teal_60: #aadcd6;
$teal_k20: #60a49f;
$teal_k60: #386763;

/* Blue */
$blue: #46b1db;
$blue_20: #dceff8;
$blue_60: #94d0e9;
$blue_k20: #3c94b7;
$blue_k60: #1d5970;

/* Grey */
$grey: #cec7c0;
$grey_20: #f5f4f3;
$grey_60: #e1ddd9;
$grey_k20: #ada6a0;
$grey_k60: #6a6764;

/* Other colors used */
$white: #ffffff;
$off-white: #f1f1f1;
$black: #000000;
$grey_darkest: #333333;
$grey_dark: #344654;
$grey_light: #d7d7d7;
$grey_lightest: #f1f1f1;
$drop_shadow: #888888;
$hyperlink: #497ba4;
$highlight-teal: #88c6bc;
$blue-arrow: #81b0d2;
$go-red: #ff4438;
  • URL: /components/raw/colors/_color-vars.scss
  • Filesystem Path: components/00-base/01-colors/_color-vars.scss
  • Size: 960 Bytes
  • Content: 
    .swatch-list {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: $white;

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

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

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

.hex,
.var {
  font-size: 1rem;
  text-align: center;
  font-family: monospace;
}
  • URL: /components/raw/colors/colors.scss
  • Filesystem Path: components/00-base/01-colors/colors.scss
  • Size: 382 Bytes

No notes defined.