diff --git a/webcompat/static/css/development/layout/body.css b/webcompat/static/css/development/layout/body.css
index 06f3748fb..a51adb5f1 100644
--- a/webcompat/static/css/development/layout/body.css
+++ b/webcompat/static/css/development/layout/body.css
@@ -82,20 +82,7 @@ html {
 }
 
 /*----------Global H Styles----------*/
-h1 {
-  font-size: 3.5em;
-  font-weight: 700;
-}
-h2 {
-  font-size: 2em;
-  font-weight: 600;
-}
-h3 {
-  font-size: 1.5em;
-}
-h4 {
-  font-size: 1.25em;
-}
+
 p {
   font-size: 1em;
 }
diff --git a/webcompat/static/css/development/main.css b/webcompat/static/css/development/main.css
index bbe470bfa..9af531784 100644
--- a/webcompat/static/css/development/main.css
+++ b/webcompat/static/css/development/main.css
@@ -29,6 +29,8 @@
 @import "components/filter.css";
 @import "components/pagination.css";
 @import "components/labels.css";
+@import "components/title.css";
+
 /*----------Layout----------*/
 @import "layout/body.css";
 @import "layout/utilities.css";
diff --git a/webcompat/static/css/development/page/issue-list.css b/webcompat/static/css/development/page/issue-list.css
index d34683ee3..b82a73256 100644
--- a/webcompat/static/css/development/page/issue-list.css
+++ b/webcompat/static/css/development/page/issue-list.css
@@ -6,9 +6,7 @@
   font-size:var(--base-font-size);
 }
 /* Main page title */
