diff --git a/ui_framework/components.js b/ui_framework/components.js
new file mode 100644
index 00000000000000..eef565fa5ec730
--- /dev/null
+++ b/ui_framework/components.js
@@ -0,0 +1 @@
+export * from './src/components';
diff --git a/ui_framework/components/global_styles/mixins/_index.scss b/ui_framework/components/global_styles/mixins/_index.scss
deleted file mode 100644
index addb915b9770ea..00000000000000
--- a/ui_framework/components/global_styles/mixins/_index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'naming';
-@import 'responsive';
-@import 'typography';
diff --git a/ui_framework/components/global_styles/mixins/_responsive.scss b/ui_framework/components/global_styles/mixins/_responsive.scss
deleted file mode 100644
index ba05c4dae4295a..00000000000000
--- a/ui_framework/components/global_styles/mixins/_responsive.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-// Responsiveness
-
-$breakpoints: ("xSmall": 575px, "small": 768px, "medium": 992px, "large": 1200px) !default;
-
-
-@mixin screenXSmall {
-  @media only screen and (max-width: map-get($breakpoints, "small")) {
-     @content;
-  }
-}
-
-
-@mixin screenSmall {
-  @media only screen and (min-width: map-get($breakpoints, "small") + 1) and (max-width: map-get($breakpoints, "medium") - 1) {
-     @content;
-  }
-}
-
-@mixin screenMedium {
-  @media only screen and (min-width: map-get($breakpoints, "medium")) and (max-width: map-get($breakpoints, "large") - 1) {
-    @content;
-  }
-}
-
-@mixin screenLarge {
-  @media only screen and (min-width: map-get($breakpoints, "large")) {
-    @content;
-  }
-}
diff --git a/ui_framework/components/global_styles/mixins/_typography.scss b/ui_framework/components/global_styles/mixins/_typography.scss
deleted file mode 100644
index f2b9afb8226713..00000000000000
--- a/ui_framework/components/global_styles/mixins/_typography.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-// Some mixins that help us deal with browser scaling of text more consistantly.
-// Essentially, fonts across kui should scale agains the root html element, not
-// against parent inheritance.
-
-
-// Typography mixins
-
-@function convertToRem($size) {
-  @return #{$size / $kuiFontSize}rem;
-}
-
-// Spit out rem and px. This helps out people who might be on older versions of IE (<11).
-
-@mixin fontSize($size: $kuiFontSize) {
-  font-size: $size;
-  font-size: convertToRem($size);
-}
-
-%kuiFont {
-  font-family: $kuiFontFamily;
-  font-weight: $kuiFontWeightRegular;
-}
-
-%kuiCodeFont {
-  font-family: $kuiCodeFontFamily;
-}
-
-// Font sizing extends, using rem mixin
-
-%kuiFontSize {
-  @include fontSize($kuiFontSize);
-  line-height: $kuiLineHeight;
-}
-
-%kuiFontSizeXS {
-  @include fontSize($kuiFontSizeXS);
-  line-height: $kuiLineHeight;
-}
-
-%kuiFontSizeS {
-  @include fontSize($kuiFontSizeS);
-  line-height: $kuiLineHeight;
-}
-
-%kuiFontSizeM {
-  @include fontSize($kuiFontSizeM);
-  line-height: $kuiLineHeight;
-}
-
-%kuiFontSizeL {
-  @include fontSize($kuiFontSizeL);
-  line-height: $kuiLineHeight * 1.5;
-}
-
-%kuiFontSizeXL {
-  @include fontSize($kuiFontSizeXL);
-  line-height: $kuiLineHeight * 2;
-}
-
-%kuiFontSizeXXL {
-  @include fontSize($kuiFontSizeXXL);
-  line-height: $kuiLineHeight * 3;
-}
diff --git a/ui_framework/components/global_styles/variables/_size.scss b/ui_framework/components/global_styles/variables/_size.scss
deleted file mode 100644
index 9f297976a40642..00000000000000
--- a/ui_framework/components/global_styles/variables/_size.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-$kuiSize:     16px;
-
-$kuiSizeS:    $kuiSize / 2;
-$kuiSizeXS:   $kuiSize / 4;
-$kuiSizeM:    $kuiSize;
-$kuiSizeL:    $kuiSize * 1.5;
-$kuiSizeXL:   $kuiSize * 2;
-$kuiSizeXXL:  $kuiSize * 2.5;
-
diff --git a/ui_framework/components/global_styles/variables/_typography.scss b/ui_framework/components/global_styles/variables/_typography.scss
deleted file mode 100644
index 67f83d34cacfdf..00000000000000
--- a/ui_framework/components/global_styles/variables/_typography.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-// Font
-
-// Families
-$kuiFontFamily: "Roboto", Helvetica, Arial, sans-serif;
-$kuiCodeFontFamily: "Roboto Mono", monospace;
-
-// Font sizes
-$kuiFontSize:       $kuiSize;
-
-$kuiFontSizeXS:     12px;
-$kuiFontSizeS:      14px;
-$kuiFontSizeM:      $kuiFontSize;
-$kuiFontSizeL:      24px;
-$kuiFontSizeXL:     32px;
-$kuiFontSizeXXL:    48px;
-
-// Line height
-
-$kuiLineHeight: 1.5 * $kuiFontSize;
-
-// Font weights
-
-$kuiFontWeightLight:    300;
-$kuiFontWeightRegular:  400;
-$kuiFontWeightMedium:   500;
diff --git a/ui_framework/components/global_styles/variables/_z_index.scss b/ui_framework/components/global_styles/variables/_z_index.scss
deleted file mode 100644
index ecbc0867996ec7..00000000000000
--- a/ui_framework/components/global_styles/variables/_z_index.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-// Z-Index
-
-$kuiZLevel0:          0;
-$kuiZLevel1:          1000;
-$kuiZLevel2:          2000;
-$kuiZLevel3:          3000;
-$kuiZLevel4:          4000;
-$kuiZLevel5:          5000;
-$kuiZLevel6:          6000;
-$kuiZLevel7:          7000;
-$kuiZLevel8:          8000;
-$kuiZLevel9:          9000;
-
-$kuiZContent:         $kuiZLevel0;
-$kuiZContentMenu:     $kuiZLevel2;
-$kuiZNavigation:      $kuiZLevel4;
-$kuiZMask:            $kuiZLevel6;
-$kuiZModal:           $kuiZLevel8;
diff --git a/ui_framework/services.js b/ui_framework/services.js
new file mode 100644
index 00000000000000..3b3a0da3629868
--- /dev/null
+++ b/ui_framework/services.js
@@ -0,0 +1 @@
+export * from './src/services';
diff --git a/ui_framework/src/global_styling/mixins/_index.scss b/ui_framework/src/global_styling/mixins/_index.scss
index 7609608984d2ae..addb915b9770ea 100644
--- a/ui_framework/src/global_styling/mixins/_index.scss
+++ b/ui_framework/src/global_styling/mixins/_index.scss
@@ -1 +1,3 @@
- @import 'responsive';
+@import 'naming';
+@import 'responsive';
+@import 'typography';
diff --git a/ui_framework/src/global_styling/mixins/_naming.scss b/ui_framework/src/global_styling/mixins/_naming.scss
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/ui_framework/src/global_styling/mixins/_typography.scss b/ui_framework/src/global_styling/mixins/_typography.scss
new file mode 100644
index 00000000000000..2914c9611ebc99
--- /dev/null
+++ b/ui_framework/src/global_styling/mixins/_typography.scss
@@ -0,0 +1,17 @@
+// Some mixins that help us deal with browser scaling of text more consistantly.
+// Essentially, fonts across kui should scale agains the root html element, not
+// against parent inheritance.
+
+
+// Typography mixins
+
+@function convertToRem($size) {
+  @return #{$size / $kuiFontSize}rem;
+}
+
+// Spit out rem and px
+
+@mixin fontSize($size: $kuiFontSize) {
+  font-size: $size;
+  font-size: convert-to-rem($size);
+}
diff --git a/ui_framework/src/global_styling/variables/_size.scss b/ui_framework/src/global_styling/variables/_size.scss
index 8ba19f07a54141..9f297976a40642 100644
--- a/ui_framework/src/global_styling/variables/_size.scss
+++ b/ui_framework/src/global_styling/variables/_size.scss
@@ -6,3 +6,4 @@ $kuiSizeM:    $kuiSize;
 $kuiSizeL:    $kuiSize * 1.5;
 $kuiSizeXL:   $kuiSize * 2;
 $kuiSizeXXL:  $kuiSize * 2.5;
