diff --git a/core/client/app/html/install1.html b/core/client/app/html/install1.html
index 99eb5338ca..90d6c19003 100644
--- a/core/client/app/html/install1.html
+++ b/core/client/app/html/install1.html
@@ -15,9 +15,9 @@
 <body>
 
 
-<div class="gh-setup">
-    <header class="gh-setup-head">
-        <nav class="gh-setup-nav">
+<div class="gh-flow">
+    <header class="gh-flow-head">
+        <nav class="gh-flow-nav">
             <ol>
                 <li class="current"><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
                 <li class="divider"></li>
@@ -28,14 +28,14 @@
         </nav>
     </header>
 
-    <div class="gh-setup-content-wrap">
-        <section class="gh-setup-content">
+    <div class="gh-flow-content-wrap">
+        <section class="gh-flow-content">
             <header>
                 <h1>Welcome to <strong>Ghost</strong>!</h1>
                 <p>So far there have been <em>542,952</em> Ghost blogs made by people all over the world. Today we’re making yours.</p>
             </header>
 
-            <img class="gh-setup-screenshot" src="file:///Users/John/Sites/Ghost/core/shared/img/install-welcome.png" alt="Ghost screenshot" />
+            <img class="gh-flow-screenshot" src="file:///Users/John/Sites/Ghost/core/shared/img/install-welcome.png" alt="Ghost screenshot" />
 
             <a class="btn btn-green btn-lg" href="#">Create your account <i class="icon-chevron"></i></a>
         </section>
diff --git a/core/client/app/html/install2.html b/core/client/app/html/install2.html
index b6da1c2355..9f1f6a6bfa 100644
--- a/core/client/app/html/install2.html
+++ b/core/client/app/html/install2.html
@@ -15,10 +15,10 @@
 <body>
 
 
-<div class="gh-setup">
-    <header class="gh-setup-head">
-        <nav class="gh-setup-nav">
-            <a class="gh-setup-back" href="#"><i class="icon-chevron-left"></i> Back</a>
+<div class="gh-flow">
+    <header class="gh-flow-head">
+        <nav class="gh-flow-nav">
+            <a class="gh-flow-back" href="#"><i class="icon-chevron-left"></i> Back</a>
             <ol>
                 <li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
                 <li class="divider"></li>
@@ -29,13 +29,13 @@
         </nav>
     </header>
 
-    <div class="gh-setup-content-wrap">
-        <section class="gh-setup-content">
+    <div class="gh-flow-content-wrap">
+        <section class="gh-flow-content">
             <header>
                 <h1>Create your account</h1>
             </header>
 
-            <form class="gh-setup-create">
+            <form class="gh-flow-create">
                 <figure class="account-image">
                     <div  id="account-image" class="img"  style="background-image: url(http://www.gravatar.com/avatar/75e958a6674a7d68fe0d575fb235116c?d=404&s=250)">
                         <!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->
@@ -46,19 +46,19 @@
                 <div class="form-group">
                     <label for="email-address">Email address</label>
                     <span class="input-icon icon-mail">
-                        <input id="email-address" class="ember-view ember-text-field" type="email" placeholder="Eg. john@example.com">
+                        <input id="email-address" class="ember-view ember-text-field gh-input" type="email" placeholder="Eg. john@example.com">
                     </span>
                 </div>
                 <div class="form-group">
                     <label for="full-name">Full name</label>
                     <span class="input-icon icon-user">
-                        <input id="full-name" class="ember-view ember-text-field" type="text" placeholder="Eg. John Smith">
+                        <input id="full-name" class="ember-view ember-text-field gh-input" type="text" placeholder="Eg. John Smith">
                     </span>
                 </div>
                 <div class="form-group">
                     <label for="password">Password</label>
                     <span class="input-icon icon-lock">
-                        <input id="password" class="ember-view ember-text-field" type="password" placeholder="At least 7 characters">
+                        <input id="password" class="ember-view ember-text-field gh-input" type="password" placeholder="At least 7 characters">
                         <div class="pw-strength">
                             <div class="pw-strength-dot"></div>
                             <div class="pw-strength-dot"></div>
@@ -71,7 +71,7 @@
                 <div class="form-group">
                     <label for="blog-title">Blog title</label>
                     <span class="input-icon icon-content">
