Goizueta Style Guide

Colors

All Sass color variables prefixed with $color-. This makes it easy to figure out what a variable is for later.

Primary

$color-blue
#185785

$color-navy
#012169

$color-red
#ED2024

$color-yellow
#E3A44C

$color-yellow-high
#F9C147

$color-violet
#C0C0DE

$color-lavender
#CDD3E4

$color-salmon
#FCD3C1

$color-gold
#F2D6AF

$color-gold-light
#FEF6E7

$color-gold-medium
#FCE7BE

$color-gold-dark
#FAD58E

$color-white
#FFFFFF

$color-egg-shell
#F4F4F3

$color-gray
#C0C2C3

$color-gray-dark
#6A6868

$color-gray-darker
#434444

$color-black
#000000

Secondary

$color-flame
#F35953

$color-ocean
#123D50

$color-lemon
#FDEE73

$color-sky-blue
#85BCE4

$color-denim
#1651A1

$color-dark-brown
#444444

Programs

Global Default

$color-program-global-primary
#012169

$color-program-global-secondary
#F9C147

MS in Business Analytics

$color-program-business-analytics-primary
#000000

$color-program-business-analytics-secondary
#F35953

Undergraduate BBA

$color-program-undergraduate-bba-primary
#012169

$color-program-undergraduate-bba-secondary
#F9C147

Executive Education

$color-program-executive-education-primary
#185785

$color-program-executive-education-secondary
#F9C147

One Year MBA

$color-program-one-year-mba-primary
#123D50

$color-program-one-year-mba-secondary
#FDEE73

Two Year MBA

$color-program-two-year-mba-primary
#85BCE4

$color-program-two-year-mba-secondary
#123D50

Evening MBA

$color-program-evening-mba-primary
#185785

$color-program-evening-mba-secondary
#FDEE73

Weekend MBA for Executives

$color-program-weekend-mba-primary
#BCDCE6

$color-program-weekend-mba-secondary
#1651A1

Modular MBA for Executives

$color-program-modular-mba-primary
#E3A44C

$color-program-modular-mba-secondary
#444444

PHD

$color-program-phd-primary
#444444

$color-program-phd-secondary
#85BCE4

Markup Details

                            <h2>Primary</h2>
<div class="kss-swatch" style="background-color: #185785">
  <div class="kss-swatch__hex">$color-blue<br>#185785</div>
</div>
<div class="kss-swatch" style="background-color: #012169">
  <div class="kss-swatch__hex">$color-navy<br>#012169</div>
</div>
<div class="kss-swatch" style="background-color: #ED2024">
  <div class="kss-swatch__hex">$color-red<br>#ED2024</div>
</div>
<div class="kss-swatch" style="background-color: #E3A44C">
  <div class="kss-swatch__hex">$color-yellow<br>#E3A44C</div>
</div>
<div class="kss-swatch" style="background-color: #F9C147">
  <div class="kss-swatch__hex">$color-yellow-high<br>#F9C147</div>
</div>
<div class="kss-swatch" style="background-color: #C0C0DE">
  <div class="kss-swatch__hex">$color-violet<br>#C0C0DE</div>
</div>
<div class="kss-swatch" style="background-color: #CDD3E4">
  <div class="kss-swatch__hex">$color-lavender<br>#CDD3E4</div>
</div>
<div class="kss-swatch" style="background-color: #FCD3C1">
  <div class="kss-swatch__hex">$color-salmon<br>#FCD3C1</div>
</div>
<div class="kss-swatch" style="background-color: #F2D6AF">
  <div class="kss-swatch__hex">$color-gold<br>#F2D6AF</div>
</div>
<div class="kss-swatch" style="background-color: #FEF6E7">
  <div class="kss-swatch__hex">$color-gold-light<br>#FEF6E7</div>
</div>
<div class="kss-swatch" style="background-color: #FCE7BE">
  <div class="kss-swatch__hex">$color-gold-medium<br>#FCE7BE</div>
</div>
<div class="kss-swatch" style="background-color: #FAD58E">
  <div class="kss-swatch__hex">$color-gold-dark<br>#FAD58E</div>
</div>
<div class="kss-swatch" style="background-color: #FFFFFF">
  <div class="kss-swatch__hex">$color-white<br>#FFFFFF</div>
</div>
<div class="kss-swatch" style="background-color: #F4F4F3">
  <div class="kss-swatch__hex">$color-egg-shell<br>#F4F4F3</div>
</div>
<div class="kss-swatch" style="background-color: #C0C2C3">
  <div class="kss-swatch__hex">$color-gray<br>#C0C2C3</div>
</div>
<div class="kss-swatch" style="background-color: #6A6868">
  <div class="kss-swatch__hex">$color-gray-dark<br>#6A6868</div>
</div>
<div class="kss-swatch" style="background-color: #434444">
  <div class="kss-swatch__hex">$color-gray-darker<br>#434444</div>
