diff --git a/assets/fonts/clanot-bold.otf b/assets/fonts/clanot-bold.otf
new file mode 100644
index 0000000..f4c66e9
Binary files /dev/null and b/assets/fonts/clanot-bold.otf differ
diff --git a/assets/fonts/clanot-medium.otf b/assets/fonts/clanot-medium.otf
new file mode 100644
index 0000000..49f2950
Binary files /dev/null and b/assets/fonts/clanot-medium.otf differ
diff --git a/assets/fonts/clanot-news.otf b/assets/fonts/clanot-news.otf
new file mode 100644
index 0000000..9a8258e
Binary files /dev/null and b/assets/fonts/clanot-news.otf differ
diff --git a/assets/fonts/clanot-thin.otf b/assets/fonts/clanot-thin.otf
new file mode 100644
index 0000000..bc343ff
Binary files /dev/null and b/assets/fonts/clanot-thin.otf differ
diff --git a/package.json b/package.json
index 87bd501..a57df5f 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "live-server": "1.2.0",
     "marked": "0.3.6",
     "postcss-cli": "2.6.0",
+    "postcss-css-variables": "0.6.0",
     "postcss-easy-import": "2.0.0",
     "postcss-nested": "1.0.0",
     "pug": "2.0.0-beta9",
diff --git a/postcss.config.json b/postcss.config.json
index 9664146..fb2dc3b 100644
--- a/postcss.config.json
+++ b/postcss.config.json
@@ -2,6 +2,7 @@
   "use": [
     "postcss-easy-import",
     "postcss-nested",
+    "postcss-css-variables",
     "autoprefixer"
   ],
   "autoprefixer": {
diff --git a/static-pages/index.pug b/static-pages/index.pug
index 441194b..47c043a 100644
--- a/static-pages/index.pug
+++ b/static-pages/index.pug
@@ -4,12 +4,20 @@ block vars
   - var title='Overview'
 
 block content
-  ul
+  .hero-headline
+    | Technology Radar
+    span.hero-headline__alt
+      = ' '
+      | March 2017
+  div
     each quadrant, quadrantName in radar
-      li
-        h4= translate(quadrantName)
-        ul
+      .quadrant-section
+        .quadrant-section__header
+          h4= translate(quadrantName)
+        .quadrant-section__lists
           each radarItem, itemName in quadrant
-            li
+            .quadrant-section__list
               a(href='/' + quadrantName + '/' + itemName + '.html')
                 = radarItem.attributes.title
+                span(class=`badge badge--${radarItem.attributes.ring}`)
+                  = radarItem.attributes.ring
diff --git a/styles/base.css b/styles/base.css
index 780e040..a9516fa 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -1,8 +1,33 @@
+:root {
+  --color-gray-dark: #475157;
+  --color-gray-light: #7D878D;
+  --color-white: #fff;
+  --color-green: #5CB449;
+  --color-orange: #FAA03D;
+  --color-blue: #40A7D1;
+  --color-marine: #688190;
+}
+
+@font-face {
+  font-family: 'DIN';
+  src: url('/assets/fonts/clanot-news.otf');
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: 'DIN';
+  src: url('/assets/fonts/clanot-thin.otf');
+  font-weight: 300;
+}
+
 body {
-  background: #475157;
+  background: var(--color-gray-dark);
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  font-family: 'DIN';
+  font-weight: normal;
+  font-size: 16px;
 
   & h1 {
     color: blue;
diff --git a/styles/components/badge.css b/styles/components/badge.css
new file mode 100644
index 0000000..c8f4a6f
--- /dev/null
+++ b/styles/components/badge.css
@@ -0,0 +1,24 @@
+.badge {
+  color: var(--color-white);
+  display: inline-block;
+  padding: 0 15px;
+  text-transform: uppercase;
+  border-radius: 15px;
+  font-size: 14px;
+  line-height: 30px;
+  height: 30px;
+  overflow: hidden;
+
+  &--adopt {
+    background: var(--color-green);
+  }
+  &--trial {
+    background: var(--color-orange);
+  }
+  &--assess {
+    background: var(--color-blue);
+  }
+  &--hold {
+    background: var(--color-marine);
+  }
+}
diff --git a/styles/components/header.css b/styles/components/header.css
index 04c24f5..0c8d497 100644
--- a/styles/components/header.css
+++ b/styles/components/header.css
@@ -1,3 +1,19 @@
 .header {
-  height: 130px;
+  margin: 40px 0 60px;
+  display: flex;
+  align-items: center;
+
+  &__logo {
+    flex: 1 0 auto;
+    & img {
+      display: block;
+      width: 150px;
+      height: 60px;
+    }
+  }
+
+  &__nav {
+    flex: 0 0 auto;
+    height: 20px;
+  }
 }
diff --git a/styles/components/hero-headline.css b/styles/components/hero-headline.css
new file mode 100644
index 0000000..26b65f4
--- /dev/null
+++ b/styles/components/hero-headline.css
@@ -0,0 +1,9 @@
+.hero-headline {
+  font-size: 30px;
+  font-weight: 300;
+  color: var(--color-white);
+
+  &__alt {
+    color: var(--color-gray-light);
+  }
+}
diff --git a/styles/components/page.css b/styles/components/page.css
index da10fc9..d767a6f 100644
--- a/styles/components/page.css
+++ b/styles/components/page.css
@@ -1,4 +1,5 @@
 .page {
   width: 1200px;
   margin: 0 auto;
+  padding: 0 10px;
 }
diff --git a/styles/components/quadrant-section.css b/styles/components/quadrant-section.css
new file mode 100644
index 0000000..4a7a5b4
--- /dev/null
+++ b/styles/components/quadrant-section.css
@@ -0,0 +1,13 @@
+.quadrant-section {
+  &__header {
+
+  }
+
+  &__lists {
+    display: flex;
+  }
+  
+  &__list {
+    flex: 0 0 20%;
+  }
+}
diff --git a/styles/components/ring-list.css b/styles/components/ring-list.css
new file mode 100644
index 0000000..1f76cb5
--- /dev/null
+++ b/styles/components/ring-list.css
@@ -0,0 +1,10 @@
+.ring-list {
+  &__header {
+    margin-bottom: 10px;
+  }
+  &__item {
+    display: block;
+    color: var(--color-white);
+    margin-bottom: 10px;
+  }
+}
diff --git a/templates/layout.pug b/templates/layout.pug
index 4ea26ba..3f9b496 100644
--- a/templates/layout.pug
+++ b/templates/layout.pug
@@ -6,8 +6,10 @@ html
   body
     .page
       .header
-        a(href='/')
+        a.header__logo(href='/')
           img(src='/assets/logo.svg')
+        .header__nav
+          | How to Use Technology Radar?
 
       block content
       block scripts