diff --git a/public/style.css b/public/style.css
index 25fa51c..f1cdae2 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,2 +1,42 @@
 body {
+  margin: 0;
+  padding: 0;
+  font-family: Georgia, sans-serif;
+}
+
+h1, h2, h3 {
+  padding: 0;
+  margin: 0;
+}
+
+header {
+  margin: 0;
+  padding: 24pt;
+  border: 1px solid black;
+  color: #fff;
+  background: #000;
+  font-size: 200%;
+  text-align: center;
+  box-shadow: 0px 2px 6px #888;
+}
+
+section {
+  padding-left: 64pt;
+  padding-top: 16pt;
+}
+section h1 {
+  font-size: 150%;
+}
+
+article {
+  width: 60em;
+}
+
+section#toc {
+  background: #ccc;
+  margin-top: 32pt;
+}
+section#toc h1 {
+}
+section#toc h2 {
 }
diff --git a/views/home.erb b/views/home.erb
index 4950eb5..08707bc 100644
--- a/views/home.erb
+++ b/views/home.erb
@@ -1,16 +1,26 @@
-<header>The Twelve-Factor App</header>
+<header>
+  <h1>The Twelve-Factor App</h1>
+</header>
+
 <div id="main" role="main">
   <section id="abstract">
-    <%= render_markdown('abstract') %>
+    <article>
+      <%= render_markdown('abstract') %>
+    </article>
   </section>
 
   <section id="who">
-    <%= render_markdown('who') %>
+    <article>
+      <%= render_markdown('who') %>
+    </article>
   </section>
 
   <section id="toc">
-    <%= render_markdown('toc') %>
+    <article>
+      <%= render_markdown('toc') %>
+    <article>
   </section>
 </div>
+
 <footer>
 </footer>
diff --git a/views/layout.erb b/views/layout.erb
index 12a4c89..fc7bc96 100644
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -10,6 +10,9 @@
   <link rel="shortcut icon" href="/favicon.ico">
 
   <link rel="stylesheet" href="/style.css">
+
+  <script type="text/javascript" src="http://use.typekit.com/rsq7tro.js"></script>
+  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
 </head>
 <body>
 <%= yield %>
