diff --git a/.gitignore b/.gitignore
index 0a3583c711aefc69447ba485098f72214f67fac2..7c6ba1bb1f0642d8b48ef2502a36979c4d3d2060 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@
 .DS_Store
 yarn-error.log
 /src/scss/utilities.scss
+/static/gitlab/
\ No newline at end of file
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index c1d13d972aaf227acfaf18a109eb2ff1fb27d9b9..3b9c202adfe108b18563281ddced67942e9f9f58 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -17,11 +17,11 @@ variables:
   PUPPETEER_IMAGE: $CI_REGISTRY_IMAGE/puppeteer:$PUPPETEER_VERSION
   DANGER_GITLAB_API_TOKEN: $GITLAB_TOKEN
   # We want to utilize the faster SAST and Dependency Scanning which are not docker in docker
-  SAST_DISABLE_DIND: "true"
-  DS_DISABLE_DIND: "true"
+  SAST_DISABLE_DIND: 'true'
+  DS_DISABLE_DIND: 'true'
   # We only need javascript scanning, unfortunately our Danger code would lead to execution of ruby analysis as well
-  SAST_DEFAULT_ANALYZERS: "nodejs-scan, eslint"
-  DS_DEFAULT_ANALYZERS: "retire.js, gemnasium"
+  SAST_DEFAULT_ANALYZERS: 'nodejs-scan, eslint'
+  DS_DEFAULT_ANALYZERS: 'retire.js, gemnasium'
 
 include:
   # Disabled due to: https://gitlab.com/gitlab-org/gitlab/-/issues/207855
@@ -129,6 +129,19 @@ populate_npm_cache:
       when: always
     - when: never
 
+build_gitlab_css:
+  extends: [.node, .yarn_install]
+  stage: pre-build
+  script:
+    - mkdir .build
+    - git clone https://gitlab.com/gitlab-org/gitlab.git .build/gitlab --depth=1
+    - yarn prebuild
+    - yarn build-gitlab-css .build/gitlab > static/gitlab-normalized.css
+  artifacts:
+    when: always
+    paths:
+      - static/gitlab
+
 danger-review:
   rules:
     - if: '$DANGER_GITLAB_API_TOKEN && $CI_MERGE_REQUEST_IID'
@@ -162,10 +175,11 @@ build_package:
 
 build_storybook:
   extends: [.node, .yarn_install]
-  needs: []
+  needs:
+    - build_gitlab_css
   stage: build
   script:
