@penskemediacorp/larva-tokens 0.5.0 → 0.5.1

package/build/rollingstone.custom-properties.css

@@ -19,7 +19,7 @@
   --background-color-grey: rgb(169, 169, 173);
   /* The background color of the main body of the site. */
   --background-color-body: rgb(255, 255, 255);
-  --background-color-brand-secondary: rgb(244, 243, 241);
+  --background-color-brand-secondary: rgb(122, 89, 45);
   --background-color-black: rgb(0, 0, 0);
   --background-color-brand-primary-light: rgb(236, 28, 36);
   --background-color-brand-primary-dark: rgb(146, 7, 0);

package/build/rollingstone.json

@@ -17,7 +17,7 @@
   "BACKGROUND_COLOR_GREY_DARK": "rgb(123, 124, 132)",
   "BACKGROUND_COLOR_GREY": "rgb(169, 169, 173)",
   "BACKGROUND_COLOR_BODY": "rgb(255, 255, 255)",
-  "BACKGROUND_COLOR_BRAND_SECONDARY": "rgb(244, 243, 241)",
+  "BACKGROUND_COLOR_BRAND_SECONDARY": "rgb(122, 89, 45)",
   "BACKGROUND_COLOR_BLACK": "rgb(0, 0, 0)",
   "BACKGROUND_COLOR_BRAND_PRIMARY_LIGHT": "rgb(236, 28, 36)",
   "BACKGROUND_COLOR_BRAND_PRIMARY_DARK": "rgb(146, 7, 0)",

package/build/rollingstone.map.scss