</div>
<div class="kss-swatch" style="background-color: #000000">
  <div class="kss-swatch__hex">$color-black<br>#000000</div>
</div>
<h2>Secondary</h2>
<div class="kss-swatch" style="background-color: #F35953">
  <div class="kss-swatch__hex">$color-flame<br>#F35953</div>
</div>
<div class="kss-swatch" style="background-color: #123D50">
  <div class="kss-swatch__hex">$color-ocean<br>#123D50</div>
</div>
<div class="kss-swatch" style="background-color: #FDEE73">
  <div class="kss-swatch__hex">$color-lemon<br>#FDEE73</div>
</div>
<div class="kss-swatch" style="background-color: #85BCE4">
  <div class="kss-swatch__hex">$color-sky-blue<br>#85BCE4</div>
</div>
<div class="kss-swatch" style="background-color: #1651A1">
  <div class="kss-swatch__hex">$color-denim<br>#1651A1</div>
</div>
<div class="kss-swatch" style="background-color: #444444">
  <div class="kss-swatch__hex">$color-dark-brown<br>#444444</div>
</div>
<h2>Programs</h2>
<h2>Global Default</h2>
<div class="kss-swatch" style="background-color: #012169">
  <div class="kss-swatch__hex">$color-program-global-primary<br>#012169</div>
</div>
<div class="kss-swatch" style="background-color: #F9C147">
  <div class="kss-swatch__hex">$color-program-global-secondary<br>#F9C147</div>
</div>
<h2>MS in Business Analytics</h2>
<div class="kss-swatch" style="background-color: #000000">
  <div class="kss-swatch__hex">$color-program-business-analytics-primary<br>#000000</div>
</div>
<div class="kss-swatch" style="background-color: #F35953">
  <div class="kss-swatch__hex">$color-program-business-analytics-secondary<br>#F35953</div>
</div>
<h2>Undergraduate BBA</h2>
<div class="kss-swatch" style="background-color: #012169">
  <div class="kss-swatch__hex">$color-program-undergraduate-bba-primary<br>#012169</div>
</div>
<div class="kss-swatch" style="background-color: #F9C147">
  <div class="kss-swatch__hex">$color-program-undergraduate-bba-secondary<br>#F9C147</div>
</div>
<h2>Executive Education</h2>
<div class="kss-swatch" style="background-color: #185785">
  <div class="kss-swatch__hex">$color-program-executive-education-primary<br>#185785</div>
</div>
<div class="kss-swatch" style="background-color: #F9C147">
  <div class="kss-swatch__hex">$color-program-executive-education-secondary<br>#F9C147</div>
</div>
<h2>One Year MBA</h2>
<div class="kss-swatch" style="background-color: #123D50">
  <div class="kss-swatch__hex">$color-program-one-year-mba-primary<br>#123D50</div>
</div>
<div class="kss-swatch" style="background-color: #FDEE73">
  <div class="kss-swatch__hex">$color-program-one-year-mba-secondary<br>#FDEE73</div>
</div>
<h2>Two Year MBA</h2>
<div class="kss-swatch" style="background-color: #85BCE4">
  <div class="kss-swatch__hex">$color-program-two-year-mba-primary<br>#85BCE4</div>
</div>
<div class="kss-swatch" style="background-color: #123D50">
  <div class="kss-swatch__hex">$color-program-two-year-mba-secondary<br>#123D50</div>
</div>
<h2>Evening MBA</h2>
<div class="kss-swatch" style="background-color: #185785">
  <div class="kss-swatch__hex">$color-program-evening-mba-primary<br>#185785</div>
</div>
<div class="kss-swatch" style="background-color: #FDEE73">
  <div class="kss-swatch__hex">$color-program-evening-mba-secondary<br>#FDEE73</div>
</div>
<h2>Weekend MBA for Executives</h2>
<div class="kss-swatch" style="background-color: #BCDCE6">
  <div class="kss-swatch__hex">$color-program-weekend-mba-primary<br>#BCDCE6</div>
</div>
<div class="kss-swatch" style="background-color: #1651A1">
  <div class="kss-swatch__hex">$color-program-weekend-mba-secondary<br>#1651A1</div>
</div>
<h2>Modular MBA for Executives</h2>
<div class="kss-swatch" style="background-color: #E3A44C">
  <div class="kss-swatch__hex">$color-program-modular-mba-primary<br>#E3A44C</div>
</div>
<div class="kss-swatch" style="background-color: #444444">
  <div class="kss-swatch__hex">$color-program-modular-mba-secondary<br>#444444</div>
</div>
<h2>PHD</h2>
<div class="kss-swatch" style="background-color: #444444">
  <div class="kss-swatch__hex">$color-program-phd-primary<br>#444444</div>
</div>
<div class="kss-swatch" style="background-color: #85BCE4">
  <div class="kss-swatch__hex">$color-program-phd-secondary<br>#85BCE4</div>
</div>