break type into its own scss file

components.html

@@ -289,14 +289,24 @@ base_url: "../"
     <p class="component-description">Use headings and paragraphs to title and describe sections of your app.</p>
 
     <div class="component-example component-example-fullbleed">
-      <h1>Heading</h1>
+      <h1>h1. Heading</h1>
+      <h2>h2. Heading</h2>
+      <h3>h3. Heading</h3>
+      <h4>h4. Heading</h4>
+      <h5>h5. Heading</h5>
+      <h6>h6. Heading</h6>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco.</p>
     </div>
 
 {% highlight html %}
-<h1>Heading</h1>
+<h1>h1. Heading</h1>
+<h2>h2. Heading</h2>
+<h3>h3. Heading</h3>
+<h4>h4. Heading</h4>
+<h5>h5. Heading</h5>
+<h6>h6. Heading</h6>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco.</p>

dist/ratchet.css

@@ -257,15 +257,6 @@ strong {
   font-weight: 500;
 }
 
-h1, h2, h3, h4, h5, h6, p {
-  margin: 10px 15px;
-  font-size: 14px;
-}
-
-p {
-  color: #777;
-}
-
 .content {
   position: fixed;
   top: 0;
@@ -302,6 +293,41 @@ p {
   float: right;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  margin: 10px 15px;
+  line-height: 1;
+}
+
+h1, .h1 {
+  font-size: 36px;
+}
+
+h2, .h2 {
+  font-size: 30px;
+}
+
+h3, .h3 {
+  font-size: 24px;
+}
+
+h4, .h4 {
+  font-size: 18px;
+}
+
+h5, .h5 {
+  font-size: 14px;
+}
+
+h6, .h6 {
+  font-size: 12px;
+}
+
+p {
+  margin: 10px 15px;
+  font-size: 14px;
+  color: #777;
+}
+
 .bar {
   position: fixed;
   right: 0;

lib/sass/base.scss

@@ -28,15 +28,6 @@ strong {
   font-weight: $font-weight;
 }
 
-// Typography
-h1, h2, h3, h4, h5, h6, p {
-  margin: 10px 15px;
-  font-size: 14px;
-}
-p {
-  color: #777;
-}
-
 // Wrapper to be used around all content not in .bar-title and .bar-tab
 .content {
   position: fixed;

lib/sass/ratchet.scss

@@ -8,6 +8,7 @@
 // Normalize & Base CSS
 @import "normalize.scss";
 @import "base.scss";
+@import "type.scss";
 
 // Components
 @import "bars.scss";