+
diff --git a/ui_framework/src/global_styling/variables/_typography.scss b/ui_framework/src/global_styling/variables/_typography.scss
index 5ab03e25b8cc68..922ec96cb91128 100644
--- a/ui_framework/src/global_styling/variables/_typography.scss
+++ b/ui_framework/src/global_styling/variables/_typography.scss
@@ -1,16 +1,71 @@
-// Font
-
-$kuiFontFamily: Roboto, Helvetica, Arial, sans-serif;
+// Families
+$kuiFontFamily: "Roboto", Helvetica, Arial, sans-serif;
 $kuiCodeFontFamily: "Roboto Mono", monospace;
 
-$kuiLineHeight: 1.5;
-
+// Font sizes
 $kuiFontSize:       $kuiSize;
-$kuiFontSizeXS:     $kuiSize;
-$kuiFontSizeS:      $kuiSize;
-$kuiFontSizeM:      $kuiSize;
-$kuiFontSizeL:      $kuiSize;
-$kuiFontSizeXL:     $kuiSize;
-$kuiFontSizeXXL:    $kuiSize;
 
+$kuiFontSizeXS:     12px;
+$kuiFontSizeS:      14px;
+$kuiFontSizeM:      $kuiFontSize;
+$kuiFontSizeL:      24px;
+$kuiFontSizeXL:     32px;
+$kuiFontSizeXXL:    48px;
+
+// Line height
+
+$kuiLineHeight: 1.5 * $kuiFontSize;
+
+// Font weights
+
+$kuiFontWeightLight:    300;
+$kuiFontWeightRegular:  400;
+$kuiFontWeightMedium:   500;
+
+// Our base fonts
+
+%kuiFont {
+  font-family: $kuiFontFamily;
+  font-weight: $kuiFontWeightRegular;
+}
+
+%kuiCodeFont {
+  font-family: $kuiCodeFontFamily;
+}
+
+// Font sizing extends, using rem mixin
+
+%kuiFontSize {
+  font-size: rem($kuiFontSize);
+  line-height: $kuiLineHeight;
+}
+
+%kuiFontSizeXS {
+  font-size: rem($kuiFontSizeXS);
+  line-height: $kuiLineHeight;
+}
+
+%kuiFontSizeS {
+  font-size: rem($kuiFontSizeS);
+  line-height: $kuiLineHeight;
+}
+
+%kuiFontSizeM {
+  font-size: rem($kuiFontSizeM);
+  line-height: $kuiLineHeight;
+}
+
+%kuiFontSizeL {
+  font-size: rem($kuiFontSizeL);
+  line-height: $kuiLineHeight * 1.5;
+}
+
+%kuiFontSizeXL {
+  font-size: rem($kuiFontSizeXL);
+  line-height: $kuiLineHeight * 2;
+}
 
