diff --git a/_data/metadata.js b/_data/metadata.js
new file mode 100644
index 0000000..0779046
--- /dev/null
+++ b/_data/metadata.js
@@ -0,0 +1,11 @@
+module.exports = {
+	"title": "Jay's Blog",
+	"url": "https://jhankins.dev/",
+	"language": "en",
+	"description": "Jay Hankins is a cloud software engineer.",
+	"author": {
+		"name": "Jay Hankins",
+		"email": "me@jhankins.dev",
+		"url": "https://jhankins.dev/about/"
+	}
+}
diff --git a/_includes/components/nav-bar.webc b/_includes/components/nav-bar.webc
index 2b214b7..c5e7dac 100644
--- a/_includes/components/nav-bar.webc
+++ b/_includes/components/nav-bar.webc
@@ -38,7 +38,7 @@
   }
 
   :focus>.menu__btn-title {
-    box-shadow: inset 0 0 1px 3px #e22d30;
+    box-shadow: inset 0 0 1px 3px var(--main-color);
   }
 
   button:not(:-moz-focusring):focus>.menu__btn-title {
@@ -51,7 +51,7 @@
   }
 
   .js .menu__btn--active {
-    color: #e22d30;
+    color: var(--main-color);
   }
 
   .menu__list {
@@ -60,7 +60,7 @@
   }
 
   .menu__item:hover {
-    background: #e22d30;
+    background: var(--main-color);
   }
 
   .menu__item:first-child {
@@ -68,7 +68,7 @@
   }
 
   .menu__item--active {
-    background: #e22d30;
+    background: var(--main-color);
   }
 
   .menu__link {
@@ -109,7 +109,7 @@
 
   @media screen and (min-width: 767px) {
     .menu {
-      border-bottom: 5px solid #e22d30;
+      border-bottom: 5px solid var(--main-color);
     }
 
     .menu__btn {
diff --git a/_includes/components/post.webc b/_includes/components/post.webc
new file mode 100644
index 0000000..e69de29
diff --git a/_includes/components/site-header.webc b/_includes/components/site-header.webc
index 8f142d2..7cbf7de 100644
--- a/_includes/components/site-header.webc
+++ b/_includes/components/site-header.webc
@@ -1,2 +1,8 @@
-<h1>site-header</h1>
-<h2>subtitle!</h2>
+<style webc:scoped>
+  :host {
+    color: red;
+  }
+</style>
+
+<h1 @text="title">fallback title</h1>
+<h2 @text="subtitle">fallback subtitle</h2>
diff --git a/_includes/css/all.css b/_includes/css/all.css
new file mode 100644
index 0000000..3ba26be
--- /dev/null
+++ b/_includes/css/all.css
@@ -0,0 +1 @@
+@import "vars.css";
diff --git a/_includes/vars.css b/_includes/css/vars.css
similarity index 52%
rename from _includes/vars.css
rename to _includes/css/vars.css
index b9e7a4f..324b2e1 100644
--- a/_includes/vars.css
+++ b/_includes/css/vars.css
@@ -1,4 +1,4 @@
 :root {
-  --main-color: red;
+  --main-color: rgb(16, 111, 243);
   --pane-padding: 5px 42px;
 }
diff --git a/_includes/layouts/base.webc b/_includes/layouts/base.webc
index ca5ed18..9c7c2c3 100644
--- a/_includes/layouts/base.webc
+++ b/_includes/layouts/base.webc
@@ -6,12 +6,13 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title @text="title ? title : metadata.title"></title>
 
   <!--- Uncomment this if you'd like folks to know that you used Eleventy to build your site! --->
   <meta name="generator" :content="eleventy.generator">
 
   <!--- These will be picked up and bundled by eleventy  --->
-  <link rel="stylesheet" href="../vars.css">
+  <link rel="stylesheet" href="../css/vars.css">
 
   <style>
     body {
@@ -26,10 +27,11 @@
     }
 
     .container {
-      width:95%;
+      width: 95%;
       margin: auto;
       background: white;
     }
+
   </style>
 
   <!--- Build and embed the bundles needed for each page --->
@@ -40,7 +42,8 @@
 <body>
   <main id="skip">
     <div class="container">
-      <site-header></site-header>
+      <site-header :@title="metadata.title" @subtitle="plaintext">
+      </site-header>
       <nav-bar></nav-bar>
       <template @raw="content" webc:nokeep></template>
       <site-footer></site-footer>