-    - yarn storybook-static
+    - GITLAB_CSS_LINK="/gitlab/gitlab.css" yarn storybook-static
     - mkdir public
     - mv storybook/* public
   artifacts:
@@ -208,9 +222,11 @@ visual:
 
 visual_gitlab_integration:
   extends: visual
+  needs:
+    - build_gitlab_css
   allow_failure: true
   script:
-    - yarn test:visual:gitlab
+    - GITLAB_CSS_LINK="/gitlab/gitlab.css" yarn test:visual:gitlab
 
 unit_tests:
   extends: [.node, .yarn_install]
diff --git a/.storybook/generate-preview-head.js b/.storybook/generate-preview-head.js
index 174a2a3ac5fedf7cf29748a0ad49f9cf1da72b14..3795112f2c77456141e636ea2a887ca535b068c6 100644
--- a/.storybook/generate-preview-head.js
+++ b/.storybook/generate-preview-head.js
@@ -4,11 +4,14 @@ const fs = require('fs');
 
 const compile = pug.compileFile(path.resolve(__dirname, 'preview-head.pug'));
 const isGitlabIntegrationTest = Boolean(process.env.IS_GITLAB_INTEGRATION_TEST);
+const gitlabCssLink =
+  process.env.GITLAB_CSS_LINK || 'https://gitlab-org.gitlab.io/gitlab/application.css';
 
 fs.writeFile(
   path.resolve(__dirname, 'preview-head.html'),
   compile({
     isGitlabIntegrationTest,
+    gitlabCssLink,
   }),
   function(err) {
     if (err) {
diff --git a/.storybook/gitlab-css-builder/builder.js b/.storybook/gitlab-css-builder/builder.js
new file mode 100644
index 0000000000000000000000000000000000000000..ddbf6a070ee102c6614917d174bf8619718c2164
--- /dev/null
+++ b/.storybook/gitlab-css-builder/builder.js
@@ -0,0 +1,117 @@
+const sass = require('node-sass');
+const {
+  buildIncludePaths,
+  resolveGlobUrl,
+  resolveUrl,
+} = require('node-sass-magic-importer/dist/toolbox');
+const path = require('path');
+const { statSync, readFileSync, writeFileSync } = require('fs');
+
+const GITLAB_REPOSITORY = process.argv[2] || process.env.GITLAB_REPOSITORY;
+
+if (!GITLAB_REPOSITORY) {
+  throw new Error('You should provide path to GitLab repository');
+}
+
+const INPUT_FILE = path.resolve(GITLAB_REPOSITORY, 'app/assets/stylesheets/application.scss');
+const OUTPUT_FILE = process.argv[3] || path.resolve(__dirname, '../../static/gitlab/gitlab.css');
+
+const TRANSPARENT_1X1_PNG =
+  'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==)';
+const VARIABLE_DEFINITION_REGEXP = /(\$[^:]+):\s+([^;]+)/;
+
+const sassIncludePaths = [
+  path.resolve(GITLAB_REPOSITORY, 'app/assets/stylesheets'),
+  path.resolve(GITLAB_REPOSITORY, 'ee/app/assets/stylesheets'),
+  path.resolve(GITLAB_REPOSITORY, 'ee/app/assets/stylesheets/_ee'),
+  '.storybook/gitlab-css-builder/stubs',
+  './node_modules',
+].map(p => path.resolve(p));
+
+const gitlabUiDefaultVars = Object.fromEntries(
+  readFileSync('./src/scss/variables.scss', 'utf8')
+    .split('\n')
+    .filter(x => x.includes('!default'))
+    .map(entry => {
+      const [varName, strValue] = entry.split(':');
+
+      const value = strValue.replace(/!default;$/, '').trim();
+      return [varName, value];
+    })
+);
+
+function replaceVariables(content, vars) {
+  return content
+    .split('\n')
+    .map(line => {
+      const match = VARIABLE_DEFINITION_REGEXP.exec(line);
+      if (!match) {
+        return line;
+      }
+
+      const [, varName, gitlabValue] = match;
+      const gitlabUiValue = gitlabUiDefaultVars[varName];
+      if (!gitlabUiValue || gitlabValue === gitlabUiValue) {
+        return line;
+      }
+
+      return [
+        `/* ${varName}: ${gitlabValue} -> ${gitlabUiValue} */`,
+        `${varName}: ${gitlabUiValue};`,
+      ].join('\n');
+    })
+    .join('\n');
+}
+
+const gitlabCSSDir = path.dirname(INPUT_FILE);
+const patchedFrameworkVariables = replaceVariables(
+  readFileSync(path.resolve(gitlabCSSDir, 'framework/variables.scss'), 'utf8'),
+  gitlabUiDefaultVars
+);
+
+function smartImporter(url, prev) {
+  const nodeSassOptions = this.options;
+  const includePaths = buildIncludePaths(nodeSassOptions.includePaths, prev).filter(
+    path => !path.includes('node_modules')
+  );
+
+  if (url.startsWith('@gitlab/ui')) {
+    return { file: resolveUrl(url.replace('@gitlab/ui/', ''), includePaths) };
+  }
+
+  if (url === 'framework/variables') {
+    return { contents: patchedFrameworkVariables };
+  }
+
+  const filePaths = resolveGlobUrl(url, includePaths);
+
+  if (filePaths) {
+    const contents = filePaths
+      .filter(file => statSync(file).isFile())
+      .map(x => `@import '${x}';`)
+      .join(`\n`);
+    return { contents };
+  }
+
+  return null;
+}
+sass.render(
+  {
+    file: INPUT_FILE,
+    includePaths: sassIncludePaths,
+    importer: smartImporter,
+    functions: {
+      'image-url($url)': function() {
+        return new sass.types.String(TRANSPARENT_1X1_PNG);
+      },
+    },
+  },
+  function(err, result) {
+    if (err) {
+      console.error(err);
+      process.exit(1);
+    }
+
+    writeFileSync(OUTPUT_FILE, result.css);
+  }
+);
diff --git a/.storybook/gitlab-css-builder/stubs/@gitlab/at.js/dist/css/jquery.atwho.css b/.storybook/gitlab-css-builder/stubs/@gitlab/at.js/dist/css/jquery.atwho.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/.storybook/gitlab-css-builder/stubs/dropzone/dist/basic.css b/.storybook/gitlab-css-builder/stubs/dropzone/dist/basic.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/.storybook/gitlab-css-builder/stubs/font-awesome.scss b/.storybook/gitlab-css-builder/stubs/font-awesome.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5417ff3f253ce21a83d60ae181e2d2fa2b36dcce
--- /dev/null
+++ b/.storybook/gitlab-css-builder/stubs/font-awesome.scss
@@ -0,0 +1,7 @@
+.fa-2x,
+.fa-thumb-tack,
+.fa-lightbulb-o,
+.fa-fire,
+.fa-exclamation-circle {
+  display: inline-block;
+}
diff --git a/.storybook/gitlab-css-builder/stubs/select2/select2.css b/.storybook/gitlab-css-builder/stubs/select2/select2.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/.storybook/preview-head.pug b/.storybook/preview-head.pug
index 636bca3166124d75452f95a1507cf710e4880ea2..b7f352e1e93cfa3f9f0bb7fb573ee6f0a418c71b 100644
--- a/.storybook/preview-head.pug
+++ b/.storybook/preview-head.pug
@@ -1,5 +1,3 @@
-- var gitlabCssLink = 'https://gitlab-org.gitlab.io/gitlab/application.css'
-
 if isGitlabIntegrationTest
   link(
     type='text/css'
@@ -7,28 +5,28 @@ if isGitlabIntegrationTest
     media='all'
     href=gitlabCssLink
   )
+else
+  script.
+    window.addEventListener('message', (message) => {
+      if (message.data !== 'toggleGitLabCss') {
+        return;
+      }
 
-script.
-  window.addEventListener('message', (message) => {
-    if (message.data !== 'toggleGitLabCss') {
-      return;
-    }
-
-    const linkStylesheetId = 'gitlab-css';
-    let linkStylesheet = document.querySelector(`#${linkStylesheetId}`);
+      const linkStylesheetId = 'gitlab-css';
+      let linkStylesheet = document.querySelector(`#${linkStylesheetId}`);
 