@@ -19,7 +19,7 @@ $rollingstone-map: (
   'background-color-grey': (rgb(169, 169, 173)),
   /* The background color of the main body of the site. */
   'background-color-body': (rgb(255, 255, 255)),
-  'background-color-brand-secondary': (rgb(244, 243, 241)),
+  'background-color-brand-secondary': (rgb(122, 89, 45)),
   'background-color-black': (rgb(0, 0, 0)),
   'background-color-brand-primary-light': (rgb(236, 28, 36)),
   'background-color-brand-primary-dark': (rgb(146, 7, 0)),

package/build/rollingstone.raw.json

@@ -352,10 +352,10 @@
       "name": "BACKGROUND_COLOR_BODY"
     },
     "BACKGROUND_COLOR_BRAND_SECONDARY": {
-      "value": "rgb(244, 243, 241)",
+      "value": "rgb(122, 89, 45)",
       "type": "color",
       "category": "background-color",
-      "originalValue": "rgb(244, 243, 241)",
+      "originalValue": "rgb(122, 89, 45)",
       "name": "BACKGROUND_COLOR_BRAND_SECONDARY"
     },
     "BACKGROUND_COLOR_BLACK": {

package/build/variety-compat.custom-properties.css

@@ -0,0 +1,36 @@
+
+:root {
+  --color-brand-secondary: rgb(238, 232, 9);
+  --border-color-grey-lightest: rgb(247, 247, 247);
+  --background-color-grey-light: rgb(230, 230, 230);
+  --background-color-grey-lightest: rgb(247, 247, 247);
+  --color-black: rgb(0, 0, 0);
+  --border-color-brand-secondary-light: rgb(243, 245, 203);
+  --border-color-grey-light: rgb(230, 230, 230);
+  --background-color-brand-secondary-light: rgb(243, 245, 203);
+  --color-brand-primary-dark: rgb(36, 56, 66);
+  --border-color-grey-dark: rgb(106, 106, 106);
+  --background-color-grey-dark: rgb(106, 106, 106);
+  --background-color-grey: rgb(140, 140, 140);
+  --color-white: rgb(255, 255, 255);
+  --border-color-brand-secondary: rgb(238, 232, 9);
+  --border-color-grey: rgb(140, 140, 140);
+  --color-brand-primary: rgb(107, 123, 132);
+  /* The secondary brand color. This should be lighter in hue, and sufficient contrast with black text. */
+  --background-color-brand-secondary: rgb(238, 232, 9);
+  --background-color-brand-accent: rgb(26, 40, 47);
+  --color-grey-light: rgb(230, 230, 230);
+  --background-color-black: rgb(0, 0, 0);
+  --color-brand-secondary-light: rgb(243, 245, 203);
+  --background-color-brand-primary-dark: rgb(36, 56, 66);
+  --border-color-white: rgb(255, 255, 255);
+  --border-color-brand-primary-dark: rgb(36, 56, 66);
+  --color-grey-dark: rgb(106, 106, 106);
+  --border-color-brand-primary: rgb(107, 123, 132);
+  --color-grey: rgb(140, 140, 140);
+  --background-color-white: rgb(255, 255, 255);
+  /* The primary brand color. This should be dark in hue, and have sufficient contrast with white text. */
+  --background-color-brand-primary: rgb(107, 123, 132);
+  --background-color-grey-darkest: rgb(50, 50, 50);
+  --color-brand-accent: rgb(243, 112, 33);
+}

package/build/variety-compat.json

@@ -0,0 +1,33 @@
+{
+  "COLOR_BRAND_SECONDARY": "rgb(238, 232, 9)",
+  "BORDER_COLOR_GREY_LIGHTEST": "rgb(247, 247, 247)",
+  "BACKGROUND_COLOR_GREY_LIGHT": "rgb(230, 230, 230)",
+  "BACKGROUND_COLOR_GREY_LIGHTEST": "rgb(247, 247, 247)",
+  "COLOR_BLACK": "rgb(0, 0, 0)",
+  "BORDER_COLOR_BRAND_SECONDARY_LIGHT": "rgb(243, 245, 203)",
+  "BORDER_COLOR_GREY_LIGHT": "rgb(230, 230, 230)",
+  "BACKGROUND_COLOR_BRAND_SECONDARY_LIGHT": "rgb(243, 245, 203)",
+  "COLOR_BRAND_PRIMARY_DARK": "rgb(36, 56, 66)",
+  "BORDER_COLOR_GREY_DARK": "rgb(106, 106, 106)",
+  "BACKGROUND_COLOR_GREY_DARK": "rgb(106, 106, 106)",
+  "BACKGROUND_COLOR_GREY": "rgb(140, 140, 140)",
+  "COLOR_WHITE": "rgb(255, 255, 255)",
+  "BORDER_COLOR_BRAND_SECONDARY": "rgb(238, 232, 9)",
+  "BORDER_COLOR_GREY": "rgb(140, 140, 140)",
+  "COLOR_BRAND_PRIMARY": "rgb(107, 123, 132)",
+  "BACKGROUND_COLOR_BRAND_SECONDARY": "rgb(238, 232, 9)",
+  "BACKGROUND_COLOR_BRAND_ACCENT": "rgb(26, 40, 47)",
+  "COLOR_GREY_LIGHT": "rgb(230, 230, 230)",
+  "BACKGROUND_COLOR_BLACK": "rgb(0, 0, 0)",
+  "COLOR_BRAND_SECONDARY_LIGHT": "rgb(243, 245, 203)",
+  "BACKGROUND_COLOR_BRAND_PRIMARY_DARK": "rgb(36, 56, 66)",
+  "BORDER_COLOR_WHITE": "rgb(255, 255, 255)",
+  "BORDER_COLOR_BRAND_PRIMARY_DARK": "rgb(36, 56, 66)",
+  "COLOR_GREY_DARK": "rgb(106, 106, 106)",
+  "BORDER_COLOR_BRAND_PRIMARY": "rgb(107, 123, 132)",
+  "COLOR_GREY": "rgb(140, 140, 140)",
+  "BACKGROUND_COLOR_WHITE": "rgb(255, 255, 255)",
+  "BACKGROUND_COLOR_BRAND_PRIMARY": "rgb(107, 123, 132)",
+  "BACKGROUND_COLOR_GREY_DARKEST": "rgb(50, 50, 50)",
+  "COLOR_BRAND_ACCENT": "rgb(243, 112, 33)"
+}

package/build/variety-compat.map.scss

@@ -0,0 +1,36 @@
+
+$variety-compat-map: (
+  'color-brand-secondary': (rgb(238, 232, 9)),
+  'border-color-grey-lightest': (rgb(247, 247, 247)),
+  'background-color-grey-light': (rgb(230, 230, 230)),
+  'background-color-grey-lightest': (rgb(247, 247, 247)),
+  'color-black': (rgb(0, 0, 0)),
+  'border-color-brand-secondary-light': (rgb(243, 245, 203)),
+  'border-color-grey-light': (rgb(230, 230, 230)),
+  'background-color-brand-secondary-light': (rgb(243, 245, 203)),
+  'color-brand-primary-dark': (rgb(36, 56, 66)),
+  'border-color-grey-dark': (rgb(106, 106, 106)),
+  'background-color-grey-dark': (rgb(106, 106, 106)),
+  'background-color-grey': (rgb(140, 140, 140)),
+  'color-white': (rgb(255, 255, 255)),
+  'border-color-brand-secondary': (rgb(238, 232, 9)),
+  'border-color-grey': (rgb(140, 140, 140)),
+  'color-brand-primary': (rgb(107, 123, 132)),
+  /* The secondary brand color. This should be lighter in hue, and sufficient contrast with black text. */
+  'background-color-brand-secondary': (rgb(238, 232, 9)),
+  'background-color-brand-accent': (rgb(26, 40, 47)),
+  'color-grey-light': (rgb(230, 230, 230)),
+  'background-color-black': (rgb(0, 0, 0)),
+  'color-brand-secondary-light': (rgb(243, 245, 203)),
+  'background-color-brand-primary-dark': (rgb(36, 56, 66)),
+  'border-color-white': (rgb(255, 255, 255)),
+  'border-color-brand-primary-dark': (rgb(36, 56, 66)),
+  'color-grey-dark': (rgb(106, 106, 106)),
+  'border-color-brand-primary': (rgb(107, 123, 132)),
+  'color-grey': (rgb(140, 140, 140)),
+  'background-color-white': (rgb(255, 255, 255)),
+  /* The primary brand color. This should be dark in hue, and have sufficient contrast with white text. */
+  'background-color-brand-primary': (rgb(107, 123, 132)),
+  'background-color-grey-darkest': (rgb(50, 50, 50)),
+  'color-brand-accent': (rgb(243, 112, 33)),
+);

package/build/variety-compat.raw.json

@@ -0,0 +1,224 @@
+{
+  "aliases": {},
+  "props": {
+    "COLOR_BRAND_SECONDARY": {
+      "category": "text-color",
+      "type": "color",
+      "value": "rgb(238, 232, 9)",
+      "originalValue": "rgb(238, 232, 9)",
+      "name": "COLOR_BRAND_SECONDARY"
+    },
+    "BORDER_COLOR_GREY_LIGHTEST": {
+      "category": "hr-color",
+      "type": "color",
+      "value": "rgb(247, 247, 247)",
+      "originalValue": "rgb(247, 247, 247)",
+      "name": "BORDER_COLOR_GREY_LIGHTEST"
+    },
+    "BACKGROUND_COLOR_GREY_LIGHT": {
+      "category": "background-color",
+      "type": "color",
+      "value": "rgb(230, 230, 230)",
+      "originalValue": "rgb(230, 230, 230)",
+      "name": "BACKGROUND_COLOR_GREY_LIGHT"
+    },
+    "BACKGROUND_COLOR_GREY_LIGHTEST": {
+      "category": "background-color",
+      "type": "color",
+      "value": "rgb(247, 247, 247)",
+      "originalValue": "rgb(247, 247, 247)",
+      "name": "BACKGROUND_COLOR_GREY_LIGHTEST"
+    },
+    "COLOR_BLACK": {
+      "category": "text-color",
+      "type": "color",
+      "value": "rgb(0, 0, 0)",
+      "originalValue": "rgb(0, 0, 0)",
+      "name": "COLOR_BLACK"
+    },
+    "BORDER_COLOR_BRAND_SECONDARY_LIGHT": {
+      "category": "hr-color",
+      "type": "color",
+      "value": "rgb(243, 245, 203)",
+      "originalValue": "rgb(243, 245, 203)",
+      "name": "BORDER_COLOR_BRAND_SECONDARY_LIGHT"
+    },
+    "BORDER_COLOR_GREY_LIGHT": {
+      "category": "hr-color",
+      "type": "color",
+      "value": "rgb(230, 230, 230)",
+      "originalValue": "rgb(230, 230, 230)",
+      "name": "BORDER_COLOR_GREY_LIGHT"
+    },
+    "BACKGROUND_COLOR_BRAND_SECONDARY_LIGHT": {
+      "category": "background-color",
+      "type": "color",
+      "value": "rgb(243, 245, 203)",
+      "originalValue": "rgb(243, 245, 203)",
+      "name": "BACKGROUND_COLOR_BRAND_SECONDARY_LIGHT"
+    },
+    "COLOR_BRAND_PRIMARY_DARK": {
+      "category": "text-color",
+      "type": "color",
+      "value": "rgb(36, 56, 66)",
+      "originalValue": "rgb(36, 56, 66)",
+      "name": "COLOR_BRAND_PRIMARY_DARK"
+    },
+    "BORDER_COLOR_GREY_DARK": {
+      "category": "hr-color",
+      "type": "color",
+      "value": "rgb(106, 106, 106)",
+      "originalValue": "rgb(106, 106, 106)",
+      "name": "BORDER_COLOR_GREY_DARK"
+    },
+    "BACKGROUND_COLOR_GREY_DARK": {
+      "category": "background-color",
+      "type": "color",
+      "value": "rgb(106, 106, 106)",
+      "originalValue": "rgb(106, 106, 106)",
+      "name": "BACKGROUND_COLOR_GREY_DARK"
+    },
+    "BACKGROUND_COLOR_GREY": {
+      "category": "background-color",
+      "type": "color",
+      "value": "rgb(140, 140, 140)",
+      "originalValue": "rgb(140, 140, 140)",
+      "name": "BACKGROUND_COLOR_GREY"
+    },
+    "COLOR_WHITE": {
+      "category": "text-color",
+      "type": "color",
+      "value": "rgb(255, 255, 255)",
+      "originalValue": "rgb(255, 255, 255)",
+      "name": "COLOR_WHITE"
+    },
+    "BORDER_COLOR_BRAND_SECONDARY": {
+      "category": "hr-color",
+      "type": "color",
+      "value": "rgb(238, 232, 9)",
+      "originalValue": "rgb(238, 232, 9)",
+      "name": "BORDER_COLOR_BRAND_SECONDARY"
+    },
+    "BORDER_COLOR_GREY": {
+      "category": "hr-color",
+      "type": "color",
+      "value": "rgb(140, 140, 140)",
+      "originalValue": "rgb(140, 140, 140)",
+      "name": "BORDER_COLOR_GREY"
+    },
+    "COLOR_BRAND_PRIMARY": {
+      "category": "text-color",
+      "type": "color",
+      "value": "rgb(107, 123, 132)",
+      "originalValue": "rgb(107, 123, 132)",
+      "name": "COLOR_BRAND_PRIMARY"
+    },
+    "BACKGROUND_COLOR_BRAND_SECONDARY": {
+      "category": "background-color",
+      "type": "color",
+      "value": "rgb(238, 232, 9)",
+      "comment": "The secondary brand color. This should be lighter in hue, and sufficient contrast with black text.",
+      "originalValue": "rgb(238, 232, 9)",
+      "name": "BACKGROUND_COLOR_BRAND_SECONDARY"
+    },
+    "BACKGROUND_COLOR_BRAND_ACCENT": {
+      "value": "rgb(26, 40, 47)",
+      "type": "color",
+      "category": "background-color",
+      "originalValue": "rgb(26, 40, 47)",
+      "name": "BACKGROUND_COLOR_BRAND_ACCENT"
+    },
+    "COLOR_GREY_LIGHT": {
+      "category": "text-color",
+      "type": "color",
+      "value": "rgb(230, 230, 230)",
+      "originalValue": "rgb(230, 230, 230)",
+      "name": "COLOR_GREY_LIGHT"
+    },
+    "BACKGROUND_COLOR_BLACK": {
+      "category": "background-color",
+      "type": "color",
+      "value": "rgb(0, 0, 0)",
+      "originalValue": "rgb(0, 0, 0)",
+      "name": "BACKGROUND_COLOR_BLACK"
+    },
+    "COLOR_BRAND_SECONDARY_LIGHT": {
+      "category": "text-color",
+      "type": "color",
+      "value": "rgb(243, 245, 203)",
+      "originalValue": "rgb(243, 245, 203)",
+      "name": "COLOR_BRAND_SECONDARY_LIGHT"
+    },
+    "BACKGROUND_COLOR_BRAND_PRIMARY_DARK": {
+      "category": "background-color",
+      "type": "color",
+      "value": "rgb(36, 56, 66)",
+      "originalValue": "rgb(36, 56, 66)",
+      "name": "BACKGROUND_COLOR_BRAND_PRIMARY_DARK"
+    },
+    "BORDER_COLOR_WHITE": {
+      "category": "hr-color",
+      "type": "color",
+      "value": "rgb(255, 255, 255)",
+      "originalValue": "rgb(255, 255, 255)",
+      "name": "BORDER_COLOR_WHITE"
+    },
+    "BORDER_COLOR_BRAND_PRIMARY_DARK": {
+      "category": "hr-color",
+      "type": "color",
+      "value": "rgb(36, 56, 66)",
+      "originalValue": "rgb(36, 56, 66)",
+      "name": "BORDER_COLOR_BRAND_PRIMARY_DARK"
+    },
+    "COLOR_GREY_DARK": {
+      "category": "text-color",
+      "type": "color",
+      "value": "rgb(106, 106, 106)",
+      "originalValue": "rgb(106, 106, 106)",
+      "name": "COLOR_GREY_DARK"
+    },
+    "BORDER_COLOR_BRAND_PRIMARY": {
+      "category": "hr-color",
+      "type": "color",
+      "value": "rgb(107, 123, 132)",
+      "originalValue": "rgb(107, 123, 132)",
+      "name": "BORDER_COLOR_BRAND_PRIMARY"
+    },
+    "COLOR_GREY": {
+      "category": "text-color",
+      "type": "color",
+      "value": "rgb(140, 140, 140)",
+      "originalValue": "rgb(140, 140, 140)",
+      "name": "COLOR_GREY"
+    },
+    "BACKGROUND_COLOR_WHITE": {
+      "category": "background-color",
+      "type": "color",
+      "value": "rgb(255, 255, 255)",
+      "originalValue": "rgb(255, 255, 255)",
+      "name": "BACKGROUND_COLOR_WHITE"
+    },
+    "BACKGROUND_COLOR_BRAND_PRIMARY": {
+      "category": "background-color",
+      "type": "color",
+      "value": "rgb(107, 123, 132)",
+      "comment": "The primary brand color. This should be dark in hue, and have sufficient contrast with white text.",
+      "originalValue": "rgb(107, 123, 132)",
+      "name": "BACKGROUND_COLOR_BRAND_PRIMARY"
+    },
+    "BACKGROUND_COLOR_GREY_DARKEST": {
+      "category": "background-color",
+      "type": "color",
+      "value": "rgb(50, 50, 50)",
+      "originalValue": "rgb(50, 50, 50)",
+      "name": "BACKGROUND_COLOR_GREY_DARKEST"
+    },
+    "COLOR_BRAND_ACCENT": {
+      "value": "rgb(243, 112, 33)",
+      "type": "color",
+      "category": "text-color",
+      "originalValue": "rgb(243, 112, 33)",
+      "name": "COLOR_BRAND_ACCENT"
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-tokens",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Design tokens",
   "author": "laras126 <laras126@gmail.com>",
   "homepage": "https://github.com/penske-media-corp/pmc-larva#readme",
@@ -31,5 +31,5 @@
     "gulp": "^4.0.2",
     "plugin-error": "^1.0.1"
   },
-  "gitHead": "ae579c2215c1e32f409cc2901eb5c95b60904bb7"
+  "gitHead": "e205a0b770f3f833aeafbfd837c9397f18843616"
 }

package/style-guides/rollingstone.html

@@ -2886,9 +2886,9 @@
           <code>background-color-brand-secondary</code>
         </th>
         <td>
-          <code>rgb(244, 243, 241)</code>
+          <code>rgb(122, 89, 45)</code>
         </td>
-        <td style="background-color: rgb(244, 243, 241); border: 1px solid #f6f6f6;"></td>
+        <td style="background-color: rgb(122, 89, 45); border: 1px solid #f6f6f6;"></td>
         <td></td>
       </tr>
     

package/style-guides/variety-compat.html

@@ -0,0 +1,611 @@
+
+      <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <meta charset="utf-8" />
+          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+          <title>Design Tokens</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" />
+          <style>
+            html {
+              box-sizing: border-box;
+              font-size: 1em;
+              font-family: Helvetica, Arial, sans-serif;
+              line-height: 1.5;
+              background: #fff;
+              color: #444;
+            }
+            *,
+            *:before,
+            *:after {
+              box-sizing: inherit;
+            }
+            body { font-size: .75rem; }
+            ::-moz-selection {
+              background: #b3d4fc;
+              text-shadow: none;
+            }
+            ::selection {
+              background: #b3d4fc;
+              text-shadow: none;
+            }
+            .banner,
+            .contentinfo { background: #f5f5f5; }
+            .banner { padding: 1em 0; }
+            .container {
+              margin: 0 auto;
+              padding: 0 2rem;
+              max-width: 80rem;
+            }
+            main {
+              margin-right: -2rem;
+              margin-left:  -2rem;
+              padding-bottom: 2rem;
+            }
+            h1 {
+              margin: 0;
+              font-weight: normal;
+              line-height: 1.25;
+            }
+            table {
+              table-layout: fixed;
+              border-collapse: separate;
+              border-spacing: 1rem;
+              width: 100%;
+            }
+            th,
+            td {
+              padding: 0 1rem;
+              vertical-align: baseline;
+              word-break: break-word;
+              hyphens: auto;
+            }
+            th {
+              font-weight: normal;
+              text-align: left;
+            }
+            thead th {
+              border-bottom: 1px solid #eee;
+              padding-top: 1rem;
+              padding-bottom: .5rem;
+              color: #999;
+            }
+            thead th:first-child {
+              font-size: 1.25rem;
+              color: inherit;
+            }
+            code { font-family: monaco, Consolas, monospace, monospace; }
+            hr {
+              display: block;
+              margin: 2rem 0;
+              border: 0;
+              border-top: 1px solid #eee;
+              padding: 0;
+              height: 1px;
+            }
+            .metric-box,
+            .radius-box {
+              display: inline-block;
+              vertical-align: middle;
+              background: #eee;
+            }
+            .radius-box {
+              width: 100%;
+              height: 3rem;
+            }
+            .radius-box.borderRadiusCircle {
+              width: 3rem;
+            }
+            .line-height-example {
+              border-bottom: 1px solid #eee;
+              background-image: -webkit-linear-gradient(#eee 1px, transparent 1px);
+              background-image: linear-gradient(#eee 1px, transparent 1px);
+              background-size: 100% 1rem;
+            }
+          </style>
+        </head>
+        <body>
+          <header role="banner" class="banner">
+            <div class="container">
+              <h1>Design Tokens</h1>
+            </div>
+          </header>
+          <div class="container">
+            <main role="main">
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+      <section>
+        <table>
+          
+      <thead>
+        <tr id=hr-color>
+          <th scope="col">Horizontal Rule Colors</th>
+          <th scope="col">Value</th>
+          <th scope="col">Examples</th>
+          <th scope="col">Usage</th>
+        </tr>
+      </thead>
+    
+          <tbody>
+            <tr>
+        <th scope="row">
+          <code>border-color-grey-lightest</code>
+        </th>
+        <td>
+          <code>rgb(247, 247, 247)</code>
+        </td>
+        
+        <td>
+          <hr style="border-top-color: rgb(247, 247, 247);" />
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>border-color-brand-secondary-light</code>
+        </th>
+        <td>
+          <code>rgb(243, 245, 203)</code>
+        </td>
+        
+        <td>
+          <hr style="border-top-color: rgb(243, 245, 203);" />
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>border-color-grey-light</code>
+        </th>
+        <td>
+          <code>rgb(230, 230, 230)</code>
+        </td>
+        
+        <td>
+          <hr style="border-top-color: rgb(230, 230, 230);" />
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>border-color-grey-dark</code>
+        </th>
+        <td>
+          <code>rgb(106, 106, 106)</code>
+        </td>
+        
+        <td>
+          <hr style="border-top-color: rgb(106, 106, 106);" />
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>border-color-brand-secondary</code>
+        </th>
+        <td>
+          <code>rgb(238, 232, 9)</code>
+        </td>
+        
+        <td>
+          <hr style="border-top-color: rgb(238, 232, 9);" />
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>border-color-grey</code>
+        </th>
+        <td>
+          <code>rgb(140, 140, 140)</code>
+        </td>
+        
+        <td>
+          <hr style="border-top-color: rgb(140, 140, 140);" />
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>border-color-white</code>
+        </th>
+        <td>
+          <code>rgb(255, 255, 255)</code>
+        </td>
+        
+        <td>
+          <hr style="border-top-color: rgb(255, 255, 255);" />
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>border-color-brand-primary-dark</code>
+        </th>
+        <td>
+          <code>rgb(36, 56, 66)</code>
+        </td>
+        
+        <td>
+          <hr style="border-top-color: rgb(36, 56, 66);" />
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>border-color-brand-primary</code>
+        </th>
+        <td>
+          <code>rgb(107, 123, 132)</code>
+        </td>
+        
+        <td>
+          <hr style="border-top-color: rgb(107, 123, 132);" />
+        </td>
+      
+        <td></td>
+      </tr>
+          </tbody>
+        </table>
+        <hr />
+      </section>
+    
+              
+      <section>
+        <table>
+          
+      <thead>
+        <tr id=background-color>
+          <th scope="col">Background Colors</th>
+          <th scope="col">Value</th>
+          <th scope="col">Examples</th>
+          <th scope="col">Usage</th>
+        </tr>
+      </thead>
+    
+          <tbody>
+            <tr>
+        <th scope="row">
+          <code>background-color-grey-light</code>
+        </th>
+        <td>
+          <code>rgb(230, 230, 230)</code>
+        </td>
+        <td style="background-color: rgb(230, 230, 230); border: 1px solid #f6f6f6;"></td>
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>background-color-grey-lightest</code>
+        </th>
+        <td>
+          <code>rgb(247, 247, 247)</code>
+        </td>
+        <td style="background-color: rgb(247, 247, 247); border: 1px solid #f6f6f6;"></td>
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>background-color-brand-secondary-light</code>
+        </th>
+        <td>
+          <code>rgb(243, 245, 203)</code>
+        </td>
+        <td style="background-color: rgb(243, 245, 203); border: 1px solid #f6f6f6;"></td>
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>background-color-grey-dark</code>
+        </th>
+        <td>
+          <code>rgb(106, 106, 106)</code>
+        </td>
+        <td style="background-color: rgb(106, 106, 106); border: 1px solid #f6f6f6;"></td>
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>background-color-grey</code>
+        </th>
+        <td>
+          <code>rgb(140, 140, 140)</code>
+        </td>
+        <td style="background-color: rgb(140, 140, 140); border: 1px solid #f6f6f6;"></td>
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>background-color-brand-secondary</code>
+        </th>
+        <td>
+          <code>rgb(238, 232, 9)</code>
+        </td>
+        <td style="background-color: rgb(238, 232, 9); border: 1px solid #f6f6f6;"></td>
+        <td>The secondary brand color. This should be lighter in hue, and sufficient contrast with black text.</td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>background-color-brand-accent</code>
+        </th>
+        <td>
+          <code>rgb(26, 40, 47)</code>
+        </td>
+        <td style="background-color: rgb(26, 40, 47); border: 1px solid #f6f6f6;"></td>
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>background-color-black</code>
+        </th>
+        <td>
+          <code>rgb(0, 0, 0)</code>
+        </td>
+        <td style="background-color: rgb(0, 0, 0); border: 1px solid #f6f6f6;"></td>
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>background-color-brand-primary-dark</code>
+        </th>
+        <td>
+          <code>rgb(36, 56, 66)</code>
+        </td>
+        <td style="background-color: rgb(36, 56, 66); border: 1px solid #f6f6f6;"></td>
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>background-color-white</code>
+        </th>
+        <td>
+          <code>rgb(255, 255, 255)</code>
+        </td>
+        <td style="background-color: rgb(255, 255, 255); border: 1px solid #f6f6f6;"></td>
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>background-color-brand-primary</code>
+        </th>
+        <td>
+          <code>rgb(107, 123, 132)</code>
+        </td>
+        <td style="background-color: rgb(107, 123, 132); border: 1px solid #f6f6f6;"></td>
+        <td>The primary brand color. This should be dark in hue, and have sufficient contrast with white text.</td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>background-color-grey-darkest</code>
+        </th>
+        <td>
+          <code>rgb(50, 50, 50)</code>
+        </td>
+        <td style="background-color: rgb(50, 50, 50); border: 1px solid #f6f6f6;"></td>
+        <td></td>
+      </tr>
+          </tbody>
+        </table>
+        <hr />
+      </section>
+    
+              
+              
+              
+              
+              
+              
+      <section>
+        <table>
+          
+      <thead>
+        <tr id=text-color>
+          <th scope="col">Text Colors</th>
+          <th scope="col">Value</th>
+          <th scope="col">Examples</th>
+          <th scope="col">Usage</th>
+        </tr>
+      </thead>
+    
+          <tbody>
+            <tr>
+        <th scope="row">
+          <code>color-brand-secondary</code>
+        </th>
+        <td>
+          <code>rgb(238, 232, 9)</code>
+        </td>
+        
+        <td style="background-color: #f6f6f6; color: rgb(238, 232, 9);">
+          The quick brown fox jumps over the lazy dog.
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>color-black</code>
+        </th>
+        <td>
+          <code>rgb(0, 0, 0)</code>
+        </td>
+        
+        <td style="background-color: #f6f6f6; color: rgb(0, 0, 0);">
+          The quick brown fox jumps over the lazy dog.
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>color-brand-primary-dark</code>
+        </th>
+        <td>
+          <code>rgb(36, 56, 66)</code>
+        </td>
+        
+        <td style="background-color: #f6f6f6; color: rgb(36, 56, 66);">
+          The quick brown fox jumps over the lazy dog.
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>color-white</code>
+        </th>
+        <td>
+          <code>rgb(255, 255, 255)</code>
+        </td>
+        
+        <td style="background-color: #f6f6f6; color: rgb(255, 255, 255);">
+          The quick brown fox jumps over the lazy dog.
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>color-brand-primary</code>
+        </th>
+        <td>
+          <code>rgb(107, 123, 132)</code>
+        </td>
+        
+        <td style="background-color: #f6f6f6; color: rgb(107, 123, 132);">
+          The quick brown fox jumps over the lazy dog.
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>color-grey-light</code>
+        </th>
+        <td>
+          <code>rgb(230, 230, 230)</code>
+        </td>
+        
+        <td style="background-color: #f6f6f6; color: rgb(230, 230, 230);">
+          The quick brown fox jumps over the lazy dog.
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>color-brand-secondary-light</code>
+        </th>
+        <td>
+          <code>rgb(243, 245, 203)</code>
+        </td>
+        
+        <td style="background-color: #f6f6f6; color: rgb(243, 245, 203);">
+          The quick brown fox jumps over the lazy dog.
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>color-grey-dark</code>
+        </th>
+        <td>
+          <code>rgb(106, 106, 106)</code>
+        </td>
+        
+        <td style="background-color: #f6f6f6; color: rgb(106, 106, 106);">
+          The quick brown fox jumps over the lazy dog.
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>color-grey</code>
+        </th>
+        <td>
+          <code>rgb(140, 140, 140)</code>
+        </td>
+        
+        <td style="background-color: #f6f6f6; color: rgb(140, 140, 140);">
+          The quick brown fox jumps over the lazy dog.
+        </td>
+      
+        <td></td>
+      </tr>
+    
+      <tr>
+        <th scope="row">
+          <code>color-brand-accent</code>
+        </th>
+        <td>
+          <code>rgb(243, 112, 33)</code>
+        </td>
+        
+        <td style="background-color: #f6f6f6; color: rgb(243, 112, 33);">
+          The quick brown fox jumps over the lazy dog.
+        </td>
+      
+        <td></td>
+      </tr>
+          </tbody>
+        </table>
+        <hr />
+      </section>
+    
+              
+              
+              
+            </main>
+          </div>
+        </body>
+      </html>
+