diff --git a/assets/less/classes/container.less b/assets/less/classes/container.less
index 4660964d..58aa3065 100644
--- a/assets/less/classes/container.less
+++ b/assets/less/classes/container.less
@@ -19,10 +19,6 @@
         }
     }
 
-    &--translucent {
-        background-color: var(--background-colour-translucent);
-    }
-
     &__title {
         display: block;
         text-decoration: none;
diff --git a/assets/less/classes/footer.less b/assets/less/classes/footer.less
index a0fbf3bc..91a6e10a 100644
--- a/assets/less/classes/footer.less
+++ b/assets/less/classes/footer.less
@@ -1,5 +1,5 @@
 .footer {
-    background: linear-gradient(0deg, var(--gradient-start), transparent) repeat-x;
+    background: linear-gradient(0deg, var(--global-menu-colour), transparent) repeat-x;
     flex: 0 0 auto;
     text-align: center;
     font-size: .9em;
diff --git a/assets/less/classes/header.less b/assets/less/classes/header.less
index c9bc69ae..f62b1693 100644
--- a/assets/less/classes/header.less
+++ b/assets/less/classes/header.less
@@ -1,6 +1,6 @@
 .header {
     flex: 0 0 auto;
-    background: linear-gradient(0deg, transparent, var(--gradient-start)) repeat-x;
+    background: linear-gradient(0deg, transparent, var(--global-menu-colour)) repeat-x;
 
     &__wrapper {
         margin: 0 auto;
@@ -82,7 +82,7 @@
 
         @media (max-width: @site-mobile-width) {
             width: 100%;
-            background: var(--gradient-start);
+            background: var(--global-menu-colour);
 
             &__item:not(:last-child) {
                 border-bottom: 1px solid var(--accent-colour);
@@ -103,7 +103,7 @@
                 transition: background-color .2s;
 
                 &:hover {
-                    background-color: var(--gradient-start);
+                    background-color: var(--global-menu-colour);
 
                     .header__submenu {
                         transform: scaleY(1);
@@ -141,7 +141,7 @@
             position: absolute; // floating
             transform: scaleY(0);
             transform-origin: center top 0;
-            background: var(--gradient-start);
+            background: var(--global-menu-colour);
             overflow: hidden;
             z-index: 100;
             text-align: left;
@@ -175,7 +175,7 @@
         @media (max-width: @site-mobile-width) {
             display: none;
             width: 100%;
-            background: var(--gradient-start);
+            background: var(--global-menu-colour);
             font-size: 1.1em;
 
             &-toggle:checked ~ .header__user {
diff --git a/assets/less/classes/input/button.less b/assets/less/classes/input/button.less
index ef810935..47be4f5e 100644
--- a/assets/less/classes/input/button.less
+++ b/assets/less/classes/input/button.less
@@ -1,5 +1,7 @@
 .input__button {
-    background-image: linear-gradient(0deg, transparent, var(--gradient-start));
+    background-image: linear-gradient(0deg, transparent 0%, #fff9 50%, #fff9 200%);
+    background-size: 100% 200%;
+    background-position: 0 100%;
     background-color: var(--accent-colour);
     font-family: @mio-font-regular;
     font-size: 1.1em;
@@ -8,7 +10,7 @@
     min-width: 80px;
     text-align: center;
     cursor: pointer;
-    transition: background-color .2s, box-shadow .2s;
+    transition: background-color .2s, box-shadow .2s, background-position .2s;
     color: var(--text-colour-header);
     border: 1px solid var(--text-colour-header);
     border-radius: 2px;
@@ -31,7 +33,8 @@
     }
 
     &:active {
-        background-color: var(--gradient-start);
+        background-color: var(--accent-colour);
+        background-position: 0 0;
     }
 
     &--new {
diff --git a/assets/less/classes/input/text.less b/assets/less/classes/input/text.less
index 1832c11d..cf490b45 100644
--- a/assets/less/classes/input/text.less
+++ b/assets/less/classes/input/text.less
@@ -1,15 +1,16 @@
 .input__text {
-    border: 1px solid #aaa;
+    border: 1px solid var(--accent-colour);
     padding: 1px;
     background: #fff;
-    color: #111;
+    background-color: var(--background-colour);
+    color: var(--text-colour);
 
     &:focus {
-        border-color: var(--accent-colour);
+        border-color: #aaa;
     }
 
     &--readonly {
-        color: #666;
+        color: #aaa;
     }
 
     &--monospace {
@@ -25,5 +26,9 @@
         box-shadow: inset 0 0 4px #111;
         border-color: #222;
         transition: border-color .2s;
+
+        &:focus {
+            border-color: var(--accent-colour);
+        }
     }
 }
diff --git a/assets/less/main.less b/assets/less/main.less
index 80d5fde8..99a99009 100644
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -4,25 +4,19 @@
 @site-max-width: 1200px;
 @site-mobile-width: 800px;
 
-@default-accent-colour: #9475b2;
-@default-background-colour: #fbeeff;
-@default-text-colour: #000;
-@default-header-text-colour: #306;
-@default-gradient-start: #c2affe;
-
 :root {
     --site-max-width: @site-max-width;
     --site-background-meta: no-repeat center / cover fixed;
     --site-background-image: initial;
 
     --user-colour: inherit;
-    --accent-colour: @default-accent-colour;
-    --text-colour: @default-text-colour;
-    --text-colour-inverted: color(#fff - @default-text-colour);
-    --text-colour-header: @default-header-text-colour;
-    --background-colour: @default-background-colour;
-    --background-colour-translucent: fade(@default-background-colour, 90%);
-    --gradient-start: @default-gradient-start; // deprecate this in favour of --accent-colour at some point
+    //--accent-colour: #9475b2;
+    --accent-colour: #452c4c;
+    --text-colour: #fff;
+    --text-colour-inverted: #000;
+    --text-colour-header: #ddd; // kill this too probably
+    --background-colour: #090909;
+    --global-menu-colour: var(--accent-colour);
 }
 
 * {
@@ -57,15 +51,14 @@ body {
 
     &--default {
         --site-background-meta: repeat;
-        --site-background-image: url('https://mikoto.misaka.nl/i/cloudss.png');
+        --site-background-image: url('/images/cloud-pattern.png');
+        --background-colour: var(--accent-colour);
         background-blend-mode: multiply;
-
-        background-color: var(--accent-colour);
-        --gradient-start: var(--accent-colour);
     }
 
     &--legacy {
-        --background-color: #fbeeff;
+        //--background-colour: #fbeeff;
+        --global-menu-colour: #3f154c;
     }
 }
 
diff --git a/public/images/cloud-pattern.png b/public/images/cloud-pattern.png
new file mode 100644
index 00000000..6229ff4d
Binary files /dev/null and b/public/images/cloud-pattern.png differ
diff --git a/templates/master.twig b/templates/master.twig
index 0cac8f91..c6e476f0 100644
--- a/templates/master.twig
+++ b/templates/master.twig
@@ -14,7 +14,7 @@
             </style>
         {% endif %}
     </head>
-    <body class="main">
+    <body class="main main--{{ is_new_ready|default(false) is empty ? 'legacy' : 'default' }}">
         {% include '_layout/header.twig' %}
 
         <div class="main__wrapper">
diff --git a/templates/settings/account.twig b/templates/settings/account.twig
index 0d16d368..5ed6aaf6 100644
--- a/templates/settings/account.twig
+++ b/templates/settings/account.twig
@@ -11,7 +11,7 @@
         </div>
     </div>#}
 
-    <div class="container container--translucent">
+    <div class="container">
         <div class="container__title">Account</div>
         <form action="" method="post" class="settings__account">
             <input type="hidden" name="csrf" value="{{ csrf_token() }}">
@@ -132,7 +132,7 @@
     </div>
 
     {% if settings_perms.edit_avatar %}
-        <div class="container container--translucent">
+        <div class="container">
             <div class="container__title">Avatar</div>
             <form action="" method="post" class="settings__images" enctype="multipart/form-data">
                 <input type="hidden" name="MAX_FILE_SIZE" value="{{ background.max_size }}">
@@ -203,7 +203,7 @@
     {% endif %}
 
     {% if settings_perms.edit_background %}
-        <div class="container container--translucent">
+        <div class="container">
             <div class="container__title">Background</div>
             <form action="" method="post" class="settings__images" enctype="multipart/form-data">
                 <input type="hidden" name="MAX_FILE_SIZE" value="{{ background.max_size }}">
@@ -269,7 +269,7 @@
     {% endif %}
 
     {% if settings_perms.edit_about %}
-        <div class="container container--translucent">
+        <div class="container">
             <div class="container__title">
                 About
             </div>
diff --git a/templates/user/profile.twig b/templates/user/profile.twig
index 84f914ca..319441a7 100644
--- a/templates/user/profile.twig
+++ b/templates/user/profile.twig
@@ -1,6 +1,8 @@
 {% extends 'user/master.twig' %}
 {% from 'macros.twig' import navigation %}
 
+{% set is_new_ready = true %}
+
 {% set image = '/profile.php?u=' ~ profile.user_id ~ '&m=avatar' %}
 {% set canonical_url = '/profile.php?u=' ~ profile.user_id %}
 {% set title = 'Profile of ' ~ profile.username %}