From b41cad6fdf0544a9c089a63e7bd117d424063b98 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Wed, 29 Aug 2018 12:11:58 +0100
Subject: [PATCH] UI: CSS refactor (#4430) + Fullscreen Layout (#4435)

* Begin refactoring CSS into component folders. Moved most
components into layout/skin folders, left out a couple of ones I want
to think about more.
* Adjust grays based on recent Structure changes
* Switch to fullscreen layout for lists and detail, left aligned forms (#4435)
* Specifically use the 'actions_close' label, not just the :last-child (actions-group)
* Replace some non-var-ed colours in vaults code skin, plus prefixing (black and white)
---
 ui-v2/app/styles/app.scss                     |  60 ++----
 .../app/styles/base/color/base-variables.scss | 133 +++++++++++++
 .../styles/base/color/box-placeholders.scss   |  16 ++
 ui-v2/app/styles/base/color/index.scss        |   3 +
 .../styles/base/color/semantic-variables.scss |  12 ++
 .../base/decoration/base-placeholders.scss    |   4 +
 .../base/decoration/base-variables.scss       |   9 +
 ui-v2/app/styles/base/decoration/index.scss   |   2 +
 ui-v2/app/styles/base/index.scss              |   3 +
 .../app/styles/base/reset/base-variables.scss |  35 ++++
 ui-v2/app/styles/base/reset/index.scss        |   3 +
 ui-v2/app/styles/base/reset/minireset.scss    |  64 +++++++
 ui-v2/app/styles/base/reset/system.scss       |  99 ++++++++++
 .../base/typography/base-variables.scss       |  26 +++
 ui-v2/app/styles/base/typography/index.scss   |   1 +
 ui-v2/app/styles/components/action-group.scss | 114 +----------
 .../styles/components/action-group/index.scss |   2 +
 .../components/action-group/layout.scss       |  76 ++++++++
 .../styles/components/action-group/skin.scss  |  37 ++++
 ui-v2/app/styles/components/anchors.scss      |  18 ++
 .../app/styles/components/anchors/index.scss  |  10 +
 ui-v2/app/styles/components/breadcrumbs.scss  |  16 +-
 .../styles/components/breadcrumbs/index.scss  |   2 +
 .../styles/components/breadcrumbs/layout.scss |  10 +
 .../styles/components/breadcrumbs/skin.scss   |   9 +
 ui-v2/app/styles/components/button.scss       | 120 ------------
 ui-v2/app/styles/components/buttons.scss      |  16 ++
 ui-v2/app/styles/components/buttons/index.css |   2 +
 .../app/styles/components/buttons/layout.scss |  11 ++
 ui-v2/app/styles/components/buttons/skin.scss |  90 +++++++++
 ui-v2/app/styles/components/code-editor.scss  | 180 +-----------------
 .../styles/components/code-editor/index.scss  | 178 +++++++++++++++++
 .../components/confirmation-dialog.scss       |  23 +--
 .../components/confirmation-dialog/index.scss |   2 +
 .../confirmation-dialog/layout.scss           |  16 ++
 .../components/confirmation-dialog/skin.scss  |   6 +
 .../components/expanded-single-select.scss    |  32 ----
 .../expanded-single-select/index.scss         |   2 +
 .../expanded-single-select/layout.scss        |  23 +++
 .../expanded-single-select/skin.scss          |  13 ++
 .../styles/components/feedback-dialog.scss    |  37 +---
 .../components/feedback-dialog/index.scss     |   2 +
 .../components/feedback-dialog/layout.scss    |  23 +++
 .../components/feedback-dialog/skin.scss      |   5 +
 ui-v2/app/styles/components/filter-bar.scss   |  84 +-------
 .../styles/components/filter-bar/index.scss   |   2 +
 .../styles/components/filter-bar/layout.scss  |  43 +++++
 .../styles/components/filter-bar/skin.scss    |  38 ++++
 .../app/styles/components/flash-message.scss  |  50 +----
 .../components/flash-message/index.scss       |   2 +
 .../components/flash-message/layout.scss      |  21 ++
 .../styles/components/flash-message/skin.scss |  27 +++
 .../app/styles/components/form-elements.scss  | 167 +---------------
 .../components/form-elements/index.scss       |   2 +
 .../components/form-elements/layout.scss      |  94 +++++++++
 .../styles/components/form-elements/skin.scss |  73 +++++++
 .../styles/components/freetext-filter.scss    |  39 +---
 .../components/freetext-filter/index.scss     |   2 +
 .../components/freetext-filter/layout.scss    |  17 ++
 .../components/freetext-filter/skin.scss      |  21 ++
 .../styles/components/healthcheck-status.scss |  62 +-----
 .../components/healthcheck-status/index.scss  |   2 +
 .../components/healthcheck-status/layout.scss |  30 +++
 .../components/healthcheck-status/skin.scss   |  31 +++
 .../components/healthchecked-resource.scss    | 101 +---------
 .../healthchecked-resource/index.scss         |   2 +
 .../healthchecked-resource/layout.scss        |  78 ++++++++
 .../healthchecked-resource/skin.scss          |  23 +++
 .../{icons.scss => icons/index.scss}          |  20 +-
 .../styles/components/list-collection.scss    |   8 +-
 ui-v2/app/styles/components/notice.scss       |  26 +--
 ui-v2/app/styles/components/notice/index.scss |   2 +
 .../app/styles/components/notice/layout.scss  |  10 +
 ui-v2/app/styles/components/notice/skin.scss  |  40 ++++
 ui-v2/app/styles/components/pill.scss         |   4 +
 ui-v2/app/styles/components/pill/index.scss   |   2 +
 .../components/{tag.scss => pill/layout.scss} |   3 +-
 ui-v2/app/styles/components/pill/skin.scss    |   4 +
 ui-v2/app/styles/components/product.scss      |  51 +++++
 .../components/{ => product}/app-view.scss    |  77 ++++----
 .../components/{ => product}/footer.scss      |  27 +--
 .../components/{ => product}/header-nav.scss  |  82 ++++----
 .../app/styles/components/product/index.scss  |   9 +
 .../components/{ => product}/loader.scss      |  15 +-
 .../components/{ => product}/main-header.scss |   3 -
 ui-v2/app/styles/components/table.scss        |  60 +++---
 ui-v2/app/styles/components/tabs.scss         |  56 +-----
 ui-v2/app/styles/components/tabs/index.scss   |   2 +
 ui-v2/app/styles/components/tabs/layout.scss  |  34 ++++
 ui-v2/app/styles/components/tabs/skin.scss    |  24 +++
 .../styles/components/tabular-collection.scss |   9 +-
 .../styles/components/tomography-graph.scss   |  20 +-
 ui-v2/app/styles/core/layout.scss             |  63 +-----
 ui-v2/app/styles/core/reset.css               |  10 -
 ui-v2/app/styles/core/typography.scss         |  57 +++---
 ui-v2/app/styles/layouts/containers.scss      |  57 ++++++
 ui-v2/app/styles/layouts/index.scss           |   2 +
 .../styles/layouts/with-sticky-footer.scss    |   8 +
 .../app/styles/routes/dc/intention/index.scss |   2 +-
 ui-v2/app/styles/routes/dc/nodes/index.scss   |   5 +-
 ui-v2/app/styles/routes/dc/service/index.scss |   6 +-
 ui-v2/app/styles/variables/color.scss         |  35 ----
 ui-v2/app/styles/variables/index.scss         |  70 ++-----
 103 files changed, 1975 insertions(+), 1484 deletions(-)
 create mode 100644 ui-v2/app/styles/base/color/base-variables.scss
 create mode 100644 ui-v2/app/styles/base/color/box-placeholders.scss
 create mode 100644 ui-v2/app/styles/base/color/index.scss
 create mode 100644 ui-v2/app/styles/base/color/semantic-variables.scss
 create mode 100644 ui-v2/app/styles/base/decoration/base-placeholders.scss
 create mode 100644 ui-v2/app/styles/base/decoration/base-variables.scss
 create mode 100644 ui-v2/app/styles/base/decoration/index.scss
 create mode 100644 ui-v2/app/styles/base/index.scss
 create mode 100644 ui-v2/app/styles/base/reset/base-variables.scss
 create mode 100644 ui-v2/app/styles/base/reset/index.scss
 create mode 100644 ui-v2/app/styles/base/reset/minireset.scss
 create mode 100644 ui-v2/app/styles/base/reset/system.scss
 create mode 100644 ui-v2/app/styles/base/typography/base-variables.scss
 create mode 100644 ui-v2/app/styles/base/typography/index.scss
 create mode 100644 ui-v2/app/styles/components/action-group/index.scss
 create mode 100644 ui-v2/app/styles/components/action-group/layout.scss
 create mode 100644 ui-v2/app/styles/components/action-group/skin.scss
 create mode 100644 ui-v2/app/styles/components/anchors.scss
 create mode 100644 ui-v2/app/styles/components/anchors/index.scss
 create mode 100644 ui-v2/app/styles/components/breadcrumbs/index.scss
 create mode 100644 ui-v2/app/styles/components/breadcrumbs/layout.scss
 create mode 100644 ui-v2/app/styles/components/breadcrumbs/skin.scss
 delete mode 100644 ui-v2/app/styles/components/button.scss
 create mode 100644 ui-v2/app/styles/components/buttons.scss
 create mode 100644 ui-v2/app/styles/components/buttons/index.css
 create mode 100644 ui-v2/app/styles/components/buttons/layout.scss
 create mode 100644 ui-v2/app/styles/components/buttons/skin.scss
 create mode 100644 ui-v2/app/styles/components/code-editor/index.scss
 create mode 100644 ui-v2/app/styles/components/confirmation-dialog/index.scss
 create mode 100644 ui-v2/app/styles/components/confirmation-dialog/layout.scss
 create mode 100644 ui-v2/app/styles/components/confirmation-dialog/skin.scss
 delete mode 100644 ui-v2/app/styles/components/expanded-single-select.scss
 create mode 100644 ui-v2/app/styles/components/expanded-single-select/index.scss
 create mode 100644 ui-v2/app/styles/components/expanded-single-select/layout.scss
 create mode 100644 ui-v2/app/styles/components/expanded-single-select/skin.scss
 create mode 100644 ui-v2/app/styles/components/feedback-dialog/index.scss
 create mode 100644 ui-v2/app/styles/components/feedback-dialog/layout.scss
 create mode 100644 ui-v2/app/styles/components/feedback-dialog/skin.scss
 create mode 100644 ui-v2/app/styles/components/filter-bar/index.scss
 create mode 100644 ui-v2/app/styles/components/filter-bar/layout.scss
 create mode 100644 ui-v2/app/styles/components/filter-bar/skin.scss
 create mode 100644 ui-v2/app/styles/components/flash-message/index.scss
 create mode 100644 ui-v2/app/styles/components/flash-message/layout.scss
 create mode 100644 ui-v2/app/styles/components/flash-message/skin.scss
 create mode 100644 ui-v2/app/styles/components/form-elements/index.scss
 create mode 100644 ui-v2/app/styles/components/form-elements/layout.scss
 create mode 100644 ui-v2/app/styles/components/form-elements/skin.scss
 create mode 100644 ui-v2/app/styles/components/freetext-filter/index.scss
 create mode 100644 ui-v2/app/styles/components/freetext-filter/layout.scss
 create mode 100644 ui-v2/app/styles/components/freetext-filter/skin.scss
 create mode 100644 ui-v2/app/styles/components/healthcheck-status/index.scss
 create mode 100644 ui-v2/app/styles/components/healthcheck-status/layout.scss
 create mode 100644 ui-v2/app/styles/components/healthcheck-status/skin.scss
 create mode 100644 ui-v2/app/styles/components/healthchecked-resource/index.scss
 create mode 100644 ui-v2/app/styles/components/healthchecked-resource/layout.scss
 create mode 100644 ui-v2/app/styles/components/healthchecked-resource/skin.scss
 rename ui-v2/app/styles/components/{icons.scss => icons/index.scss} (94%)
 create mode 100644 ui-v2/app/styles/components/notice/index.scss
 create mode 100644 ui-v2/app/styles/components/notice/layout.scss
 create mode 100644 ui-v2/app/styles/components/notice/skin.scss
 create mode 100644 ui-v2/app/styles/components/pill.scss
 create mode 100644 ui-v2/app/styles/components/pill/index.scss
 rename ui-v2/app/styles/components/{tag.scss => pill/layout.scss} (54%)
 create mode 100644 ui-v2/app/styles/components/pill/skin.scss
 create mode 100644 ui-v2/app/styles/components/product.scss
 rename ui-v2/app/styles/components/{ => product}/app-view.scss (70%)
 rename ui-v2/app/styles/components/{ => product}/footer.scss (55%)
 rename ui-v2/app/styles/components/{ => product}/header-nav.scss (85%)
 create mode 100644 ui-v2/app/styles/components/product/index.scss
 rename ui-v2/app/styles/components/{ => product}/loader.scss (77%)
 rename ui-v2/app/styles/components/{ => product}/main-header.scss (92%)
 create mode 100644 ui-v2/app/styles/components/tabs/index.scss
 create mode 100644 ui-v2/app/styles/components/tabs/layout.scss
 create mode 100644 ui-v2/app/styles/components/tabs/skin.scss
 delete mode 100644 ui-v2/app/styles/core/reset.css
 create mode 100644 ui-v2/app/styles/layouts/containers.scss
 create mode 100644 ui-v2/app/styles/layouts/index.scss
 create mode 100644 ui-v2/app/styles/layouts/with-sticky-footer.scss
 delete mode 100644 ui-v2/app/styles/variables/color.scss

diff --git a/ui-v2/app/styles/app.scss b/ui-v2/app/styles/app.scss
index 362cb43d7f..f7eea00ae9 100644
--- a/ui-v2/app/styles/app.scss
+++ b/ui-v2/app/styles/app.scss
@@ -1,41 +1,27 @@
 @charset 'utf-8';
 
+@import 'base/index';
+@import 'base/reset/index';
 @import 'variables/index';
 
-@import 'ember-bulma-css/utilities/initial-variables.sass';
-@import 'ember-bulma-css/utilities/functions.sass';
-@import 'ember-bulma-css/utilities/derived-variables.sass';
-@import 'ember-bulma-css/utilities/mixins.sass';
-@import 'ember-bulma-css/utilities/controls.sass';
-@import 'ember-bulma-css/base/minireset.sass';
-@import 'ember-bulma-css/base/generic.sass';
+@import 'ember-power-select';
 
-%user-select-none {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-@import 'core/reset';
-@import 'core/typography';
-@import 'core/layout';
-
-@import 'components/loader';
-@import 'components/main-header';
-@import 'components/footer';
 @import 'components/breadcrumbs';
-@import 'components/button';
+@import 'components/anchors';
+@import 'components/buttons';
 @import 'components/tabs';
-@import 'components/healthcheck-status';
-@import 'components/healthchecked-resource';
-@import 'components/expanded-single-select';
-@import 'components/app-view';
+@import 'components/table';
+@import 'components/form-elements';
+
 @import 'components/tabular-collection';
 @import 'components/list-collection';
-@import 'components/table';
+
+@import 'components/product';
+
+@import 'components/healthcheck-status';
+@import 'components/healthchecked-resource';
 @import 'components/freetext-filter';
+@import 'components/filter-bar';
 @import 'components/tomography-graph';
 @import 'components/action-group';
 @import 'components/flash-message';
@@ -44,22 +30,10 @@
 @import 'components/feedback-dialog';
 @import 'components/notice';
 
+@import 'core/typography';
+@import 'core/layout';
+
 @import 'routes/dc/service/index';
 @import 'routes/dc/nodes/index';
 @import 'routes/dc/intention/index';
 @import 'routes/dc/kv/index';
-
-main a {
-  color: $text;
-}
-main a[rel*='help'] {
-  @extend %with-info;
-}
-main label a[rel*='help'] {
-  color: $text-note;
-}
-[role='tabpanel'] > p:only-child [rel*='help']::after {
-  content: none;
-}
-
-@import 'ember-power-select';
diff --git a/ui-v2/app/styles/base/color/base-variables.scss b/ui-v2/app/styles/base/color/base-variables.scss
new file mode 100644
index 0000000000..b31e096c9a
--- /dev/null
+++ b/ui-v2/app/styles/base/color/base-variables.scss
@@ -0,0 +1,133 @@
+$brand-gray-050: #f5f6f7;
+$brand-gray-100: #e1e4e7;
+$brand-gray-200: #cdd3d7;
+$brand-gray-300: #b9c1c7;
+$brand-gray-400: #a5b0b7;
+$brand-gray-500: #919fa8;
+$brand-gray-600: #77838a;
+$brand-gray-700: #5d666b;
+$brand-gray-800: #42494d;
+$brand-gray-900: #282c2e;
+$brand-magenta-050: #f9ebf2;
+$brand-magenta-100: #efc4d8;
+$brand-magenta-200: #e59ebe;
+$brand-magenta-300: #da77a4;
+$brand-magenta-400: #d0508a;
+$brand-magenta-500: #c62a71;
+$brand-magenta-600: #9e2159;
+$brand-magenta-700: #7d1a47;
+$brand-magenta-800: #5a1434;
+$brand-magenta-900: #360c1f;
+$brand-blue-050: #f0f5ff;
+$brand-blue-100: #bfd4ff;
+$brand-blue-200: #8ab1ff;
+$brand-blue-300: #5b92ff;
+$brand-blue-400: #387aff;
+$brand-blue-500: #1563ff;
+$brand-blue-600: #0f4fd1;
+$brand-blue-700: #0e40a3;
+$brand-blue-800: #0a2d74;
+$brand-blue-900: #061b46;
+$brand-purple-050: #eeedfc;
+$brand-purple-100: #d5d2f7;
+$brand-purple-200: #aea7f2;
+$brand-purple-300: #8d83ed;
+$brand-purple-400: #7568e8;
+$brand-purple-500: #5c4ee5;
+$brand-purple-600: #4c40bc;
+$brand-purple-700: #3b3292;
+$brand-purple-800: #2a2469;
+$brand-purple-900: #1a163f;
+$brand-teal-050: #ebf8f3;
+$brand-teal-100: #c3ecdc;
+$brand-teal-200: #9bdfc5;
+$brand-teal-300: #74d3ae;
+$brand-teal-400: #4cc679;
+$brand-teal-500: #25ba81;
+$brand-teal-600: #1f996a;
+$brand-teal-700: #187753;
+$brand-teal-800: #11553b;
+$brand-teal-900: #0b3324;
+$brand-cyan-050: #e7f8ff;
+$brand-cyan-100: #b9ecff;
+$brand-cyan-200: #8be0ff;
+$brand-cyan-300: #5cd3ff;
+$brand-cyan-400: #2ec7ff;
+$brand-cyan-500: #00bbff;
+$brand-cyan-600: #009fd9;
+$brand-cyan-700: #0077a3;
+$brand-cyan-800: #005574;
+$brand-cyan-900: #003346;
+$ui-gray-1: #191a1c;
+$ui-gray-2: #323538;
+$ui-gray-3: #4c4f54;
+$ui-gray-4: #656a70;
+$ui-gray-5: #7f858d;
+$ui-gray-6: #9a9ea5;
+$ui-gray-7: #b4b8bc;
+$ui-gray-8: #d0d2d5;
+$ui-gray-9: #ebecee;
+$ui-gray-10: #f3f4f6;
+$ui-gray-050: #f7f8fa;
+$ui-gray-100: #ebeef2;
+$ui-gray-200: #dce0e6;
+$ui-gray-300: #bac1cc;
+$ui-gray-400: #8e96a3;
+$ui-gray-500: #6f7682;
+$ui-gray-600: #626873;
+$ui-gray-700: #525761;
+$ui-gray-800: #373a42;
+$ui-gray-900: #1f2124;
+$ui-green-050: #ecf7ed;
+$ui-green-100: #c6e9c9;
+$ui-green-200: #a0dba5;
+$ui-green-300: #7acc81;
+$ui-green-400: #54be5d;
+$ui-green-500: #2eb039;
+$ui-green-600: #26912f;
+$ui-green-700: #1e7125;
+$ui-green-800: #15501a;
+$ui-green-900: #0d3010;
+$ui-blue-050: #f0f5ff;
+$ui-blue-100: #bfd4ff;
+$ui-blue-200: #8ab1ff;
+$ui-blue-300: #5b92ff;
+$ui-blue-400: #387aff;
+$ui-blue-500: #1563ff;
+$ui-blue-600: #0f4fd1;
+$ui-blue-700: #0e40a3;
+$ui-blue-800: #0a2d74;
+$ui-blue-900: #061b46;
+$ui-red-050: #f9ecee;
+$ui-red-100: #efc7cc;
+$ui-red-200: #e5a2aa;
+$ui-red-300: #db7d88;
+$ui-red-400: #d15866;
+$ui-red-500: #c73445;
+$ui-red-600: #a32b39;
+$ui-red-700: #7f222c;
+$ui-red-800: #5b1820;
+$ui-red-900: #370f13;
+$ui-orange-050: #fef4ec;
+$ui-orange-100: #fde0c8;
+$ui-orange-200: #fccca4;
+$ui-orange-300: #fbb77f;
+$ui-orange-400: #faa35b;
+$ui-orange-500: #fa8f37;
+$ui-orange-600: #cd762e;
+$ui-orange-700: #a05c23;
+$ui-orange-800: #724119;
+$ui-orange-900: #45270f;
+$ui-yellow-050: #fffbed;
+$ui-yellow-100: #fdeeba;
+$ui-yellow-200: #fce48c;
+$ui-yellow-300: #fbd95e;
+$ui-yellow-400: #face30;
+$ui-yellow-500: #fac402;
+$ui-yellow-600: #cda102;
+$ui-yellow-700: #a07d02;
+$ui-yellow-800: #725a01;
+$ui-yellow-900: #453601;
+$transparent: transparent;
+$ui-white: #fff;
+$ui-black: #000;
diff --git a/ui-v2/app/styles/base/color/box-placeholders.scss b/ui-v2/app/styles/base/color/box-placeholders.scss
new file mode 100644
index 0000000000..aa5f5ac50c
--- /dev/null
+++ b/ui-v2/app/styles/base/color/box-placeholders.scss
@@ -0,0 +1,16 @@
+%box-border-000 {
+  /* same as decor-border-000 - but need to think about being able to import color on its own*/
+  border-style: solid;
+  border-width: 0;
+}
+%box-color-yellow-500 {
+  @extend %box-border-000;
+  background-color: $ui-yellow-050;
+  border-color: $ui-color-warning;
+}
+%box-color-gray-500 {
+  @extend %box-border-000;
+  background-color: $ui-gray-050;
+  border-color: $ui-gray-300;
+  color: $ui-gray-400;
+}
diff --git a/ui-v2/app/styles/base/color/index.scss b/ui-v2/app/styles/base/color/index.scss
new file mode 100644
index 0000000000..34c035fcda
--- /dev/null
+++ b/ui-v2/app/styles/base/color/index.scss
@@ -0,0 +1,3 @@
+@import './base-variables';
+@import './semantic-variables';
+@import './box-placeholders';
diff --git a/ui-v2/app/styles/base/color/semantic-variables.scss b/ui-v2/app/styles/base/color/semantic-variables.scss
new file mode 100644
index 0000000000..32cb0fa149
--- /dev/null
+++ b/ui-v2/app/styles/base/color/semantic-variables.scss
@@ -0,0 +1,12 @@
+$ui-color-primary: $ui-blue-500;
+$ui-color-dangerous: $ui-red-500;
+$ui-color-primary-disabled: $ui-blue-500;
+$ui-color-transparent: transparent;
+$ui-color-neutral: $ui-gray-500;
+$ui-color-action: $ui-blue-500;
+$ui-color-info: $ui-blue-500;
+$ui-color-success: $ui-green-500;
+$ui-color-failure: $ui-red-500;
+$ui-color-danger: $ui-red-500;
+$ui-color-warning: $ui-yellow-500;
+$ui-color-alert: $ui-orange-500;
diff --git a/ui-v2/app/styles/base/decoration/base-placeholders.scss b/ui-v2/app/styles/base/decoration/base-placeholders.scss
new file mode 100644
index 0000000000..42a6acd54c
--- /dev/null
+++ b/ui-v2/app/styles/base/decoration/base-placeholders.scss
@@ -0,0 +1,4 @@
+%decor-border-000 {
+  border-style: solid;
+  border-width: 0;
+}
diff --git a/ui-v2/app/styles/base/decoration/base-variables.scss b/ui-v2/app/styles/base/decoration/base-variables.scss
new file mode 100644
index 0000000000..c22d70dda2
--- /dev/null
+++ b/ui-v2/app/styles/base/decoration/base-variables.scss
@@ -0,0 +1,9 @@
+$decor-radius-000: 0;
+$decor-radius-100: 2px;
+$decor-radius-200: 4px;
+$decor-radius-300: 7px;
+$decor-radius-full: 100%;
+$decor-border-000: none;
+$decor-border-100: 1px solid;
+$decor-border-200: 2px solid;
+$decor-border-300: 3px solid;
diff --git a/ui-v2/app/styles/base/decoration/index.scss b/ui-v2/app/styles/base/decoration/index.scss
new file mode 100644
index 0000000000..3fe0d277f0
--- /dev/null
+++ b/ui-v2/app/styles/base/decoration/index.scss
@@ -0,0 +1,2 @@
+@import './base-variables';
+@import './base-placeholders';
diff --git a/ui-v2/app/styles/base/index.scss b/ui-v2/app/styles/base/index.scss
new file mode 100644
index 0000000000..e48bb67d47
--- /dev/null
+++ b/ui-v2/app/styles/base/index.scss
@@ -0,0 +1,3 @@
+@import './decoration/index';
+@import './color/index';
+@import './typography/index';
diff --git a/ui-v2/app/styles/base/reset/base-variables.scss b/ui-v2/app/styles/base/reset/base-variables.scss
new file mode 100644
index 0000000000..e726cdd98e
--- /dev/null
+++ b/ui-v2/app/styles/base/reset/base-variables.scss
@@ -0,0 +1,35 @@
+%reset-margin {
+  margin: 0;
+}
+%reset-box {
+  margin: 0;
+  padding: 0;
+}
+%reset-typo {
+  font-size: 100%;
+  font-weight: normal;
+}
+%reset-list {
+  list-style: none;
+}
+%reset-table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+%reset-table th,
+%reset-table td {
+  padding: 0;
+  text-align: left;
+}
+/* move to layout? */
+%responsive-media {
+  height: auto;
+  max-width: 100%;
+}
+%user-select-none {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
diff --git a/ui-v2/app/styles/base/reset/index.scss b/ui-v2/app/styles/base/reset/index.scss
new file mode 100644
index 0000000000..0aec96d2de
--- /dev/null
+++ b/ui-v2/app/styles/base/reset/index.scss
@@ -0,0 +1,3 @@
+@import './base-variables';
+@import './system';
+@import './minireset';
diff --git a/ui-v2/app/styles/base/reset/minireset.scss b/ui-v2/app/styles/base/reset/minireset.scss
new file mode 100644
index 0000000000..b469bf9406
--- /dev/null
+++ b/ui-v2/app/styles/base/reset/minireset.scss
@@ -0,0 +1,64 @@
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @extend %reset-box;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @extend %reset-typo;
+}
+ul {
+  @extend %reset-list;
+}
+table {
+  @extend %reset-table;
+}
+img,
+embed,
+object,
+audio,
+video {
+  @extend %responsive-media;
+}
+button,
+input,
+select,
+textarea {
+  margin: 0;
+}
+iframe {
+  border: 0;
+}
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+section {
+  display: block;
+}
diff --git a/ui-v2/app/styles/base/reset/system.scss b/ui-v2/app/styles/base/reset/system.scss
new file mode 100644
index 0000000000..72af44357e
--- /dev/null
+++ b/ui-v2/app/styles/base/reset/system.scss
@@ -0,0 +1,99 @@
+a {
+  text-decoration: none;
+}
+td,
+th,
+span,
+strong {
+  color: inherit;
+}
+body {
+  color: $ui-gray-900;
+}
+a {
+  color: $ui-color-action;
+}
+html {
+  background-color: $ui-white;
+}
+hr {
+  background-color: $ui-gray-500;
+}
+html {
+  font-size: $typo-size-000;
+}
+body {
+  line-height: 1.5;
+}
+body,
+button,
+input,
+select,
+textarea {
+  font-family: $typo-family-sans;
+}
+code,
+pre {
+  font-family: $typo-family-mono;
+}
+strong {
+  font-style: inherit;
+  font-weight: $typo-weight-bold;
+}
+html {
+  text-rendering: optimizeLegibility;
+  text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+code,
+pre {
+  -moz-osx-font-smoothing: auto;
+  -webkit-font-smoothing: auto;
+}
+
+pre {
+  -webkit-overflow-scrolling: touch;
+  overflow-x: auto;
+  white-space: pre;
+  word-wrap: normal;
+}
+html {
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+html {
+  box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+fieldset {
+  border: none;
+  width: 100%;
+}
+a {
+  cursor: pointer;
+}
+hr {
+  border: none;
+  display: block;
+}
+input[type='checkbox'],
+input[type='radio'] {
+  vertical-align: baseline;
+}
+td,
+th {
+  text-align: left;
+  vertical-align: top;
+}
+html {
+  min-width: 300px;
+}
+hr {
+  height: 1px;
+  margin: 1.5rem 0;
+}
diff --git a/ui-v2/app/styles/base/typography/base-variables.scss b/ui-v2/app/styles/base/typography/base-variables.scss
new file mode 100644
index 0000000000..7b1faff76f
--- /dev/null
+++ b/ui-v2/app/styles/base/typography/base-variables.scss
@@ -0,0 +1,26 @@
+$typo-family-sans: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+  'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+$typo-family-mono: monospace;
+$typo-size-000: 16px;
+$typo-size-100: 3.5rem;
+$typo-size-200: 2.5rem;
+$typo-size-300: 2.2rem;
+$typo-size-400: 1.5rem;
+$typo-size-500: 1.125rem;
+$typo-size-600: 0.875rem;
+$typo-size-700: 0.8125rem;
+$typo-size-800: 0.75rem;
+$typo-weight-light: 300;
+$typo-weight-normal: 400;
+$typo-weight-medium: 500;
+$typo-weight-semibold: 600;
+$typo-weight-bold: 700;
+$typo-lead-000: 0;
+$type-lead-050: 1;
+$typo-lead-100: 1.2;
+$typo-lead-200: 1.25;
+$typo-lead-300: 1.28;
+$typo-lead-500: 1.33;
+$typo-lead-600: 1.4;
+$typo-lead-700: 1.5;
+$typo-lead-800: 1.7;
diff --git a/ui-v2/app/styles/base/typography/index.scss b/ui-v2/app/styles/base/typography/index.scss
new file mode 100644
index 0000000000..bb221c7e8f
--- /dev/null
+++ b/ui-v2/app/styles/base/typography/index.scss
@@ -0,0 +1 @@
+@import './base-variables';
diff --git a/ui-v2/app/styles/components/action-group.scss b/ui-v2/app/styles/components/action-group.scss
index b4f324c114..49aec84eb9 100644
--- a/ui-v2/app/styles/components/action-group.scss
+++ b/ui-v2/app/styles/components/action-group.scss
@@ -1,116 +1,4 @@
+@import './action-group/index';
 .action-group {
   @extend %action-group;
 }
-%action-group label {
-  border-radius: $radius-small;
-  cursor: pointer;
-}
-
-%action-group input[type='radio']:checked + label:first-of-type,
-%action-group label:first-of-type:hover {
-  background-color: $gray;
-}
-%action-group label span {
-  display: none;
-}
-%action-group label::after,
-%action-group label::before,
-%action-group::before {
-  @extend %with-dot;
-}
-%action-group::before {
-  margin-left: -1px;
-}
-%action-group label::after {
-  margin-left: 5px;
-}
-%action-group label::before {
-  margin-left: -7px;
-}
-%action-group ul {
-  border: 1px solid;
-  border-radius: $radius-small;
-  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21);
-}
-%action-group ul::before {
-  border-top: 1px solid;
-  border-left: 1px solid;
-}
-%action-group ul,
-%action-group ul::before {
-  border-color: $blue;
-}
-%action-group li a:hover {
-  background-color: $blue;
-  color: $white;
-}
-%action-group ul,
-%action-group ul::before {
-  background-color: $white;
-}
-%action-group {
-}
-%action-group {
-  width: 30px;
-  height: 30px;
-  position: absolute;
-  top: 8px;
-  right: 15px;
-}
-%action-group label {
-  display: block;
-  height: 100%;
-}
-%action-group label:last-of-type {
-  position: absolute;
-  width: 100%;
-  z-index: -1;
-  top: 0;
-}
-%action-group ul {
-  position: absolute;
-  right: -10px;
-  padding: 1px;
-}
-%action-group ul::before {
-  position: absolute;
-  right: 18px;
-  content: '';
-  display: block;
-  width: 10px;
-  height: 10px;
-}
-%action-group ul:not(.above) {
-  top: 35px;
-}
-%action-group ul:not(.above)::before {
-  top: -6px;
-  transform: rotate(45deg);
-}
-%action-group ul.above {
-  bottom: 35px;
-}
-%action-group ul.above::before {
-  bottom: -6px;
-  transform: rotate(225deg);
-}
-%action-group li {
-  position: relative;
-  z-index: 1;
-}
-%action-group li a {
-  width: 170px;
-  padding: 10px 10px;
-}
-%action-group input[type='radio'],
-%action-group input[type='radio'] ~ ul,
-%action-group input[type='radio'] ~ .with-confirmation > ul {
-  display: none;
-}
-%action-group input[type='radio']:checked ~ ul,
-%action-group input[type='radio']:checked ~ .with-confirmation > ul {
-  display: block;
-}
-%action-group input[type='radio']:checked ~ label:last-of-type {
-  z-index: 1;
-}
diff --git a/ui-v2/app/styles/components/action-group/index.scss b/ui-v2/app/styles/components/action-group/index.scss
new file mode 100644
index 0000000000..bc18252196
--- /dev/null
+++ b/ui-v2/app/styles/components/action-group/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/action-group/layout.scss b/ui-v2/app/styles/components/action-group/layout.scss
new file mode 100644
index 0000000000..0c12687a0d
--- /dev/null
+++ b/ui-v2/app/styles/components/action-group/layout.scss
@@ -0,0 +1,76 @@
+%action-group label span {
+  display: none;
+}
+%action-group::before {
+  margin-left: -1px;
+}
+%action-group label::after {
+  margin-left: 5px;
+}
+%action-group label::before {
+  margin-left: -7px;
+}
+%action-group {
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  top: 8px;
+  right: 15px;
+}
+%action-group label {
+  display: block;
+  height: 100%;
+}
+%action-group label:last-of-type {
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+  top: 0;
+}
+%action-group ul {
+  position: absolute;
+  right: -10px;
+  padding: 1px;
+}
+%action-group ul::before {
+  position: absolute;
+  right: 18px;
+  content: '';
+  display: block;
+  width: 10px;
+  height: 10px;
+}
+%action-group ul:not(.above) {
+  top: 35px;
+}
+%action-group ul:not(.above)::before {
+  top: -6px;
+  transform: rotate(45deg);
+}
+%action-group ul.above {
+  bottom: 35px;
+}
+%action-group ul.above::before {
+  bottom: -6px;
+  transform: rotate(225deg);
+}
+%action-group li {
+  position: relative;
+  z-index: 1;
+}
+%action-group li a {
+  width: 170px;
+  padding: 10px 10px;
+}
+%action-group input[type='radio'],
+%action-group input[type='radio'] ~ ul,
+%action-group input[type='radio'] ~ .with-confirmation > ul {
+  display: none;
+}
+%action-group input[type='radio']:checked ~ ul,
+%action-group input[type='radio']:checked ~ .with-confirmation > ul {
+  display: block;
+}
+%action-group input[type='radio']:checked ~ label[for="actions_close"] {
+  z-index: 1;
+}
diff --git a/ui-v2/app/styles/components/action-group/skin.scss b/ui-v2/app/styles/components/action-group/skin.scss
new file mode 100644
index 0000000000..29881072b8
--- /dev/null
+++ b/ui-v2/app/styles/components/action-group/skin.scss
@@ -0,0 +1,37 @@
+%action-group label {
+  border-radius: $radius-small;
+  cursor: pointer;
+}
+%action-group ul {
+  border: $decor-border-100;
+  border-radius: $radius-small;
+  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21);
+}
+%action-group ul::before {
+  border-top: $decor-border-100;
+  border-left: $decor-border-100;
+}
+%action-group ul,
+%action-group ul::before {
+  border-color: $ui-color-action;
+}
+%action-group input[type='radio']:checked + label:first-of-type,
+%action-group label:first-of-type:hover {
+  background-color: $ui-gray-050;
+}
+%action-group label:first-of-type:active {
+  background-color: $ui-gray-100;
+}
+%action-group li a:hover {
+  background-color: $ui-color-action;
+  color: $ui-white;
+}
+%action-group ul,
+%action-group ul::before {
+  background-color: $ui-white;
+}
+%action-group label::after,
+%action-group label::before,
+%action-group::before {
+  @extend %with-dot;
+}
diff --git a/ui-v2/app/styles/components/anchors.scss b/ui-v2/app/styles/components/anchors.scss
new file mode 100644
index 0000000000..4c0399dd69
--- /dev/null
+++ b/ui-v2/app/styles/components/anchors.scss
@@ -0,0 +1,18 @@
+@import './anchors/index';
+main a {
+  color: $ui-gray-900;
+}
+main a[rel*='help'] {
+  @extend %with-info;
+}
+main label a[rel*='help'] {
+  color: $ui-gray-400;
+}
+
+[role='tabpanel'] > p:only-child [rel*='help']::after {
+  content: none;
+}
+main p a,
+main dd a {
+  @extend %anchor;
+}
diff --git a/ui-v2/app/styles/components/anchors/index.scss b/ui-v2/app/styles/components/anchors/index.scss
new file mode 100644
index 0000000000..093b8f8936
--- /dev/null
+++ b/ui-v2/app/styles/components/anchors/index.scss
@@ -0,0 +1,10 @@
+%anchor:hover,
+%anchor:focus {
+  text-decoration: underline;
+}
+%anchor,
+%anchor:hover,
+%anchor:focus,
+%anchor:active {
+  color: $ui-color-action;
+}
diff --git a/ui-v2/app/styles/components/breadcrumbs.scss b/ui-v2/app/styles/components/breadcrumbs.scss
index 071467acfc..56e537ed1e 100644
--- a/ui-v2/app/styles/components/breadcrumbs.scss
+++ b/ui-v2/app/styles/components/breadcrumbs.scss
@@ -1,18 +1,4 @@
+@import './breadcrumbs/index';
 main header nav:first-child {
   @extend %breadcrumbs;
 }
-%breadcrumbs a {
-  @extend %with-chevron;
-  color: $blue;
-}
-%breadcrumbs {
-  position: absolute;
-  top: -35px; // %app-view:margin-top - 15px;
-}
-%breadcrumbs ol {
-  list-style-type: none;
-  display: flex;
-}
-%breadcrumbs li {
-  margin-right: 5px;
-}
diff --git a/ui-v2/app/styles/components/breadcrumbs/index.scss b/ui-v2/app/styles/components/breadcrumbs/index.scss
new file mode 100644
index 0000000000..bc18252196
--- /dev/null
+++ b/ui-v2/app/styles/components/breadcrumbs/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/breadcrumbs/layout.scss b/ui-v2/app/styles/components/breadcrumbs/layout.scss
new file mode 100644
index 0000000000..fff6770491
--- /dev/null
+++ b/ui-v2/app/styles/components/breadcrumbs/layout.scss
@@ -0,0 +1,10 @@
+%breadcrumbs {
+  position: absolute;
+  top: -35px; // %app-view:margin-top - 15px;
+}
+%breadcrumbs ol {
+  display: flex;
+}
+%breadcrumbs li {
+  margin-right: 5px;
+}
diff --git a/ui-v2/app/styles/components/breadcrumbs/skin.scss b/ui-v2/app/styles/components/breadcrumbs/skin.scss
new file mode 100644
index 0000000000..86f88cf495
--- /dev/null
+++ b/ui-v2/app/styles/components/breadcrumbs/skin.scss
@@ -0,0 +1,9 @@
+%breadcrumbs a {
+  @extend %with-chevron;
+}
+%breadcrumbs ol {
+  list-style-type: none;
+}
+%breadcrumbs a {
+  color: $ui-color-action;
+}
diff --git a/ui-v2/app/styles/components/button.scss b/ui-v2/app/styles/components/button.scss
deleted file mode 100644
index d6d47bdbdc..0000000000
--- a/ui-v2/app/styles/components/button.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-button,
-a[rel='back'],
-html.template-error div > a {
-  @extend %button;
-}
-%button.type-delete {
-  @extend %dangerous-button;
-}
-// no % all copy buttons WILL be buttons
-button.copy-btn {
-  @extend %copy-button;
-}
-main p a,
-main dd a {
-  @extend %link;
-}
-%button[type='submit'],
-%button.type-create {
-  @extend %primary-button;
-}
-%link:hover,
-%link:focus {
-  text-decoration: underline;
-}
-%button {
-  @extend %user-select-none;
-  white-space: nowrap;
-  border: 1px solid;
-  border-radius: $radius-small;
-  box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.12);
-  cursor: pointer;
-}
-%primary-button {
-  border: 0;
-}
-%copy-button {
-  border: 0 !important;
-  box-shadow: none !important;
-}
-%copy-button {
-  @extend %with-clipboard;
-}
-%button:not([type='submit']),
-a[rel='back'] {
-  border-color: currentColor;
-}
-%link,
-%link:hover,
-%link:focus,
-%link:active {
-  color: $blue;
-}
-%button {
-  color: $gray-500;
-}
-%button:hover,
-%button:focus {
-  color: $gray-700;
-}
-%button:active {
-  color: $gray-700;
-}
-%copy-button {
-  color: $blue !important;
-  background-color: $transparent;
-}
-%copy-button:hover,
-%copy-button:focus {
-  background-color: $gray-050;
-}
-%copy-button:active {
-  background-color: $gray-100;
-}
-%primary-button {
-  background-color: $blue-500;
-  color: $white !important;
-}
-%primary-button:hover,
-%primary-button:focus {
-  background-color: $blue-700;
-}
-%primary-button:disabled {
-  color: rgba($white, 0.5);
-  background-color: rgba($blue-700, 0.5);
-  box-shadow: none;
-}
-%primary-button:active {
-  background-color: $blue-900;
-}
-%dangerous-button {
-  color: $dangerous-red;
-}
-%dangerous-button:hover,
-%dangerous-button:focus {
-  background-color: $red-500;
-  color: $white;
-  border-color: $red-500;
-}
-%dangerous-button:disabled {
-  color: rgba($red-500, 0.5);
-  border-color: rgba($red-500, 0.5);
-  background-color: $white;
-  box-shadow: none;
-}
-%dangerous-button:active {
-  background-color: $red-700;
-  color: $white;
-  border-color: $red-700;
-}
-%button {
-  display: inline-flex;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  padding: calc(0.375em - 1px) calc(2.2em - 1px);
-  height: 2.5em;
-}
-%button:not(:last-child) {
-  margin-right: 7px;
-}
diff --git a/ui-v2/app/styles/components/buttons.scss b/ui-v2/app/styles/components/buttons.scss
new file mode 100644
index 0000000000..977dc0897e
--- /dev/null
+++ b/ui-v2/app/styles/components/buttons.scss
@@ -0,0 +1,16 @@
+@import './buttons/index';
+button[type='submit'],
+a.type-create {
+  @extend %primary-button;
+}
+button[type='reset'],
+button[type='button']:not(.copy-btn):not(.type-delete),
+html.template-error div > a {
+  @extend %secondary-button;
+}
+button.type-delete {
+  @extend %dangerous-button;
+}
+button.copy-btn {
+  @extend %copy-button;
+}
diff --git a/ui-v2/app/styles/components/buttons/index.css b/ui-v2/app/styles/components/buttons/index.css
new file mode 100644
index 0000000000..bc18252196
--- /dev/null
+++ b/ui-v2/app/styles/components/buttons/index.css
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/buttons/layout.scss b/ui-v2/app/styles/components/buttons/layout.scss
new file mode 100644
index 0000000000..eb242bdb28
--- /dev/null
+++ b/ui-v2/app/styles/components/buttons/layout.scss
@@ -0,0 +1,11 @@
+%button {
+  display: inline-flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  padding: calc(0.375em - 1px) calc(2.2em - 1px);
+  height: 2.5em;
+}
+%button:not(:last-child) {
+  margin-right: 7px;
+}
diff --git a/ui-v2/app/styles/components/buttons/skin.scss b/ui-v2/app/styles/components/buttons/skin.scss
new file mode 100644
index 0000000000..0d8822cd61
--- /dev/null
+++ b/ui-v2/app/styles/components/buttons/skin.scss
@@ -0,0 +1,90 @@
+/* decor */
+%button {
+  @extend %user-select-none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+%primary-button,
+%secondary-button,
+%copy-button,
+%dangerous-button {
+  @extend %button;
+}
+%primary-button,
+%secondary-button,
+%dangerous-button {
+  border: $decor-border-100;
+  border-radius: $radius-small;
+  box-shadow: 0 3px 1px 0 rgba($ui-black, 0.12);
+}
+%primary-button,
+%copy-button {
+  border: 0;
+}
+%copy-button {
+  @extend %with-clipboard;
+}
+/* color */
+%secondary-button,
+%dangerous-button,
+%copy-button {
+  border-color: currentColor;
+}
+%secondary-button {
+  color: $ui-gray-400;
+}
+%secondary-button:hover,
+%secondary-button:focus {
+  color: $ui-gray-600;
+}
+%secondary-button:active {
+  color: $ui-gray-600;
+}
+%primary-button {
+  background-color: $ui-color-action;
+  color: $ui-white;
+}
+%primary-button:hover,
+%primary-button:focus {
+  background-color: $ui-blue-700;
+}
+%primary-button:disabled {
+  color: rgba($ui-white, 0.5);
+  background-color: rgba($ui-blue-700, 0.5);
+  box-shadow: none;
+}
+%primary-button:active {
+  background-color: $ui-blue-900;
+}
+%dangerous-button {
+  color: $ui-color-danger;
+}
+%dangerous-button:hover,
+%dangerous-button:focus {
+  background-color: $ui-color-danger;
+  border-color: $ui-color-danger;
+  color: $ui-white;
+}
+%dangerous-button:disabled {
+  color: rgba($ui-color-danger, 0.5);
+  border-color: rgba($ui-color-danger, 0.5);
+  background-color: $ui-white;
+  box-shadow: none;
+}
+%dangerous-button:active {
+  background-color: $ui-red-700;
+  border-color: $ui-red-700;
+  color: $ui-white;
+}
+%copy-button {
+  color: $ui-color-action;
+  background-color: $ui-color-transparent;
+}
+%copy-button:hover,
+%copy-button:focus {
+  color: $ui-color-action;
+  background-color: $ui-gray-050;
+}
+%copy-button:active {
+  background-color: $ui-gray-200;
+}
diff --git a/ui-v2/app/styles/components/code-editor.scss b/ui-v2/app/styles/components/code-editor.scss
index 1132925cc6..966b044a5e 100644
--- a/ui-v2/app/styles/components/code-editor.scss
+++ b/ui-v2/app/styles/components/code-editor.scss
@@ -1,178 +1,2 @@
-$syntax-light-grey: #dde3e7;
-$syntax-light-gray: #a4a4a4;
-$syntax-light-grey-blue: #6c7b81;
-$syntax-dark-grey: #788290;
-$syntax-faded-gray: #eaeaea;
-// Product colors
-$syntax-atlas: #127eff;
-$syntax-vagrant: #2f88f7;
-$syntax-consul: #69499a;
-$syntax-terraform: #822ff7;
-$syntax-serf: #dd4e58;
-$syntax-packer: #1ddba3;
-
-// Our colors
-$syntax-gray: lighten($black, 89%);
-$syntax-red: #ff3d3d;
-$syntax-green: #39b54a;
-$syntax-dark-gray: #535f73;
-
-$syntax-gutter-grey: #2a2f36;
-$syntax-yellow: $yellow;
-.CodeMirror {
-  min-height: 300px;
-  height: auto;
-}
-.CodeMirror-lint-tooltip {
-  background-color: #f9f9fa;
-  border: 1px solid $syntax-light-gray;
-  border-radius: 0;
-  color: lighten($black, 13%);
-  font-family: $family-monospace;
-  font-size: 13px;
-  padding: 7px 8px 9px;
-}
-
-.cm-s-hashi {
-  &.CodeMirror {
-    width: 100%;
-    background-color: $black !important;
-    color: #cfd2d1 !important;
-    border: none;
-    font-family: $family-monospace;
-    -webkit-font-smoothing: auto;
-    line-height: 1.4;
-  }
-
-  .CodeMirror-gutters {
-    color: $syntax-dark-grey;
-    background-color: $syntax-gutter-grey;
-    border: none;
-  }
-
-  .CodeMirror-cursor {
-    border-left: solid thin #f8f8f0;
-  }
-
-  .CodeMirror-linenumber {
-    color: #6d8a88;
-  }
-
-  &.CodeMirror-focused div.CodeMirror-selected {
-    background: rgba(255, 255, 255, 0.1);
-  }
-
-  .CodeMirror-line::selection,
-  .CodeMirror-line > span::selection,
-  .CodeMirror-line > span > span::selection {
-    background: rgba(255, 255, 255, 0.1);
-  }
-
-  .CodeMirror-line::-moz-selection,
-  .CodeMirror-line > span::-moz-selection,
-  .CodeMirror-line > span > span::-moz-selection {
-    background: rgba(255, 255, 255, 0.1);
-  }
-
-  span.cm-comment {
-    color: $syntax-light-grey;
-  }
-
-  span.cm-string,
-  span.cm-string-2 {
-    color: $syntax-packer;
-  }
-
-  span.cm-number {
-    color: $syntax-serf;
-  }
-
-  span.cm-variable {
-    color: lighten($syntax-consul, 20%);
-  }
-
-  span.cm-variable-2 {
-    color: lighten($syntax-consul, 20%);
-  }
-
-  span.cm-def {
-    color: $syntax-packer;
-  }
-
-  span.cm-operator {
-    color: $syntax-gray;
-  }
-  span.cm-keyword {
-    color: $syntax-yellow;
-  }
-
-  span.cm-atom {
-    color: $syntax-serf;
-  }
-
-  span.cm-meta {
-    color: $syntax-packer;
-  }
-
-  span.cm-tag {
-    color: $syntax-packer;
-  }
-
-  span.cm-attribute {
-    color: #9fca56;
-  }
-
-  span.cm-qualifier {
-    color: #9fca56;
-  }
-
-  span.cm-property {
-    color: lighten($syntax-consul, 20%);
-  }
-
-  span.cm-variable-3 {
-    color: #9fca56;
-  }
-
-  span.cm-builtin {
-    color: #9fca56;
-  }
-
-  .CodeMirror-activeline-background {
-    background: #101213;
-  }
-
-  .CodeMirror-matchingbracket {
-    text-decoration: underline;
-    color: white !important;
-  }
-}
-
-.readonly-codemirror {
-  .CodeMirror-cursors {
-    display: none;
-  }
-
-  .cm-s-hashi {
-    span {
-      color: $syntax-light-grey;
-    }
-
-    span.cm-string,
-    span.cm-string-2 {
-      color: $syntax-faded-gray;
-    }
-
-    span.cm-number {
-      color: lighten($syntax-dark-gray, 30%);
-    }
-
-    span.cm-property {
-      color: white;
-    }
-
-    span.cm-variable-2 {
-      color: $syntax-light-grey-blue;
-    }
-  }
-}
+@import './code-editor/index';
+// yet to make into placeholder
diff --git a/ui-v2/app/styles/components/code-editor/index.scss b/ui-v2/app/styles/components/code-editor/index.scss
new file mode 100644
index 0000000000..97e60dd40d
--- /dev/null
+++ b/ui-v2/app/styles/components/code-editor/index.scss
@@ -0,0 +1,178 @@
+$syntax-light-grey: #dde3e7;
+$syntax-light-gray: #a4a4a4;
+$syntax-light-grey-blue: #6c7b81;
+$syntax-dark-grey: #788290;
+$syntax-faded-gray: #eaeaea;
+// Product colors
+$syntax-atlas: #127eff;
+$syntax-vagrant: #2f88f7;
+$syntax-consul: #69499a;
+$syntax-terraform: #822ff7;
+$syntax-serf: #dd4e58;
+$syntax-packer: #1ddba3;
+
+// Our colors
+$syntax-gray: lighten($ui-black, 89%);
+$syntax-red: #ff3d3d;
+$syntax-green: #39b54a;
+$syntax-dark-gray: #535f73;
+
+$syntax-gutter-grey: #2a2f36;
+$syntax-yellow: $ui-yellow-500;
+.CodeMirror {
+  min-height: 300px;
+  height: auto;
+}
+.CodeMirror-lint-tooltip {
+  background-color: #f9f9fa;
+  border: 1px solid $syntax-light-gray;
+  border-radius: 0;
+  color: lighten($ui-black, 13%);
+  font-family: $typo-family-mono;
+  font-size: 13px;
+  padding: 7px 8px 9px;
+}
+
+.cm-s-hashi {
+  &.CodeMirror {
+    width: 100%;
+    background-color: $ui-black !important;
+    color: #cfd2d1 !important;
+    border: none;
+    font-family: $typo-family-mono;
+    -webkit-font-smoothing: auto;
+    line-height: 1.4;
+  }
+
+  .CodeMirror-gutters {
+    color: $syntax-dark-grey;
+    background-color: $syntax-gutter-grey;
+    border: none;
+  }
+
+  .CodeMirror-cursor {
+    border-left: solid thin #f8f8f0;
+  }
+
+  .CodeMirror-linenumber {
+    color: #6d8a88;
+  }
+
+  &.CodeMirror-focused div.CodeMirror-selected {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .CodeMirror-line::selection,
+  .CodeMirror-line > span::selection,
+  .CodeMirror-line > span > span::selection {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .CodeMirror-line::-moz-selection,
+  .CodeMirror-line > span::-moz-selection,
+  .CodeMirror-line > span > span::-moz-selection {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  span.cm-comment {
+    color: $syntax-light-grey;
+  }
+
+  span.cm-string,
+  span.cm-string-2 {
+    color: $syntax-packer;
+  }
+
+  span.cm-number {
+    color: $syntax-serf;
+  }
+
+  span.cm-variable {
+    color: lighten($syntax-consul, 20%);
+  }
+
+  span.cm-variable-2 {
+    color: lighten($syntax-consul, 20%);
+  }
+
+  span.cm-def {
+    color: $syntax-packer;
+  }
+
+  span.cm-operator {
+    color: $syntax-gray;
+  }
+  span.cm-keyword {
+    color: $syntax-yellow;
+  }
+
+  span.cm-atom {
+    color: $syntax-serf;
+  }
+
+  span.cm-meta {
+    color: $syntax-packer;
+  }
+
+  span.cm-tag {
+    color: $syntax-packer;
+  }
+
+  span.cm-attribute {
+    color: #9fca56;
+  }
+
+  span.cm-qualifier {
+    color: #9fca56;
+  }
+
+  span.cm-property {
+    color: lighten($syntax-consul, 20%);
+  }
+
+  span.cm-variable-3 {
+    color: #9fca56;
+  }
+
+  span.cm-builtin {
+    color: #9fca56;
+  }
+
+  .CodeMirror-activeline-background {
+    background: #101213;
+  }
+
+  .CodeMirror-matchingbracket {
+    text-decoration: underline;
+    color: $ui-white !important;
+  }
+}
+
+.readonly-codemirror {
+  .CodeMirror-cursors {
+    display: none;
+  }
+
+  .cm-s-hashi {
+    span {
+      color: $syntax-light-grey;
+    }
+
+    span.cm-string,
+    span.cm-string-2 {
+      color: $syntax-faded-gray;
+    }
+
+    span.cm-number {
+      color: lighten($syntax-dark-gray, 30%);
+    }
+
+    span.cm-property {
+      color: $ui-white;
+    }
+
+    span.cm-variable-2 {
+      color: $syntax-light-grey-blue;
+    }
+  }
+}
diff --git a/ui-v2/app/styles/components/confirmation-dialog.scss b/ui-v2/app/styles/components/confirmation-dialog.scss
index 0e4e1dec8b..6365e8433c 100644
--- a/ui-v2/app/styles/components/confirmation-dialog.scss
+++ b/ui-v2/app/styles/components/confirmation-dialog.scss
@@ -1,25 +1,4 @@
+@import './confirmation-dialog/index';
 div.with-confirmation {
   @extend %confirmation-dialog, %confirmation-dialog-inline;
 }
-table div.with-confirmation.confirming {
-  background-color: $white;
-}
-%confirmation-dialog-inline p {
-  color: $text-note;
-}
-%confirmation-dialog {
-  float: right;
-}
-%confirmation-dialog-inline p {
-  margin-right: 1em;
-  margin-bottom: 0;
-}
-%confirmation-dialog-inline {
-  display: flex;
-  align-items: center;
-  line-height: 1;
-}
-table div.with-confirmation.confirming {
-  position: absolute;
-  right: 0;
-}
diff --git a/ui-v2/app/styles/components/confirmation-dialog/index.scss b/ui-v2/app/styles/components/confirmation-dialog/index.scss
new file mode 100644
index 0000000000..bc18252196
--- /dev/null
+++ b/ui-v2/app/styles/components/confirmation-dialog/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/confirmation-dialog/layout.scss b/ui-v2/app/styles/components/confirmation-dialog/layout.scss
new file mode 100644
index 0000000000..c58c339847
--- /dev/null
+++ b/ui-v2/app/styles/components/confirmation-dialog/layout.scss
@@ -0,0 +1,16 @@
+%confirmation-dialog {
+  float: right;
+}
+%confirmation-dialog-inline p {
+  margin-right: 1em;
+  margin-bottom: 0;
+}
+%confirmation-dialog-inline {
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+table div.with-confirmation.confirming {
+  position: absolute;
+  right: 0;
+}
diff --git a/ui-v2/app/styles/components/confirmation-dialog/skin.scss b/ui-v2/app/styles/components/confirmation-dialog/skin.scss
new file mode 100644
index 0000000000..8df087ff55
--- /dev/null
+++ b/ui-v2/app/styles/components/confirmation-dialog/skin.scss
@@ -0,0 +1,6 @@
+table div.with-confirmation.confirming {
+  background-color: $ui-white;
+}
+%confirmation-dialog-inline p {
+  color: $ui-gray-400;
+}
diff --git a/ui-v2/app/styles/components/expanded-single-select.scss b/ui-v2/app/styles/components/expanded-single-select.scss
deleted file mode 100644
index b0f36de02d..0000000000
--- a/ui-v2/app/styles/components/expanded-single-select.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-%expanded-single-select label {
-  cursor: pointer;
-}
-%expanded-single-select input[type='radio']:checked + *,
-%expanded-single-select input[type='radio']:hover + *,
-%expanded-single-select input[type='radio']:focus + * {
-  background-color: $white;
-  box-shadow: 0 4px 8px 0 rgba($black, 0.05);
-}
-%expanded-single-select,
-%expanded-single-select label {
-  height: 100%;
-}
-@media #{$--horizontal-selects} {
-  %expanded-single-select {
-    display: flex;
-  }
-  %expanded-single-select label {
-    flex-grow: 1;
-  }
-}
-%expanded-single-select label {
-  display: block;
-}
-%expanded-single-select label span {
-  display: block;
-  height: 100%;
-  padding: 5px 14px;
-}
-%expanded-single-select input[type='radio'] {
-  display: none;
-}
diff --git a/ui-v2/app/styles/components/expanded-single-select/index.scss b/ui-v2/app/styles/components/expanded-single-select/index.scss
new file mode 100644
index 0000000000..bc18252196
--- /dev/null
+++ b/ui-v2/app/styles/components/expanded-single-select/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/expanded-single-select/layout.scss b/ui-v2/app/styles/components/expanded-single-select/layout.scss
new file mode 100644
index 0000000000..8d35e9fba0
--- /dev/null
+++ b/ui-v2/app/styles/components/expanded-single-select/layout.scss
@@ -0,0 +1,23 @@
+@media #{$--horizontal-selects} {
+  %expanded-single-select {
+    display: flex;
+  }
+  %expanded-single-select label {
+    flex-grow: 1;
+  }
+}
+%expanded-single-select input[type='radio'] {
+  display: none;
+}
+%expanded-single-select label,
+%expanded-single-select label span {
+  display: block;
+}
+%expanded-single-select,
+%expanded-single-select label,
+%expanded-single-select label span {
+  height: 100%;
+}
+%expanded-single-select label span {
+  padding: 5px 14px;
+}
diff --git a/ui-v2/app/styles/components/expanded-single-select/skin.scss b/ui-v2/app/styles/components/expanded-single-select/skin.scss
new file mode 100644
index 0000000000..a03183b045
--- /dev/null
+++ b/ui-v2/app/styles/components/expanded-single-select/skin.scss
@@ -0,0 +1,13 @@
+%expanded-single-select label {
+  cursor: pointer;
+}
+%expanded-single-select input[type='radio']:checked + *,
+%expanded-single-select input[type='radio']:hover + *,
+%expanded-single-select input[type='radio']:focus + * {
+  box-shadow: 0 4px 8px 0 rgba($ui-black, 0.05);
+}
+%expanded-single-select input[type='radio']:checked + *,
+%expanded-single-select input[type='radio']:hover + *,
+%expanded-single-select input[type='radio']:focus + * {
+  background-color: $ui-white;
+}
diff --git a/ui-v2/app/styles/components/feedback-dialog.scss b/ui-v2/app/styles/components/feedback-dialog.scss
index 858f76ee2a..19ec3ca6e8 100644
--- a/ui-v2/app/styles/components/feedback-dialog.scss
+++ b/ui-v2/app/styles/components/feedback-dialog.scss
@@ -1,39 +1,4 @@
+@import './feedback-dialog/index';
 main .with-feedback {
   @extend %feedback-dialog-inline;
 }
-%feedback-dialog-inline p,
-%feedback-dialog-inline p::after {
-  color: $white;
-  background-color: $carbon;
-}
-// %feedback-dialog-inline p {
-//   animation-name: feedback-dialog-out;
-// 	animation-fill-mode: forwards;
-// }
-// @keyframes feedback-dialog-out {
-// 	90% { opacity: 1; }
-// 	100% { opacity: 0; }
-// }
-%feedback-dialog-inline {
-  position: relative;
-  display: flex;
-  justify-content: center;
-}
-%feedback-dialog-inline p::after {
-  content: '';
-  display: block;
-  position: absolute;
-  left: 50%;
-  margin-left: -5px;
-  bottom: -5px;
-  width: 10px;
-  height: 10px;
-  transform: rotate(45deg);
-}
-%feedback-dialog-inline p {
-  padding: 10px;
-  position: absolute;
-  bottom: 100%;
-  text-align: center;
-  white-space: nowrap; //temp
-}
diff --git a/ui-v2/app/styles/components/feedback-dialog/index.scss b/ui-v2/app/styles/components/feedback-dialog/index.scss
new file mode 100644
index 0000000000..bc18252196
--- /dev/null
+++ b/ui-v2/app/styles/components/feedback-dialog/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/feedback-dialog/layout.scss b/ui-v2/app/styles/components/feedback-dialog/layout.scss
new file mode 100644
index 0000000000..9ead44e9d2
--- /dev/null
+++ b/ui-v2/app/styles/components/feedback-dialog/layout.scss
@@ -0,0 +1,23 @@
+%feedback-dialog-inline {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+%feedback-dialog-inline p::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 50%;
+  margin-left: -5px;
+  bottom: -5px;
+  width: 10px;
+  height: 10px;
+  transform: rotate(45deg);
+}
+%feedback-dialog-inline p {
+  padding: 10px;
+  position: absolute;
+  bottom: 100%;
+  text-align: center;
+  white-space: nowrap; //temp
+}
diff --git a/ui-v2/app/styles/components/feedback-dialog/skin.scss b/ui-v2/app/styles/components/feedback-dialog/skin.scss
new file mode 100644
index 0000000000..172a9f5081
--- /dev/null
+++ b/ui-v2/app/styles/components/feedback-dialog/skin.scss
@@ -0,0 +1,5 @@
+%feedback-dialog-inline p,
+%feedback-dialog-inline p::after {
+  color: $ui-white;
+  background-color: $ui-gray-800;
+}
diff --git a/ui-v2/app/styles/components/filter-bar.scss b/ui-v2/app/styles/components/filter-bar.scss
index 018a76b9d2..5d65866dee 100644
--- a/ui-v2/app/styles/components/filter-bar.scss
+++ b/ui-v2/app/styles/components/filter-bar.scss
@@ -1,81 +1,12 @@
-@import './expanded-single-select';
-@import './icons';
+@import './filter-bar/index';
+@import './expanded-single-select/index';
+@import './icons/index';
 .filter-bar {
   @extend %filter-bar;
 }
-
-// decoration/color
-%filter-bar > * {
-  border: 1px solid;
-  border-radius: $radius-small;
-}
-// TODO: Move this elsewhere
-@media #{$--horizontal-selects} {
-  %filter-bar label:not(:last-child) {
-    border-right: 1px solid;
-  }
-}
-@media #{$--lt-horizontal-selects} {
-  %filter-bar label:not(:last-child) {
-    border-bottom: 1px solid;
-  }
-}
-%filter-bar,
-%filter-bar > * {
-  background-color: $lightest-gray;
-}
-%filter-bar > *,
-%filter-bar label:not(:last-child) {
-  border-color: $border-blue !important;
-}
-
-// layout
-%filter-bar {
-  padding: 14px;
-  display: block;
-}
-@media #{$--horizontal-filters} {
-  %filter-bar {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-between;
-  }
-  %filter-bar > *:first-child {
-    margin-left: 12px;
-  }
-  %filter-bar fieldset {
-    min-width: 210px;
-    width: auto;
-  }
-}
-@media #{$--lt-horizontal-filters} {
-  %filter-bar > *:first-child {
-    margin-bottom: 12px;
-  }
-}
 %filter-bar [role='radiogroup'] {
   @extend %expanded-single-select;
 }
-%filter-bar [role='radiogroup'] label {
-  color: $text-note;
-  cursor: pointer;
-  line-height: 1.7;
-  white-space: nowrap;
-}
-// icons
-%filter-bar [role='radiogroup'] label span::before {
-  left: 11px;
-  top: 50%;
-  margin-top: -0.5em;
-}
-%filter-bar .value-allow span,
-%filter-bar .value-deny span,
-%filter-bar .value-passing span,
-%filter-bar .value-warning span,
-%filter-bar .value-critical span {
-  position: relative;
-  text-indent: 23px;
-}
 %filter-bar .value-passing span {
   @extend %with-passing;
 }
@@ -100,12 +31,3 @@
 %filter-bar .value-critical span {
   @extend %with-critical;
 }
-%filter-bar .value-warning span::after {
-  left: 0.7em;
-  top: 50%;
-  margin-top: -8px;
-  border-color: $lightest-gray;
-}
-%filter-bar .value-warning input:checked + span::after {
-  border-color: $white;
-}
diff --git a/ui-v2/app/styles/components/filter-bar/index.scss b/ui-v2/app/styles/components/filter-bar/index.scss
new file mode 100644
index 0000000000..bc18252196
--- /dev/null
+++ b/ui-v2/app/styles/components/filter-bar/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/filter-bar/layout.scss b/ui-v2/app/styles/components/filter-bar/layout.scss
new file mode 100644
index 0000000000..d4be8335c6
--- /dev/null
+++ b/ui-v2/app/styles/components/filter-bar/layout.scss
@@ -0,0 +1,43 @@
+%filter-bar {
+  padding: 14px;
+  display: block;
+  margin-top: 0 !important;
+}
+@media #{$--horizontal-filters} {
+  %filter-bar {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
+  %filter-bar > *:first-child {
+    margin-left: 12px;
+  }
+  %filter-bar fieldset {
+    min-width: 210px;
+    width: auto;
+  }
+}
+@media #{$--lt-horizontal-filters} {
+  %filter-bar > *:first-child {
+    margin-bottom: 12px;
+  }
+}
+// icons
+%filter-bar [role='radiogroup'] label span::before {
+  left: 11px;
+  top: 50%;
+  margin-top: -0.5em;
+}
+%filter-bar .value-allow span,
+%filter-bar .value-deny span,
+%filter-bar .value-passing span,
+%filter-bar .value-warning span,
+%filter-bar .value-critical span {
+  position: relative;
+  text-indent: 23px;
+}
+%filter-bar .value-warning span::after {
+  left: 0.7em;
+  top: 50%;
+  margin-top: -8px;
+}
diff --git a/ui-v2/app/styles/components/filter-bar/skin.scss b/ui-v2/app/styles/components/filter-bar/skin.scss
new file mode 100644
index 0000000000..518b63ec94
--- /dev/null
+++ b/ui-v2/app/styles/components/filter-bar/skin.scss
@@ -0,0 +1,38 @@
+// decoration/color
+%filter-bar > * {
+  border: $decor-border-100;
+  border-radius: $radius-small;
+}
+// TODO: Move this elsewhere
+@media #{$--horizontal-selects} {
+  %filter-bar label:not(:last-child) {
+    border-right: $decor-border-100;
+  }
+}
+@media #{$--lt-horizontal-selects} {
+  %filter-bar label:not(:last-child) {
+    border-bottom: $decor-border-100;
+  }
+}
+%filter-bar [role='radiogroup'] label {
+  cursor: pointer;
+  white-space: nowrap;
+}
+%filter-bar,
+%filter-bar > * {
+  background-color: $ui-gray-050;
+}
+%filter-bar > *,
+%filter-bar label:not(:last-child) {
+  border-color: $ui-gray-300 !important;
+}
+
+%filter-bar [role='radiogroup'] label {
+  color: $ui-gray-400;
+}
+%filter-bar .value-warning span::after {
+  border-color: $ui-gray-050;
+}
+%filter-bar .value-warning input:checked + span::after {
+  border-color: $ui-white;
+}
diff --git a/ui-v2/app/styles/components/flash-message.scss b/ui-v2/app/styles/components/flash-message.scss
index a621b023a6..1043b10919 100644
--- a/ui-v2/app/styles/components/flash-message.scss
+++ b/ui-v2/app/styles/components/flash-message.scss
@@ -1,52 +1,4 @@
+@import './flash-message/index';
 .flash-message {
   @extend %flash-message;
 }
