Using dummy app for styleguide

addon/styles/addon.css

@@ -7,3 +7,5 @@
 @import "components/es-header.css";
 @import "components/es-page-header.css";
 @import "components/es-button.css";
+@import "components/es-tabs.css";
+@import "components/es-card.css";

addon/styles/components/es-button.css

@@ -1,7 +1,7 @@
 .es-button {
   background-color: var(--color-ember-orange);
   color: var(--color-light);
-  font-size: var(--text-preset-4);
+  font-size: var(--text-preset-2);
   padding-left: 4.5rem;
   padding-right: 4.5rem;
   padding-top: 1rem;

addon/styles/components/es-card.css

@@ -0,0 +1,9 @@
+.card {
+  border: 1px solid var(--color-gray);
+  border-radius: 4px;
+  margin-bottom: 1em;
+}
+
+.card-content {
+  padding: 1em;
+}

addon/styles/components/es-header.css

@@ -1,6 +1,4 @@
 header.es-header {
-  height: 6rem;
-
   display: flex;
   justify-content: center;
   align-items: center;

addon/styles/components/es-tabs.css

@@ -0,0 +1,27 @@
+.tabs {
+  display: flex;
+  margin-bottom: 1em;
+}
+
+.tabs-item {
+  flex-grow: 1;
+  text-align: center;
+  border-bottom: 2px solid var(--color-gray);
+}
+
+.tabs-link {
+  text-decoration: none;
+  font-size: var(--text-preset-1);
+  font-weight: 600;
+  color: var(--color-muted);
+  display: block;
+  padding: 1em;
+}
+
+.tabs-item--active {
+  border-bottom: 2px solid var(--color-ember-orange);
+}
+
+.tabs-item--active .tabs-link {
+  color: var(--color-ember-orange);
+}

addon/styles/global.css

@@ -1,19 +1,74 @@
 :root {
-  --container-width-large: 64em;
+  --container-width-large: 64rem;
   --color-dark: #1C1E23;
-  --color-light: #FFF;
+  --color-light: #FFFFFF;
+  --color-muted: #F4F6F8;
   --color-ember-orange: #E04E39;
+  --color-gray: #A2A3A8;
+  --text-preset-1: 1rem;
+  --text-preset-2: 1.2rem;
+  --text-preset-3: 1.8rem;
+  --text-preset-4: 2.8rem;
+  --text-preset-5: 3.5rem;
+}
 
-  --text-preset-4: 18pt;
+body, html {
+  margin: 0;
+  padding: 0;
+  font-family: "Source Sans Pro", sans-serif;
+  font-size: 16px;
 }
 
-.container {
-  max-width: var(--container-width-large);
-  margin-left: auto;
-  margin-right: auto;
+p {
+  font-size: 1.2rem;
+  line-height: 1.6;
+  margin: 0 0 1rem 0;
+  font-weight: 300;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 300;
+  margin: 0 0 1.2rem 0;
+}
+
+@media (max-width: 1280px) and (min-width: 421px) {
+  body,
+  html {
+
+  }
+}
+
+@media (max-width: 520px) {
+  body,
+  html {
+
+  }
 }
 
+/* move beyond this point */
+
 .dark {
   background-color: var(--color-dark);
   color: var(--color-light);
 }
+
+.muted {
+  background-color: var(--color-muted);
+}
+
+.container {
+  max-width: var(--container-width-large);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.content-section {
+  padding-top: 4.5rem;
+  padding-bottom: 4.5rem;
+  border: 1px solid #CCC;
+}

addon/styles/typography.css

@@ -25,12 +25,39 @@
        url('/fonts/open-sans-v16-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
 }
 
-body {
-  font-size: 16pt;
-  font-family: "Source Sans Pro", sans-serif;
-  font-weight: 300;
+
+.sans {
+  font-family: 'Open Sans', sans-serif;
 }
 
-h1 {
-  font-weight: 300;
+.bold {
+  font-weight: 800;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.xsmall {
+  font-size: var(--text-preset-1);
+}
+
+.small {
+  font-size: var(--text-preset-2);
+}
+
+.medium {
+  font-size: var(--text-preset-3);
+}
+
+.large {
+  font-size: var(--text-preset-4);
+}
+
+.xlarge {
+  font-size: var(--text-preset-5);
 }
+
+.text-center {
+  text-align: center;
+}

addon/templates/components/es-page-header.hbs

@@ -1,8 +1,8 @@
 <div class="es-page-header" ...attributes>
   <div class="container">
-    <h1 class="es-page-header__title">{{@headline}}</h1>
+    <h1 class="xlarge">{{@headline}}</h1>
 
-    <p class="es-page-header__details">{{@detail}}</p>
+    <p>{{@detail}}</p>
 
     {{yield}}
   </div>