Web Docs

Color 

<!-- Primary -->
<div class="colors columns-">
    <div class="color white-text" style="background:#002e5d">
        <h2>BYU Navy</h2>
        <p><code>#002e5d</code></p>
        <p><code>$byuNavy</code></p>
    </div>
    <div class="color" style="background:#fff">
        <h2>White</h2>
        <p><code>#fff</code></p>
        <p><code>$white</code></p>
    </div>
</div>


<!-- Secondary -->
<div class="colors columns-">
    <div class="color white-text" style="background:#0057b8">
        <h2>BYU Royal</h2>
        <p><code>#0057b8</code></p>
        <p><code>$byuRoyal</code></p>
    </div>
</div>


<!-- Greys -->
<div class="colors columns-">
    <div class="color white-text" style="background:#141414">
        <h2>Darkest Grey</h2>
        <p><code>#141414</code></p>
        <p><code>$grey90</code></p>
    </div>
    <div class="color white-text" style="background:#666">
        <h2>Dark Grey</h2>
        <p><code>#666</code></p>
        <p><code>$grey70</code></p>
    </div>
    <div class="color white-text" style="background:#8f8f8f">
        <h2>Medium-Dark Grey</h2>
        <p><code>#8f8f8f</code></p>
        <p><code>$grey50</code></p>
    </div>
    <div class="color" style="background:#c5c5c5">
        <h2>Medium Grey</h2>
        <p><code>#c5c5c5</code></p>
        <p><code>$grey30</code></p>
    </div>
    <div class="color" style="background:#e6e6e6">
        <h2>Medium-Light Grey</h2>
        <p><code>#e6e6e6</code></p>
        <p><code>$grey10</code></p>
    </div>
    <div class="color" style="background:#f4f4f4">
        <h2>Light Grey</h2>
        <p><code>#f4f4f4</code></p>
        <p><code>$grey05</code></p>
    </div>
    <div class="color" style="background:#fafafa">
        <h2>Lightest Grey</h2>
        <p><code>#fafafa</code></p>
        <p><code>$grey02</code></p>
    </div>
</div>


<!-- Accent Colors -->
<div class="colors columns-">
    <div class="color white-text" style="background:#0057b8">
        <h2>Royal Blue</h2>
        <p><code>#0057b8</code></p>
        <p><code>$royal</code></p>
    </div>
    <div class="color white-text" style="background:#5199e1">
        <h2>Medium Blue</h2>
        <p><code>#5199e1</code></p>
        <p><code>$royal50</code></p>
    </div>
    <div class="color" style="background:#afd6fe">
        <h2>Light Blue</h2>
        <p><code>#afd6fe</code></p>
        <p><code>$royal20</code></p>
    </div>
    <div class="color" style="background:#fcc015">
        <h2>Yellow</h2>
        <p><code>#fcc015</code></p>
        <p><code>$yellow</code></p>
    </div>
    <div class="color" style="background:#ffda73">
        <h2>Medium Yellow</h2>
        <p><code>#ffda73</code></p>
        <p><code>$yellow50</code></p>
    </div>
    <div class="color" style="background:#fff0c5">
        <h2>Light Yellow</h2>
        <p><code>#fff0c5</code></p>
        <p><code>$yellow20</code></p>
    </div>
    <div class="color white-text" style="background:#38870c">
        <h2>Green</h2>
        <p><code>#38870c</code></p>
        <p><code>$green</code></p>
    </div>
    <div class="color" style="background:#94c576">
        <h2>Medium Green</h2>
        <p><code>#94c576</code></p>
        <p><code>$green50</code></p>
    </div>
    <div class="color" style="background:#cee0c3">
        <h2>Light Green</h2>
        <p><code>#cee0c3</code></p>
        <p><code>$green20</code></p>
    </div>
    <div class="color white-text" style="background:#a60318">
        <h2>Red</h2>
        <p><code>#a60318</code></p>
        <p><code>$red</code></p>
    </div>
    <div class="color" style="background:#f5acb6">
        <h2>Medium Red</h2>
        <p><code>#f5acb6</code></p>
        <p><code>$red50</code></p>
    </div>
    <div class="color" style="background:#fde3e6">
        <h2>Light Red</h2>
        <p><code>#fde3e6</code></p>
        <p><code>$red20</code></p>
    </div>
</div>


<!-- Text Colors -->
<div class="colors columns-2">
    <div class="color white-text" style="background:#141414">
        <h2>Darkest Grey</h2>
        <p><code>#141414</code></p>
        <p><code>$textcolor</code></p>
    </div>
    <div class="color white-text" style="background:#002e5d">
        <h2>Navy Blue</h2>
        <p><code>#002e5d</code></p>
        <p><code>$textblue</code></p>
    </div>
    <div class="color white-text" style="background:#666">
        <h2>Medium Grey</h2>
        <p><code>#666</code></p>
        <p><code>$textgrey</code></p>
    </div>
    <div class="color" style="background:#fff">
        <h2>White</h2>
        <p><code>#fff</code></p>
        <p><code>$textwhite</code></p>
    </div>
</div>