+%kuiFontSizeXXL {
+  font-size: rem($kuiFontSizeXXL);
+  line-height: $kuiLineHeight * 3;
+}
diff --git a/ui_framework/src/global_styling/variables/_z_index.scss b/ui_framework/src/global_styling/variables/_z_index.scss
index 7cebd9025cbf70..ecbc0867996ec7 100644
--- a/ui_framework/src/global_styling/variables/_z_index.scss
+++ b/ui_framework/src/global_styling/variables/_z_index.scss
@@ -1,6 +1,5 @@
 // Z-Index
 
-
 $kuiZLevel0:          0;
 $kuiZLevel1:          1000;
 $kuiZLevel2:          2000;
@@ -12,10 +11,8 @@ $kuiZLevel7:          7000;
 $kuiZLevel8:          8000;
 $kuiZLevel9:          9000;
 
-
-
-$kuiZContent:         0;
-$kuiZContentMenu:     2000;
-$kuiZNavigation:      4000;
-$kuiZMask:            6000;
-$kuiZModal:           8000;
+$kuiZContent:         $kuiZLevel0;
+$kuiZContentMenu:     $kuiZLevel2;
+$kuiZNavigation:      $kuiZLevel4;
+$kuiZMask:            $kuiZLevel6;
+$kuiZModal:           $kuiZLevel8;