-                        <input id="blog-title" class="ember-view ember-text-field" type="text" placeholder="Eg. The Daily Awesome">
+                        <input id="blog-title" class="ember-view ember-text-field gh-input" type="text" placeholder="Eg. The Daily Awesome">
                     </span>
                 </div>
             </form>
diff --git a/core/client/app/html/install3.html b/core/client/app/html/install3.html
index aa7820de09..c9e16b5c01 100644
--- a/core/client/app/html/install3.html
+++ b/core/client/app/html/install3.html
@@ -15,10 +15,10 @@
 <body>
 
 
-<div class="gh-setup">
-    <header class="gh-setup-head">
-        <nav class="gh-setup-nav">
-            <a class="gh-setup-back" href="#"><i class="icon-chevron-left"></i> Back</a>
+<div class="gh-flow">
+    <header class="gh-flow-head">
+        <nav class="gh-flow-nav">
+            <a class="gh-flow-back" href="#"><i class="icon-chevron-left"></i> Back</a>
             <ol>
                 <li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
                 <li class="divider"></li>
@@ -29,13 +29,13 @@
         </nav>
     </header>
 
-    <div class="gh-setup-content-wrap">
-        <section class="gh-setup-content">
+    <div class="gh-flow-content-wrap">
+        <section class="gh-flow-content">
             <header>
                 <h1>Create your account</h1>
             </header>
 
-            <form class="gh-setup-create">
+            <form class="gh-flow-create">
                 <figure class="account-image">
                     <div  id="account-image" class="img"  style="background-image: url(http://www.gravatar.com/avatar/75e958a6674a7d68fe0d575fb235116c?d=404&s=250)">
                         <!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->
diff --git a/core/client/app/html/install4.html b/core/client/app/html/install4.html
index 34b6551dab..43f2653eb7 100644
--- a/core/client/app/html/install4.html
+++ b/core/client/app/html/install4.html
@@ -15,10 +15,10 @@
 <body>
 
 
-<div class="gh-setup">
-    <header class="gh-setup-head">
-        <nav class="gh-setup-nav">
-            <a class="gh-setup-back" href="#"><i class="icon-chevron-left"></i> Back</a>
+<div class="gh-flow">
+    <header class="gh-flow-head">
+        <nav class="gh-flow-nav">
+            <a class="gh-flow-back" href="#"><i class="icon-chevron-left"></i> Back</a>
             <ol>
                 <li><a class="step" href="#"><i class="icon-check"></i><span class="num">1</span></a></li>
                 <li class="divider"></li>
@@ -29,16 +29,16 @@
         </nav>
     </header>
 
-    <div class="gh-setup-content-wrap">
-        <section class="gh-setup-content">
+    <div class="gh-flow-content-wrap">
+        <section class="gh-flow-content">
             <header>
                 <h1>Invite your team</h1>
                 <p>Ghost works best when shared with others. Collaborate, get feedback on your posts &amp; work together on ideas.</p>
             </header>
 
-            <img class="gh-setup-faces" src="file:///Users/John/Sites/Ghost/core/shared/img/users.png" alt="" />
+            <img class="gh-flow-faces" src="file:///Users/John/Sites/Ghost/core/shared/img/users.png" alt="" />
 
-            <form class="gh-setup-invite">
+            <form class="gh-flow-invite">
                 <label>Enter one email address per line, we’ll handle the rest! <i class="icon-mail"></i></label>
                 <textarea placeholder="john@example.com
 sally.sanders@example.com"></textarea>
diff --git a/core/client/app/styles/app.css b/core/client/app/styles/app.css
index 058b0e4f71..85959ad20a 100644
--- a/core/client/app/styles/app.css
+++ b/core/client/app/styles/app.css
@@ -31,7 +31,7 @@
 /* Layouts: Groups of Components
 /* ---------------------------------------------------------- */
 @import "layouts/main.css";
-@import "layouts/setup.css";
+@import "layouts/flow.css";
 @import "layouts/auth.css";
 @import "layouts/content.css";
 @import "layouts/editor.css";