-.IssueList-title {
-  font-size: 2em;
-}
+.IssueList-title {}
 /*Search issues */
 .IssueList-search {
   background-color:#F7F7F7;
diff --git a/webcompat/static/css/development/page/static.css b/webcompat/static/css/development/page/static.css
index 0bee88666..fa0ad4cf0 100644
--- a/webcompat/static/css/development/page/static.css
+++ b/webcompat/static/css/development/page/static.css
@@ -2,13 +2,6 @@
 .page {
   background-color: #fff;
 }
-.page h2 {
-    margin-bottom: 1em;
-}
-.page h4 {
-    margin: 0.75em 0 1em;
-    font-weight: 700;
-}
 .page p {
   line-height: 150%;
   margin-bottom: 1em;
diff --git a/webcompat/templates/about.html b/webcompat/templates/about.html
index 092212651..d6a4dec81 100644
--- a/webcompat/templates/about.html
+++ b/webcompat/templates/about.html
@@ -3,15 +3,15 @@
 <div class="page page--about about">
 {% include "shared/nav.html" %}
   <main class="wc-content wc-content--body" role="main">
-    <h2>About</h2>
-    <h3>Webcompat.com is developed by volunteers and supported by Mozilla. This site is an <span class="wc-bold" style="color:grey">open invitation for all web users, developers and browser vendors</span> to get involved in the web compatibility effort. Our goal is to make it easy to report and view problems for any part of the web.</h3>
+    <h2 class="wc-Title--l">About</h2>
+    <h3 class="wc-Title--m">Webcompat.com is developed by volunteers and supported by Mozilla. This site is an <span class="wc-bold" style="color:grey">open invitation for all web users, developers and browser vendors</span> to get involved in the web compatibility effort. Our goal is to make it easy to report and view problems for any part of the web.</h3>
     <div class="u-textCenter about_media">
       <img class="u-image" src="../img/about.png" alt="About logo" />
     </div>
-    <h4>What is Web Compatibility?</h4>
+    <h4 class="wc-Title--s">What is Web Compatibility?</h4>
     <p>Web compatibility is about making sure web sites work consistently across all browsers and devices.</p>
     <p>Sometimes, sites have bugs or policies that prevent them from working well in every browser. We work to help web developers and site owners identify and fix such issues.</p>
-    <h4>Web compatibility issues usually follow a three part life cycle:</h4>
+    <h4 class="wc-Title--s ">Web compatibility issues usually follow a three part life cycle:</h4>
     <div class="about_bug about_bug--reporting">
       <strong class="about_bug_label">Bug Reporting</strong>: Finding and reporting compatibility issues around the web. This is the first and most critical part of the process. We all run into compatibility issues when using the web. Most people do not know how or where to report these issues. Webcompat.com make the process or reporting issues simple.
     </div>
diff --git a/webcompat/templates/browse-issues.html b/webcompat/templates/browse-issues.html
index 77cf64805..b20af65dd 100644
--- a/webcompat/templates/browse-issues.html
+++ b/webcompat/templates/browse-issues.html
@@ -1,6 +1,6 @@
 <div id="browse-issues-wrapper">
   <div class="wc-content" id="browse-issues">
-    <h2>Browse Issues</h2>
+    <h2 class="wc-Title--l">Browse Issues</h2>
     <ul class="r-ResetList u-inlineBlock">
       <li class="IssueItem IssueItem--list IssueItem--untriaged">
         <a href="{{ url_for('show_issues') }}?untriaged=1">Untriaged</a>
diff --git a/webcompat/templates/contributors.html b/webcompat/templates/contributors.html
index e1bb52f0b..18fc4f43a 100644
--- a/webcompat/templates/contributors.html
+++ b/webcompat/templates/contributors.html
@@ -6,7 +6,7 @@
   <div class="wc-Hero wc-Hero--contributors">
     <div class="wc-content">
       <div class="wc-Hero-section wc-Hero-section--left wc-Hero-section--contributors">
-        <h1 class="wc-Hero-title">Welcome aboard!<br/>Get started below...</h1>
+        <h1 class="wc-Hero-title wc-Title--xl">Welcome aboard!<br/>Get started below...</h1>
       </div>
       <div class="wc-Hero-section wc-Hero-section--right">
         <div class="wc-Hero-img is-active">{% include "shared/LightbulbwithBug.html" %}</div>
diff --git a/webcompat/templates/index.html b/webcompat/templates/index.html
index cbd1dfea9..1da13c2de 100644
--- a/webcompat/templates/index.html
+++ b/webcompat/templates/index.html
@@ -5,7 +5,7 @@
 <div class="wc-Hero">
   <div class="wc-content">
     <div class="wc-Hero-section wc-Hero-section--left wc-Hero-section--home ">
-      <h1 class="wc-Hero-title">Bug reporting <br>for the internet.</h1>
+      <h1 class="wc-Hero-title wc-Title--xl">Bug reporting <br>for the internet.</h1>
       <a id="report-bug" class="wc-Hero-link closed" href="{{ url_for("index") }}">Report bug<span class="wc-Hero-link-icon icon icon-arrow-right"></span></a>
     </div>
     <div class="wc-Hero-section wc-Hero-section--right">
@@ -15,7 +15,7 @@ <h1 class="wc-Hero-title">Bug reporting <br>for the internet.</h1>
 </div>
 {% include "form.html" %}
   <div id="howitworks" class="wc-content">
-    <h2>How It Works</h2>
+    <h2 class="wc-Title--l">How It Works</h2>
     <div class="Threesteps">
       <div class="r-Grid r-Grid--withGutter">
         <div class="r-Grid-cell r-all--4of12 r-maxM--12of12">
diff --git a/webcompat/templates/issue-list.html b/webcompat/templates/issue-list.html
index a45008a3f..ee6472074 100644
--- a/webcompat/templates/issue-list.html
+++ b/webcompat/templates/issue-list.html
@@ -6,7 +6,7 @@
     <div class="wc-content wc-content--body js-issuelist-filter">
       <script type="text/template" id="issuelist-filter-tmpl">
       <!-- Temporary Header -->
-      <h1 class="IssueList-title wc-margin-bottom">Issues</h1>
+      <h1 class="IssueList-title wc-Title--l">Issues</h1>
       <div class="Dropdown Dropdown--large js-dropdown-wrapper"></div>
       <div>
         <button type="button" class="wc-Filter wc-Filter--untriaged" data-filter="untriaged">
diff --git a/webcompat/templates/issue.html b/webcompat/templates/issue.html
index 4f2ec520f..eca546361 100644
--- a/webcompat/templates/issue.html
+++ b/webcompat/templates/issue.html
@@ -3,7 +3,7 @@
   <div class="page page--issue">
   {% include "shared/nav.html" %}
     <main class="wc-content wc-content--body Issue" role="main">
-      <h1 class="Issue-title">
+      <h1 class="Issue-title wc-Title--l">
       <script type="text/template" id="title-tmpl">
         <a class="Issue-back" href="{{ url_for("show_issues") }}" title="All issues">
 		  <span class="wc-sronly">All Issues</span>
diff --git a/webcompat/templates/privacy.html b/webcompat/templates/privacy.html
index 229014afb..e0eda5975 100644
--- a/webcompat/templates/privacy.html
+++ b/webcompat/templates/privacy.html
@@ -3,21 +3,21 @@
 <div class="page page--privacy">
 {% include "shared/nav.html" %}
   <div class="wc-content wc-content--body" role="main">
-    <h2>Webcompat.com Privacy Policy</h2>
+    <h2 class="wc-Title--l">Webcompat.com Privacy Policy</h2>
     <small>Last Updated: December 4, 2014</small>
-    <h4>About Us</h4>
+    <h4 class="wc-Title--s">About Us</h4>
     <p><a href="http://www.webcompat.com">Webcompat.com</a> allows you to report web compatibility issues though a simple webform. Volunteers view the reports, identify solutions, and share the reports and solutions with the website admins. For more details see our <a href="about">About page</a>.</p>
-    <h2>Public Reports</h2>
+    <h2 class="wc-Title--s">Public Reports</h2>
     <p>All reports are publicly accessible. Please do not include any confidential or personal information in the content of your report.</p>
     <p>The User Agent HTTP header that your browser sends will be recorded in the bug report, if you choose to report a bug, but is hidden by default.</p>
-    <h4>Reporting Anonymously</h4>
+    <h4 class="wc-Title--s">Reporting Anonymously</h4>
     <p>If you choose the anonymous option, the only information that we’ll receive is the content of your report.</p>
-    <h2>Reporting via GitHub</h2>
+    <h2 class="wc-Title--s">Reporting via GitHub</h2>
     <p>If you choose the GitHub option, webcompat.com will receive your GitHub username and avatar.  You can revoke our access to this information at any time from the <a href="https://github.com/settings/applications">"Applications" section of your profile page</a>.</p>
-    <h2>Cookies &amp; Analytics</h2>
+    <h2 class="wc-Title--s">Cookies &amp; Analytics</h2>
     <p>If you log into our site using your GitHub user account, webcompat.com will use cookies to record your session information.  The cookie will expire when the session ends, i.e., when you click "logout".</p>
     <p>Webcompat.com also uses Google Analytics to track usage statistics.</p>
-    <h2>Contact Us</h2>
+    <h2 class="wc-Title--s">Contact Us</h2>
     <p>You can <a href="https://twitter.com/webcompat">find us on Twitter</a> or on the <a href="https://lists.mozilla.org/listinfo/compatibility">public mailing list compatibility@lists.mozilla.org</a> (<a href="https://groups.google.com/forum/#!forum/mozilla.compatibility">archive</a>).  These are public forums, so please minimize any personal information you choose to share.</p>
   </main>
 </div>