<!-- Ui Colors -->
<div class="colors columns-2">
    <div class="color white-text" style="background:#0057b8">
        <h2>Info</h2>
        <p><code>#0057b8</code></p>
        <p><code>$colorInfo</code></p>
    </div>
    <div class="color" style="background:#afd6fe">
        <h2>Info Light</h2>
        <p><code>#afd6fe</code></p>
        <p><code>$colorInfoLight</code></p>
    </div>
    <div class="color" style="background:#fcc015">
        <h2>Warning</h2>
        <p><code>#fcc015</code></p>
        <p><code>$colorWarning</code></p>
    </div>
    <div class="color" style="background:#fff0c5">
        <h2>Warning Light</h2>
        <p><code>#fff0c5</code></p>
        <p><code>$colorWarningLight</code></p>
    </div>
    <div class="color white-text" style="background:#38870c">
        <h2>Confirm</h2>
        <p><code>#38870c</code></p>
        <p><code>$colorConfirm</code></p>
    </div>
    <div class="color" style="background:#cee0c3">
        <h2>Confirm Light</h2>
        <p><code>#cee0c3</code></p>
        <p><code>$colorConfirmLight</code></p>
    </div>
    <div class="color white-text" style="background:#a60318">
        <h2>Danger</h2>
        <p><code>#a60318</code></p>
        <p><code>$colorDanger</code></p>
    </div>
    <div class="color" style="background:#fde3e6">
        <h2>Danger Light</h2>
        <p><code>#fde3e6</code></p>
        <p><code>$colorDangerLight</code></p>
    </div>
</div>


<div class="colors columns-{{columns}}">
	{{#each colors }}
	<div class="color{{#if dark}} white-text{{/if}}" style="background:#{{hex}}">
		<h2>{{ name }}</h2>
		<p><code>#{{ hex }}</code></p>
		<p><code>${{ var }}</code></p>
	</div>
	{{/each}}
</div>
 
/* Primary */
{
  "colors": [
    {
      "name": "BYU Navy",
      "hex": "002e5d",
      "var": "byuNavy",
      "dark": true
    },
    {
      "name": "White",
      "hex": "fff",
      "var": "white"
    }
  ]
}


/* Secondary */
{
  "colors": [
    {
      "name": "BYU Royal",
      "hex": "0057b8",
      "var": "byuRoyal",
      "dark": true
    }
  ]
}


/* Greys */
{
  "colors": [
    {
      "name": "Darkest Grey",
      "hex": "141414",
      "var": "grey90",
      "dark": true
    },
    {
      "name": "Dark Grey",
      "hex": "666",
      "var": "grey70",
      "dark": true
    },
    {
      "name": "Medium-Dark Grey",
      "hex": "8f8f8f",
      "var": "grey50",
      "dark": true
    },
    {
      "name": "Medium Grey",
      "hex": "c5c5c5",
      "var": "grey30"
    },
    {
      "name": "Medium-Light Grey",
      "hex": "e6e6e6",
      "var": "grey10"
    },
    {
      "name": "Light Grey",
      "hex": "f4f4f4",
      "var": "grey05"
    },
    {
      "name": "Lightest Grey",
      "hex": "fafafa",
      "var": "grey02"
    }
  ]
}


/* Accent Colors */
{
  "colors": [
    {
      "name": "Royal Blue",
      "var": "royal",
      "hex": "0057b8",
      "dark": true
    },
    {
      "name": "Medium Blue",
      "var": "royal50",
      "hex": "5199e1",
      "dark": true
    },
    {
      "name": "Light Blue",
      "var": "royal20",
      "hex": "afd6fe"
    },
    {
      "name": "Yellow",
      "var": "yellow",
      "hex": "fcc015"
    },
    {
      "name": "Medium Yellow",
      "var": "yellow50",
      "hex": "ffda73"
    },
    {
      "name": "Light Yellow",
      "var": "yellow20",
      "hex": "fff0c5"
    },
    {
      "name": "Green",
      "var": "green",
      "hex": "38870c",
      "dark": true
    },
    {
      "name": "Medium Green",
      "var": "green50",
      "hex": "94c576"
    },
    {
      "name": "Light Green",
      "var": "green20",
      "hex": "cee0c3"
    },
    {
      "name": "Red",
      "var": "red",
      "hex": "a60318",
      "dark": true
    },
    {
      "name": "Medium Red",
      "var": "red50",
      "hex": "f5acb6"
    },
    {
      "name": "Light Red",
      "var": "red20",
      "hex": "fde3e6"
    }
  ]
}


/* Text Colors */
{
  "columns": 2,
  "colors": [
    {
      "name": "Darkest Grey",
      "var": "textcolor",
      "hex": "141414",
      "dark": true
    },
    {
      "name": "Navy Blue",
      "var": "textblue",
      "hex": "002e5d",
      "dark": true
    },
    {
      "name": "Medium Grey",
      "var": "textgrey",
      "hex": "666",
      "dark": true
    },
    {
      "name": "White",
      "var": "textwhite",
      "hex": "fff"
    }
  ]
}


/* Ui Colors */
{
  "columns": 2,
  "colors": [
    {
      "name": "Info",
      "var": "colorInfo",
      "hex": "0057b8",
      "dark": true
    },
    {
      "name": "Info Light",
      "var": "colorInfoLight",
      "hex": "afd6fe"
    },
    {
      "name": "Warning",
      "var": "colorWarning",
      "hex": "fcc015"
    },
    {
      "name": "Warning Light",
      "var": "colorWarningLight",
      "hex": "fff0c5"
    },
    {
      "name": "Confirm",
      "var": "colorConfirm",
      "hex": "38870c",
      "dark": true
    },
    {
      "name": "Confirm Light",
      "var": "colorConfirmLight",
      "hex": "cee0c3"
    },
    {
      "name": "Danger",
      "var": "colorDanger",
      "hex": "a60318",
      "dark": true
    },
    {
      "name": "Danger Light",
      "var": "colorDangerLight",
      "hex": "fde3e6"
    }
  ]
}