diff --git a/src/components/regions/empty_state/empty_state.documentation.js b/src/components/regions/empty_state/empty_state.documentation.js
index 6cbaacfcf8d37142dd7f4fc852cd9e39e998da8a..99b9c88bda3177051edaf44b4e64ea66d31cbcec 100644
--- a/src/components/regions/empty_state/empty_state.documentation.js
+++ b/src/components/regions/empty_state/empty_state.documentation.js
@@ -2,6 +2,7 @@ import description from './empty_state.md';
 import examples from './examples';
 
 export default {
+  followsDesignSystem: true,
   description,
   examples,
   propsInfo: {
diff --git a/src/components/regions/empty_state/empty_state.scss b/src/components/regions/empty_state/empty_state.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b58b3c90954fcf3c78f5b8ff8909b04d657bfeee
--- /dev/null
+++ b/src/components/regions/empty_state/empty_state.scss
@@ -0,0 +1,52 @@
+.gl-empty-state {
+  .gl-empty-state-description {
+    @include gl-font-base;
+
+    &.gl-empty-state-description-centered {
+      @include gl-text-center;
+    }
+  }
+}
+
+.gl-empty-state.compact {
+  .gl-empty-state-illustration {
+    @include gl-max-w-full;
+  }
+
+  .gl-empty-state-title {
+    @include gl-font-base;
+    @include gl-my-3;
+  }
+}
+
+.gl-empty-state.fullscreen {
+  margin: 5% auto 0;
+
+  .gl-empty-state-illustration-svg-content {
+    @include gl-p-5;
+    @include gl-text-center;
+  }
+
+  .gl-empty-state-text-content {
+    max-width: 460px;
+    margin: 0 auto;
+    @include gl-p-5;
+  }
+
+  .gl-empty-state-title {
+    @include gl-font-weight-bold;
+    @include gl-my-3;
+  }
+
+  .new-gl-button {
+    @include gl-my-3;
+    @include gl-mx-2;
+  }
+}
+
+.gl-empty-state.centered {
+  .gl-empty-state-title,
+  .gl-empty-state-actions {
+    @include gl-text-center;
+  }
+}
diff --git a/src/components/regions/empty_state/empty_state.vue b/src/components/regions/empty_state/empty_state.vue
index 5b1b4af3a1c42c31fab4cb5dfea9178a3990b0a1..4829a9f547f81417c061a102e295af2e38f31c03 100644
--- a/src/components/regions/empty_state/empty_state.vue
+++ b/src/components/regions/empty_state/empty_state.vue
@@ -1,5 +1,5 @@
 <script>
-import GlButton from '../../base/button/button.vue';
+import GlNewButton from '../../base/new_button/new_button.vue';
 
 const textBreaks = el => {
   const originalWhiteSpace = el.style.whiteSpace;
@@ -14,7 +14,7 @@ const textBreaks = el => {
 
 export default {
   components: {
-    GlButton,
+    GlNewButton,
   },
   props: {
     title: {
@@ -89,37 +89,41 @@ export default {
 </script>
 
 <template>
-  <div class="row" :class="{ 'empty-state': fullscreen }">
+  <div
+    class="gl-empty-state row"
+    :class="{ 'empty-state': fullscreen, fullscreen, compact: !fullscreen, centered: centerTitle }"
+  >
     <div :class="fullscreen ? 'col-12' : 'col-3 d-none d-sm-block'">
-      <div v-if="svgPath" :class="{ 'svg-content': fullscreen }" class="svg-250">
-        <img :src="svgPath" :alt="title" :class="{ 'mw-100': compact }" />
+      <div v-if="svgPath" class="gl-empty-state-illustration-svg-content">
+        <img class="gl-empty-state-illustration" :src="svgPath" :alt="title" />
       </div>
     </div>
     <div :class="fullscreen ? 'col-12' : 'col-sm-9'">
-      <div class="text-content">
-        <h4 ref="title" :class="{ center: centerTitle, h5: compact }">{{ title }}</h4>
+      <div class="gl-empty-state-text-content">
+        <h4 ref="title" class="gl-empty-state-title" :class="{ h5: compact }">{{ title }}</h4>
         <p
           v-if="description || $slots.description"
           ref="description"
-          :class="{ center: centerDescription }"
+          class="gl-empty-state-description"
+          :class="{ 'gl-empty-state-description-centered': centerDescription }"
         >
           <slot name="description">
             {{ description }}
           </slot>
         </p>
-        <div :class="{ 'text-center': fullscreen }">
+        <div class="gl-empty-state-actions">
           <slot name="actions">
-            <gl-button
+            <gl-new-button
               v-if="shouldRenderPrimaryButton"
               variant="success"
               :href="primaryButtonLink"
-              >{{ primaryButtonText }}</gl-button
+              >{{ primaryButtonText }}</gl-new-button
             >
-            <gl-button
+            <gl-new-button
               v-if="shouldRenderSecondaryButton"
               variant="outline-success"
               :href="secondaryButtonLink"
-              >{{ secondaryButtonText }}</gl-button
+              >{{ secondaryButtonText }}</gl-new-button
             >
           </slot>
         </div>
diff --git a/src/scss/components.scss b/src/scss/components.scss
index 6674629ca77c67760c47a82c1769549de00b9777..1848b9df241581245865f955fcda6785554a8af2 100644
--- a/src/scss/components.scss
+++ b/src/scss/components.scss
@@ -65,3 +65,4 @@
 @import '../components/charts/series_label/series_label';
 @import '../components/charts/tooltip/tooltip';
 @import '../components/shared_components/charts/tooltip_default_format';
+@import '../components/regions/empty_state/empty_state';
diff --git a/src/scss/utility-mixins/spacing.scss b/src/scss/utility-mixins/spacing.scss
index 7ecc8170fddbeb7f0f6034ab85f1391b46147493..b90e71726f62cbb4380b3e3d79747ba19a78cbc9 100644
--- a/src/scss/utility-mixins/spacing.scss
+++ b/src/scss/utility-mixins/spacing.scss
@@ -312,6 +312,11 @@
   margin-bottom: $gl-spacing-scale-2;
 }
 
+@mixin gl-my-3 {
+  margin-top: $gl-spacing-scale-3;
+  margin-bottom: $gl-spacing-scale-3;
+}
+
 @mixin gl-my-5 {
   margin-top: $gl-spacing-scale-5;
   margin-bottom: $gl-spacing-scale-5;
@@ -342,6 +347,11 @@
   margin-right: 0;
 }
 
+@mixin gl-mx-2 {
+  margin-left: $gl-spacing-scale-2;
+  margin-right: $gl-spacing-scale-2;
+}
+
 @mixin gl-mx-3 {
   margin-left: $gl-spacing-scale-3;
   margin-right: $gl-spacing-scale-3;