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
#0033A0

$color-navy
#002F6C

$color-eagle-blue
#0C2340

$color-red
#D14124

$color-yellow(-high)
#F2A900

$color-yellow-highlight
#F7CB66

$color-gold
#F2D6AF

$color-gold-light
#FEF6E7

$color-gold-medium
#FCE7BE

$color-gold-dark
#FAD58E

$color-blue-10
#E7E7F5

$color-navy-10
#E4E7EF

$color-white
#FFFFFF

$color-egg-shell
#F6F6F6

$color-gray
#C0C2C3

$color-gray-dark
#6A6868

$color-tundora
#464646

$color-black
#000000

Secondary

$color-sky-blue
#A4DBE8

$color-denim
#005EB8

$color-command-blue
#007DBA

$color-cyan
#778921

$color-green
#00482B

$color-marble
#E9CDD0

$color-wisteria
#C8B8F1

$color-spring
#ECDD31

Tints (Redundant colors but variables are used in places - we can consolidate)

$color-mobile-menu-blue
#0033A0

$color-goiz-blue-menu
#002F6C

Grays (Mostly redundant colors except Alto and Alabaster - we can consolidate)

$color-hover-gray
#F6F6F6

$color-gallery
#F6F6F6

$color-silver
#c0c2c3

$color-paris-white
#c0c2c3

$color-alto
#ddd

$color-alabaster
#f7f7f7

Markup Details

                            <h2>Primary</h2>
<div class="kss-swatch" style="background-color: #0033A0">
  <div class="kss-swatch__hex">$color-blue<br>#0033A0</div>
</div>
<div class="kss-swatch" style="background-color: #002F6C">
  <div class="kss-swatch__hex">$color-navy<br>#002F6C</div>
</div>
<div class="kss-swatch" style="background-color: #0C2340">
  <div class="kss-swatch__hex">$color-eagle-blue<br>#0C2340</div>
</div>
<div class="kss-swatch" style="background-color: #D14124">
  <div class="kss-swatch__hex">$color-red<br>#D14124</div>
</div>
<div class="kss-swatch" style="background-color: #F2A900">
  <div class="kss-swatch__hex">$color-yellow(-high)<br>#F2A900</div>
</div>
<div class="kss-swatch" style="background-color: #F7CB66">
  <div class="kss-swatch__hex">$color-yellow-highlight<br>#F7CB66</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: #E7E7F5">
  <div class="kss-swatch__hex">$color-blue-10<br>#E7E7F5</div>
</div>
<div class="kss-swatch" style="background-color: #E4E7EF">
  <div class="kss-swatch__hex">$color-navy-10<br>#E4E7EF</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: #F6F6F6">
  <div class="kss-swatch__hex">$color-egg-shell<br>#F6F6F6</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: #464646">
  <div class="kss-swatch__hex">$color-tundora<br>#464646</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: #A4DBE8">
  <div class="kss-swatch__hex">$color-sky-blue<br>#A4DBE8</div>
</div>
<div class="kss-swatch" style="background-color: #005EB8">
  <div class="kss-swatch__hex">$color-denim<br>#005EB8</div>
</div>
<div class="kss-swatch" style="background-color: #007DBA">
  <div class="kss-swatch__hex">$color-command-blue<br>#007DBA</div>
</div>
<div class="kss-swatch" style="background-color: #778921">
  <div class="kss-swatch__hex">$color-cyan<br>#778921</div>
</div>
<div class="kss-swatch" style="background-color: #00482B">
  <div class="kss-swatch__hex">$color-green<br>#00482B</div>
</div>
<div class="kss-swatch" style="background-color: #e9cdd0">
  <div class="kss-swatch__hex">$color-marble<br>#E9CDD0</div>
</div>
<div class="kss-swatch" style="background-color: #c8b8f1">
  <div class="kss-swatch__hex">$color-wisteria<br>#C8B8F1</div>
</div>
<div class="kss-swatch" style="background-color: #ecdd31">
  <div class="kss-swatch__hex">$color-spring<br>#ECDD31</div>
</div>
<h2>Tints (Redundant colors but variables are used in places - we can consolidate)</h2>
<div class="kss-swatch" style="background-color: #0033a0">
  <div class="kss-swatch__hex">$color-mobile-menu-blue<br>#0033A0</div>
</div>
<div class="kss-swatch" style="background-color: #002f6c">
  <div class="kss-swatch__hex">$color-goiz-blue-menu<br>#002F6C</div>
</div>
<h2>Grays (Mostly redundant colors except Alto and Alabaster - we can consolidate)</h2>
<div class="kss-swatch" style="background-color: #f6f6f6">
  <div class="kss-swatch__hex">$color-hover-gray<br>#F6F6F6</div>
</div>
<div class="kss-swatch" style="background-color: #f6f6f6">
  <div class="kss-swatch__hex">$color-gallery<br>#F6F6F6</div>
</div>
<div class="kss-swatch" style="background-color: #c0c2c3">
  <div class="kss-swatch__hex">$color-silver<br>#c0c2c3</div>
</div>
<div class="kss-swatch" style="background-color: #c0c2c3">
  <div class="kss-swatch__hex">$color-paris-white<br>#c0c2c3</div>
</div>
<div class="kss-swatch" style="background-color: #ddd">
  <div class="kss-swatch__hex">$color-alto<br>#ddd</div>
</div>
<div class="kss-swatch" style="background-color: #f7f7f7">
  <div class="kss-swatch__hex">$color-alabaster<br>#f7f7f7</div>
</div>