Index: ow/static/css/main.css
===================================================================
--- ow/static/css/main.css	(revision 816820d07705d0d16543ea9b2fc593f4fffcbb5a)
+++ ow/static/css/main.css	(revision 55e98e4ff9a43c6f750696cb91b6178b175d1c50)
@@ -8,7 +8,14 @@
 @import "variables.css";
 
+/* UI */
+@import "ui/form.css";
+@import "ui/buttons.css";
+
 /* Common styles */
 @import "common.css";
 
+/* Modules */
+@import "modules/header.css";
+
 /* Pages */
 @import "pages/login.css";
Index: ow/static/css/modules/header.css
===================================================================
--- ow/static/css/modules/header.css	(revision 55e98e4ff9a43c6f750696cb91b6178b175d1c50)
+++ ow/static/css/modules/header.css	(revision 55e98e4ff9a43c6f750696cb91b6178b175d1c50)
@@ -0,0 +1,134 @@
+/* ==========================================================================
+   Header
+   ========================================================================== */
+
+.header-content {
+    border-bottom: 1px solid var(--color-main-light);
+    display: flex;
+    padding: 0em 1.5em;
+    justify-content: space-between;
+    align-items: center;
+}
+.
+.header-content a {
+    text-decoration: none;
+}
+
+
+/* Logo
+   ========================================================================== */
+.logo {
+    display: inline-block;
+    font-size: 24px;
+    line-height: 1em;
+    font-weight: 800;
+    text-transform: uppercase;
+    margin: 0;
+}
+.logo a {
+    text-decoration: none;
+}
+
+.logo:hover span{
+    color: var(--color-app);
+}
+
+.logo-open {
+    display: block;
+    color: var(--color-app);
+}
+.logo-work,
+.logo-outs {
+    color: var(--color-app-light);
+}
+
+.description {
+    font-size: 14px;
+    font-weight: 300;
+    letter-spacing: .025em;
+    color: var(--color-main-medium);
+}
+
+/* Navigation
+   ========================================================================== */
+.nav-site {
+    font-size: 13px;
+}
+.nav-site ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+.nav-site li {
+    border-left: 1px solid var(--color-main-light);
+    flex-grow: 1;
+    text-align: center;
+}
+.nav-site a {
+    display: block;
+    padding: 1.25rem;
+    color: var(--color-main-medium);
+    text-decoration: none;
+}
+.nav-site a:hover,
+.nav-site .is-active a {
+    color: var(--color-main);
+}
+
+
+/* Add workout button with submenu -------------------------------------------*/
+.add-workout {
+    position: relative;
+}
+.add-workout::before{
+    content: "+";
+    font-weight: 800;
+    font-size: 32px;
+    line-height: 0;
+    position: relative;
+    top: .75em;color: var(--color-app);
+}
+.add-workout span{
+    display: none;
+}
+
+.add-workout:hover::after{
+        content: "";
+        position: absolute;
+        background-color: white;
+        width: 100%;
+        height: 1px;
+        display: block;
+        z-index: 20;
+}
+.add-workout:hover ul{
+    display: inline-block;
+}
+
+/* submenu -------------------------------------------------------------- */
+.add-workout ul{
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    right: -1px;
+    border: 1px solid var(--color-main-light);
+    width: 150px;
+}
+.add-workout ul li{
+    border-left:transparent;
+    text-align: left;
+}
+.add-workout ul a:hover{
+    background-color: var(--color-main-xtralight);
+}
+
+/* States -------------------------------------------------------------- */
+.is-login .description {
+    display: none;
+}
+.is-login .logo-open {
+    display: inline-block;
+}
Index: ow/static/css/pages/login.css
===================================================================
--- ow/static/css/pages/login.css	(revision 816820d07705d0d16543ea9b2fc593f4fffcbb5a)
+++ ow/static/css/pages/login.css	(revision 55e98e4ff9a43c6f750696cb91b6178b175d1c50)
@@ -1,31 +1,5 @@
-
-/* logo
----------------------------------------------------------------------- */
-.logo {
-    font-size: 24px;
-    line-height: 1em;
-    font-weight: 800;
-    text-transform: uppercase;
-    margin: 0;
-    span{
-        transition: all 250ms ease-in-out;
-    }
-    &:hover{
-        span{
-            color: var(--color-app);
-        }
-    }
-}
-.logo-open {
-    display: block;
-    color: var(--color-app);
-}
-.logo-work,
-.logo-outs {
-    color: var(--color-app-light);
-}
-
-
-
+/* ==========================================================================
+   Login page
+   ========================================================================== */
 
 .login-content {
@@ -35,65 +9,50 @@
     justify-content: center;
     align-items: center;
-    height: 85vh;
+    min-height: calc(100vh - 98px);
     padding: 1em 0;
-    /*
-    background-blend-mode: multiply;
-    background-color: var(--color-app);
-    */
 }
 
-    /* Provisional */
-    .message {
-        padding: .5em;
-        margin: 0;
-        text-align: center;
-        font-size: 13;
-        &.message-error{
-            color: white;
-            background-color: red;
-        }
-    }
-    form{
-        width: 100%;
-        max-width: 350px;
-    }
+.login-content form {
+    max-width: 380px;
+    background-color: rgba(0,0,0,0.8);
+    border-radius: 6px;
+    padding: 2em  1.5em;
+}
 