-    if (linkStylesheet) {
-      linkStylesheet.remove();
-    } else {
-      linkStylesheet = document.createElement('link');
-      linkStylesheet.setAttribute('id', linkStylesheetId);
-      linkStylesheet.setAttribute('href', '#{gitlabCssLink}');
-      linkStylesheet.setAttribute('type', 'text/css');
-      linkStylesheet.setAttribute('rel', 'stylesheet');
-      linkStylesheet.setAttribute('media', 'all');
+      if (linkStylesheet) {
+        linkStylesheet.remove();
+      } else {
+        linkStylesheet = document.createElement('link');
+        linkStylesheet.setAttribute('id', linkStylesheetId);
+        linkStylesheet.setAttribute('href', '#{gitlabCssLink}');
+        linkStylesheet.setAttribute('type', 'text/css');
+        linkStylesheet.setAttribute('rel', 'stylesheet');
+        linkStylesheet.setAttribute('media', 'all');
 
-      const head = document.querySelector('head');
+        const head = document.querySelector('head');
 
-      head.appendChild(linkStylesheet);
-    }
-  });
+        head.appendChild(linkStylesheet);
+      }
+    });
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 8c6d0b33da5194ec41f06c9ef096df945683ae89..14660831d86da8b59f8790ff7fae6da5c1d2316d 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -38,16 +38,9 @@ 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);
+              if (!process.env.IS_GITLAB_INTEGRATION_TEST) {
+                document.head.appendChild(styles);
+              }
             },
             attributes: {
               'data-gitlab-ui-style': true,
diff --git a/README.md b/README.md
index 12429042e1977dff45e4b0023c93d0b13748f5ad..af8f9905af4e641fb8e68bbbccc82b4104e4022a 100644
--- a/README.md
+++ b/README.md
@@ -84,11 +84,7 @@ In some occasions, the changes in a component’s appearance are justified. In t
 
 #### GitLab visual regression tests
 
-GitLab UI components are a reference implementation of the [Pajamas Design System components](https://design.gitlab.com/components/status). These components should conform with the design system specs, and they should look correct in the pajamas website and the GitLab product. To make sure GitLab UI’s components look precisely as their design specs dictate in GitLab, we created the `yarn run test:visual:gitlab` command.
-
-This command only runs visual tests for components that have the `followsDesignSystem: true` flag activated in their `*.documentation.js` file. It will include gitlab product’s final CSS output in storybook and run the visual snapshots against this version.
-
-The tests will fail if after including gitlab CSS, one or more components look different. These failures highlight how CSS that leaks from gitlab will affect a component’s final look in the product.
+GitLab UI components are a reference implementation of the [Pajamas Design System components](https://design.gitlab.com/components/status). These components should conform with the design system specs, and they should look correct in the pajamas website and the GitLab product. Please see [Debugging GitLab UI issues with GitLab product CSS](doc/debugging-gitlab-ui-with-gitlab-css.md) for information on how to debug issues with GitLab product CSS in GitLab UI.
 
 #### Running visual regression tests locally
 
@@ -124,6 +120,7 @@ npm install @gitlab/ui
 ```
 
 ## Releases
+
 Please see [Updating Gitlab UI Packages](doc/updating-gitlab-ui-packages.md) for information on how updated packages are included in Gitlab and Pajamas.
 
 ## Contributing guide
diff --git a/doc/debugging-gitlab-ui-with-gitlab-css.md b/doc/debugging-gitlab-ui-with-gitlab-css.md
new file mode 100644
index 0000000000000000000000000000000000000000..cf950320b976ebea9b3df688d3f212dd7698c184
--- /dev/null
+++ b/doc/debugging-gitlab-ui-with-gitlab-css.md
@@ -0,0 +1,39 @@
+# Debugging GitLab UI styling issues with GitLab product CSS
+
+To make sure GitLab UI’s components look precisely as their design specs dictate in GitLab we've created two tools:
+
+- `Include GitLab CSS bundle` checkbox in storybook
+- `test:visual:gitlab` script
+
+These tools will include GitLab product's final CSS in Storybook. By default CSS
+of `master` branch of GitLab product is used. This means that if you made
+significant changes to your component's CSS they will not be properly picked up.
+Additionally, since GitLab currently uses a different color palette, you will
+notice differences in colors that result in overriding the default theme colors.
+
+In order to verify your component against proper color scheme and latest GitLab
+CSS, you will need to build a custom CSS version of GitLab product. This could be
+done by running `yarn run storybook:gitlab` and passing the location of your GitLab product Git repository as `GITLAB_REPOSITORY` env variable.
+For example:
+
+```shell
+# cloning gitlab to temp directory
+git clone https://gitlab.com/gitlab-org/gitlab.git /tmp/gitlab --depth=1
+# this will build gitlab.css to static/gitlab/gitlab.css file
+GITLAB_REPOSITORY="/tmp/gitlab" yarn run storybook:gitlab
+```
+
+Note that hot reloading features will not affect the GitLab product CSS bundle so
+you will need to manually rerun the last command to verify your changes.
+
+## `yarn run test:visual:gitlab` command
+
+This command only runs visual tests for components that have the `followsDesignSystem: true`
+flag activated in their `*.documentation.js` file. It will include the GitLab product’s final CSS
+output in the storybook and run the visual snapshots against this version.
+
+The tests will fail if, after rendering with GitLab CSS (which includes the GitLab UI), one or more
+components look different. These failures highlight how CSS that leaks from GitLab will affect a
+component’s final look in the product.
+This job is consumed by GitLab CI/CD and most likely will fail locally due to font rendering differences 
+on different platforms.
diff --git a/package.json b/package.json
index 1fc6dafc28a6c2748693103cdf9893af574cf534..20afea696978729090924749998db2f72338f3ca 100644
--- a/package.json
+++ b/package.json
@@ -30,9 +30,11 @@
     "build-preview-head": "node .storybook/generate-preview-head.js",
     "generate-utilities": "make src/scss/utilities.scss",
     "build-scss-variables": "make scss_to_js/scss_variables.js",
+    "build-gitlab-css": "node .storybook/gitlab-css-builder/builder.js",
     "clean": "rm -r dist storybook scss_to_js/scss_variables.* src/scss/utilities.scss",
     "start": "yarn storybook",
     "storybook": "yarn storybook-prep && start-storybook --ci -p 9001 -c .storybook -s ./static",
+    "storybook:gitlab": "yarn build-gitlab-css && GITLAB_CSS_LINK='/gitlab/gitlab.css' yarn storybook",
     "storybook-prep": "run-s generate-utilities build-preview-head build-scss-variables",
     "storybook-static": "yarn storybook-prep && build-storybook -c .storybook -o storybook  -s ./static",
     "pretest:unit": "yarn build-scss-variables",
@@ -111,6 +113,7 @@
     "mockdate": "^2.0.5",
     "moment": "^2.22.2",
     "node-sass": "^4.12.0",
+    "node-sass-magic-importer": "^5.3.2",
     "nodemon": "^1.11.0",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
diff --git a/src/components/base/avatar_labeled/avatar_labeled.documentation.js b/src/components/base/avatar_labeled/avatar_labeled.documentation.js
index 0e4aa21f07d68a26c4e2d07370348e4252a33543..a32123d4cb7388eee207ec54b05a5b70f755dbfa 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: false,
+  followsDesignSystem: true,
   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 0a2871eef6ff621272aee6c4f50dd0059a3d62d7..98f5662b33b24321f3b5280aa006de375f164990 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: false,
+  followsDesignSystem: true,
   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 41e83015f8bf145a29c6f2e6b4a792cc92c73511..bd66a8fa6a11151e2f25b07bd211392e5bd7c8d7 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: false,
+  followsDesignSystem: true,
   description,
   examples,
 };
diff --git a/src/components/base/breadcrumb/breadcrumb.documentation.js b/src/components/base/breadcrumb/breadcrumb.documentation.js
index a7551bf844460f7ea487a9d17a8f107ba019504c..99e4db7db633a5b11d688c607f2b57705ede1546 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: false,
+  followsDesignSystem: true,
   examples,
   description,
   bootstrapComponent: 'b-breadcrumb',
diff --git a/src/components/base/daterange_picker/daterange_picker.documentation.js b/src/components/base/daterange_picker/daterange_picker.documentation.js
index bd96825048736f80906a0dc6402471057a8fb3b8..dc3a4f01f3a35da0ed06ad0a0a53c913821faac8 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: false,
+  followsDesignSystem: true,
   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 e827e273681391f9a5b40feff27a495f4b990c98..32b63d7f574b8c835ecf45c88199cd0c3bfdf042 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: false,
+  followsDesignSystem: true,
   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 39388ae6ef100f7373922c512dd066161b3568b2..b6d78cd586b4fbbec69f1fc49be2dff051e594d9 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: false,
+  followsDesignSystem: true,
 };
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 4f02956af67004f8cb93398eea43f28f9dae86f6..b7a764d93fb08738629f545073df1c0201292ebe 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: false,
+  followsDesignSystem: true,
   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 05a5fd29c2e697be564c7c34924f3d4ca078e4a8..693ce2d3e37a4bbcaa042ce717b7284b1a70cd8c 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: false,
+  followsDesignSystem: true,
   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 3eb2d3dbff720365a68d9235738d540ba2baaae9..a0b94a6fd0c05facf186c4f824b92bb5e9e757fa 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: false,
+  followsDesignSystem: true,
   examples,
 };
diff --git a/src/components/base/pagination/pagination.documentation.js b/src/components/base/pagination/pagination.documentation.js
index 75f406a42e2db8dc24fd036d8ec6aba30785b9e9..9e34bc7ec39b506d022bbc0ec88329dc9c111ee5 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: false,
+  followsDesignSystem: true,
   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 207d3df74a2ebd60aef2e109d1dc7947d4e8b50b..aa464178dd34d9b4ad485d7c9edda65cf7284545 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: false,
+  followsDesignSystem: true,
   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 383c739c2e12c9c099a23c771c3b66945307f3dc..6238b9e901c02d4aa05ab75b2e30612b6402d4cd 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: false,
+  followsDesignSystem: true,
   description,
   examples,
   propsInfo: {
diff --git a/src/components/base/tabs/tabs/tabs.documentation.js b/src/components/base/tabs/tabs/tabs.documentation.js
index 1fb1e391a47943d23ef5fa05b386930486ed6ad0..0816ae305d0777e89897344808331fb595359039 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: false,
+  followsDesignSystem: true,
 };
diff --git a/src/components/base/token/token.documentation.js b/src/components/base/token/token.documentation.js
index d50dbf8d0c388b5acf5583ac280ac1871cee66fe..c785a3cdca23667bcdcd8429f4cc51c2af83834f 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: false,
+  followsDesignSystem: true,
   examples,
   propsInfo: {
     variant: {
diff --git a/src/components/charts/area/area.documentation.js b/src/components/charts/area/area.documentation.js
index 3626e50002287b6886e0042d6284020468761f9b..11ef515e6f9c15dc9717dab3facd281d2a42c2c7 100644
--- a/src/components/charts/area/area.documentation.js
+++ b/src/components/charts/area/area.documentation.js
@@ -2,7 +2,7 @@ import description from './area.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
 };
diff --git a/src/components/charts/line/line.documentation.js b/src/components/charts/line/line.documentation.js
index 477b50de9a8716725745c5dfdc9e9906dfa0e703..02933875ff3812ad2a74e9463b50549e805ab336 100644
--- a/src/components/charts/line/line.documentation.js
+++ b/src/components/charts/line/line.documentation.js
@@ -2,7 +2,7 @@ import description from './line.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
 };
diff --git a/src/components/charts/stacked_column/stacked_column.documentation.js b/src/components/charts/stacked_column/stacked_column.documentation.js
index b2baf07c8d74af16fb27341d6fffb0b8ed5462ea..732927bd4bc214b4b2c0c157031b2ae18b15e41a 100644
--- a/src/components/charts/stacked_column/stacked_column.documentation.js
+++ b/src/components/charts/stacked_column/stacked_column.documentation.js
@@ -2,7 +2,7 @@ import description from './stacked_column.md';
 import examples from './examples';
 
 export default {
-  followsDesignSystem: true,
+  followsDesignSystem: false,
   description,
   examples,
 };
diff --git a/static/gitlab/.gitkeep b/static/gitlab/.gitkeep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/yarn.lock b/yarn.lock
index ac214adc9cfd0bf34182a370b3332200d27e2d25..f8cf20fed95daeddfde99e4d9d5f33e2841bfeb8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3398,7 +3398,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-change-case@^3.1.0:
+change-case@^3.0.1, change-case@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/change-case/-/change-case-3.1.0.tgz#0e611b7edc9952df2e8513b27b42de72647dd17e"
   integrity sha512-2AZp7uJZbYEzRPsFoa+ijKdvp9zsrnnt6+yFokfwEpeJm0xuJDVoxiRCAaTzyJND8GJkofo2IcKWaUZ/OECVzw==
@@ -4159,6 +4159,14 @@ css-modules-loader-core@^1.1.0:
     postcss-modules-scope "1.1.0"
     postcss-modules-values "1.3.0"
 
+css-node-extract@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/css-node-extract/-/css-node-extract-2.1.3.tgz#ec388a857b8fdf13fefd94b3da733257162405da"
+  integrity sha512-E7CzbC0I4uAs2dI8mPCVe+K37xuja5kjIugOotpwICFL7vzhmFMAPHvS/MF9gFrmv8DDUANsxrgyT/I3OLukcw==
+  dependencies:
+    change-case "^3.0.1"
+    postcss "^6.0.14"
+
 css-parse@1.7.x:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
@@ -4189,6 +4197,13 @@ css-select@^2.0.0:
     domutils "^1.7.0"
     nth-check "^1.0.2"
 
+css-selector-extract@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/css-selector-extract/-/css-selector-extract-3.3.6.tgz#5cc670cfeae743015e80faf2d722d7818657e3e5"
+  integrity sha512-bBI8ZJKKyR9iHvxXb4t3E6WTMkis94eINopVg7y2FmmMjLXUVduD7mPEcADi4i9FX4wOypFMFpySX+0keuefxg==
+  dependencies:
+    postcss "^6.0.14"
+
 css-selector-tokenizer@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
@@ -5702,6 +5717,16 @@ findup-sync@^2.0.0:
     micromatch "^3.0.4"
     resolve-dir "^1.0.1"
 
+findup-sync@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-3.0.0.tgz#17b108f9ee512dfb7a5c7f3c8b27ea9e1a9c08d1"
+  integrity sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==
+  dependencies:
+    detect-file "^1.0.0"
+    is-glob "^4.0.0"
+    micromatch "^3.0.4"
+    resolve-dir "^1.0.1"
+
 fined@^1.0.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fined/-/fined-1.1.1.tgz#95d88ff329123dd1a6950fdfcd321f746271e01f"
@@ -9066,6 +9091,19 @@ node-releases@^1.1.13, node-releases@^1.1.53:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
   integrity sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==
 
+node-sass-magic-importer@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/node-sass-magic-importer/-/node-sass-magic-importer-5.3.2.tgz#2f2248bb2e5cdb275ba34102ebf995edadf99175"
+  integrity sha512-T3wTUdUoXQE3QN+EsyPpUXRI1Gj1lEsrySQ9Kzlzi15QGKi+uRa9fmvkcSy2y3BKgoj//7Mt9+s+7p0poMpg6Q==
+  dependencies:
+    css-node-extract "^2.1.3"
+    css-selector-extract "^3.3.6"
+    findup-sync "^3.0.0"
+    glob "^7.1.3"
+    object-hash "^1.3.1"
+    postcss-scss "^2.0.0"
+    resolve "^1.10.1"
+
 node-sass@^4.12.0, node-sass@^4.5.2:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.12.0.tgz#0914f531932380114a30cc5fa4fa63233a25f017"
@@ -9244,6 +9282,11 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-hash@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
+  integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
+
 object-inspect@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
@@ -10436,6 +10479,15 @@ postcss@^5.2.5:
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
+postcss@^6.0.14:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
 postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.27, postcss@^7.0.5, postcss@^7.0.6, postcss@^7.0.7:
   version "7.0.27"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.27.tgz#cc67cdc6b0daa375105b7c424a85567345fc54d9"
@@ -11624,7 +11676,7 @@ resolve@1.1.7:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@1.x, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.3.2, resolve@^1.5.0:
+resolve@1.x, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.3.2, resolve@^1.5.0:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.15.1.tgz#27bdcdeffeaf2d6244b95bb0f9f4b4653451f3e8"
   integrity sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==
@@ -12880,7 +12932,7 @@ supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
-supports-color@^5.2.0, supports-color@^5.3.0:
+supports-color@^5.2.0, supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==