diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 1dd67e6b58c29b57564167c1483a252957391780..1b4db4dbac920506d550bf75c410887ce92de71c 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -36,6 +36,18 @@ module.exports = ({ config }) => {
         {
           loader: 'style-loader',
           options: {
+            insert: function(styles) {
+              const gitlabStyles = Array.from(
+                document.head.querySelectorAll('[data-gitlab-ui-style]')
+              );
+
+              const targetPosition =
+                gitlabStyles.length > 0
+                  ? gitlabStyles[gitlabStyles.length - 1].nextSibling
+                  : document.head.firstChild;
+
+              document.head.insertBefore(styles, targetPosition);
+            },
             attributes: {
               'data-gitlab-ui-style': true,
             },
diff --git a/src/components/base/alert/alert.documentation.js b/src/components/base/alert/alert.documentation.js
index 57c42a0a5228b4e7f05e8ef74d77dab275d0c5cc..90a8edafdb5fae453bf0600b47b696e7adf40ccf 100644
--- a/src/components/base/alert/alert.documentation.js
+++ b/src/components/base/alert/alert.documentation.js
@@ -4,7 +4,7 @@ import examples from './examples';
 export default {
   description,
   examples,
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   propsInfo: {
     primaryButtonText: {
       additionalInfo: 'If provided, renders a primary action button.',
diff --git a/src/components/base/avatar_labeled/avatar_labeled.documentation.js b/src/components/base/avatar_labeled/avatar_labeled.documentation.js
index a32123d4cb7388eee207ec54b05a5b70f755dbfa..0e4aa21f07d68a26c4e2d07370348e4252a33543 100644
--- a/src/components/base/avatar_labeled/avatar_labeled.documentation.js
+++ b/src/components/base/avatar_labeled/avatar_labeled.documentation.js
@@ -2,7 +2,7 @@ import description from './avatar_labeled.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
 };
diff --git a/src/components/base/avatar_link/avatar_link.documentation.js b/src/components/base/avatar_link/avatar_link.documentation.js
index 98f5662b33b24321f3b5280aa006de375f164990..0a2871eef6ff621272aee6c4f50dd0059a3d62d7 100644
--- a/src/components/base/avatar_link/avatar_link.documentation.js
+++ b/src/components/base/avatar_link/avatar_link.documentation.js
@@ -2,7 +2,7 @@ import description from './avatar_link.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
 };
diff --git a/src/components/base/avatars_inline/avatars_inline.documentation.js b/src/components/base/avatars_inline/avatars_inline.documentation.js
index bd66a8fa6a11151e2f25b07bd211392e5bd7c8d7..41e83015f8bf145a29c6f2e6b4a792cc92c73511 100644
--- a/src/components/base/avatars_inline/avatars_inline.documentation.js
+++ b/src/components/base/avatars_inline/avatars_inline.documentation.js
@@ -2,7 +2,7 @@ import * as description from './avatars_inline.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
 };
diff --git a/src/components/base/banner/banner.documentation.js b/src/components/base/banner/banner.documentation.js
index d6f25cb61eb90940f514ba2277b6c9c9063eb7d1..e21e66251ff19e8d450d8a4ba3a7382ea5bbc663 100644
--- a/src/components/base/banner/banner.documentation.js
+++ b/src/components/base/banner/banner.documentation.js
@@ -2,7 +2,7 @@ import * as description from './banner.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   examples,
   description,
 };
diff --git a/src/components/base/breadcrumb/breadcrumb.documentation.js b/src/components/base/breadcrumb/breadcrumb.documentation.js
index 99e4db7db633a5b11d688c607f2b57705ede1546..a7551bf844460f7ea487a9d17a8f107ba019504c 100644
--- a/src/components/base/breadcrumb/breadcrumb.documentation.js
+++ b/src/components/base/breadcrumb/breadcrumb.documentation.js
@@ -2,7 +2,7 @@ import description from './breadcrumb.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   examples,
   description,
   bootstrapComponent: 'b-breadcrumb',
diff --git a/src/components/base/broadcast_message/broadcast_message.documentation.js b/src/components/base/broadcast_message/broadcast_message.documentation.js
index a7f6903602abf101569ee40cdfaf1a552c3598b6..1bcc5c0b7c3eb78ea4a4ea26f144c5c44c484eee 100644
--- a/src/components/base/broadcast_message/broadcast_message.documentation.js
+++ b/src/components/base/broadcast_message/broadcast_message.documentation.js
@@ -2,7 +2,7 @@ import description from './broadcast_message.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   examples,
   description,
   propsInfo: {
diff --git a/src/components/base/daterange_picker/daterange_picker.documentation.js b/src/components/base/daterange_picker/daterange_picker.documentation.js
index dc3a4f01f3a35da0ed06ad0a0a53c913821faac8..bd96825048736f80906a0dc6402471057a8fb3b8 100644
--- a/src/components/base/daterange_picker/daterange_picker.documentation.js
+++ b/src/components/base/daterange_picker/daterange_picker.documentation.js
@@ -2,7 +2,7 @@ import description from './daterange_picker.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
 };
diff --git a/src/components/base/form/form_checkbox/form_checkbox.documentation.js b/src/components/base/form/form_checkbox/form_checkbox.documentation.js
index 32b63d7f574b8c835ecf45c88199cd0c3bfdf042..e827e273681391f9a5b40feff27a495f4b990c98 100644
--- a/src/components/base/form/form_checkbox/form_checkbox.documentation.js
+++ b/src/components/base/form/form_checkbox/form_checkbox.documentation.js
@@ -5,7 +5,7 @@ export default {
   description,
   examples,
   bootstrapComponent: 'b-form-checkbox',
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   events: [
     {
       event: 'input',
diff --git a/src/components/base/form/form_input/form_input.documentation.js b/src/components/base/form/form_input/form_input.documentation.js
index b6d78cd586b4fbbec69f1fc49be2dff051e594d9..39388ae6ef100f7373922c512dd066161b3568b2 100644
--- a/src/components/base/form/form_input/form_input.documentation.js
+++ b/src/components/base/form/form_input/form_input.documentation.js
@@ -5,5 +5,5 @@ export default {
   description,
   examples,
   bootstrapComponent: 'b-form-input',
-  followsDesignSystem: true,
+  followsDesignSystem: false,
 };
diff --git a/src/components/base/form/form_radio/form_radio.documentation.js b/src/components/base/form/form_radio/form_radio.documentation.js
index b7a764d93fb08738629f545073df1c0201292ebe..4f02956af67004f8cb93398eea43f28f9dae86f6 100644
--- a/src/components/base/form/form_radio/form_radio.documentation.js
+++ b/src/components/base/form/form_radio/form_radio.documentation.js
@@ -4,7 +4,7 @@ import examples from './examples';
 export default {
   description,
   examples,
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   bootstrapComponent: 'b-form-radio',
   propsInfo: {
     checked: {
diff --git a/src/components/base/form/form_radio_group/form_radio_group.documentation.js b/src/components/base/form/form_radio_group/form_radio_group.documentation.js
index 693ce2d3e37a4bbcaa042ce717b7284b1a70cd8c..05a5fd29c2e697be564c7c34924f3d4ca078e4a8 100644
--- a/src/components/base/form/form_radio_group/form_radio_group.documentation.js
+++ b/src/components/base/form/form_radio_group/form_radio_group.documentation.js
@@ -4,7 +4,7 @@ import examples from './examples';
 export default {
   description,
   examples,
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   bootstrapComponent: 'b-form-radio-group',
   propsInfo: {
     stacked: {
diff --git a/src/components/base/label/label.documentation.js b/src/components/base/label/label.documentation.js
index a0b94a6fd0c05facf186c4f824b92bb5e9e757fa..3eb2d3dbff720365a68d9235738d540ba2baaae9 100644
--- a/src/components/base/label/label.documentation.js
+++ b/src/components/base/label/label.documentation.js
@@ -1,6 +1,6 @@
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   examples,
 };
diff --git a/src/components/base/loading_icon/loading_icon.documentation.js b/src/components/base/loading_icon/loading_icon.documentation.js
index 811ea1dd743bd551c17b0aaaa0040adf8fdc3b88..61d53553699a565a1817894a16c22bf99c16bade 100644
--- a/src/components/base/loading_icon/loading_icon.documentation.js
+++ b/src/components/base/loading_icon/loading_icon.documentation.js
@@ -2,7 +2,7 @@ import description from './loading_icon.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
 };
diff --git a/src/components/base/new_button/new_button.documentation.js b/src/components/base/new_button/new_button.documentation.js
index 83cf218c543c6d92cc1c72cfb266e21b2d96a803..faa0df0f2b9f10746364eb8613e40b1b8feb240a 100644
--- a/src/components/base/new_button/new_button.documentation.js
+++ b/src/components/base/new_button/new_button.documentation.js
@@ -4,7 +4,7 @@ import examples from './examples';
 export default {
   description,
   examples,
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   bootstrapComponent: 'b-button',
   bootstrapPropsInfo: {
     category: {
diff --git a/src/components/base/new_dropdown/new_dropdown.documentation.js b/src/components/base/new_dropdown/new_dropdown.documentation.js
index e603f869204d7edfe8808bbaa8d73fde2fbfed2f..d606b3105eac436fce03893b4e7193e563533453 100644
--- a/src/components/base/new_dropdown/new_dropdown.documentation.js
+++ b/src/components/base/new_dropdown/new_dropdown.documentation.js
@@ -5,5 +5,5 @@ export default {
   description,
   bootstrapComponent: 'b-dropdown',
   examples,
-  followsDesignSystem: true,
+  followsDesignSystem: false,
 };
diff --git a/src/components/base/pagination/pagination.documentation.js b/src/components/base/pagination/pagination.documentation.js
index 9e34bc7ec39b506d022bbc0ec88329dc9c111ee5..75f406a42e2db8dc24fd036d8ec6aba30785b9e9 100644
--- a/src/components/base/pagination/pagination.documentation.js
+++ b/src/components/base/pagination/pagination.documentation.js
@@ -2,7 +2,7 @@ import description from './pagination.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
   propsInfo: {
diff --git a/src/components/base/popover/popover.documentation.js b/src/components/base/popover/popover.documentation.js
index 6d595cba8d5b948fcb4143535cfec56d4f5253a1..cfaa409bb2a1c2bcb06ae2bfb25db23bdcad744b 100644
--- a/src/components/base/popover/popover.documentation.js
+++ b/src/components/base/popover/popover.documentation.js
@@ -1,7 +1,7 @@
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   examples,
   bootstrapComponent: 'b-popover',
   bootstrapPropsInfo: {
diff --git a/src/components/base/search_box_by_click/search_box_by_click.documentation.js b/src/components/base/search_box_by_click/search_box_by_click.documentation.js
index 0c3cfcd95ec6fd30ae8e318840e812987c0efdbe..596dc4eecc00effcd08d9ca3980890404769724c 100644
--- a/src/components/base/search_box_by_click/search_box_by_click.documentation.js
+++ b/src/components/base/search_box_by_click/search_box_by_click.documentation.js
@@ -2,7 +2,7 @@ import description from './search_box_by_click.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
   propsInfo: {
diff --git a/src/components/base/search_box_by_type/search_box_by_type.documentation.js b/src/components/base/search_box_by_type/search_box_by_type.documentation.js
index aa464178dd34d9b4ad485d7c9edda65cf7284545..207d3df74a2ebd60aef2e109d1dc7947d4e8b50b 100644
--- a/src/components/base/search_box_by_type/search_box_by_type.documentation.js
+++ b/src/components/base/search_box_by_type/search_box_by_type.documentation.js
@@ -2,7 +2,7 @@ import description from './search_box_by_type.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   propsInfo: {
     value: {
diff --git a/src/components/base/skeleton_loader/skeleton_loader.documentation.js b/src/components/base/skeleton_loader/skeleton_loader.documentation.js
index 6238b9e901c02d4aa05ab75b2e30612b6402d4cd..383c739c2e12c9c099a23c771c3b66945307f3dc 100644
--- a/src/components/base/skeleton_loader/skeleton_loader.documentation.js
+++ b/src/components/base/skeleton_loader/skeleton_loader.documentation.js
@@ -2,7 +2,7 @@ import * as description from './skeleton_loader.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
   propsInfo: {
diff --git a/src/components/base/table/table.documentation.js b/src/components/base/table/table.documentation.js
index b553acd5a20bed7b229d37bb11115507cee53127..6a13d83927f4111120e71d9c4efb415000e516bb 100644
--- a/src/components/base/table/table.documentation.js
+++ b/src/components/base/table/table.documentation.js
@@ -2,7 +2,7 @@ import description from './table.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
   bootstrapComponent: 'b-table',
diff --git a/src/components/base/tabs/tabs/tabs.documentation.js b/src/components/base/tabs/tabs/tabs.documentation.js
index 0816ae305d0777e89897344808331fb595359039..1fb1e391a47943d23ef5fa05b386930486ed6ad0 100644
--- a/src/components/base/tabs/tabs/tabs.documentation.js
+++ b/src/components/base/tabs/tabs/tabs.documentation.js
@@ -5,5 +5,5 @@ export default {
   description,
   examples,
   bootstrapComponent: 'b-tabs',
-  followsDesignSystem: true,
+  followsDesignSystem: false,
 };
diff --git a/src/components/base/toast/toast.documentation.js b/src/components/base/toast/toast.documentation.js
index 9df07bd93bcf4dc17761368346df861935cac4e8..521e1e8c685b9a21f77a48a00dabb3e9ce47b252 100644
--- a/src/components/base/toast/toast.documentation.js
+++ b/src/components/base/toast/toast.documentation.js
@@ -2,7 +2,7 @@ import description from './toast.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
 };
diff --git a/src/components/base/toggle/toggle.documentation.js b/src/components/base/toggle/toggle.documentation.js
index 9d69e2ea64bf44eba07fccb851cdbeeaf74b21d9..a70b1d646c515aec2491e4adf2a00c5e31effef2 100644
--- a/src/components/base/toggle/toggle.documentation.js
+++ b/src/components/base/toggle/toggle.documentation.js
@@ -1,7 +1,7 @@
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   examples,
   events: [
     {
diff --git a/src/components/base/token/token.documentation.js b/src/components/base/token/token.documentation.js
index c785a3cdca23667bcdcd8429f4cc51c2af83834f..d50dbf8d0c388b5acf5583ac280ac1871cee66fe 100644
--- a/src/components/base/token/token.documentation.js
+++ b/src/components/base/token/token.documentation.js
@@ -1,7 +1,7 @@
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   examples,
   propsInfo: {
     variant: {
diff --git a/src/components/base/tooltip/tooltip.documentation.js b/src/components/base/tooltip/tooltip.documentation.js
index 34d95adb0265c1be333e026a0e3aafc5fdcdbc84..2fb9ff943b3bd1f3bd1eb1e742aee8be79aeb2a5 100644
--- a/src/components/base/tooltip/tooltip.documentation.js
+++ b/src/components/base/tooltip/tooltip.documentation.js
@@ -2,7 +2,7 @@ import description from './tooltip.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
   bootstrapComponent: 'b-tooltip',
diff --git a/src/components/charts/tooltip/tooltip.documentation.js b/src/components/charts/tooltip/tooltip.documentation.js
index c4ea3ca7539edcf617abc56b2362a5b7ae3e84fa..09719adc6ef49e71230ce26b0e6e82ef9215fa74 100644
--- a/src/components/charts/tooltip/tooltip.documentation.js
+++ b/src/components/charts/tooltip/tooltip.documentation.js
@@ -2,7 +2,7 @@ import description from './tooltip.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
   bootstrapComponent: 'b-popover',