-    legend {
-        display: none;
-    }
 
-    fieldset {
-        border: none;
-        background-color: var(--color-main-medium);
-        border-radius: 6px;
-        padding: 2em;
-        >div {
-            margin-bottom: 1.5em;
-        }
-    }
-    input {
-        width: 100%;
-        padding: .5em .75em;
-        border: 1px solid transparent;
-        border-radius: 2px;
-        &:focus{
-            border-color: var(--color-app);
-        }
-    }
+.login-content label {
+    color: white;
+}
 
-    label {
-        display: block;
-        font-size: 14;
-        color: white;
-        margin-bottom: .25em;
-    }
-    .button {
-        transition: all 500ms ease-in-out;
-        background-color: var(--color-app);
-        color: white;
-        margin-bottom: 1em;
-        text-transform: uppercase;
-        &:hover {
-            background-color: darken(var(--color-app), 10%);
-        }
-    }
+.login-content a {
+    color: var(--color-main-light);
+    font-size: 13px;
+    text-decoration: none;
+    margin-right: .75em;
+}
+
+.login-content a:hover {
+    color: white;
+}
+
+
+
+
+
+
+
+
+/* Provisional */
+.message {
+    padding: .5em;
+    margin: 0;
+    border-radius: 4px;
+    text-align: center;
+    font-size: 13px;
+}
+
+.message.message-error{
+    background-color: var(--color-app-dark);
+    color: white;
+    margin-bottom: .5em;
+}
Index: ow/static/css/ui/buttons.css
===================================================================
--- ow/static/css/ui/buttons.css	(revision 55e98e4ff9a43c6f750696cb91b6178b175d1c50)
+++ ow/static/css/ui/buttons.css	(revision 55e98e4ff9a43c6f750696cb91b6178b175d1c50)
@@ -0,0 +1,27 @@
+.button {
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    border: 1px solid transparent;
+    text-decoration: none;
+    font-style: normal;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin: 0;
+    position: relative;
+    overflow: hidden;
+    font-size: 1em;
+    line-height: 1.25rem;
+    max-width: 100%;
+}
+
+.button.button-action {
+    background: var(--color-app);
+    color: white;
+}
+
+.button.button-action:hover {
+    background-color: var(--color-app-dark);
+}
Index: ow/static/css/ui/form.css
===================================================================
--- ow/static/css/ui/form.css	(revision 55e98e4ff9a43c6f750696cb91b6178b175d1c50)
+++ ow/static/css/ui/form.css	(revision 55e98e4ff9a43c6f750696cb91b6178b175d1c50)
@@ -0,0 +1,28 @@
+/* Generic default forms */
+form{
+    width: 100%;
+}
+
+legend {
+    display: none;
+}
+
+fieldset {
+    border: none;
+    padding: 0;
+}
+fieldset > div {
+    margin-bottom: 1.5em;
+}
+
+label {
+    display: block;
+    font-size: 13px;
+    margin-bottom: .25em;
+}
+input {
+    width: 100%;
+    padding: .5em .75em;
+    border: 1px solid transparent;
+    border-radius: 2px;
+}
Index: ow/static/css/variables.css
===================================================================
--- ow/static/css/variables.css	(revision 816820d07705d0d16543ea9b2fc593f4fffcbb5a)
+++ ow/static/css/variables.css	(revision 55e98e4ff9a43c6f750696cb91b6178b175d1c50)
@@ -4,8 +4,9 @@
     --color-main: #151515;
     --color-main-dark: #454545;
-    --color-main-medium: #666;
+    --color-main-medium: #999;
     --color-main-light: #ccc;
     --color-main-xtralight: #f5f5f5;
 
+    --color-app-dark: #e81029;
     --color-app: #EE4056;
     --color-app-medium: #ee0000;
Index: ow/templates/login.pt
===================================================================
--- ow/templates/login.pt	(revision 816820d07705d0d16543ea9b2fc593f4fffcbb5a)
+++ ow/templates/login.pt	(revision 55e98e4ff9a43c6f750696cb91b6178b175d1c50)
@@ -34,7 +34,9 @@
                      type="password" i18n:attributes="placeholder">
             </div>
-            <input class="button" type="submit" name="submit" value="Login">
+            <div>
+              <input class="button button-action" type="submit" name="submit" value="Login">
+            </div>
             <a class="login-remember" href="#" i18n:translate="">
-              Forgot your password?</a> |
+              Forgot your password?</a>
             <a class="join-now" href="" i18n:translate=""
                tal:attributes="href request.resource_url(context, 'signup')">
Index: ow/templates/signup.pt
===================================================================
--- ow/templates/signup.pt	(revision 816820d07705d0d16543ea9b2fc593f4fffcbb5a)
+++ ow/templates/signup.pt	(revision 55e98e4ff9a43c6f750696cb91b6178b175d1c50)
@@ -12,5 +12,5 @@
       <!-- Login -->
 
-      <div class="signup-content">
+      <div class="login-content">
 
         <form method="post" name="signup" action="">
@@ -57,5 +57,5 @@
           </fieldset>
 
-          <input class="button" type="submit" name="submit" value="Sign up!">
+          <input class="button button-action" type="submit" name="submit" value="Sign up!">
 
         </form>