diff --git a/core/client/app/styles/layouts/auth.css b/core/client/app/styles/layouts/auth.css
index 3e9fa96e93..953f16779c 100644
--- a/core/client/app/styles/layouts/auth.css
+++ b/core/client/app/styles/layouts/auth.css
@@ -1,294 +1,48 @@
-/* Authentication /ghost/[signin/signup/forgotten/reset]
-/* ---------------------------------------------------------- */
-
-.ghost-login,
-.ghost-signup,
-.ghost-forgotten,
-.ghost-reset {
-    background: var(--darkgrey);
-    color: var(--midgrey);
-}
-
-.ghost-login main,
-.ghost-signup main,
-.ghost-forgotten main,
-.ghost-reset main {
-    padding-top: 15px;
-}
-
-.ghost-login input,
-.ghost-signup input,
-.ghost-forgotten input,
-.ghost-reset input {
-    position: relative;
-    margin: 0;
-    border: none;
-    background: color(var(--darkgrey) lightness(+10%));
-    box-shadow: none;
-    color: #fff;
-    font-size: 1.1em;
-    line-height: 1.4em;
-    font-weight: 200;
-    transition: background ease 0.25s;
-}
-
-.ghost-login input:focus,
-.ghost-signup input:focus,
-.ghost-forgotten input:focus,
-.ghost-reset input:focus {
-    border: none;
-    background: color(var(--darkgrey) lightness(+15%));
-}
-
-.ghost-login input:-webkit-autofill,
-.ghost-signup input:-webkit-autofill,
-.ghost-forgotten input:-webkit-autofill,
-.ghost-reset input:-webkit-autofill {
-    -webkit-box-shadow: 0 0 0 1000px var(--lightgrey) inset !important;
-}
-
-.login-box,
-.signup-box,
-.forgotten-box,
-.reset-box {
-    display: table;
-    margin: 0 auto;
-    padding: 0;
-    max-width: 530px;
-    height: 90%;
-}
-
-@media (max-width: 630px) {
-    .login-box,
-    .signup-box,
-    .forgotten-box,
-    .reset-box {
-        max-width: 264px;
-        text-align: center;
-    }
-}
-
-
 /* Sign in
 /* ---------------------------------------------------------- */
 