-%flash-message p.success strong {
-  @extend %with-passing;
-}
-%flash-message p.success {
-  border-color: $green;
-  background-color: $green-050;
-}
-%flash-message p {
-  color: $green;
-}
-%flash-message p.error strong {
-  @extend %with-critical;
-}
-%flash-message p.error {
-  border-color: $red;
-  background-color: $red-050;
-}
-%flash-message p.error {
-  color: $red;
-}
-
-%flash-message p {
-  border-radius: $radius-small;
-  border: 1px solid;
-}
-%flash-message {
-  display: flex;
-  position: relative;
-  z-index: 2;
-  justify-content: center;
-  margin: 0 15%;
-}
-%flash-message p {
-  top: -46px;
-  position: absolute;
-  padding: 9px 15px;
-}
-%flash-message p strong {
-  color: inherit;
-}
-%flash-message p strong {
-  position: relative;
-  display: inline-block;
-  padding-left: 20px;
-}
-%flash-message p strong::before {
-  left: 0;
-  margin-top: -0.5em !important;
-}
diff --git a/ui-v2/app/styles/components/flash-message/index.scss b/ui-v2/app/styles/components/flash-message/index.scss
new file mode 100644
index 0000000000..bc18252196
--- /dev/null
+++ b/ui-v2/app/styles/components/flash-message/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/flash-message/layout.scss b/ui-v2/app/styles/components/flash-message/layout.scss
new file mode 100644
index 0000000000..c7dea1fee6
--- /dev/null
+++ b/ui-v2/app/styles/components/flash-message/layout.scss
@@ -0,0 +1,21 @@
+%flash-message {
+  display: flex;
+  position: relative;
+  z-index: 2;
+  justify-content: center;
+  margin: 0 15%;
+}
+%flash-message p {
+  top: -46px;
+  position: absolute;
+  padding: 9px 15px;
+}
+%flash-message p strong {
+  position: relative;
+  display: inline-block;
+  padding-left: 20px;
+}
+%flash-message p strong::before {
+  left: 0;
+  margin-top: -0.5em !important;
+}
diff --git a/ui-v2/app/styles/components/flash-message/skin.scss b/ui-v2/app/styles/components/flash-message/skin.scss
new file mode 100644
index 0000000000..1324eb3b55
--- /dev/null
+++ b/ui-v2/app/styles/components/flash-message/skin.scss
@@ -0,0 +1,27 @@
+%flash-message p.success strong {
+  @extend %with-passing;
+}
+%flash-message p.error strong {
+  @extend %with-critical;
+}
+%flash-message p {
+  border: $decor-border-100;
+  border-radius: $radius-small;
+}
+%flash-message p.success {
+  border-color: $ui-color-success;
+  background-color: $ui-green-050;
+}
+%flash-message p {
+  color: $ui-color-success;
+}
+%flash-message p.error {
+  border-color: $ui-color-failure;
+  background-color: $ui-red-050;
+}
+%flash-message p.error {
+  color: $ui-color-failure;
+}
+%flash-message p strong {
+  color: inherit;
+}
diff --git a/ui-v2/app/styles/components/form-elements.scss b/ui-v2/app/styles/components/form-elements.scss
index fa2eae5e06..6b98a3cf3d 100644
--- a/ui-v2/app/styles/components/form-elements.scss
+++ b/ui-v2/app/styles/components/form-elements.scss
@@ -1,167 +1,10 @@
+@import './form-elements/index';
 .type-toggle {
   @extend %toggle;
-  float: right;
-  margin-bottom: 0 !important;
 }
