diff --git a/ghost/admin/app/styles/components/badges.css b/ghost/admin/app/styles/components/badges.css
index 202f6f4eee..c03f6e739e 100644
--- a/ghost/admin/app/styles/components/badges.css
+++ b/ghost/admin/app/styles/components/badges.css
@@ -1,74 +1,53 @@
 /* Badges
 /* ---------------------------------------------------------- */
 
-.badge {
+.gh-badge {
     display: inline-block;
-    padding: 2px 4px;
-    min-width: 10px;
-    background-color: #777;
-    border-radius: 10px;
-    box-shadow: 0 0 0 1px #777;
+    padding: 2px 4px 3px;
+    border: color(var(--green) blackness(+8%)) 1px solid;
     color: #fff;
-    vertical-align: baseline;
+    font-size: 0.8em;
+    line-height: 1em;
+    font-weight: 400;
     text-align: center;
+    text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
     white-space: nowrap;
-    font-size: 1rem;
-    line-height: 1;
-    font-weight: inherit;
+    user-select: none;
+    background: linear-gradient(
+    color(var(--green) whiteness(+4%)),
+    color(var(--green) blackness(+4%))
+    );
+    border-radius: 3px;
 }
 
-.badge:empty {
-    display: none;
+.gh-badge-blue {
+    border: color(var(--blue) blackness(+8%)) 1px solid;
+    background: linear-gradient(
+    color(var(--blue) whiteness(+10%)),
+    color(var(--blue) blackness(+4%))
+    );
 }
 
-.btn .badge {
-    position: relative;
-    top: -1px;
+.gh-badge-red {
+    border: color(var(--red) blackness(+8%)) 1px solid;
+    background: linear-gradient(
+    color(var(--red) whiteness(+10%)),
+    color(var(--red) blackness(+4%))
+    );
 }
 
-.btn-xs .badge {
-    top: 0;
-    padding: 1px 5px;
+.gh-badge-black {
+    border: color(var(--darkgrey) blackness(+8%)) 1px solid;
+    background: linear-gradient(
+    color(var(--darkgrey) whiteness(+10%)),
+    color(var(--darkgrey) blackness(+4%))
+    );
 }
 
-p .badge {
-    position: relative;
-    top: -2px;
-    margin-left: -1px;
-    padding: 0 4px 3px;
-}
-
-.nav-pills > li > a > .badge {
-    margin-left: 3px;
-}
-
-.nav-item .badge {
-    margin-top: -5px;
-    margin-left: 3px;
-}
-
-a.badge:hover,
-a.badge:focus {
-    color: #fff;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-
-/* Colour variations
-/* ---------------------------------------------------------- */
-
-.badge.badge-blue {
-    background-color: var(--blue);
-    box-shadow: 0 0 0 1px var(--blue);
-}
-
-.badge.badge-green {
-    background-color: var(--green);
-    box-shadow: 0 0 0 1px var(--green);
-}
-
-.badge.badge-red {
-    background-color: var(--red);
-    box-shadow: 0 0 0 1px var(--red);
+.gh-badge-outline {
+    border-color: color(var(--midgrey) l(+35%));
+    color: color(var(--midgrey) l(+25%));
+    font-weight: 400;
+    background: transparent;
+    box-shadow: none;
 }
diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css
index 197cc0caa7..bff503729b 100644
--- a/ghost/admin/app/styles/layouts/content.css
+++ b/ghost/admin/app/styles/layouts/content.css
@@ -3,53 +3,45 @@
 /* Header
 /* ---------------------------------------------------------- */
 
-.gh-content-view-container .view-header {
-    border-bottom: none;
-}
-
-.basic-filter {
-    margin-top: 0.5em;
-    border-bottom: #dfe1e3 1px solid;
-}
-
-.basic-filter ul {
+.gh-contentfilter {
     display: flex;
-    flex-direction: row;
-    margin-bottom: 0;
-    padding-left: 0.7em;
-}
-
-.basic-filter li {
+    margin: 2vw 0 1vw;
+    padding: 0;
+    border-top: color(var(--lightgrey)) 1px solid;
     list-style: none;
+}
+
+.gh-contentfilter li {
+    position: relative;
     display: inline-block;
-    margin-bottom: 0;
-    padding: 0 0.5em 10px 0.5em;
+    margin: 0 25px 0 0;
 }
 
-.basic-filter li.active {
-    border-bottom: #dfe1e3 3px solid ;
+.gh-contentfilter li.active:after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 1px;
+    background: var(--darkgrey);
+    position: absolute;
+    top: -1px;
+    opacity: 0.5;
 }
 
-.basic-filter li a {
+.gh-contentfilter li a {
+    display: block;
+    padding: 13px 1px 0;
     color: var(--midgrey);
+    font-size: 1.5rem;
+    font-weight: 300;
+    letter-spacing: 0.3px;
 }
 
-.basic-filter li a.active {
-    font-weight: bold;
+.gh-contentfilter a.active {
+    font-weight: 500;
     color: var(--darkgrey);
 }
 
-@media (max-width: 500px) {
-    .basic-filter ul {
-        padding-left: 8px !important;
-    }
-}
-
-@media (max-width: 800px) {
-    .basic-filter ul {
-        padding-left: 15px;
-    }
-}
 
 /* Content List
 /* ---------------------------------------------------------- */
@@ -60,7 +52,7 @@
 }
 
 .content-list ol {
-    margin: 20px 4vw;
+    margin: 0;
     padding: 0;
     list-style: none;
 }
@@ -68,87 +60,50 @@
 .gh-posts-list-item {
     position: relative;
     margin: 0;
-    padding: 0;
-    border-bottom: #dfe1e3 1px solid;
-}
-
-.gh-posts-list-item a {
-    display: block;
-    padding: 19px 25px 22px 20px;
-    color: rgba(0, 0, 0, 0.5);
+    padding: 24px 0 25px 0;
+    border-bottom: color(var(--lightgrey)) 1px solid;
 }
 
 .gh-posts-list-item a:hover {
     text-decoration: none;
 }
 
-.gh-posts-list-item .entry-title {
-    margin: 0 0 0.2em 0;
-    font-size: 1.5rem;
-    line-height: 1.3em;
-    font-weight: normal;
+.gh-content-entry-title {
+    margin: 0 0 3px 0;
+    font-size: 2.2rem;
+    font-weight: 600;
+    letter-spacing: 0.4px;
+}
+
+.gh-content-entry-title a {
+    color: color(var(--darkgrey) l(+3%));
 }
 
 .gh-posts-list-item p {
-    margin: 0 0 1em 0;
-    font-size: 0.8em;
-    line-height: 1.5em;
-}
-
-.gh-posts-list-item .entry-meta {
-    position: relative;
-    margin-top: 7px;
-    line-height: 18px;
-}
-
-.gh-posts-list-item .avatar {
-    position: relative;
-    float: left;
-    margin: 1px 10px 0px 0;
-    width: 18px;
-    height: 18px;
-    background-position: center center;
-    background-size: cover;
-    border-radius: 18px;
-}
-
-.gh-posts-list-item .avatar img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-}
-
-.gh-posts-list-item .status,
-.gh-posts-list-item .author {
-    font-size: 1.3rem;
+    margin: 0;
+    font-size: 1.6rem;
     font-weight: 300;
-    transition: opacity 0.15s linear;
 }
 
-.gh-posts-list-item .avatar:hover + .author + .status {
-    opacity: 0;
+
+.gh-content-entry-meta {
+    margin: 10px 0 0 0;
+    font-size: 1.3rem;
+    color: var(--midgrey);
+    font-weight: 200;
+    letter-spacing: 0.3px;
 }
 
-.gh-posts-list-item .avatar:hover + .author {
-    opacity: 1;
+.gh-content-entry-meta .gh-badge {
+    margin-right: 3px;
 }
 
-.gh-posts-list-item .author {
-    position: absolute;
-    bottom: 0;
-    left: 28px;
-    opacity: 0;
+.gh-content-status-published {
+    color: var(--darkgrey);
 }
 
-.gh-posts-list-item .status .draft {
-    color: var(--red);
-}
-
-.gh-posts-list-item .status .scheduled {
-    color: var(--green);
+.gh-content-entry-author {
+    color: var(--darkgrey);
 }
 
 @media (max-width: 400px) {
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index 88b5383251..cb482f8614 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -49,12 +49,11 @@ body > .ember-view:not(.liquid-target-container) {
 .gh-nav {
     position: relative;
     z-index: 800;
-    flex: 0 0 205px;
+    flex: 0 0 280px;
     display: flex;
     flex-direction: column;
     min-width: 0; /* TODO: This is a bullshit Firefox hack */
-    border-right: #dfe1e3 1px solid;
-    background: #f5f7f8;
+    background: color(var(--lightgrey) l(+4%));
     transform: translateX(0);
 }
 
@@ -216,7 +215,7 @@ body > .ember-view:not(.liquid-target-container) {
     display: flex;
     align-items: center;
     height: 40px;
-    border-top: #dfe1e3 1px solid;
+    padding-bottom: 5px;
     color: var(--midgrey);
 }
 
@@ -458,6 +457,33 @@ body > .ember-view:not(.liquid-target-container) {
     flex-direction: column;
 }
 
+.gh-canvas {
+    flex-grow: 1;
+    padding: 2.9vw 4vw 3vw 4vw;
+    margin: 0 auto;
+}
+
+.gh-canvas-header {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.gh-canvas-title {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 3.4rem;
+    line-height: 1.2em;
+    font-weight: 700;
+    letter-spacing: 0.4px;
+}
+
 .view-header {
     flex-shrink: 0;
     display: flex;
diff --git a/ghost/admin/app/styles/patterns/global.css b/ghost/admin/app/styles/patterns/global.css
index 2b182ef1cb..b0aea13f6c 100644
--- a/ghost/admin/app/styles/patterns/global.css
+++ b/ghost/admin/app/styles/patterns/global.css
@@ -9,7 +9,7 @@
     /* Colours */
     --darkgrey: #343f44;
     --midgrey: #738a94;
-    --lightgrey: #e2edf2;
+    --lightgrey: #e5eff5;
     --blue: #3eb0ef;
     --red: #f05230;
     --orange: #fecd35;
diff --git a/ghost/admin/app/templates/-posts-header.hbs b/ghost/admin/app/templates/-posts-header.hbs
index 9cf766e80e..5f9755e55a 100644
--- a/ghost/admin/app/templates/-posts-header.hbs
+++ b/ghost/admin/app/templates/-posts-header.hbs
@@ -1,26 +1,24 @@
-<header class="view-header">
-    {{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Your stories</span>{{/gh-view-title}}
+<header class="gh-canvas-header">
+    <h2 class="gh-canvas-title">Your stories</h2>
     <section class="view-actions">
         {{link-to "New Story" "editor.new" class="btn btn-green" title="New Story" data-test-new-post-button=true}}
     </section>
 </header>
 
-<section class="basic-filter">
-    <ul>
-        {{#active-link}}
-            {{link-to "All" "posts.index" (query-params type=null) data-test-all-filter-link=true}}
-        {{/active-link}}
-        {{#active-link}}
-            {{link-to "Drafts" "posts.index" (query-params type="draft") data-test-drafts-filter-link=true}}
-        {{/active-link}}
-        {{#active-link}}
-            {{link-to "Published" "posts.index" (query-params type="published") data-test-published-filter-link=true}}
-        {{/active-link}}
-        {{#active-link}}
-            {{link-to "Scheduled" "posts.index" (query-params type="scheduled") data-test-scheduled-filter-link=true}}
-        {{/active-link}}
-        {{#active-link}}
-            {{link-to "Pages" "posts.index" (query-params type="page") data-test-pages-filter-link=true}}
-        {{/active-link}}
-    </ul>
-</section>
+<ul class="gh-contentfilter">
+    {{#active-link}}
+        {{link-to "All" "posts.index" (query-params type=null) data-test-all-filter-link=true}}
+    {{/active-link}}
+    {{#active-link}}
+        {{link-to "Drafts" "posts.index" (query-params type="draft") data-test-drafts-filter-link=true}}
+    {{/active-link}}
+    {{#active-link}}
+        {{link-to "Published" "posts.index" (query-params type="published") data-test-published-filter-link=true}}
+    {{/active-link}}
+    {{#active-link}}
+        {{link-to "Scheduled" "posts.index" (query-params type="scheduled") data-test-scheduled-filter-link=true}}
+    {{/active-link}}
+    {{#active-link}}
+        {{link-to "Pages" "posts.index" (query-params type="page") data-test-pages-filter-link=true}}
+    {{/active-link}}
+</ul>
diff --git a/ghost/admin/app/templates/components/gh-posts-list-item.hbs b/ghost/admin/app/templates/components/gh-posts-list-item.hbs
index 3cbf6dd627..ff09886dd9 100644
--- a/ghost/admin/app/templates/components/gh-posts-list-item.hbs
+++ b/ghost/admin/app/templates/components/gh-posts-list-item.hbs
@@ -1,32 +1,22 @@
-{{#link-to "editor.edit" post.id class="permalink" title="Edit this post"}}
-    <h3 class="entry-title">{{post.title}}</h3>
-    <p>{{subText}}</p>
+<h3 class="gh-content-entry-title">{{#link-to "editor.edit" post.id class="permalink" title="Edit this post"}}{{post.title}}{{/link-to}}</h3>
+<p>{{subText}}</p>
 
-    <section class="entry-meta">
-        <span class="status">
-            {{#if isPublished}}
-                {{#if post.page}}
-                    <span class="page">Page</span>
-                {{else}}
-                    <time datetime="{{post.publishedAtUTC}}" class="date published">
-                        Published {{gh-format-timeago post.publishedAtUTC}}.
-                    </time>
-                {{/if}}
+<section class="gh-content-entry-meta">
+        {{#if isPublished}}
+            {{#if post.page}}
+                <span class="gh-content-status-draft gh-badge gh-badge-black">Page</span>
             {{else}}
-                {{#if isScheduled}}
-                    <span class="scheduled">Scheduled</span>
-                    <span>&ndash;
-                        <time datetime="{{post.publishedAtUTC}}" class-="date scheduled">
-                            {{gh-format-time-scheduled post.publishedAtUTC blogTimezone}}
-                        </time>
-                    </span>
-                {{else}}
-                    <span class="draft">Draft</span>
-                {{/if}}
+                <span class="gh-content-status-published">Published</span>
             {{/if}}
+        {{else}}
+            {{#if isScheduled}}
+                <span class="gh-content-status-draft gh-badge">Scheduled</span>
+            {{else}}
+                <span class="gh-content-status-draft gh-badge gh-badge-red">Draft</span>
+            {{/if}}
+        {{/if}}
 
-            Last edited {{gh-format-timeago post.updatedAtUTC}}
-            &ndash; by {{authorName}}
-        </span>
-    </section>
-{{/link-to}}
+        by <span class="gh-content-entry-author">{{authorName}}</span> &mdash;
+        Last edited {{gh-format-timeago post.updatedAtUTC}}
+
+</section>
diff --git a/ghost/admin/app/templates/posts.hbs b/ghost/admin/app/templates/posts.hbs
index ef6a036a00..ee209c6e00 100644
--- a/ghost/admin/app/templates/posts.hbs
+++ b/ghost/admin/app/templates/posts.hbs
@@ -1,4 +1,4 @@
-<section class="gh-view gh-content-view-container">
+<section class="gh-canvas">
     {{partial "posts-header"}}
 
     {{outlet}}