-.login-form {
-    display: table-cell;
-    max-width: 530px;
-    color: color(var(--midgrey) lightness(+15%));
-    vertical-align: middle;
-}
-
-@media (max-width: 630px) {
-    .login-form {
-        max-width: 264px;
-    }
-}
-
-.login-form .email-wrap,
-.login-form .password-wrap {
+.gh-signin {
     position: relative;
-    float: left;
-    margin: 0 0 5px 0;
+    margin: 30px auto;
+    padding: 40px;
+    max-width: 400px;
+    border: #dae1e3 1px solid;
+    background: #f8fbfd;
+    border-radius: 5px;
+    text-align: left;
 }
 
-@media (max-width: 630px) {
-    .login-form .email-wrap,
-    .login-form .password-wrap {
-        margin-bottom: 1em;
-    }
+.gh-signin .form-group {
+    margin-bottom: 1.5rem;
 }
 
-.login-form .email-wrap {
-    margin-right: 3px;
-}
-
-@media (max-width: 630px) {
-    .login-form .email-wrap {
-        margin-right: 0;
-    }
-}
-
-.login-form .email,
-.login-form .password {
-    display: inline-block;
-    clear: both;
-    padding: 8px 0 8px 8px;
-    width: 216px;
-}
-
-@media (max-width: 630px) {
-    .login-form .email,
-    .login-form .password {
-        width: 264px;
-        border-radius: 2px;
-    }
-}
-
-@media (min-width: 631px) {
-    .login-form .email {
-        border-radius: 2px 0 0 2px;
-    }
-    .login-form .password {
-        border-radius: 0 2px 2px 0;
-    }
-}
-
-.login-form button {
-    margin-left: 10px;
-    width: 85px;
-    height: 37px;
-}
-
-@media (max-width: 630px) {
-    .login-form button {
-        margin: 0;
-        margin-bottom: 1em;
-        width: 100%;
-    }
-}
-
-.login-form .meta {
-    clear: both;
-    color: var(--midgrey);
-}
-
-.login-form .forgotten-link {
-    display: inline-block;
+.gh-signin .btn {
     margin: 0;
-    padding: 0;
-    width: auto;
-    height: auto;
-    color: color(var(--midgrey) lightness(-10%));
+    padding: 12px;
+}
+
+.forgotten-wrap {
+    position: relative;
+}
+
+.forgotten-wrap .forgotten-link {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    bottom: 10px;
+    padding: 0 12px;
+    border-left: #dae1e3 1px solid;
+    border-radius: 0;
     text-transform: none;
     letter-spacing: 0;
-    font-size: 1.25rem;
 }
 
-.login-form a {
-    color: color(var(--midgrey) lightness(-10%));
-    font-size: 0.9em;
-}
-
-.login-form a:hover {
-    color: color(var(--midgrey) lightness(+5%));
+.forgotten-link:hover {
+    border-left: #dae1e3 1px solid;
+    color: color(var(--blue) lightness(-20%));
     text-decoration: none;
 }
 
-
-/* Signup / Reset Password
-/* ---------------------------------------------------------- */
-
-.signup-form,
-.reset-form {
-    display: table-cell;
-    max-width: 280px;
-    color: color(var(--midgrey) lightness(+15%));
-    vertical-align: middle;
-}
-
-@media (max-width: 630px) {
-    .signup-form,
-    .reset-form {
-        width: 264px;
-    }
-}
-
-.signup-form .password-wrap,
-.reset-form .password-wrap {
-    position: relative;
-    display: table;
-    float: left;
-    margin: 0 0 1em 0;
-    background: color(var(--darkgrey) lightness(+10%));
-}
-
-.signup-form input,
-.reset-form input {
-    padding: 8px 10px;
-    width: 280px;
-}
-
-@media (max-width: 630px) {
-    .signup-form input,
-    .reset-form input {
-        width: 264px;
-    }
-}
-
-.signup-form .name-wrap,
-.reset-form .name-wrap {
-    position: relative;
-    border-radius: 2px;
-}
-
-.signup-form .name,
-.reset-form .name {
-    border-radius: 2px;
-}
-
-.signup-form .email-wrap,
-.reset-form .email-wrap {
-    position: relative;
-    border-radius: 2px;
-}
-
-.signup-form .email,
-.reset-form .email {
-    border-radius: 2px;
-}
-
-.signup-form .password-wrap,
-.reset-form .password-wrap {
-    position: relative;
-    border-radius: 2px;
-}
-
-.signup-form .password,
-.reset-form .password {
-    border-radius: 2px;
-}
-
-.signup-form button,
-.reset-form button {
-    margin: 0 0 1em 0;
-    padding: 0.5em 1.37em;
-    min-width: 80px;
-    min-height: 30px;
-    width: 100%;
-    height: 36px;
-    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset;
-}
-
-
-/* Forgotten password
-/* ---------------------------------------------------------- */
-
-.forgotten-form {
-    display: table-cell;
-    max-width: 280px;
-    color: color(var(--midgrey) lightness(+15%));
-    vertical-align: middle;
-}
-
-.forgotten-form .email-wrap {
-    position: relative;
-    float: left;
-    margin: 0 0 1em 0;
-    width: 100%;
-    border-radius: 2px;
-}
-
-.forgotten-form .email {
-    padding: 8px 10px;
-    border-radius: 2px;
-}
-
-.forgotten-form button {
-    width: 100%;
-    height: 37px;
-}
-
 .private-login h1 {
     margin-bottom: 2rem;
     text-indent: 0;
diff --git a/core/client/app/styles/layouts/flow.css b/core/client/app/styles/layouts/flow.css
new file mode 100644
index 0000000000..b3660a98d7
--- /dev/null
+++ b/core/client/app/styles/layouts/flow.css
@@ -0,0 +1,374 @@
+/* Full screen workflow
+/* ---------------------------------------------------------- */
+
+.gh-flow {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.gh-flow-head {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 4vh;
+    padding-bottom: 20px;
+}
+
+.gh-flow-content-wrap {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 5%;
+    padding-bottom: 8vh;
+}
+
+.gh-flow-back {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0 0 0 3%;
+    padding: 2px 9px 2px 5px;
+    border: transparent 1px solid;
+    border-radius: 4px;
+    color: #7d878a;
+    font-weight: 100;
+    transition: all 0.3s ease;
+}
+
+.gh-flow-back:hover {
+    border: #dae1e3 1px solid;
+}
+
+.gh-flow-nav {
+    position: relative;
+    flex: 1;
+}
+
+.gh-flow-nav ol {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 auto;
+    padding: 0;
+    width: 160px;
+    list-style: none;
+}
+
+.gh-flow-nav li {
+    margin: 0;
+}
+
+.gh-flow-nav .divider {
+    align-self: center;
+    width: 22px;
+    height: 2px;
+    background-image: linear-gradient(to right, var(--green) 33%, rgba(255, 255, 255, 0) 0%);
+    background-position: bottom;
+    background-size: 6px 2px;
+    background-repeat: repeat-x;
+}
+
+.gh-flow-nav .current ~ .divider {
+    background-image: linear-gradient(to right, #e3e3e3 33%, rgba(255, 255, 255, 0) 0%);
+}
+
+.gh-flow-nav .step {
+    display: table-cell;
+    width: 30px;
+    height: 30px;
+    border: transparent 2px solid;
+    background: var(--green);
+    border-radius: 100%;
+    color: #fff;
+    vertical-align: middle;
+    text-align: center;
+    text-align: center;
+    font-size: 1.3rem;
+}
+
+.gh-flow-nav .step .num {
+    display: none;
+}
+
+.gh-flow-nav .current ~ li:not(divider) .step {
+    border: #e3e3e3 2px solid;
+    background: transparent;
+    color: #cdcdcd;
+}
+
+.gh-flow-nav .current ~ li:not(divider) .step .num {
+    display: block;
+}
+
+.gh-flow-nav .current ~ li:not(divider) .step i {
+    display: none;
+}
+
+.gh-flow-nav .current .step {
+    border: var(--green) 2px solid;
+    background: transparent;
+    color: var(--green);
+    font-weight: bold;
+    cursor: default;
+}
+
+.gh-flow-nav .current .step .num {
+    display: block;
+}
+
+.gh-flow-nav .current .step i {
+    display: none;
+}
+
+.gh-flow-nav .done {
+    border: none;
+    background: var(--green);
+    color: #fff;
+}
+
+.gh-flow-content {
+    max-width: 700px;
+    width: 100%;
+    color: var(--midgrey);
+    text-align: center;
+    font-size: 1.9rem;
+    line-height: 1.5em;
+    font-weight: 100;
+}
+
+@media (max-width: 500px) {
+    .gh-flow-content {
+        font-size: 4vw;
+    }
+}
+
+.gh-flow-content header {
+    margin: 0 auto;
+    max-width: 520px;
+}
+
+.gh-flow-content h1 {
+    letter-spacing: -1px;
+    font-size: 4.2rem;
+    font-weight: 100;
+}
+
+@media (max-width: 600px) {
+    .gh-flow-content h1 {
+        font-size: 7vw;
+    }
+}
+
+.gh-flow-content strong {
+    font-weight: 400;
+}
+
+.gh-flow-content em {
+    color: var(--blue);
+    font-weight: 400;
+    font-style: normal;
+}
+
+.gh-flow-content img {
+    max-width: 100%;
+}
+
+.gh-flow-content .gh-flow-screenshot {
+    position: relative;
+    left: -38px;
+}
+
+@media (max-width: 860px) {
+    .gh-flow-content .gh-flow-screenshot {
+        left: 0;
+    }
+}
+
+.gh-flow-content .btn {
+    display: block;
+    margin: 20px auto 0;
+    max-width: 400px;
+}
+
+.gh-flow-content .gh-flow-create {
+    position: relative;
+    margin: 70px auto 30px;
+    padding: 50px 40px 25px;
+    max-width: 400px;
+    border: #dae1e3 1px solid;
+    background: #f8fbfd;
+    border-radius: 5px;
+    text-align: left;
+}
+
+.gh-flow-content .account-image {
+    position: absolute;
+    top: -50px;
+    left: 50%;
+    overflow: hidden;
+    margin: 0;
+    margin-left: -50px;
+    padding: 4px;
+    width: 100px;
+    height: 100px;
+    border: #d1d9db 1px solid;
+    background: #fff;
+    border-radius: 100%;
+    text-align: center;
+}
+
+.gh-flow-content .account-image:hover .edit-account-image {
+    opacity: 1;
+}
+
+.gh-flow-content .edit-account-image {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    bottom: 4px;
+    left: 4px;
+    width: calc(100% - 8px);
+    background: rgba(87, 163, 232, 0.7);
+    border-radius: 100%;
+    color: #fff;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-size: 3rem;
+    line-height: 90px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.gh-flow-content .img {
+    display: block;
+    width: 90px;
+    height: 90px;
+    background-color: #f8fbfd;
+    background-position: center center;
+    background-size: cover;
+    border-radius: 100%;
+    animation: fade-in 1s;
+}
+
+.gh-flow-content .form-group {
+    margin-bottom: 2.5rem;
+}
+
+.gh-flow-content .form-group label {
+    margin: 0;
+    font-size: 1.4rem;
+    font-weight: 400;
+}
+
+.gh-flow-content .form-group a {
+    text-decoration: underline;
+}
+
+.gh-flow-content input {
+    padding: 10px;
+    border: #dae1e3 1px solid;
+    font-size: 1.6rem;
+    line-height: 1.4em;
+    font-weight: 100;
+}
+
+.gh-flow-content .pw-strength {
+    position: absolute;
+    top: 50%;
+    right: 1px;
+    margin-top: -11px;
+    padding: 0 10px;
+    height: 24px;
+    background: rgba(255, 255, 255, 0.9);
+}
+
+.gh-flow-content .pw-strength-dot {
+    display: block;
+    margin-top: 2px;
+    width: 3px;
+    height: 3px;
+    background-color: #d9e0e3;
+    border-radius: 100%;
+}
+
+.gh-flow-content .pw-strength-dot:first-child {
+    margin-top: 0;
+}
+
+.gh-flow-content .pw-strength-activedot {
+    background-color: var(--red);
+}
+
+.gh-flow-content .input-icon[class*="icon-"]:before {
+    transform: translateY(-49%);
+}
+
+.gh-flow-content .gh-flow-invite {
+    margin: 0 auto;
+    max-width: 400px;
+    width: 100%;
+    text-align: left;
+}
+
+@media (max-width: 460px) {
+    .gh-flow-content .gh-flow-invite label i {
+        display: none;
+    }
+}
+
+.gh-flow-content .gh-flow-faces {
+    margin-bottom: 3vw;
+}
+
+.gh-flow-content textarea {
+    margin-bottom: 40px;
+    width: 100%;
+    height: 160px;
+    font-size: 1.6rem;
+    font-weight: 100;
+}
+
+@media (max-width: 1200px) {
+    .gh-flow-content textarea {
+        margin-bottom: 3vw;
+    }
+}
+
+.gh-flow-content .response {
+    position: absolute;
+    right: 0;
+    bottom: -25px;
+    margin: 0;
+    color: #a6b0b3;
+    text-align: right;
+    font-size: 1.2rem;
+}
+
+.gh-flow-content .success .input-icon:before {
+    color: var(--green);
+}
+
+.error,
+.error-content,
+.main-error {
+    user-select: text;
+}
+
+.gh-flow-content .error input {
+    border-color: var(--red);
+}
+
+.gh-flow-content .error .input-icon:before {
+    color: var(--red);
+}
+
+.gh-flow-content .error .response {
+    color: var(--red);
+}
+
+.gh-flow-content .main-error {
+    margin-top: 5px;
+    color: var(--red);
+    font-size: 1.3rem;
+}
diff --git a/core/client/app/styles/layouts/setup.css b/core/client/app/styles/layouts/setup.css
deleted file mode 100644
index ec59ce5b7d..0000000000
--- a/core/client/app/styles/layouts/setup.css
+++ /dev/null
@@ -1,143 +0,0 @@
-/* Setup New Blog /ghost/setup/
-/* ---------------------------------------------------------- */
-
-.ghost-setup {
-    background: var(--darkgrey);
-    color: var(--midgrey);
-}
-
-@media (max-width: 550px) {
-    .ghost-setup {
-        background: color(var(--darkgrey) lightness(-5%));
-    }
-}
-
-.ghost-setup main {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    padding-top: 15px;
-}
-
-@media (max-width: 550px) {
-    .ghost-setup main {
-        top: 0;
-    }
-}
-
-.setup-box {
-    display: table;
-    margin: 0 auto;
-    padding: 0;
-    max-width: 500px;
-    height: 90%;
-}
-
-.setup-form {
-    padding: 40px;
-    max-width: 530px;
-    border-radius: 2px;
-    color: color(var(--midgrey) lightness(+15%));
-}
-
-@media (max-width: 400px) {
-    .setup-form {
-        padding: 15px;
-    }
-}
-
-@media (min-width: 551px) {
-    .setup-form {
-        background: color(var(--darkgrey) lightness(-5%));
-    }
-}
-
-.setup-form header {
-    margin-bottom: 30px;
-}
-
-.setup-form label {
-    color: var(--lightgrey);
-    font-weight: 300;
-}
-
-@media (max-width: 550px) {
-    .setup-form label {
-        width: 100%;
-    }
-}
-
-.setup-form .form-group input {
-    padding: 7px;
-    border: none;
-    background: color(var(--darkgrey) lightness(+10%));
-    color: #fff;
-    transition: background 0.25s ease;
-}
-
-.setup-form .form-group input:focus {
-    border: none;
-    background: color(var(--darkgrey) lightness(+15%));
-}
-
-.setup-form input:-webkit-autofill {
-    /* Chrome auto-fill style */
-    -webkit-box-shadow: 0 0 0 1000px var(--lightgrey) inset !important;
-}
-
-.setup-form h1 {
-    margin: 0;
-    color: var(--lightgrey);
-    letter-spacing: 0;
-    font-size: 26px;
-    font-weight: 200;
-}
-
-@media (max-width: 400px) {
-    .setup-form h1 {
-        font-size: 18px;
-    }
-}
-
-@media (max-width: 550px) {
-    .setup-form h1 {
-        font-size: 20px;
-    }
-}
-
-.setup-form h2 {
-    margin: 6px 0 0 0;
-    padding: 0;
-    border: none;
-    color: var(--midgrey);
-    letter-spacing: 0;
-    font-size: 16px;
-    font-weight: 200;
-}
-
-@media (max-width: 400px) {
-    .setup-form h2 {
-        font-size: 12px;
-    }
-}
-
-@media (max-width: 550px) {
-    .setup-form h2 {
-        font-size: 14px;
-    }
-}
-
-.setup-form p {
-    color: var(--midgrey);
-    font-size: 12px;
-    line-height: 1.4em;
-}
-
-.setup-form footer {
-    margin: 30px 0 5px 0;
-}
-
-.setup-form .btn-green {
-    padding: 0.9em 1.8em;
-    width: 100%;
-    font-size: 13px;
-}
diff --git a/core/client/app/styles/patterns/global.css b/core/client/app/styles/patterns/global.css
index 830ab959c4..952aeec1dc 100644
--- a/core/client/app/styles/patterns/global.css
+++ b/core/client/app/styles/patterns/global.css
@@ -55,7 +55,6 @@ body {
     height: 100%;
     color: lighten(var(--darkgrey), 10%);
     font-size: 1.4rem;
-    font-feature-settings: "kern" 1;
 }
 
 ::selection {
@@ -76,7 +75,6 @@ h6 {
     color: var(--darkgrey);
     line-height: 1.15em;
     text-rendering: optimizeLegibility;
-    font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
 }
 
 h1 {
diff --git a/core/client/app/templates/signin.hbs b/core/client/app/templates/signin.hbs
index 368f351730..b7ea09cd48 100644
--- a/core/client/app/templates/signin.hbs
+++ b/core/client/app/templates/signin.hbs
@@ -1,18 +1,22 @@
-<section class="login-box js-login-box fade-in">
-    <form id="login" class="login-form" method="post" novalidate="novalidate" {{action 'validateAndAuthenticate' on='submit'}}>
-        <div class="email-wrap">
-            <span class="input-icon icon-mail">
-                {{gh-trim-focus-input class="gh-input email" type="email" placeholder="Email Address" name="identification" autocapitalize="off" autocorrect="off" value=model.identification}}
-            </span>
-        </div>
-        <div class="password-wrap">
-            <span class="input-icon icon-lock">
-                {{input class="gh-input password" type="password" placeholder="Password" name="password" value=model.password}}
-            </span>
-        </div>
-        <button class="btn btn-blue" type="submit" {{action "validateAndAuthenticate"}} disabled={{submitting}}>Log in</button>
-        <section class="meta">
-            <button {{action 'forgotten'}} class="forgotten-link btn btn-link">Forgotten password?</button>
+<div class="gh-flow">
+    <div class="gh-flow-content-wrap">
+        <section class="gh-flow-content">
+            <form id="login" class="gh-signin" method="post" novalidate="novalidate" {{action 'validateAndAuthenticate' on='submit'}}>
+                <div class="form-group">
+                    <span class="input-icon icon-mail">
+                        {{gh-trim-focus-input class="gh-input email" type="email" placeholder="Email Address" name="identification" autocapitalize="off" autocorrect="off" tabindex="1" value=model.identification}}
+                    </span>
+                </div>
+                <div class="form-group">
+                    <span class="input-icon icon-lock forgotten-wrap">
+                        {{input class="gh-input password" type="password" placeholder="Password" name="password" tabindex="2" value=model.password}}
+                        <button {{action 'forgotten'}} class="forgotten-link btn btn-link"  tabindex="4">Forgot?</button>
+                    </span>
+                </div>
+                <button id="login-button" class="login btn btn-blue btn-block" type="submit" tabindex="3" {{action "validateAndAuthenticate"}} disabled={{submitting}}>Sign in</button>
+            </form>
+
+            <p class="main-error">The password fairy does not approve</p>
         </section>
-    </form>
-</section>
+    </div>
+</div>
diff --git a/core/client/app/templates/signup.hbs b/core/client/app/templates/signup.hbs
index 680e93c622..f2f550183b 100644
--- a/core/client/app/templates/signup.hbs
+++ b/core/client/app/templates/signup.hbs
@@ -1,33 +1,52 @@
-<section class="setup-box js-signup-box fade-in">
-    <div class="vertical">
-        <form id="signup" class="setup-form" method="post" novalidate="novalidate">
-
-            {{!-- Horrible hack to prevent Chrome from incorrectly auto-filling inputs --}}
-            <input style="display:none;" type="text" name="fakeusernameremembered"/>
-            <input style="display:none;" type="password" name="fakepasswordremembered"/>
+<div class="gh-flow">
 
+    <div class="gh-flow-content-wrap">
+        <section class="gh-flow-content">
             <header>
-                <h1>Welcome to Ghost</h1>
-                <h2>Create your account to start publishing</h2>
+                <h1>Create your account</h1>
             </header>
-            <div class="form-group">
-                <label for="email">Email Address</label>
-                {{input class="gh-input" type="email" name="email" autocorrect="off" value=model.email }}
-                <p>Used for important notifications</p>
-            </div>
-            <div class="form-group">
-                <label for="name">Full Name</label>
-                {{gh-trim-focus-input class="gh-input" type="text" name="name" autofocus="autofocus" autocorrect="off" value=model.name }}
-                <p>The name that you will sign your posts with</p>
-            </div>
-            <div class="form-group">
-                <label for="password">Password</label>
-                {{input class="gh-input" type="password" name="password" autofocus="autofocus" autocorrect="off" value=model.password }}
-                <p>Must be at least 8 characters</p>
-            </div>
-            <footer>
-                <button type="submit" class="btn btn-green btn-lg" {{action "signup"}} disabled={{submitting}}>Create Account</button>
-            </footer>
-        </form>
+
+            <form id="signup" class="gh-flow-create" method="post" novalidate="novalidate">
+                {{!-- Hack to stop Chrome's broken auto-fills --}}
+                <input style="display:none;" type="text" name="fakeusernameremembered"/>
+                <input style="display:none;" type="password" name="fakepasswordremembered"/>
+
+                <figure class="account-image">
+                    <div  id="account-image" class="img"  style="background-image: url(http://www.gravatar.com/avatar/75e958a6674a7d68fe0d575fb235116c?d=404&s=250)">
+                        <!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->
+                        <span class="sr-only">User imge</span>
+                    </div>
+                    <a class="edit-account-image" href="#"><i class="icon-image "><span class="sr-only">Upload an image</span></i></a>
+                </figure>
+                <div class="form-group">
+                    <label for="email-address">Email address</label>
+                    <span class="input-icon icon-mail">
+                        {{input class="gh-input" type="email" name="email" autocorrect="off" value=model.email }}
+                    </span>
+                </div>
+                <div class="form-group">
+                    <label for="full-name">Full name</label>
+                    <span class="input-icon icon-user">
+                        {{gh-trim-focus-input class="gh-input" type="text" name="name" autofocus="autofocus" autocorrect="off" value=model.name }}
+                    </span>
+                </div>
+                <div class="form-group">
+                    <label for="password">Password</label>
+                    <span class="input-icon icon-lock">
+                        {{input class="gh-input" type="password" name="password" autofocus="autofocus" autocorrect="off" value=model.password }}
+                        <div class="pw-strength">
+                            <div class="pw-strength-dot"></div>
+                            <div class="pw-strength-dot"></div>
+                            <div class="pw-strength-dot"></div>
+                            <div class="pw-strength-dot"></div>
+                            <div class="pw-strength-dot <!--pw-strength-activedot-->"></div>
+                        </div>
+                    </span>
+                </div>
+            </form>
+
+            <button type="submit" class="btn btn-green btn-lg btn-block" {{action "signup"}} disabled={{submitting}}>Create Account</button>
+        </section>
     </div>
-</section>
+
+</div>