-%form-element > span {
-  display: block;
-  margin-bottom: 0.5em;
+label span {
+  @extend %user-select-none;
 }
-[type='radio'] {
-  cursor: pointer;
-}
-%form-element textarea {
-  display: block;
-  max-width: 100%;
-  min-width: 100%;
-  min-height: 70px;
-  padding: 0.625em 15px;
-  resize: vertical;
-  line-height: 1.5;
-}
-%form-element [type='text'],
-%form-element [type='password'] {
-  max-width: 100%;
-  width: 100%;
-  display: inline-flex;
-  justify-content: flex-start;
-  height: 2.25em;
-  line-height: 1.5;
-}
-%form-element [type='text'],
-%form-element [type='password'] {
-  border: 1px solid;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
-%form-element [type='text'],
-%form-element [type='password'] {
-  box-shadow: none;
-  border-radius: $radius-small;
-}
-.has-error > input,
-.has-error > textarea {
-  border: 1px solid;
-}
-%form-element > span {
-  color: $text-gray;
-}
-%form-element [type='text'],
-%form-element [type='password'],
-%form-element textarea {
-  color: $user-text-gray;
-}
-%form-element [type='text'],
-%form-element [type='password'],
-%form-element textarea {
-  background-color: $gray-050;
-}
-%form-element [type='text'],
-%form-element [type='password'],
-%form-element textarea {
-  border-color: $border-mid;
-}
-%form-element [type='text']:hover,
-%form-element [type='password']:hover,
-%form-element textarea:hover {
-  border-color: $blue;
-}
-%form-element [type='text']:focus,
-%form-element [type='password']:focus,
-%form-element textarea:focus {
-  outline: none;
-  box-shadow: none;
-  border-color: $border-dark;
-}
-.has-error > input {
-  border-color: $dangerous-red !important;
-}
-%toggle input:checked + span::before {
-  background-color: $green;
-}
-%toggle span {
-  color: $text;
-}
-%form-element > em {
-  color: $text-note;
-}
-%toggle span::after {
-  border-radius: 100%;
-  background-color: $white;
-}
-%toggle span::before {
-  background-color: $border-blue;
-  border-radius: 7px;
-}
-%form-element,
-%form-element > em {
-  display: block;
-}
-%form-element > em {
-  margin-left: 8px;
-  margin-top: 10px;
-}
-%form-element,
-%radio-group {
-  margin-bottom: 1.55em;
-}
-%form-element > span {
-  margin-bottom: 0.4em !important;
-}
-%radio-group {
-  overflow: hidden;
-  padding-left: 1px;
-}
-%radio-group label {
-  @extend %form-element;
-  float: left;
-}
-%radio-group label:not(:last-child) {
-  margin-right: 25px;
-}
-%radio-group label > span {
-  margin-left: 1em;
-  margin-top: 0.2em;
-  float: right;
-}
-%radio-group label,
-%radio-group label > span {
-  margin-bottom: 0 !important;
-}
-%form-element [type='text'],
-%form-element [type='password'] {
-  padding: 17px 15px;
-}
-%toggle {
-  position: relative;
-}
-%toggle input {
-  display: none;
-}
-%toggle span {
-  display: inline-block;
-  padding-left: 25px;
-}
-%toggle span::before,
-%toggle span::after {
-  position: absolute;
-  display: block;
-  content: '';
-  top: 50%;
-  cursor: pointer;
-}
-%toggle span::before {
-  left: 0px;
-  width: 20px;
-  height: 12px;
-  margin-top: -8px;
-}
-%toggle span::after {
-  left: 2px;
-  margin-top: -6px;
-  width: 8px;
-  height: 8px;
-}
-%toggle input:checked + span::after {
-  left: 10px;
+.has-error {
+  @extend %form-element-error;
 }
diff --git a/ui-v2/app/styles/components/form-elements/index.scss b/ui-v2/app/styles/components/form-elements/index.scss
new file mode 100644
index 0000000000..bc18252196
--- /dev/null
+++ b/ui-v2/app/styles/components/form-elements/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/form-elements/layout.scss b/ui-v2/app/styles/components/form-elements/layout.scss
new file mode 100644
index 0000000000..3fc9e898a9
--- /dev/null
+++ b/ui-v2/app/styles/components/form-elements/layout.scss
@@ -0,0 +1,94 @@
+%toggle {
+  float: right;
+  margin-bottom: 0 !important;
+}
+%form-element > span {
+  display: block;
+  margin-bottom: 0.5em;
+}
+%form-element textarea {
+  display: block;
+  max-width: 100%;
+  min-width: 100%;
+  min-height: 70px;
+  padding: 0.625em 15px;
+  resize: vertical;
+}
+%form-element [type='text'],
+%form-element [type='password'] {
+  max-width: 100%;
+  width: 100%;
+  display: inline-flex;
+  justify-content: flex-start;
+  height: 2.25em;
+}
+%form-element,
+%form-element > em {
+  display: block;
+}
+%form-element > em {
+  margin-left: 8px;
+  margin-top: 10px;
+}
+%form-element,
+%radio-group {
+  margin-bottom: 1.55em;
+}
+%form-element > span {
+  margin-bottom: 0.4em !important;
+}
+%radio-group {
+  overflow: hidden;
+  padding-left: 1px;
+}
+%radio-group label {
+  float: left;
+}
+%radio-group label:not(:last-child) {
+  margin-right: 25px;
+}
+%radio-group label > span {
+  margin-left: 1em;
+  margin-top: 0.2em;
+  float: right;
+}
+%radio-group label,
+%radio-group label > span {
+  margin-bottom: 0 !important;
+}
+%form-element [type='text'],
+%form-element [type='password'] {
+  padding: 17px 15px;
+}
+%toggle {
+  position: relative;
+}
+%toggle input {
+  display: none;
+}
+%toggle span {
+  display: inline-block;
+  padding-left: 25px;
+}
+%toggle span::before,
+%toggle span::after {
+  position: absolute;
+  display: block;
+  content: '';
+  top: 50%;
+}
+%toggle span::before {
+  left: 0px;
+  width: 20px;
+  height: 12px;
+  margin-top: -8px;
+}
+%toggle span::after {
+  left: 2px;
+  margin-top: -6px;
+  width: 8px;
+  height: 8px;
+}
+%toggle input:checked + span::after {
+  left: 10px;
+}
diff --git a/ui-v2/app/styles/components/form-elements/skin.scss b/ui-v2/app/styles/components/form-elements/skin.scss
new file mode 100644
index 0000000000..8f58f355f3
--- /dev/null
+++ b/ui-v2/app/styles/components/form-elements/skin.scss
@@ -0,0 +1,73 @@
+%form-element-error > input,
+%form-element-error > textarea {
+  border: $decor-border-100;
+}
+%radio-group label {
+  @extend %form-element;
+}
+[type='radio'],
+%toggle span::before,
+%toggle span::after {
+  cursor: pointer;
+}
+%form-element [type='text'],
+%form-element [type='password'] {
+  border: $decor-border-100;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+}
+%form-element [type='text'],
+%form-element [type='password'] {
+  box-shadow: none;
+  border-radius: $radius-small;
+}
+%form-element [type='text']:focus,
+%form-element [type='password']:focus,
+%form-element textarea:focus {
+  outline: none;
+  box-shadow: none;
+  border-color: $ui-gray-400;
+}
+%form-element-error > input {
+  border-color: $ui-color-failure !important;
+}
+%toggle input:checked + span::before {
+  background-color: $ui-color-success;
+}
+%toggle span {
+  color: $ui-gray-900;
+}
+%form-element > em {
+  color: $ui-gray-400;
+}
+%toggle span::after {
+  border-radius: 100%;
+  background-color: $ui-white;
+}
+%toggle span::before {
+  background-color: $ui-gray-300;
+  border-radius: 7px;
+}
+%form-element > span {
+  color: $ui-gray-500;
+}
+%form-element [type='text'],
+%form-element [type='password'],
+%form-element textarea {
+  color: $ui-gray-500;
+}
+%form-element [type='text'],
+%form-element [type='password'],
+%form-element textarea {
+  background-color: $ui-gray-050;
+}
+%form-element [type='text'],
+%form-element [type='password'],
+%form-element textarea {
+  border-color: $ui-gray-300;
+}
+%form-element [type='text']:hover,
+%form-element [type='password']:hover,
+%form-element textarea:hover {
+  border-color: $ui-color-action;
+}
diff --git a/ui-v2/app/styles/components/freetext-filter.scss b/ui-v2/app/styles/components/freetext-filter.scss
index 28164c48b7..6f92dd58b6 100644
--- a/ui-v2/app/styles/components/freetext-filter.scss
+++ b/ui-v2/app/styles/components/freetext-filter.scss
@@ -1,43 +1,8 @@
-@import './icons';
+@import './freetext-filter/index';
+@import './icons/index';
 .freetext-filter {
   @extend %freetext-filter;
 }
-%freetext-filter {
-  cursor: pointer;
-}
-%freetext-filter input {
-  -webkit-appearance: none;
-  border: none;
-  border-right: 1px solid;
-}
 %freetext-filter span {
   @extend %with-magnifier;
-  visibility: hidden;
-}
-%freetext-filter {
-  background-color: $white;
-}
-%freetext-filter span {
-  color: $border-blue;
-}
-%freetext-filter input {
-  border-color: 1px $border-blue;
-}
-%freetext-filter input,
-%freetext-filter input::placeholder {
-  color: $text-note;
-}
-%freetext-filter label {
-  display: block;
-  height: 33px;
-}
-%freetext-filter input {
-  width: calc(100% - 2.7em);
-  height: 100%;
-  padding: 8px 10px;
-}
-%freetext-filter span {
-  width: 2.7em;
-  height: 100%;
-  float: right;
 }
diff --git a/ui-v2/app/styles/components/freetext-filter/index.scss b/ui-v2/app/styles/components/freetext-filter/index.scss
new file mode 100644
index 0000000000..bc18252196
--- /dev/null
+++ b/ui-v2/app/styles/components/freetext-filter/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/freetext-filter/layout.scss b/ui-v2/app/styles/components/freetext-filter/layout.scss
new file mode 100644
index 0000000000..7eda7f6205
--- /dev/null
+++ b/ui-v2/app/styles/components/freetext-filter/layout.scss
@@ -0,0 +1,17 @@
+%freetext-filter span {
+  visibility: hidden;
+}
+%freetext-filter label {
+  display: block;
+  height: 33px;
+}
+%freetext-filter input {
+  width: calc(100% - 2.7em);
+  height: 100%;
+  padding: 8px 10px;
+}
+%freetext-filter span {
+  width: 2.7em;
+  height: 100%;
+  float: right;
+}
diff --git a/ui-v2/app/styles/components/freetext-filter/skin.scss b/ui-v2/app/styles/components/freetext-filter/skin.scss
new file mode 100644
index 0000000000..9c1dfbc788
--- /dev/null
+++ b/ui-v2/app/styles/components/freetext-filter/skin.scss
@@ -0,0 +1,21 @@
+%freetext-filter {
+  cursor: pointer;
+}
+%freetext-filter input {
+  -webkit-appearance: none;
+  border: none;
+  border-right: $decor-border-100;
+}
+%freetext-filter {
+  background-color: $ui-white;
+}
+%freetext-filter span {
+  color: $ui-gray-300;
+}
+%freetext-filter input {
+  border-color: $ui-gray-300;
+}
+%freetext-filter input,
+%freetext-filter input::placeholder {
+  color: $ui-gray-400;
+}
diff --git a/ui-v2/app/styles/components/healthcheck-status.scss b/ui-v2/app/styles/components/healthcheck-status.scss
index 55b34acf53..c8d34ee754 100644
--- a/ui-v2/app/styles/components/healthcheck-status.scss
+++ b/ui-v2/app/styles/components/healthcheck-status.scss
@@ -1,68 +1,14 @@
-@import './icons';
+@import './healthcheck-status/index';
+@import './icons/index';
 .healthcheck-status {
   @extend %healthcheck-status;
 }
-%healthcheck-status {
-  border: 1px solid;
-}
-%healthcheck-status,
-%healthcheck-status pre {
-  border-radius: $radius-small;
-}
-%healthcheck-status dd:first-of-type {
-  color: $text-note;
-}
-%healthcheck-status pre {
-  background-color: $black;
-  color: $white;
-}
-%healthcheck-status::before {
-  background-size: 55%;
-  width: 25px !important;
-  height: 25px !important;
-  left: 17px;
-  top: 20px !important;
-  margin-top: 0 !important;
-}
 %healthcheck-status.passing {
   @extend %with-passing;
-  border-color: $border-blue;
-}
-%healthcheck-status.passing::before {
-  background-color: $green !important;
-}
-%healthcheck-status.critical {
-  @extend %with-critical;
-  border-color: $red;
-  background-color: rgba($red, 0.1);
-}
-%healthcheck-status.critical::before {
-  background-color: $red !important;
 }
 %healthcheck-status.warning {
   @extend %with-warning;
-  border-color: $orange;
-  background-color: rgba($orange, 0.1);
 }
-%healthcheck-status.warning::before {
-  background-size: 100%;
-}
-%healthcheck-status {
-  padding: 20px 24px;
-  padding-bottom: 26px;
-  padding-left: 57px;
-  margin-bottom: 24px;
-  position: relative;
-}
-%healthcheck-status pre {
-  padding: 12px;
-}
-%healthcheck-status .with-feedback {
-  float: right;
-}
-%healthcheck-status dt {
-  margin-bottom: 0.2em;
-}
-%healthcheck-status dd:first-of-type {
-  margin-bottom: 0.6em;
+%healthcheck-status.critical {
+  @extend %with-critical;
 }
diff --git a/ui-v2/app/styles/components/healthcheck-status/index.scss b/ui-v2/app/styles/components/healthcheck-status/index.scss
new file mode 100644
index 0000000000..bc18252196
--- /dev/null
+++ b/ui-v2/app/styles/components/healthcheck-status/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/healthcheck-status/layout.scss b/ui-v2/app/styles/components/healthcheck-status/layout.scss
new file mode 100644
index 0000000000..ef40daf375
--- /dev/null
+++ b/ui-v2/app/styles/components/healthcheck-status/layout.scss
@@ -0,0 +1,30 @@
+%healthcheck-status::before {
+  background-size: 55%;
+  width: 25px !important;
+  height: 25px !important;
+  left: 17px;
+  top: 20px !important;
+  margin-top: 0 !important;
+}
+%healthcheck-status.warning::before {
+  background-size: 100%;
+}
+%healthcheck-status {
+  padding: 20px 24px;
+  padding-bottom: 26px;
+  padding-left: 57px;
+  margin-bottom: 24px;
+  position: relative;
+}
+%healthcheck-status pre {
+  padding: 12px;
+}
+%healthcheck-status .with-feedback {
+  float: right;
+}
+%healthcheck-status dt {
+  margin-bottom: 0.2em;
+}
+%healthcheck-status dd:first-of-type {
+  margin-bottom: 0.6em;
+}
diff --git a/ui-v2/app/styles/components/healthcheck-status/skin.scss b/ui-v2/app/styles/components/healthcheck-status/skin.scss
new file mode 100644
index 0000000000..e37d72f506
--- /dev/null
+++ b/ui-v2/app/styles/components/healthcheck-status/skin.scss
@@ -0,0 +1,31 @@
+%healthcheck-status {
+  border: $decor-border-100;
+}
+%healthcheck-status,
+%healthcheck-status pre {
+  border-radius: $radius-small;
+}
+%healthcheck-status dd:first-of-type {
+  color: $ui-gray-400;
+}
+%healthcheck-status pre {
+  background-color: $ui-black;
+  color: $ui-white;
+}
+%healthcheck-status.passing {
+  border-color: $ui-gray-200;
+}
+%healthcheck-status.passing::before {
+  background-color: $ui-color-success !important;
+}
+%healthcheck-status.critical {
+  border-color: $ui-color-danger;
+  background-color: rgba($ui-color-danger, 0.1);
+}
+%healthcheck-status.critical::before {
+  background-color: $ui-color-danger !important;
+}
+%healthcheck-status.warning {
+  border-color: $ui-color-alert;
+  background-color: rgba($ui-color-alert, 0.1);
+}
diff --git a/ui-v2/app/styles/components/healthchecked-resource.scss b/ui-v2/app/styles/components/healthchecked-resource.scss
index c7b7b7f738..e163ff534e 100644
--- a/ui-v2/app/styles/components/healthchecked-resource.scss
+++ b/ui-v2/app/styles/components/healthchecked-resource.scss
@@ -1,111 +1,14 @@
-@import './icons';
+@import './healthchecked-resource/index';
+@import './icons/index';
 .healthchecked-resource {
   @extend %healthchecked-resource;
 }
-%healthchecked-resource {
-  border: 1px solid;
-  box-shadow: 0 4px 8px 0 rgba($black, 0.05);
-}
-%healthchecked-resource:hover,
-%healthchecked-resource:focus {
-  box-shadow: 0 8px 10px 0 rgba($black, 0.1);
-}
-%healthchecked-resource li {
-  border-top: 1px solid;
-}
-%healthchecked-resource header span,
-%healthchecked-resource header em,
-%healthchecked-resource li:not(:last-child) span {
-  overflow: hidden;
-  display: inline-block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-width: 100%;
-}
-%healthchecked-resource li:last-child:not(:only-child) {
-  overflow: hidden;
-  white-space: nowrap;
-}
-%healthchecked-resource,
-%healthchecked-resource li {
-  border-color: $border-blue;
-}
-%healthchecked-resource {
-  position: relative;
-  border-radius: $radius-small;
-}
-%healthchecked-resource header {
-  position: relative;
-}
-
-%healthchecked-resource header strong {
-  position: absolute;
-}
-%healthchecked-resource a,
-%healthchecked-resource header a > * {
-  display: block;
-}
-%healthchecked-resource li {
-  position: relative;
-}
-%healthchecked-resource li::before {
-  left: 11px;
-  top: 50%;
-  margin-top: -0.49em !important;
-}
 %healthchecked-resource li.passing {
   @extend %with-passing;
-  color: $green;
 }
 %healthchecked-resource li.warning {
   @extend %with-warning;
-  color: $orange;
 }
 %healthchecked-resource li.critical {
   @extend %with-critical;
-  color: $red;
-}
-.healthy .healthchecked-resource header span {
-  padding-right: 20px;
-}
-.healthy .healthchecked-resource li {
-  position: absolute;
-  top: 8px;
-  right: 16px;
-  border: none;
-}
-.healthy .healthchecked-resource li::before {
-  left: 0;
-}
-.healthy .healthchecked-resource li span {
-  display: none;
-}
-.healthy .healthchecked-resource li a {
-  padding-left: 0;
-}
-%healthchecked-resource header strong {
-  top: 2.8em;
-  left: 15px;
-}
-%healthchecked-resource header span {
-  margin-bottom: 1.75em;
-}
-%healthchecked-resource header a {
-  padding: 12px 15px;
-}
-.unhealthy .healthchecked-resource header a {
-  padding-bottom: 15px;
-}
-.unhealthy .healthchecked-resource header.with-service a {
-  padding-bottom: 25px;
-}
-%healthchecked-resource li a {
-  padding: 3px 15px;
-  padding-top: 4px;
-  padding-left: 39px;
-  height: 31px;
-}
-%healthchecked-resource li:not(.passing) strong,
-.healthy .healthchecked-resource li:only-child strong {
-  display: none;
 }
diff --git a/ui-v2/app/styles/components/healthchecked-resource/index.scss b/ui-v2/app/styles/components/healthchecked-resource/index.scss
new file mode 100644
index 0000000000..bc18252196
--- /dev/null
+++ b/ui-v2/app/styles/components/healthchecked-resource/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/healthchecked-resource/layout.scss b/ui-v2/app/styles/components/healthchecked-resource/layout.scss
new file mode 100644
index 0000000000..630905bdda
--- /dev/null
+++ b/ui-v2/app/styles/components/healthchecked-resource/layout.scss
@@ -0,0 +1,78 @@
+%healthchecked-resource header span,
+%healthchecked-resource header em,
+%healthchecked-resource li:not(:last-child) span {
+  overflow: hidden;
+  display: inline-block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+%healthchecked-resource li:last-child:not(:only-child) {
+  overflow: hidden;
+  white-space: nowrap;
+}
+%healthchecked-resource,
+%healthchecked-resource li {
+  border-color: $ui-gray-200;
+}
+%healthchecked-resource,
+%healthchecked-resource header,
+%healthchecked-resource li {
+  position: relative;
+}
+%healthchecked-resource header strong {
+  position: absolute;
+}
+%healthchecked-resource a,
+%healthchecked-resource header a > * {
+  display: block;
+}
+%healthchecked-resource li::before {
+  left: 11px;
+  top: 50%;
+  margin-top: -0.49em !important;
+}
+.healthy .healthchecked-resource header span {
+  padding-right: 20px;
+}
+.healthy .healthchecked-resource li {
+  position: absolute;
+  top: 8px;
+  right: 16px;
+  border: none;
+}
+.healthy .healthchecked-resource li::before {
+  left: 0;
+}
+.healthy .healthchecked-resource li span {
+  display: none;
+}
+.healthy .healthchecked-resource li a {
+  padding-left: 0;
+}
+%healthchecked-resource header strong {
+  top: 2.8em;
+  left: 15px;
+}
+%healthchecked-resource header span {
+  margin-bottom: 1.75em;
+}
+%healthchecked-resource header a {
+  padding: 12px 15px;
+}
+.unhealthy .healthchecked-resource header a {
+  padding-bottom: 15px;
+}
+.unhealthy .healthchecked-resource header.with-service a {
+  padding-bottom: 25px;
+}
+%healthchecked-resource li a {
+  padding: 3px 15px;
+  padding-top: 4px;
+  padding-left: 39px;
+  height: 31px;
+}
+%healthchecked-resource li:not(.passing) strong,
+.healthy .healthchecked-resource li:only-child strong {
+  display: none;
+}
diff --git a/ui-v2/app/styles/components/healthchecked-resource/skin.scss b/ui-v2/app/styles/components/healthchecked-resource/skin.scss
new file mode 100644
index 0000000000..e800763170
--- /dev/null
+++ b/ui-v2/app/styles/components/healthchecked-resource/skin.scss
@@ -0,0 +1,23 @@
+%healthchecked-resource li.passing {
+  color: $ui-color-success;
+}
+%healthchecked-resource li.warning {
+  color: $ui-color-alert;
+}
+%healthchecked-resource li.critical {
+  color: $ui-color-failure;
+}
+%healthchecked-resource {
+  border: $decor-border-100;
+  box-shadow: 0 4px 8px 0 rgba($ui-black, 0.05);
+}
+%healthchecked-resource:hover,
+%healthchecked-resource:focus {
+  box-shadow: 0 8px 10px 0 rgba($ui-black, 0.1);
+}
+%healthchecked-resource li {
+  border-top: $decor-border-100;
+}
+%healthchecked-resource {
+  border-radius: $radius-small;
+}
diff --git a/ui-v2/app/styles/components/icons.scss b/ui-v2/app/styles/components/icons/index.scss
similarity index 94%
rename from ui-v2/app/styles/components/icons.scss
rename to ui-v2/app/styles/components/icons/index.scss
index e12d1fae52..56699a270b 100644
--- a/ui-v2/app/styles/components/icons.scss
+++ b/ui-v2/app/styles/components/icons/index.scss
@@ -45,7 +45,7 @@
   height: 22px;
   left: -25px;
   margin-top: -11px;
-  background-color: transparent;
+  background-color: $ui-color-transparent;
 }
 %with-clipboard {
   padding-left: 38px !important;
@@ -57,7 +57,7 @@
   height: 17px;
   left: 12px;
   margin-top: -8px;
-  background-color: transparent;
+  background-color: $ui-color-transparent;
 }
 %with-chevron::before {
   @extend %pseudo-icon;
@@ -66,7 +66,7 @@
   height: 9px;
   left: 0;
   margin-top: -4px;
-  background-color: transparent;
+  background-color: $ui-color-transparent;
 }
 %with-folder::before {
   @extend %pseudo-icon;
@@ -76,7 +76,7 @@
   margin-top: -6px;
   left: 2px;
   background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="13" xmlns="http://www.w3.org/2000/svg"><path d="M4.779 1H1.8c-.439 0-.8.37-.8.833v9.334c0 .463.361.833.8.833h10.4c.439 0 .8-.37.8-.833V3.833C13 3.37 12.639 3 12.2 3H6.35a.5.5 0 0 1-.42-.228L4.78 1z" stroke="%23BBC4D2" fill="none"/></svg>');
-  background-color: transparent;
+  background-color: $ui-color-transparent;
 }
 %with-magnifier {
   position: relative;
@@ -94,7 +94,7 @@
   border: 0.05em solid;
   border-radius: 0.35em;
   border-color: currentColor;
-  background-color: transparent;
+  background-color: $ui-color-transparent;
 }
 %with-magnifier::after {
   @extend %pseudo-icon;
@@ -116,7 +116,7 @@
   @extend %pseudo-icon;
   right: 0;
   background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><circle stroke="%23BBC4D1" fill="%23FFF" cx="7" cy="7" r="7"/><path fill="%236A7786" d="M6.15 4.677V3.233h1.56v1.444zM6.15 11.374V6.35h1.56v5.023z"/></svg>');
-  background-color: transparent;
+  background-color: $ui-color-transparent;
   width: 16px;
   height: 16px;
 }
@@ -126,7 +126,7 @@
 }
 %with-inverted-tick {
   @extend %pseudo-icon;
-  background-color: transparent;
+  background-color: $ui-color-transparent;
   background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M8.95 0L10 .985 3.734 8 0 4.737l.924-1.11 2.688 2.349z" fill="#{$magenta-800-url-encoded}"/></svg>');
   height: 20px !important;
   width: 16px !important;
@@ -148,7 +148,7 @@
   background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M9.263.5L8.084 1.637l4.716 4.55H0v1.625h12.8l-4.716 4.55 1.18 1.138L16 7z" fill="%232EB039"/></svg>');
   width: 16px;
   height: 14px;
-  background-color: transparent;
+  background-color: $ui-color-transparent;
 }
 %with-right-arrow-grey {
   @extend %pseudo-icon;
@@ -159,7 +159,7 @@
   background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23282C2E" d="M8.79 4l-.737.71L11 7.556H3V8.57h8l-2.947 2.844.736.711L13 8.062z"/><rect stroke="%23C73445" stroke-width="1.5" x=".75" y=".75" width="14.5" height="14.5" rx="7.25"/><path d="M3.5 3.5l9 9" stroke="%23C73445" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
   width: 16px;
   height: 16px;
-  background-color: transparent;
+  background-color: $ui-color-transparent;
 }
 %with-deny-icon-grey {
   @extend %pseudo-icon;
@@ -177,7 +177,7 @@
 }
 %with-warning::before {
   @extend %with-warning-icon-orange;
-  background-color: transparent;
+  background-color: $ui-color-transparent;
 }
 %with-critical::before {
   @extend %with-cross;
diff --git a/ui-v2/app/styles/components/list-collection.scss b/ui-v2/app/styles/components/list-collection.scss
index e9ade85190..595a4a1c30 100644
--- a/ui-v2/app/styles/components/list-collection.scss
+++ b/ui-v2/app/styles/components/list-collection.scss
@@ -1,11 +1,11 @@
-.list-collection {
-  height: 500px;
-  position: relative;
-}
 .unhealthy > div,
 .healthy > div {
   @extend %card-grid;
 }
+.list-collection {
+  height: 500px;
+  position: relative;
+}
 .healthy > div {
   width: calc(100% + 23px);
 }
diff --git a/ui-v2/app/styles/components/notice.scss b/ui-v2/app/styles/components/notice.scss
index ec4d63d5c6..e7b986dbce 100644
--- a/ui-v2/app/styles/components/notice.scss
+++ b/ui-v2/app/styles/components/notice.scss
@@ -1,24 +1,4 @@
-.notice {
-  @extend %notice;
-}
-%notice {
-  @extend %with-warning;
-}
-%notice::before {
-  left: 20px;
-  top: 18px;
-  margin-top: 0;
-}
-%notice {
-  border: 1px solid;
-  border-radius: $radius-small;
-}
-%notice.warning {
-  background-color: $yellow-050;
-  border-color: $yellow-500;
-}
-%notice {
-  position: relative;
-  padding: 1em;
-  padding-left: 45px;
+@import './notice/index';
+.notice.warning {
+  @extend %notice-warning;
 }
diff --git a/ui-v2/app/styles/components/notice/index.scss b/ui-v2/app/styles/components/notice/index.scss
new file mode 100644
index 0000000000..bc18252196
--- /dev/null
+++ b/ui-v2/app/styles/components/notice/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/notice/layout.scss b/ui-v2/app/styles/components/notice/layout.scss
new file mode 100644
index 0000000000..64b017dd31
--- /dev/null
+++ b/ui-v2/app/styles/components/notice/layout.scss
@@ -0,0 +1,10 @@
+%notice::before {
+  left: 20px;
+  top: 18px;
+  margin-top: 0;
+}
+%notice {
+  position: relative;
+  padding: 1em;
+  padding-left: 45px;
+}
diff --git a/ui-v2/app/styles/components/notice/skin.scss b/ui-v2/app/styles/components/notice/skin.scss
new file mode 100644
index 0000000000..d7c7866dfe
--- /dev/null
+++ b/ui-v2/app/styles/components/notice/skin.scss
@@ -0,0 +1,40 @@
+%notice {
+  border-radius: $radius-small;
+}
+%notice-success,
+%notice-info,
+%notice-error,
+%notice-warning {
+  @extend %notice;
+}
+%notice-success {
+  @extend %with-passing;
+  background-color: $ui-green-050;
+  border-color: $ui-color-success;
+  color: $ui-green-700;
+}
+%notice-success::before {
+  color: $ui-color-success;
+}
+%notice-info {
+  @extend %with-passing; /* needs a better info button*/
+  background-color: $ui-blue-050;
+  border-color: $ui-color-action; /* TODO: change to info */
+  color: $ui-blue-700;
+}
+%notice-info::before {
+  color: $ui-color-action; /* change to info */
+}
+%notice-warning {
+  @extend %box-color-yellow-500, %with-warning;
+  border-width: 1px;
+}
+%notice-error {
+  @extend %with-critical;
+  background-color: $ui-red-050;
+  border-color: $ui-color-failure;
+  color: $ui-red-600;
+}
+%notice-error::before {
+  color: $ui-color-failure;
+}
diff --git a/ui-v2/app/styles/components/pill.scss b/ui-v2/app/styles/components/pill.scss
new file mode 100644
index 0000000000..4d8f0673a1
--- /dev/null
+++ b/ui-v2/app/styles/components/pill.scss
@@ -0,0 +1,4 @@
+@import './pill/index';
+td strong {
+  @extend %pill;
+}
diff --git a/ui-v2/app/styles/components/pill/index.scss b/ui-v2/app/styles/components/pill/index.scss
new file mode 100644
index 0000000000..bc18252196
--- /dev/null
+++ b/ui-v2/app/styles/components/pill/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/tag.scss b/ui-v2/app/styles/components/pill/layout.scss
similarity index 54%
rename from ui-v2/app/styles/components/tag.scss
rename to ui-v2/app/styles/components/pill/layout.scss
index f31eb7be8c..fceb4a5a55 100644
--- a/ui-v2/app/styles/components/tag.scss
+++ b/ui-v2/app/styles/components/pill/layout.scss
@@ -1,5 +1,4 @@
-%tag {
+%pill {
   display: inline-block;
   padding: 1px 5px;
-  border-radius: $radius-small;
 }
diff --git a/ui-v2/app/styles/components/pill/skin.scss b/ui-v2/app/styles/components/pill/skin.scss
new file mode 100644
index 0000000000..6efe90d8a4
--- /dev/null
+++ b/ui-v2/app/styles/components/pill/skin.scss
@@ -0,0 +1,4 @@
+%pill {
+  background-color: $ui-gray-100;
+  border-radius: $radius-small;
+}
diff --git a/ui-v2/app/styles/components/product.scss b/ui-v2/app/styles/components/product.scss
new file mode 100644
index 0000000000..a174cade83
--- /dev/null
+++ b/ui-v2/app/styles/components/product.scss
@@ -0,0 +1,51 @@
+@import './product/index';
+@import './filter-bar';
+@import './form-elements/index';
+html body > svg {
+  display: none;
+}
+html.ember-loading body > svg {
+  @extend %brand-loader;
+}
+html.template-loading main > div {
+  @extend %loader;
+}
+main {
+  @extend %app-view;
+}
+%app-view > div > div {
+  @extend %app-content;
+}
+%app-view header form {
+  @extend %filter-bar;
+}
+%app-content .type-text,
+%app-content .type-toggle {
+  @extend %form-element;
+}
+%app-content [role='radiogroup'] {
+  @extend %radio-group;
+}
+%loader circle {
+  fill: $brand-magenta-100;
+}
+%main-header::before {
+  background-color: $brand-magenta-600;
+}
+%header-nav a,
+%header-nav-toggle-button {
+  color: $brand-magenta-050;
+}
+@media #{$--lt-horizontal-nav} {
+  %header-nav-panel {
+    background-color: $brand-magenta-600;
+  }
+}
+@media #{$--horizontal-nav} {
+  %header-nav > ul > li:not(:first-child).is-active > a {
+    background-color: $brand-magenta-800;
+  }
+}
+#wrapper > footer {
+  @extend %footer;
+}
diff --git a/ui-v2/app/styles/components/app-view.scss b/ui-v2/app/styles/components/product/app-view.scss
similarity index 70%
rename from ui-v2/app/styles/components/app-view.scss
rename to ui-v2/app/styles/components/product/app-view.scss
index 265b981af1..f1ad635b20 100644
--- a/ui-v2/app/styles/components/app-view.scss
+++ b/ui-v2/app/styles/components/product/app-view.scss
@@ -1,62 +1,65 @@
-@import './filter-bar';
-@import './form-elements';
-main {
-  @extend %app-view;
-}
-%app-view > div > div {
-  @extend %app-content;
-}
-%app-view header form {
-  @extend %filter-bar;
-}
 %app-view h2,
 %app-view header > div:last-of-type {
-  border-bottom: 1px solid;
+  border-bottom: $decor-border-100;
 }
 %app-view header > div:last-of-type,
 %app-view h2 {
   border-color: $keyline-light;
 }
 %app-content div > dl > dd {
-  color: $text-light;
+  color: $ui-gray-400;
 }
-%app-view {
-  position: relative;
-  margin-top: 50px;
+[role='tabpanel'] > p:only-child,
+.template-error > div {
+  background-color: $ui-gray-050;
+  color: $ui-gray-400;
 }
-%app-view header + div > *:first-child {
-  margin-top: 1.25em;
-}
-%app-view h2 {
-  padding-bottom: 0.2em;
-  margin-bottom: 1.1em;
+%app-content > p:only-child,
+%app-view > div.disabled > div {
+  background-color: $ui-gray-050;
+  color: $ui-gray-400;
 }
 %app-view header > div:last-of-type > div:first-child {
   flex-grow: 1;
 }
+%app-view {
+  position: relative;
+}
 %app-view header .actions {
   float: right;
   display: flex;
   align-items: flex-start;
 }
+%app-view {
+  margin-top: 50px;
+}
+%app-view h2 {
+  padding-bottom: 0.2em;
+  margin-bottom: 1.1em;
+}
+%app-view header + div > *:first-child {
+  margin-top: 1.25em;
+}
 %app-view header .actions > *:not(:last-child) {
   margin-right: 7px;
 }
 %app-view header .actions a,
 %app-view header .actions button {
-  @extend %button;
   padding: calc(0.375em - 1px) calc(2.2em - 1px);
   height: 2.25em;
 }
 
 // content
-%app-content > p:only-child,
+%app-content div > dl > dt {
+  position: absolute;
+}
+%app-content div > dl {
+  position: relative;
+}
 [role='tabpanel'] > p:only-child,
-%app-view > div.disabled > div,
-.template-error > div {
-  background-color: $lightest-gray;
-  color: $text-blue;
-  font-size: $size-8;
+.template-error > div,
+%app-content > p:only-child,
+%app-view > div.disabled > div {
   margin-top: 0;
   padding: 50px;
   text-align: center;
@@ -64,30 +67,14 @@ main {
 [role='tabpanel'] > *:first-child {
   margin-top: 1.25em;
 }
-%filter-bar,
-%tab-section,
 %app-view > div.disabled > div {
   margin-top: 0 !important;
 }
-%app-content .type-text,
-%app-content .type-toggle {
-  @extend %form-element;
-}
-%app-content [role='radiogroup'] {
-  @extend %radio-group;
-}
 %app-content form:not(:last-child) {
   margin-bottom: 2.2em;
 }
-%app-content div > dl {
-  position: relative;
-}
-%app-content div > dt {
-  font-weight: bold;
-}
 %app-content div > dl > dt {
   width: 120px;
-  position: absolute;
 }
 %app-content div > dl > dd {
   padding-left: 120px;
diff --git a/ui-v2/app/styles/components/footer.scss b/ui-v2/app/styles/components/product/footer.scss
similarity index 55%
rename from ui-v2/app/styles/components/footer.scss
rename to ui-v2/app/styles/components/product/footer.scss
index d81bd65ffd..7652bd6b1e 100644
--- a/ui-v2/app/styles/components/footer.scss
+++ b/ui-v2/app/styles/components/product/footer.scss
@@ -1,23 +1,16 @@
-#wrapper > footer {
-  @extend %footer;
-}
-%footer {
-  border-top: 1px solid;
-}
-%footer {
-  border-color: $keyline-darker;
-  background-color: $white;
-}
-%footer {
-  max-width: 1150px;
-}
-%footer > * {
-  font-size: inherit;
-  color: $text-note;
-}
 %footer > a:first-child {
   @extend %with-hashicorp;
 }
+%footer {
+  border-top: $decor-border-100;
+}
+%footer {
+  border-color: $keyline-mid;
+  background-color: $ui-white;
+}
+%footer > * {
+  color: $ui-gray-400;
+}
 %footer {
   display: flex;
   justify-content: center;
diff --git a/ui-v2/app/styles/components/header-nav.scss b/ui-v2/app/styles/components/product/header-nav.scss
similarity index 85%
rename from ui-v2/app/styles/components/header-nav.scss
rename to ui-v2/app/styles/components/product/header-nav.scss
index dd1a4775ea..85e55abf58 100644
--- a/ui-v2/app/styles/components/header-nav.scss
+++ b/ui-v2/app/styles/components/product/header-nav.scss
@@ -1,11 +1,44 @@
-@import './icons';
-%header-nav-toggle-button span {
-  visibility: hidden;
+%primary-nav ul ul {
+  @extend %header-drop-nav;
+}
+%primary-nav,
+%secondary-nav {
+  @extend %header-nav;
 }
 %header-nav-toggle-button::before,
 %header-nav-toggle-button::after,
 %header-nav-toggle-button span::before {
   @extend %with-dot;
+}
+%header-nav-toggle-button span {
+  visibility: hidden;
+}
+%header-drop-nav {
+  border: $decor-border-100;
+  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.21);
+}
+%header-drop-nav li {
+  border-bottom: $decor-border-100;
+}
+%header-drop-nav li {
+  border-color: $ui-gray-300;
+}
+%header-drop-nav {
+  border-color: $ui-gray-300;
+  background-color: $ui-white;
+}
+%header-drop-nav a {
+  color: $ui-gray-900 !important;
+}
+%header-nav > ul > li > a:hover,
+%header-nav > ul > li > a:focus,
+%header-nav > ul > li > a:active,
+%header-nav > ul > li.is-active > a {
+  color: $ui-white;
+}
+%header-nav-toggle-button::before,
+%header-nav-toggle-button::after,
+%header-nav-toggle-button span::before {
   right: 10px;
   left: auto !important;
   top: 23px !important;
@@ -24,9 +57,6 @@
   position: absolute;
 }
 @media #{$--lt-horizontal-nav} {
-  %header-nav-panel {
-    background-color: $magenta-600;
-  }
   %header-nav-panel label span {
     visibility: visible !important;
     display: inline-block;
@@ -69,7 +99,7 @@
     padding: 15px 35px;
   }
   %header-nav-toggle:checked + label {
-    background-color: rgba($black, 0.4);
+    background-color: rgba($ui-black, 0.4);
     width: 100vw;
     height: 100%;
     left: 0;
@@ -91,22 +121,11 @@
     display: none;
   }
 }
-%primary-nav ul ul {
-  @extend %header-drop-nav;
-}
-%primary-nav,
-%secondary-nav {
-  @extend %header-nav;
-}
 %header-drop-nav a:hover,
 %header-drop-nav a:focus,
 %header-drop-nav a:active,
 %header-drop-nav a.selected {
-  background-color: $lightest-gray;
-}
-%header-nav a,
-%header-nav-toggle-button {
-  color: $magenta-50;
+  background-color: $ui-gray-050;
 }
 %header-nav a {
   display: block;
@@ -127,19 +146,10 @@
     display: block;
   }
   %primary-nav > ul > li.is-active > a {
-    font-weight: $weight-bold;
+    font-weight: $typo-weight-bold;
   }
 }
-%header-nav > ul > li > a:hover,
-%header-nav > ul > li > a:focus,
-%header-nav > ul > li > a:active,
-%header-nav > ul > li.is-active > a {
-  color: $white;
-}
 @media #{$--horizontal-nav} {
-  %header-nav > ul > li:not(:first-child).is-active > a {
-    background-color: $magenta-800;
-  }
   %header-nav ul {
     display: flex;
   }
@@ -147,14 +157,6 @@
     min-width: 266px;
   }
 }
-%header-drop-nav {
-  border: 1px solid $border-blue;
-  background-color: $white;
-  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.21);
-}
-%header-drop-nav a {
-  color: $text !important;
-}
 %header-drop-nav .is-active a::after {
   @extend %with-inverted-tick;
   position: absolute;
@@ -162,12 +164,6 @@
   margin-top: -8px;
   right: 10px;
 }
-%header-drop-nav li {
-  border-bottom: 1px solid;
-}
-%header-drop-nav li {
-  border-color: $border-blue;
-}
 %header-drop-nav {
   display: block;
   position: absolute;
diff --git a/ui-v2/app/styles/components/product/index.scss b/ui-v2/app/styles/components/product/index.scss
new file mode 100644
index 0000000000..02e434a49e
--- /dev/null
+++ b/ui-v2/app/styles/components/product/index.scss
@@ -0,0 +1,9 @@
+/* TODO: All of these folders should be self contained */
+/* figure out what the best way to deal with 'icons' is */
+/* most probably a centralized module */
+@import '../icons/index';
+@import './loader';
+@import './main-header';
+@import './header-nav';
+@import './app-view';
+@import './footer';
diff --git a/ui-v2/app/styles/components/loader.scss b/ui-v2/app/styles/components/product/loader.scss
similarity index 77%
rename from ui-v2/app/styles/components/loader.scss
rename to ui-v2/app/styles/components/product/loader.scss
index 4847a2c0a2..4fcf0252b1 100644
--- a/ui-v2/app/styles/components/loader.scss
+++ b/ui-v2/app/styles/components/product/loader.scss
@@ -1,6 +1,15 @@
-html.template-loading main > div {
-  @extend %loader;
+/* logo */
+%brand-loader {
+  display: block;
 }
+%brand-loader {
+  position: absolute;
+  top: 50%;
+  margin-top: -26px;
+  left: 50%;
+  margin-left: -84px;
+}
+/* blobs / %ui-loader ? */
 %loader {
   display: flex;
   align-items: center;
@@ -10,7 +19,6 @@ html.template-loading main > div {
 %loader circle {
   animation: loader-animation 1.5s infinite ease-in-out;
   transform-origin: 50% 50%;
-  fill: #efc4d8;
 }
 
 %loader g:nth-last-child(2) circle {
@@ -27,7 +35,6 @@ html.template-loading main > div {
 
 %loader g:nth-last-child(5) circle {
   animation-delay: 0.5s;
-  border: 1px solid red;
 }
 
 @keyframes loader-animation {
diff --git a/ui-v2/app/styles/components/main-header.scss b/ui-v2/app/styles/components/product/main-header.scss
similarity index 92%
rename from ui-v2/app/styles/components/main-header.scss
rename to ui-v2/app/styles/components/product/main-header.scss
index 6b68d38fd6..79e3be7357 100644
--- a/ui-v2/app/styles/components/main-header.scss
+++ b/ui-v2/app/styles/components/product/main-header.scss
@@ -18,9 +18,6 @@
   @extend %secondary-nav;
 }
 
-%main-header::before {
-  background-color: $magenta-600;
-}
 %main-header {
   display: flex;
 }
diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss
index c78786af28..f6131fdf33 100644
--- a/ui-v2/app/styles/components/table.scss
+++ b/ui-v2/app/styles/components/table.scss
@@ -1,15 +1,37 @@
-@import './icons';
-@import './tag';
-td strong {
-  @extend %tag;
-  background-color: $gray;
+@import './icons/index';
+td.folder {
+  @extend %with-folder;
 }
-th {
-  color: $text-light !important;
+td dt.passing {
+  @extend %with-passing;
+}
+td dt.warning {
+  @extend %with-warning;
+}
+td dt.critical {
+  @extend %with-critical;
+}
+table:not(.sessions) tr {
+  cursor: pointer;
 }
 th,
 td {
-  border-bottom: 1px solid;
+  border-bottom: $decor-border-100;
+}
+td dt.passing,
+td dt.passing + dd {
+  color: $ui-color-success;
+}
+td dt.warning,
+td dt.warning + dd {
+  color: $ui-color-alert;
+}
+td dt.critical,
+td dt.critical + dd {
+  color: $ui-color-failure;
+}
+th {
+  color: $ui-gray-400 !important;
 }
 th {
   border-color: $keyline-dark;
@@ -17,9 +39,6 @@ th {
 td {
   border-color: $keyline-mid;
 }
-td.folder {
-  @extend %with-folder;
-}
 table {
   width: 100%;
 }
@@ -84,24 +103,8 @@ td dd.zero {
 td dt {
   text-indent: -9000px;
 }
-td dt.passing,
-td dt.passing + dd {
-  color: $green;
-}
-td dt.warning,
-td dt.warning + dd {
-  color: $orange;
-}
-td dt.critical,
-td dt.critical + dd {
-  color: $red;
-}
-td dt.passing {
-  @extend %with-passing;
-}
 td dt.warning {
   overflow: visible;
-  @extend %with-warning;
 }
 td dt.warning::before {
   top: 7px;
@@ -110,9 +113,6 @@ td dt.warning::after {
   left: -2px;
   top: -1px;
 }
-td dt.critical {
-  @extend %with-critical;
-}
 td dd {
   box-sizing: content-box;
   margin-left: 22px;
diff --git a/ui-v2/app/styles/components/tabs.scss b/ui-v2/app/styles/components/tabs.scss
index 94998d2521..518482f457 100644
--- a/ui-v2/app/styles/components/tabs.scss
+++ b/ui-v2/app/styles/components/tabs.scss
@@ -1,61 +1,7 @@
+@import './tabs/index';
 main header nav:last-child {
   @extend %tab-nav;
 }
 .tab-section {
   @extend %tab-section;
 }
-%tab-nav label {
-  cursor: pointer;
-}
-%tab-nav ul {
-  border: 0;
-}
-%tab-nav a {
-  border-bottom: $tabs-border-bottom-width $tabs-border-bottom-style;
-}
-%tab-nav a {
-  border-color: $tabs-border-bottom-color;
-  color: $tabs-link-color;
-}
-%tab-nav a:hover,
-%tab-nav a:focus,
-%tab-nav a:active,
-%tab-nav .selected a {
-  border-color: $tabs-border-active-bottom-color;
-  color: $tabs-link-active-color;
-}
-
-%tab-nav a {
-  white-space: nowrap;
-}
-@media #{$--horizontal-tabs} {
-  %tab-nav ul {
-    display: flex;
-    align-items: center;
-  }
-  %tab-nav ul li:not(:first-child) {
-    margin-left: 37px;
-  }
-  %tab-nav a {
-    padding-left: 5px;
-    padding-right: 5px;
-  }
-}
-@media #{$--lt-horizontal-tabs} {
-  %tab-nav li {
-    width: 100%;
-  }
-}
-%tab-nav a {
-  display: block;
-  padding-top: 12px;
-  padding-bottom: 12px;
-}
-%tab-nav input[type='radio'],
-%tab-section > input[type='radio'],
-%tab-section > input[type='radio'] + * {
-  display: none;
-}
-%tab-section > input[type='radio']:checked + * {
-  display: block;
-}
diff --git a/ui-v2/app/styles/components/tabs/index.scss b/ui-v2/app/styles/components/tabs/index.scss
new file mode 100644
index 0000000000..bc18252196
--- /dev/null
+++ b/ui-v2/app/styles/components/tabs/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/tabs/layout.scss b/ui-v2/app/styles/components/tabs/layout.scss
new file mode 100644
index 0000000000..0855017fb8
--- /dev/null
+++ b/ui-v2/app/styles/components/tabs/layout.scss
@@ -0,0 +1,34 @@
+%tab-section {
+  margin-top: 0 !important;
+}
+@media #{$--horizontal-tabs} {
+  %tab-nav ul {
+    display: flex;
+    align-items: center;
+  }
+  %tab-nav ul li:not(:first-child) {
+    margin-left: 37px;
+  }
+  %tab-nav a {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+@media #{$--lt-horizontal-tabs} {
+  %tab-nav li {
+    width: 100%;
+  }
+}
+%tab-nav a {
+  display: block;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+%tab-nav input[type='radio'],
+%tab-section > input[type='radio'],
+%tab-section > input[type='radio'] + * {
+  display: none;
+}
+%tab-section > input[type='radio']:checked + * {
+  display: block;
+}
diff --git a/ui-v2/app/styles/components/tabs/skin.scss b/ui-v2/app/styles/components/tabs/skin.scss
new file mode 100644
index 0000000000..c642f4d123
--- /dev/null
+++ b/ui-v2/app/styles/components/tabs/skin.scss
@@ -0,0 +1,24 @@
+%tab-nav label {
+  cursor: pointer;
+}
+%tab-nav ul {
+  border: 0;
+}
+%tab-nav a {
+  border-bottom: $decor-border-300;
+}
+%tab-nav a {
+  border-color: $ui-color-transparent;
+  color: $ui-gray-500;
+}
+%tab-nav a:hover,
+%tab-nav a:focus,
+%tab-nav a:active,
+%tab-nav .selected a {
+  border-color: $brand-magenta-600;
+  color: $brand-magenta-600;
+}
+
+%tab-nav a {
+  white-space: nowrap;
+}
diff --git a/ui-v2/app/styles/components/tabular-collection.scss b/ui-v2/app/styles/components/tabular-collection.scss
index e7ee2c6b71..6620da9c6c 100644
--- a/ui-v2/app/styles/components/tabular-collection.scss
+++ b/ui-v2/app/styles/components/tabular-collection.scss
@@ -1,6 +1,3 @@
-table:not(.sessions) tr {
-  cursor: pointer;
-}
 table {
   position: relative;
 }
@@ -16,6 +13,9 @@ table tr > * {
   flex: 1 0 auto;
 }
 
+tr > * dl {
+  float: left;
+}
 html.template-service.template-list main table tr {
   @extend %services-row;
 }
@@ -65,9 +65,6 @@ html.template-node.template-show main table.sessions tr {
     display: none;
   }
 }
-tr > * dl {
-  float: left;
-}
 %intentions-row > * {
   width: calc(25% - 60px);
 }
diff --git a/ui-v2/app/styles/components/tomography-graph.scss b/ui-v2/app/styles/components/tomography-graph.scss
index 6481d46167..b76b8bccb1 100644
--- a/ui-v2/app/styles/components/tomography-graph.scss
+++ b/ui-v2/app/styles/components/tomography-graph.scss
@@ -1,31 +1,31 @@
 .tomography .background {
-  fill: $lightest-gray;
+  fill: $ui-gray-050;
 }
 .tomography .axis {
   fill: none;
-  stroke: $border-blue;
+  stroke: $ui-gray-300;
   stroke-dasharray: 4 4;
 }
 .tomography .border {
   fill: none;
-  stroke: $border-blue;
+  stroke: $ui-gray-300;
 }
 .tomography .point {
-  stroke: $text-note;
-  fill: $magenta-600;
+  stroke: $ui-gray-400;
+  fill: $brand-magenta-600;
 }
 .tomography .lines line {
-  stroke: $magenta-600;
+  stroke: $brand-magenta-600;
 }
 .tomography .lines line:hover {
-  stroke: $border-blue;
+  stroke: $ui-gray-300;
   stroke-width: 2px;
 }
 .tomography .tick line {
-  stroke: $border-blue;
+  stroke: $ui-gray-300;
 }
 .tomography .tick text {
-  font-size: $size-normal;
+  font-size: $typo-size-600;
   text-anchor: start;
-  color: $text;
+  color: $ui-gray-900;
 }
diff --git a/ui-v2/app/styles/core/layout.scss b/ui-v2/app/styles/core/layout.scss
index 8f56e985c1..cf3d072f52 100644
--- a/ui-v2/app/styles/core/layout.scss
+++ b/ui-v2/app/styles/core/layout.scss
@@ -1,70 +1,27 @@
+@import '../layouts/index';
+
 html.template-with-vertical-menu,
 html.template-with-vertical-menu body {
   overflow: hidden;
 }
 #wrapper {
-  margin: 0 auto;
-  position: static;
-  max-width: 1260px;
-  padding: 0 1.9047619047619049%; // 24px
-  padding: 0 1.9047619047619049vw; // 24px
-  width: auto; // stop bulma jumping around
-
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
+  @extend %viewport-container;
 }
-@media #{$--min-padding} {
-  #wrapper {
-    padding: 0 10px;
-  }
-  main,
-  #wrapper > footer {
-    padding: 0 33px;
-  }
-}
-@media #{$--max-padding} {
-  #wrapper {
-    padding: 0 24px;
-  }
-  main,
-  #wrapper > footer {
-    padding: 0 33px;
-  }
+#wrapper {
+  @extend %with-sticky-footer;
 }
 main {
-  max-width: 1150px;
+  @extend %with-sticky-footer-content;
 }
 main,
 #wrapper > footer {
-  padding: 0 2.619047619047619%; //33px;
-  padding: 0 1.9047619047619049vw;
+  @extend %content-container;
 }
-main {
-  flex: 1;
-}
-// workaround bulma's sweeping box-sizing
-#wrapper {
-  box-sizing: content-box;
-}
-main > * {
-  box-sizing: border-box;
-}
-main p {
-  margin-bottom: 1em;
+html.template-edit main {
+  @extend %content-container-restricted;
 }
+/* TODO: keep margin below forms, move elsewhere */
 main form,
 main form + div .with-confirmation {
   margin-bottom: 2em;
 }
-html body > svg {
-  display: none;
-  position: absolute;
-  top: 50%;
-  margin-top: -26px;
-  left: 50%;
-  margin-left: -84px;
-}
-html.ember-loading body > svg {
-  display: block;
-}
diff --git a/ui-v2/app/styles/core/reset.css b/ui-v2/app/styles/core/reset.css
deleted file mode 100644
index 5e37b0d816..0000000000
--- a/ui-v2/app/styles/core/reset.css
+++ /dev/null
@@ -1,10 +0,0 @@
-body {
-  background-color: $white;
-}
-fieldset {
-  border: 0;
-  width: 100%;
-}
-label span {
-  @extend %user-select-none;
-}
diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss
index 5dbadf0a72..259db1cf41 100644
--- a/ui-v2/app/styles/core/typography.scss
+++ b/ui-v2/app/styles/core/typography.scss
@@ -1,14 +1,20 @@
 %button {
-  font-family: $body-family;
+  font-family: $typo-family-sans;
 }
-%button {
+main p {
+  margin-bottom: 1em;
+}
+%button,
+%form-element textarea,
+%form-element [type='text'],
+%form-element [type='password'] {
   line-height: 1.5;
 }
 %radio-group label {
   line-height: 1.25;
 }
-h1 {
-  letter-spacing: 1px;
+%filter-bar [role='radiogroup'] label {
+  line-height: 1.7;
 }
 %header-nav,
 %tab-nav {
@@ -17,9 +23,14 @@ h1 {
 %footer {
   letter-spacing: -0.05em;
 }
+th,
+button,
+td strong,
+td:first-child,
 h1,
+%app-content div > dt,
 %header-drop-nav .is-active {
-  font-weight: $weight-bold;
+  font-weight: $typo-weight-bold;
 }
 h2,
 %header-nav,
@@ -29,21 +40,22 @@ h2,
 %form-element > span,
 %app-content div > dl > dt,
 td a {
-  font-weight: $weight-semibold;
+  font-weight: $typo-weight-semibold;
 }
 %button {
-  font-weight: $weight-semibold !important;
+  font-weight: $typo-weight-semibold !important;
 }
 th,
 %breadcrumbs a,
 %action-group a,
 %tab-nav {
-  font-weight: $weight-medium;
+  font-weight: $typo-weight-medium;
 }
 main label a[rel*='help'],
 td:first-child em,
+%pill,
 %healthchecked-resource strong {
-  font-weight: $weight-normal;
+  font-weight: $typo-weight-normal;
 }
 %form-element > em,
 td:first-child em,
@@ -56,40 +68,39 @@ td:first-child em,
 %form-element > span > * {
   text-transform: none;
 }
+%footer > * {
+  font-size: inherit;
+}
 h1 {
-  font-size: $size-4;
+  font-size: $typo-size-400;
 }
 h2,
 %header-drop-nav .is-active {
-  font-size: $size-5;
+  font-size: $typo-size-500;
 }
 body,
 pre code,
 input,
 textarea,
 td {
-  font-size: $size-6;
+  font-size: $typo-size-600;
 }
 th,
 %healthchecked-resource strong,
 %footer {
-  font-size: $size-7;
+  font-size: $typo-size-700;
 }
 %toggle span {
-  font-size: $size-7 !important;
+  font-size: $typo-size-700 !important;
 }
+%app-content > p:only-child,
+[role='tabpanel'] > p:only-child,
+%app-view > div.disabled > div,
+.template-error > div,
 %button,
 .with-confirmation p,
 %form-element > em,
 %form-element > span,
 %feedback-dialog-inline p {
-  font-size: $size-8;
-}
-th,
-button,
-td strong {
-  font-weight: normal;
-}
-td:first-child {
-  font-weight: bold;
+  font-size: $typo-size-800;
 }
diff --git a/ui-v2/app/styles/layouts/containers.scss b/ui-v2/app/styles/layouts/containers.scss
new file mode 100644
index 0000000000..1648a426a7
--- /dev/null
+++ b/ui-v2/app/styles/layouts/containers.scss
@@ -0,0 +1,57 @@
+$ideal-viewport-width-num: 1260;
+$ideal-viewport-width: #{$ideal-viewport-width-num}px;
+$ideal-content-width-num: 1150;
+$ideal-content-width: #{$ideal-content-width-num}px;
+$ideal-viewport-padding-num: 24;
+$ideal-viewport-padding: #{ideal-viewport-padding-num}px;
+$minimum-viewport-padding: 10px;
+$ideal-content-padding: 33px;
+
+// workaround bulma's sweeping box-sizing
+// so we can verify the ideal widths are the same
+
+%viewport-container {
+  box-sizing: content-box;
+}
+%viewport-container {
+  margin-left: auto;
+  margin-right: auto;
+}
+%content-container > * {
+  box-sizing: border-box;
+}
+%content-container-restricted {
+  max-width: $ideal-content-width;
+}
+%viewport-container {
+  padding-left: calc(#{$ideal-viewport-padding-num}% / (#{$ideal-viewport-width-num} / 100));
+  padding-right: calc(#{$ideal-viewport-padding-num}% / (#{$ideal-viewport-width-num} / 100));
+  padding-left: calc(#{$ideal-viewport-padding-num}vw / (#{$ideal-viewport-width-num} / 100));
+  padding-right: calc(#{$ideal-viewport-padding-num}vw / (#{$ideal-viewport-width-num} / 100));
+}
+@media #{$--min-padding} {
+  %viewport-container {
+    padding-left: $minimum-viewport-padding;
+    padding-right: $minimum-viewport-padding;
+  }
+  %content-container {
+    padding-left: $ideal-viewport-padding;
+    padding-right: $ideal-viewport-padding;
+  }
+}
+@media #{$--max-padding} {
+  %viewport-container {
+    padding-left: $ideal-viewport-padding;
+    padding-right: $ideal-viewport-padding;
+  }
+  %content-container {
+    padding-left: $ideal-viewport-padding;
+    padding-right: $ideal-viewport-padding;
+  }
+}
+%content-container {
+  padding-left: calc(33% / (#{$ideal-viewport-width-num} / 100));
+  padding-right: calc(33% / (#{$ideal-viewport-width-num} / 100));
+  padding-left: calc(24vw / (#{$ideal-viewport-width-num} / 100));
+  padding-right: calc(24vw / (#{$ideal-viewport-width-num} / 100));
+}
diff --git a/ui-v2/app/styles/layouts/index.scss b/ui-v2/app/styles/layouts/index.scss
new file mode 100644
index 0000000000..65c78ee584
--- /dev/null
+++ b/ui-v2/app/styles/layouts/index.scss
@@ -0,0 +1,2 @@
+@import './with-sticky-footer';
+@import './containers';
diff --git a/ui-v2/app/styles/layouts/with-sticky-footer.scss b/ui-v2/app/styles/layouts/with-sticky-footer.scss
new file mode 100644
index 0000000000..9690ace049
--- /dev/null
+++ b/ui-v2/app/styles/layouts/with-sticky-footer.scss
@@ -0,0 +1,8 @@
+%with-sticky-footer {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+%with-sticky-footer-content {
+  flex: 1;
+}
diff --git a/ui-v2/app/styles/routes/dc/intention/index.scss b/ui-v2/app/styles/routes/dc/intention/index.scss
index 61de303bd1..ce502d3dfb 100644
--- a/ui-v2/app/styles/routes/dc/intention/index.scss
+++ b/ui-v2/app/styles/routes/dc/intention/index.scss
@@ -7,5 +7,5 @@ html.template-intention.template-list td.intent-deny strong {
   visibility: hidden;
 }
 html.template-intention.template-list td.destination {
-  font-weight: $weight-semibold;
+  font-weight: $typo-weight-semibold;
 }
diff --git a/ui-v2/app/styles/routes/dc/nodes/index.scss b/ui-v2/app/styles/routes/dc/nodes/index.scss
index f7c3003bea..f8400db878 100644
--- a/ui-v2/app/styles/routes/dc/nodes/index.scss
+++ b/ui-v2/app/styles/routes/dc/nodes/index.scss
@@ -1,6 +1,5 @@
 // TODO: Generalize this, also see services/index
+@import '../../../components/pill/index';
 html.template-node.template-show td.tags span {
-  @extend %tag;
-  background-color: $gray;
-  margin-bottom: 0.5em;
+  @extend %pill;
 }
diff --git a/ui-v2/app/styles/routes/dc/service/index.scss b/ui-v2/app/styles/routes/dc/service/index.scss
index d60c5c77a0..29f36d8d58 100644
--- a/ui-v2/app/styles/routes/dc/service/index.scss
+++ b/ui-v2/app/styles/routes/dc/service/index.scss
@@ -1,4 +1,4 @@
-@import '../../../components/tag';
+@import '../../../components/pill/index';
 html.template-service.template-show main dl {
   display: flex;
   margin-bottom: 1.4em;
@@ -9,7 +9,5 @@ html.template-service.template-show main dt {
 // TODO: Generalize this, also see nodes/index
 html.template-service.template-list td.tags span,
 html.template-service.template-show main dd span {
-  @extend %tag;
-  background-color: $gray;
-  margin-bottom: 0.5em;
+  @extend %pill;
 }
diff --git a/ui-v2/app/styles/variables/color.scss b/ui-v2/app/styles/variables/color.scss
deleted file mode 100644
index 753abc1ebb..0000000000
--- a/ui-v2/app/styles/variables/color.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-$magenta-50: #f9ebf2;
-$magenta-600: #9e2159;
-$magenta-800: #5a1434;
-
-$green-050: #ecf7ed;
-
-$red-050: #f9ecee;
-$red-500: #c73445;
-$red-700: #7f222c;
-
-$blue-500: #1563ff;
-$blue-700: #0e40a3;
-$blue-900: #061b46;
-
-$yellow-050: #fef9e8;
-$yellow-500: #fa8f37;
-
-$gray-050: #f5f6f7;
-$gray-100: #e1e4e7;
-$gray-500: #919fa8;
-$gray-700: #5d666b;
-
-$white: #fff;
-$black: #000;
-$carbon: #42494d;
-$red: #d73445;
-$blue: #0068ff;
-$green: #2eb039;
-$orange: #fa8f37;
-$gray: #cdd3d7;
-$transparent: transparent;
-
-$magenta-800-url-encoded: %235a1434;
-$lightest-gray: #f9f9f9; // bg grays
-$dangerous-red: #b94a3c;
diff --git a/ui-v2/app/styles/variables/index.scss b/ui-v2/app/styles/variables/index.scss
index e394da2f1a..d64dcc751e 100644
--- a/ui-v2/app/styles/variables/index.scss
+++ b/ui-v2/app/styles/variables/index.scss
@@ -1,61 +1,15 @@
 @import './custom-query';
-@import './color';
+$gray: $ui-gray-200;
+$ui-gray-025: #fafbfc;
+
+$magenta-800-url-encoded: %235a1434;
+
+$keyline-light: $ui-gray-100; // h1
+$keyline-mid: $ui-gray-200; // td, footer
+$keyline-dark: $ui-gray-300; // th
+$keyline-darker: $ui-gray-400;
 
 // decoration
-$radius-small: 2px;
-$radius: 4px;
-
-// colors
-
-$keyline-light: rgba(#bdc4d0, 0.5); // h1
-$keyline-mid: #cdd3d7; // td
-$keyline-dark: #a5b0b7; // th
-$keyline-darker: #b9c1c7; //footer
-
-$border-mid: #b9c4d2;
-$border-dark: #8d9fad;
-
-$border-blue: #bbc4d1;
-
-$text-blue: #919fa8;
-$text-field-blue: #b9c4d2;
-$user-text-gray: #677877;
-// #6a7786;
-// #677887 input labels
-$text-gray: #77838a; // tab text
-$text-light: #828b9a;
-$text: #282828;
-
-$text-note: #929dab; // used for confirmations and footer
-
-$primary: $blue-500;
-$body-background-color: transparent;
-$navbar-background-color: $body-background-color;
-
-$tabs-border-active-bottom-color: $magenta-600;
-$tabs-link-color: $text-gray;
-$tabs-link-active-color: $magenta-600;
-$tabs-border-bottom-style: solid;
-$tabs-border-bottom-width: 3px;
-$tabs-border-bottom-color: transparent;
-
-// fonts
-
-/**
- * Sizes don't use auto rem to px calculating
-*/
-html {
-  font-size: 16px;
-}
-// follow bulma and use 1, 2, 3, 4 etc for font sizes...
-$size-4: 1.5rem; // $size-large? 24
-$size-5: 1.125rem; // $size-medium? // 18
-$size-6: 0.875rem; // $size-normal? // 14
-$size-7: 0.8125rem; // $size-small? // 13
-$size-8: 0.75rem; // $size-small? // 12
-.is-size-8 {
-  font-size: $size-8;
-}
-$weight-medium: 500;
-$weight-semibold: 600;
-$weight-bold: 700;
+// undecided
+$radius-small: $decor-radius-100;
+$radius: $decor-radius-200;