diff --git a/ui_framework/components/_variables.scss b/ui_framework/components/_variables.scss
deleted file mode 100644
index 80e723d2a1a374..00000000000000
--- a/ui_framework/components/_variables.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-// --------------------------------------------------------------------------------------
-// KUI global variables
-// --------------------------------------------------------------------------------------
-// This file contains all global variables available within kui. Every variable in this
-// document should be prefixed with $global. This lets us know where the variable is
-// coming from when looking inside the individual component files. Any component local
-// variables should be declared at the top of those documents prefixed with $componentName.
-
-
-// True colors
-
-$globalColorBlue: #0079a5;
-$globalColorTeal: #00A69B;
-$globalColorRed: #A30000;
-$globalColorLightestGray: #F5F5F5;
-$globalColorLightGray: #D9D9D9;
-$globalColorMediumGray: #999;
-$globalColorDarkGray: #666;
-$globalColorDarkestGray: #3F3F3F;
-$globalColorBlack: #000;
-$globalColorWhite: #FFF;
-
-
-// Normal colors
-
-$globalTextColor: #2d2d2d;
-$globalLinkColor: $globalColorBlue;
-$globalLinkColor-isHover: darken($globalLinkColor, 10%);
-$globalInputTextColor: $globalTextColor;
-$globalInputBackgroundColor: $globalColorWhite;
-$globalInputBorderColor: $globalColorLightGray;
-
-
-// Animations
-
-$globalAnimSlightBounce: cubic-bezier(0.34,1.61,0.7,1);
-$globalAnimSlightResistance: cubic-bezier(0.694, 0.0482, 0.335, 1);
-$globalAnimSpeedVeryFast: 90ms;
-$globalAnimSpeedFast: 150ms;
-$globalAnimSpeedNormal: 250ms;
-$globalAnimSpeedSlow: 350ms;
-$globalAnimSpeedVerySlow: 500ms;
-
-
-// Dark theme colors
-
-$globalTextColor--darkTheme: #cecece;
-$globalBackgroundColor--darkTheme: #777777;
-$globalLinkColor--darkTheme: #b7e2ea;
-$globalLinkColor-isHover--darkTheme: #def2f6;
-$globalInputTextColor--darkTheme: $globalTextColor--darkTheme;
-$globalInputBackgroundColor--darkTheme: #444444;
-$globalInputBorderColor--darkTheme: $globalInputBackgroundColor--darkTheme;
-
-// Font
-
-$globalFontFamily: "Open Sans", Helvetica, Arial, sans-serif;
-$globalFontSize: 14px;
-$globalLineHeight: 1.5;
-$globalSubTextFontSize: 12px;
-$globalTitleFontSize: 18px;
-$globalFontWeightRegular: 400;
-$globalFontWeightBold: 700;
-
-// Colors
-
-$globalInfoColor: #3fa8c7;
-$globalInactiveColor: #c3c3c3;
-$globalSuccessColor: #417505;
-$globalWarningColor: #ec9800;
-$globalDangerColor: $globalColorRed;
-$globalFocusColor: $globalColorBlue;
-$globalFocusDangerColor: #ff523c;
-$globalFocusWarningColor: #ffa500;
-$globalFocusBackgroundColor: #ffffff;
-$globalFontColor: #191E23;
-$globalSubduedTextColor: $globalColorDarkGray;
-$globalLinkHoverColor: #006E8A;
-$globalSelectedBorderColor: $globalColorBlue;
-$globalDangerBorderColor: $globalDangerColor;
-$globalFormControlBorderColor: #DEDEDE;
-
-// Borders
-
-$globalBorderColor: $globalColorLightGray;
-$globalBorderRadius: 4px;
-$globalBorderThick: 2px solid $globalBorderColor;
-$globalBorderThin: 1px solid $globalBorderColor;
-
-// Shadows
-
-$globalBoxShadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
-
-// Timing
-
-$globalInputTransitionTiming: 0.1s linear;
-
-// Bar
-
-$toolBarHeight: 50px;
-$toolBarPadding: 10px;
-$toolBarSectionSpacing: 50px;
-$toolBarItsemSpacing: 10px;
-
-// Form
-
-$globalFormControlHorizontalPadding: 12px;
-$globalFormControlPadding: 3px $globalFormControlHorizontalPadding 4px;
-$globalFormInputHeight: 30px;
-$globalFormFieldDefaultWidth: 180px;
-$globalFormFieldSmallWidth: 60px;
-$globalFormFieldLargeWidth: 400px;
diff --git a/ui_framework/components/global_styles/_index.scss b/ui_framework/components/global_styles/_index.scss
new file mode 100644
index 00000000000000..93604c26ef2d30
--- /dev/null
+++ b/ui_framework/components/global_styles/_index.scss
@@ -0,0 +1,3 @@
+@import 'reset/index';
+@import 'variables/index';
+@import 'mixins/index';
diff --git a/ui_framework/components/global_styles/mixins/_index.scss b/ui_framework/components/global_styles/mixins/_index.scss
new file mode 100644
index 00000000000000..d640ad2cefcebf
--- /dev/null
+++ b/ui_framework/components/global_styles/mixins/_index.scss
@@ -0,0 +1 @@
+@import 'naming';
diff --git a/ui_framework/components/_common_styles.scss b/ui_framework/components/global_styles/mixins/_naming.scss
similarity index 100%
rename from ui_framework/components/_common_styles.scss
rename to ui_framework/components/global_styles/mixins/_naming.scss
diff --git a/ui_framework/components/global_styles/reset/_index.scss b/ui_framework/components/global_styles/reset/_index.scss
new file mode 100644
index 00000000000000..defff1d55c6792
--- /dev/null
+++ b/ui_framework/components/global_styles/reset/_index.scss
@@ -0,0 +1 @@
+@import "reset";
diff --git a/ui_framework/components/_mixins.scss b/ui_framework/components/global_styles/reset/_reset.scss
similarity index 100%
rename from ui_framework/components/_mixins.scss
rename to ui_framework/components/global_styles/reset/_reset.scss
diff --git a/ui_framework/components/global_styles/variables/_animations.scss b/ui_framework/components/global_styles/variables/_animations.scss
new file mode 100644
index 00000000000000..7e0a4fca9d63bc
--- /dev/null
+++ b/ui_framework/components/global_styles/variables/_animations.scss
@@ -0,0 +1,9 @@
+// Animations
+
+$globalAnimSlightBounce: cubic-bezier(0.34,1.61,0.7,1);
+$globalAnimSlightResistance: cubic-bezier(0.694, 0.0482, 0.335, 1);
+$globalAnimSpeedVeryFast: 90ms;
+$globalAnimSpeedFast: 150ms;
+$globalAnimSpeedNormal: 250ms;
+$globalAnimSpeedSlow: 350ms;
+$globalAnimSpeedVerySlow: 500ms;
diff --git a/ui_framework/components/global_styles/variables/_borders.scss b/ui_framework/components/global_styles/variables/_borders.scss
new file mode 100644
index 00000000000000..91c8776f5a9e0d
--- /dev/null
+++ b/ui_framework/components/global_styles/variables/_borders.scss
@@ -0,0 +1,6 @@
+// Borders
+
+$globalBorderColor: $globalColorLightGray;
+$globalBorderRadius: 4px;
+$globalBorderThick: 2px solid $globalBorderColor;
+$globalBorderThin: 1px solid $globalBorderColor;
diff --git a/ui_framework/components/global_styles/variables/_colors.scss b/ui_framework/components/global_styles/variables/_colors.scss
new file mode 100644
index 00000000000000..adf001d2348b1a
--- /dev/null
+++ b/ui_framework/components/global_styles/variables/_colors.scss
@@ -0,0 +1,49 @@
+// True colors
+
+$globalColorBlue: #0079a5;
+$globalColorTeal: #00A69B;
+$globalColorRed: #A30000;
+$globalColorLightestGray: #F5F5F5;
+$globalColorLightGray: #D9D9D9;
+$globalColorMediumGray: #999;
+$globalColorDarkGray: #666;
+$globalColorDarkestGray: #3F3F3F;
+$globalColorBlack: #000;
+$globalColorWhite: #FFF;
+
+// Normal colors
+
+$globalTextColor: #2d2d2d;
+$globalLinkColor: $globalColorBlue;
+$globalLinkColor-isHover: darken($globalLinkColor, 10%);
+$globalInputTextColor: $globalTextColor;
+$globalInputBackgroundColor: $globalColorWhite;
+$globalInputBorderColor: $globalColorLightGray;
+
+// Dark theme colors
+
+$globalTextColor--darkTheme: #cecece;
+$globalBackgroundColor--darkTheme: #777777;
+$globalLinkColor--darkTheme: #b7e2ea;
+$globalLinkColor-isHover--darkTheme: #def2f6;
+$globalInputTextColor--darkTheme: $globalTextColor--darkTheme;
+$globalInputBackgroundColor--darkTheme: #444444;
+$globalInputBorderColor--darkTheme: $globalInputBackgroundColor--darkTheme;
+
+// Colors
+
+$globalInfoColor: #3fa8c7;
+$globalInactiveColor: #c3c3c3;
+$globalSuccessColor: #417505;
+$globalWarningColor: #ec9800;
+$globalDangerColor: $globalColorRed;
+$globalFocusColor: $globalColorBlue;
+$globalFocusDangerColor: #ff523c;
+$globalFocusWarningColor: #ffa500;
+$globalFocusBackgroundColor: #ffffff;
+$globalFontColor: #191E23;
+$globalSubduedTextColor: $globalColorDarkGray;
+$globalLinkHoverColor: #006E8A;
+$globalSelectedBorderColor: $globalColorBlue;
+$globalDangerBorderColor: $globalDangerColor;
+$globalFormControlBorderColor: #DEDEDE;
diff --git a/ui_framework/components/global_styles/variables/_font.scss b/ui_framework/components/global_styles/variables/_font.scss
new file mode 100644
index 00000000000000..686e242bca9476
--- /dev/null
+++ b/ui_framework/components/global_styles/variables/_font.scss
@@ -0,0 +1,9 @@
+// Font
+
+$globalFontFamily: "Open Sans", Helvetica, Arial, sans-serif;
+$globalFontSize: 14px;
+$globalLineHeight: 1.5;
+$globalSubTextFontSize: 12px;
+$globalTitleFontSize: 18px;
+$globalFontWeightRegular: 400;
+$globalFontWeightBold: 700;
diff --git a/ui_framework/components/global_styles/variables/_index.scss b/ui_framework/components/global_styles/variables/_index.scss
new file mode 100644
index 00000000000000..fc0f4ad1357d77
--- /dev/null
+++ b/ui_framework/components/global_styles/variables/_index.scss
@@ -0,0 +1,15 @@
+// --------------------------------------------------------------------------------------
+// KUI global variables
+// --------------------------------------------------------------------------------------
+// This module contains all global variables available within kui. Every variable in this
+// document should be prefixed with $global. This lets us know where the variable is
+// coming from when looking inside the individual component files. Any component local
+// variables should be declared at the top of those documents prefixed with $componentName.
+
+@import 'colors';
+@import 'font';
+@import 'timing';
+@import 'borders';
+@import 'shadows';
+@import 'z_index';
+@import 'animations';
diff --git a/ui_framework/components/global_styles/variables/_shadows.scss b/ui_framework/components/global_styles/variables/_shadows.scss
new file mode 100644
index 00000000000000..9825e5581e5424
--- /dev/null
+++ b/ui_framework/components/global_styles/variables/_shadows.scss
@@ -0,0 +1,3 @@
+// Shadows
+
+$globalBoxShadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
diff --git a/ui_framework/components/global_styles/variables/_timing.scss b/ui_framework/components/global_styles/variables/_timing.scss
new file mode 100644
index 00000000000000..64c642f9a6e45e
--- /dev/null
+++ b/ui_framework/components/global_styles/variables/_timing.scss
@@ -0,0 +1,3 @@
+// Timing
+
+$globalInputTransitionTiming: 0.1s linear;
diff --git a/ui_framework/components/global_styles/variables/_z_index.scss b/ui_framework/components/global_styles/variables/_z_index.scss
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/ui_framework/components/index.scss b/ui_framework/components/index.scss
index 6bdcbcb5a2cc84..1431ddbd793b6d 100644
--- a/ui_framework/components/index.scss
+++ b/ui_framework/components/index.scss
@@ -12,10 +12,7 @@
 // When possible, if making changes to those legacy components, please think about
 // instead adding them to this library and deprecating that dependency.
 
-
-// Global constants
-@import "variables";
-@import "mixins";
-@import "common_styles";
+// Global styles
+@import "global_styles/index"
 
 // Components
diff --git a/ui_framework/doc_site/src/components/guide_page/_guide_page.scss b/ui_framework/doc_site/src/components/guide_page/_guide_page.scss
index 5cbca6b531dd03..3c3249a9401099 100644
--- a/ui_framework/doc_site/src/components/guide_page/_guide_page.scss
+++ b/ui_framework/doc_site/src/components/guide_page/_guide_page.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .guidePage {
   display: flex;
   flex: 1 0 auto;