From 77692857a437b9001c01c2be682611f86c89f2d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Connor=20B=C3=A4r?= <connor-baer@users.noreply.github.com>
Date: Thu, 4 Jun 2020 16:11:09 +0200
Subject: [PATCH] feat(components): polish Button components (#605)

* feat(components): revert default Button variant to secondary

The previous default Button style matches the new secondary variant most, so to avoid a breaking change, I've made it the default variant.

* feat(components): use IconButton for Carousel buttons

* feat(components): change Hamburger default size to match IconButton

* feat(components): remove Button giga size

To our knowledge, this size was never used. In order to reduce the API surface, we're removing it.

* feat(components): tweak Button border radius

* test(components): update snapshots

* fix(components): fix small icons for Carousel buttons

BREAKING CHANGE:
The Button's `giga` size has been removed. Use the `mega` size (default) instead.
---
 scripts/static-styles/config.js               |    2 +-
 src/__snapshots__/storyshots.spec.js.snap     | 1221 +++++++++--------
 src/components/Button/Button.docs.mdx         |    3 +-
 src/components/Button/Button.spec.tsx         |    5 -
 src/components/Button/Button.story.tsx        |    5 +-
 src/components/Button/Button.tsx              |   24 +-
 .../Button/__snapshots__/Button.spec.tsx.snap |  169 +--
 .../__snapshots__/Carousel.spec.js.snap       |  850 ++++++------
 .../Carousel/components/Buttons/Buttons.js    |   57 +-
 .../__snapshots__/Buttons.spec.js.snap        |  247 ++--
 src/components/CloseButton/CloseButton.js     |    2 +-
 .../__snapshots__/CloseButton.spec.js.snap    |    4 +-
 src/components/Hamburger/Hamburger.tsx        |    7 +-
 .../__snapshots__/Hamburger.spec.tsx.snap     |    8 +-
 src/components/Header/Header.story.js         |    2 +-
 .../IconButton/IconButton.story.tsx           |    2 +-
 src/components/IconButton/IconButton.tsx      |    3 +-
 .../__snapshots__/IconButton.spec.tsx.snap    |   16 +-
 .../LoadingButton/LoadingButton.story.tsx     |    2 +-
 .../__snapshots__/LoadingButton.spec.tsx.snap |   32 +-
 .../Pagination/PageButton/PageButton.js       |    2 +-
 .../__snapshots__/PageButton.spec.js.snap     |   23 +-
 .../PaginationButton.spec.js.snap             |    4 +-
 .../PaginationContainer.spec.js.snap          |   96 +-
 .../__snapshots__/Pagination.spec.js.snap     |  353 +++--
 src/components/SearchInput/SearchInput.js     |    1 -
 .../__snapshots__/Sidebar.spec.js.snap        |    8 +-
 .../__snapshots__/CloseButton.spec.js.snap    |    8 +-
 .../Tag/__snapshots__/Tag.spec.js.snap        |    2 +-
 yarn.lock                                     |    6 +-
 30 files changed, 1468 insertions(+), 1696 deletions(-)

diff --git a/scripts/static-styles/config.js b/scripts/static-styles/config.js
index fe1aa8eafa..efb31f43bd 100644
--- a/scripts/static-styles/config.js
+++ b/scripts/static-styles/config.js
@@ -128,7 +128,7 @@ export default {
       }
     },
     // TODO: Make React DocGen work with TypeScript
-    // getComponentInfo(Button, { size: [KILO, MEGA, GIGA] }),
+    // getComponentInfo(Button, { size: [KILO, MEGA] }),
     getComponentInfo(Blockquote, {
       size: [Blockquote.KILO, Blockquote.MEGA, Blockquote.GIGA]
     }),
diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index 3c7d83a2e6..d65dd581b1 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -298,7 +298,6 @@ exports[`Storyshots Components/Button Primary 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -307,6 +306,7 @@ exports[`Storyshots Components/Button Primary 1`] = `
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -365,7 +365,6 @@ exports[`Storyshots Components/Button Secondary 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -374,6 +373,7 @@ exports[`Storyshots Components/Button Secondary 1`] = `
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -399,7 +399,7 @@ exports[`Storyshots Components/Button Secondary 1`] = `
 
 .circuit-0:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 <button
@@ -433,15 +433,15 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
 }
 
 .circuit-0:focus {
@@ -461,13 +461,13 @@ HTMLCollection [
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -497,15 +497,15 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -525,13 +525,13 @@ HTMLCollection [
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -539,70 +539,6 @@ HTMLCollection [
   >
     Button mega
   </button>,
-  .circuit-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: auto;
-  height: auto;
-  cursor: pointer;
-  font-size: 16px;
-  line-height: 24px;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-weight: 700;
-  border-radius: 5px;
-  border-width: 1px;
-  border-style: solid;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
-  padding: 12px calc(32px - 1px);
-}
-
-.circuit-0:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px #AFD0FE;
-}
-
-.circuit-0:focus::-moz-focus-inner {
-  border: 0;
-}
-
-.circuit-0:disabled,
-.circuit-0[disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-  box-shadow: none;
-}
-
-.circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
-}
-
-.circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
-}
-
-<button
-    class="circuit-0"
-  >
-    Button giga
-  </button>,
 ]
 `;
 
@@ -629,7 +565,6 @@ exports[`Storyshots Components/Button Tertiary 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -638,6 +573,7 @@ exports[`Storyshots Components/Button Tertiary 1`] = `
   border-color: transparent;
   color: #3388FF;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -694,7 +630,6 @@ exports[`Storyshots Components/Button With Icon 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -703,6 +638,7 @@ exports[`Storyshots Components/Button With Icon 1`] = `
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -778,7 +714,6 @@ exports[`Storyshots Components/Button/ButtonGroup Base 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -787,6 +722,7 @@ exports[`Storyshots Components/Button/ButtonGroup Base 1`] = `
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-1:focus {
@@ -837,7 +773,6 @@ exports[`Storyshots Components/Button/ButtonGroup Base 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -846,6 +781,7 @@ exports[`Storyshots Components/Button/ButtonGroup Base 1`] = `
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -871,7 +807,7 @@ exports[`Storyshots Components/Button/ButtonGroup Base 1`] = `
 
 .circuit-0:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-2 {
@@ -951,7 +887,6 @@ exports[`Storyshots Components/Button/CloseButton Base 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -960,6 +895,7 @@ exports[`Storyshots Components/Button/CloseButton Base 1`] = `
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   border: 0;
 }
 
@@ -986,7 +922,7 @@ exports[`Storyshots Components/Button/CloseButton Base 1`] = `
 
 .circuit-1:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-0 {
@@ -1052,7 +988,6 @@ exports[`Storyshots Components/Button/IconButton Base 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -1061,6 +996,7 @@ exports[`Storyshots Components/Button/IconButton Base 1`] = `
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-1:focus {
@@ -1180,7 +1116,6 @@ exports[`Storyshots Components/Button/LoadingButton Base 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -1189,6 +1124,7 @@ exports[`Storyshots Components/Button/LoadingButton Base 1`] = `
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-3:focus {
@@ -4099,15 +4035,15 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-1:focus {
@@ -4127,13 +4063,13 @@ HTMLCollection [
 }
 
 .circuit-1:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-1:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-3 {
@@ -4291,15 +4227,15 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-1:focus {
@@ -4319,13 +4255,13 @@ HTMLCollection [
 }
 
 .circuit-1:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-1:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-7 {
@@ -4636,7 +4572,6 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -4645,6 +4580,7 @@ HTMLCollection [
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   border: 0;
 }
 
@@ -4671,7 +4607,7 @@ HTMLCollection [
 
 .circuit-2:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-1 {
@@ -4856,7 +4792,20 @@ exports[`Storyshots Components/Card/CardList Base 1`] = `
 `;
 
 exports[`Storyshots Components/Carousel Composed 1`] = `
-.circuit-52 {
+.circuit-38 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-50 {
   width: 100%;
   height: auto;
   position: relative;
@@ -4969,7 +4918,7 @@ exports[`Storyshots Components/Carousel Composed 1`] = `
   z-index: -2;
 }
 
-.circuit-50 {
+.circuit-48 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -4986,7 +4935,7 @@ exports[`Storyshots Components/Carousel Composed 1`] = `
   margin-top: 16px;
 }
 
-.circuit-41 {
+.circuit-40 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5008,86 +4957,48 @@ exports[`Storyshots Components/Carousel Composed 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
-  background-color: #D8DDE1;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  overflow: hidden;
-  border-radius: 50%;
+  border-radius: 8px;
   margin-left: 8px;
 }
 
-.circuit-41:focus {
+.circuit-40:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-41:focus::-moz-focus-inner {
+.circuit-40:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-41:disabled,
-.circuit-41[disabled] {
+.circuit-40:disabled,
+.circuit-40[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-41:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+.circuit-40:hover {
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
-.circuit-41:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+.circuit-40:active {
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
-.circuit-41:first-of-type {
+.circuit-40:first-of-type {
   margin-left: 0;
 }
 
-.circuit-41:active,
-.circuit-41:focus,
-.circuit-41:hover {
-  padding: 0;
-}
-
-@media (max-width:479px) {
-  .circuit-41 {
-    width: 24px;
-    height: 24px;
-  }
-
-  .circuit-41 svg {
-    width: 25%;
-  }
-}
-
-.circuit-38 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 .circuit-8 {
   box-shadow: 0 0 1px rgba(0,0,0,0.05);
   overflow: hidden;
@@ -5106,7 +5017,7 @@ exports[`Storyshots Components/Carousel Composed 1`] = `
   background: #FAFBFC;
 }
 
-.circuit-48 {
+.circuit-46 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5121,7 +5032,7 @@ exports[`Storyshots Components/Carousel Composed 1`] = `
   justify-content: center;
 }
 
-.circuit-42 {
+.circuit-41 {
   font-weight: 400;
   margin-bottom: 16px;
   font-size: 16px;
@@ -5131,14 +5042,14 @@ exports[`Storyshots Components/Carousel Composed 1`] = `
 }
 
 @media (min-width:480px) {
-  .circuit-42 {
+  .circuit-41 {
     font-size: 16px;
     line-height: 24px;
   }
 }
 
 @media (max-width:479px) {
-  .circuit-42 {
+  .circuit-41 {
     font-size: 13px;
     line-height: 20px;
   }
@@ -5148,7 +5059,7 @@ exports[`Storyshots Components/Carousel Composed 1`] = `
   style="width: 50vw;"
 >
   <div
-    class="circuit-52 circuit-53"
+    class="circuit-50 circuit-51"
   >
     <div
       class="circuit-36 circuit-37"
@@ -5227,37 +5138,39 @@ exports[`Storyshots Components/Carousel Composed 1`] = `
       </div>
     </div>
     <div
-      class="circuit-50 circuit-51"
+      class="circuit-48 circuit-49"
     >
       <div
-        class="circuit-48 circuit-49"
+        class="circuit-46 circuit-47"
       >
         <button
-          aria-label="previous"
-          class="circuit-40 circuit-41"
+          class="circuit-39 circuit-40"
+          title="Previous"
         >
-          <div
-            class="circuit-38 circuit-39"
+          <svg
+            fill="none"
+            height="16"
+            role="presentation"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              fill="none"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M10 4L6 8l4 4"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-              />
-            </svg>
-          </div>
+            <path
+              d="M10 4L6 8l4 4"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+          <span
+            class="circuit-38"
+          >
+            Previous
+          </span>
         </button>
         <p
-          class="circuit-42 circuit-43"
+          class="circuit-41 circuit-42"
           style="margin-left: 8px;"
         >
           1
@@ -5265,28 +5178,30 @@ exports[`Storyshots Components/Carousel Composed 1`] = `
           3
         </p>
         <button
-          aria-label="next"
-          class="circuit-40 circuit-41"
+          class="circuit-39 circuit-40"
+          title="Next"
         >
-          <div
-            class="circuit-38 circuit-39"
+          <svg
+            fill="none"
+            height="16"
+            role="presentation"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              fill="none"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M6 12l4-4-4-4"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-              />
-            </svg>
-          </div>
+            <path
+              d="M6 12l4-4-4-4"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+          <span
+            class="circuit-38"
+          >
+            Next
+          </span>
         </button>
       </div>
     </div>
@@ -5318,16 +5233,29 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
   }
 }
 
-.circuit-61 {
-  width: 100%;
-  height: auto;
-  position: relative;
-}
-
-.circuit-36 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
+.circuit-45 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-58 {
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.circuit-36 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -5449,7 +5377,7 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
   z-index: -2;
 }
 
-.circuit-59 {
+.circuit-56 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5559,7 +5487,7 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
   margin-left: 8px;
 }
 
-.circuit-57 {
+.circuit-54 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5576,12 +5504,12 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
 }
 
 @media (max-width:479px) {
-  .circuit-57 {
+  .circuit-54 {
     margin-left: 12px;
   }
 }
 
-.circuit-48 {
+.circuit-47 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5603,92 +5531,54 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
-  background-color: #D8DDE1;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  overflow: hidden;
-  border-radius: 50%;
+  border-radius: 8px;
   margin-left: 8px;
 }
 
-.circuit-48:focus {
+.circuit-47:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-48:focus::-moz-focus-inner {
+.circuit-47:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-48:disabled,
-.circuit-48[disabled] {
+.circuit-47:disabled,
+.circuit-47[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-48:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+.circuit-47:hover {
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
-.circuit-48:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+.circuit-47:active {
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
-.circuit-48:first-of-type {
+.circuit-47:first-of-type {
   margin-left: 0;
 }
 
-.circuit-48:active,
-.circuit-48:focus,
-.circuit-48:hover {
-  padding: 0;
-}
-
-@media (max-width:479px) {
-  .circuit-48 {
-    width: 24px;
-    height: 24px;
-  }
-
-  .circuit-48 svg {
-    width: 25%;
-  }
-}
-
-.circuit-45 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 <div
   style="width: 50vw;"
 >
   <div
     aria-label="gallery"
-    class="circuit-61 circuit-62"
+    class="circuit-58 circuit-59"
   >
     <div
       class="circuit-36 circuit-37"
@@ -5764,7 +5654,7 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
       </div>
     </div>
     <div
-      class="circuit-59 circuit-60"
+      class="circuit-56 circuit-57"
     >
       <p
         class="circuit-38 circuit-39 circuit-40"
@@ -5787,78 +5677,87 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
         />
       </div>
       <div
-        class="circuit-57 circuit-58"
+        class="circuit-54 circuit-55"
       >
         <button
           aria-label="pause"
-          class="circuit-47 circuit-48"
+          class="circuit-46 circuit-47"
+          title="Pause"
         >
-          <div
-            class="circuit-45 circuit-46"
+          <svg
+            fill="none"
+            height="16"
+            role="presentation"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              fill="none"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M8.5 7v10M15.5 7v10"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-width="2"
-              />
-            </svg>
-          </div>
+            <path
+              d="M4.5 3v10M11.5 3v10"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-width="2"
+            />
+          </svg>
+          <span
+            class="circuit-45"
+          >
+            Pause
+          </span>
         </button>
         <button
           aria-label="previous"
-          class="circuit-47 circuit-48"
+          class="circuit-46 circuit-47"
+          title="Previous"
         >
-          <div
-            class="circuit-45 circuit-46"
+          <svg
+            fill="none"
+            height="16"
+            role="presentation"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              fill="none"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M10 4L6 8l4 4"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-              />
-            </svg>
-          </div>
+            <path
+              d="M10 4L6 8l4 4"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+          <span
+            class="circuit-45"
+          >
+            Previous
+          </span>
         </button>
         <button
           aria-label="next"
-          class="circuit-47 circuit-48"
+          class="circuit-46 circuit-47"
+          title="Next"
         >
-          <div
-            class="circuit-45 circuit-46"
+          <svg
+            fill="none"
+            height="16"
+            role="presentation"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              fill="none"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M6 12l4-4-4-4"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-              />
-            </svg>
-          </div>
+            <path
+              d="M6 12l4-4-4-4"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+          <span
+            class="circuit-45"
+          >
+            Next
+          </span>
         </button>
       </div>
     </div>
@@ -5867,7 +5766,20 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
 `;
 
 exports[`Storyshots Components/Carousel/Buttons All Buttons 1`] = `
-.circuit-3 {
+.circuit-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.circuit-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5889,87 +5801,49 @@ exports[`Storyshots Components/Carousel/Buttons All Buttons 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
-  background-color: #D8DDE1;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  overflow: hidden;
-  border-radius: 50%;
+  border-radius: 8px;
   margin-left: 8px;
 }
 
-.circuit-3:focus {
+.circuit-2:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-3:focus::-moz-focus-inner {
+.circuit-2:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-3:disabled,
-.circuit-3[disabled] {
+.circuit-2:disabled,
+.circuit-2[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-3:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+.circuit-2:hover {
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
-.circuit-3:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+.circuit-2:active {
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
-.circuit-3:first-of-type {
+.circuit-2:first-of-type {
   margin-left: 0;
 }
 
-.circuit-3:active,
-.circuit-3:focus,
-.circuit-3:hover {
-  padding: 0;
-}
-
-@media (max-width:479px) {
-  .circuit-3 {
-    width: 24px;
-    height: 24px;
-  }
-
-  .circuit-3 svg {
-    width: 25%;
-  }
-}
-
-.circuit-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.circuit-16 {
+.circuit-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5985,102 +5859,110 @@ exports[`Storyshots Components/Carousel/Buttons All Buttons 1`] = `
 }
 
 <div
-  class="circuit-16 circuit-17"
+  class="circuit-12 circuit-13"
 >
   <button
-    aria-label="pause"
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
+    title="Pause"
   >
-    <div
-      class="circuit-0 circuit-1"
+    <svg
+      fill="none"
+      height="16"
+      role="presentation"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.5 7v10M15.5 7v10"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-width="2"
-        />
-      </svg>
-    </div>
+      <path
+        d="M4.5 3v10M11.5 3v10"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-width="2"
+      />
+    </svg>
+    <span
+      class="circuit-0"
+    >
+      Pause
+    </span>
   </button>
   <button
-    aria-label="play"
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
+    title="Play"
   >
-    <div
-      class="circuit-0 circuit-1"
+    <svg
+      fill="none"
+      height="16"
+      role="presentation"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M17 12l-9 5V7l9 5z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
-      </svg>
-    </div>
+      <path
+        d="M13 8l-9 5V3l9 5z"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+      />
+    </svg>
+    <span
+      class="circuit-0"
+    >
+      Play
+    </span>
   </button>
   <button
-    aria-label="previous"
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
+    title="Previous"
   >
-    <div
-      class="circuit-0 circuit-1"
+    <svg
+      fill="none"
+      height="16"
+      role="presentation"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        fill="none"
-        height="16"
-        viewBox="0 0 16 16"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M10 4L6 8l4 4"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
-      </svg>
-    </div>
+      <path
+        d="M10 4L6 8l4 4"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+      />
+    </svg>
+    <span
+      class="circuit-0"
+    >
+      Previous
+    </span>
   </button>
   <button
-    aria-label="next"
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
+    title="Next"
   >
-    <div
-      class="circuit-0 circuit-1"
+    <svg
+      fill="none"
+      height="16"
+      role="presentation"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        fill="none"
-        height="16"
-        viewBox="0 0 16 16"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 12l4-4-4-4"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
-      </svg>
-    </div>
+      <path
+        d="M6 12l4-4-4-4"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+      />
+    </svg>
+    <span
+      class="circuit-0"
+    >
+      Next
+    </span>
   </button>
 </div>
 `;
@@ -6307,7 +6189,6 @@ exports[`Storyshots Components/Hamburger Base 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -6316,6 +6197,7 @@ exports[`Storyshots Components/Hamburger Base 1`] = `
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   border: 0;
 }
 
@@ -6342,7 +6224,7 @@ exports[`Storyshots Components/Hamburger Base 1`] = `
 
 .circuit-3:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-1 {
@@ -6456,7 +6338,6 @@ exports[`Storyshots Components/Header Base 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -6465,6 +6346,7 @@ exports[`Storyshots Components/Header Base 1`] = `
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   border: 0;
 }
 
@@ -6491,7 +6373,7 @@ exports[`Storyshots Components/Header Base 1`] = `
 
 .circuit-3:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-1 {
@@ -6656,15 +6538,15 @@ exports[`Storyshots Components/Modal Base 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -6684,13 +6566,13 @@ exports[`Storyshots Components/Modal Base 1`] = `
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -6724,15 +6606,15 @@ exports[`Storyshots Components/Modal With Custom Styles 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -6752,13 +6634,13 @@ exports[`Storyshots Components/Modal With Custom Styles 1`] = `
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -6792,15 +6674,15 @@ exports[`Storyshots Components/Modal With Footer 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -6820,13 +6702,13 @@ exports[`Storyshots Components/Modal With Footer 1`] = `
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -6860,15 +6742,15 @@ exports[`Storyshots Components/Modal With Header 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -6888,13 +6770,13 @@ exports[`Storyshots Components/Modal With Header 1`] = `
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -6928,15 +6810,15 @@ exports[`Storyshots Components/Modal With Title And Close Button 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -6956,13 +6838,13 @@ exports[`Storyshots Components/Modal With Title And Close Button 1`] = `
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -6996,15 +6878,15 @@ exports[`Storyshots Components/Modal Without Close Button 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -7024,13 +6906,13 @@ exports[`Storyshots Components/Modal Without Close Button 1`] = `
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -7165,7 +7047,7 @@ exports[`Storyshots Components/Modal/Embedded With Custom Styles 1`] = `
 `;
 
 exports[`Storyshots Components/Modal/Embedded With Footer 1`] = `
-.circuit-4 {
+.circuit-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -7187,7 +7069,6 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -7196,6 +7077,66 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = `
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
+}
+
+.circuit-5:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-5:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.circuit-5:disabled,
+.circuit-5[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+  box-shadow: none;
+}
+
+.circuit-5:hover {
+  background-color: #1760CE;
+  border-color: #1760CE;
+}
+
+.circuit-5:active {
+  background-color: #003C8B;
+  border-color: #003C8B;
+}
+
+.circuit-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: auto;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-weight: 700;
+  border-width: 1px;
+  border-style: solid;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
+  padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-4:focus {
@@ -7215,13 +7156,13 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = `
 }
 
 .circuit-4:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-4:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-6 {
@@ -7393,7 +7334,7 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = `
       </li>
       <li>
         <button
-          class="circuit-4"
+          class="circuit-5"
         >
           Confirm
         </button>
@@ -7552,7 +7493,6 @@ exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] =
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -7561,6 +7501,7 @@ exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] =
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   border: 0;
 }
 
@@ -7587,7 +7528,7 @@ exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] =
 
 .circuit-2:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-1 {
@@ -7770,15 +7711,15 @@ exports[`Storyshots Components/Notification Alert 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
 }
 
 .circuit-4:focus {
@@ -7798,13 +7739,13 @@ exports[`Storyshots Components/Notification Alert 1`] = `
 }
 
 .circuit-4:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-4:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-3 {
@@ -8131,15 +8072,15 @@ exports[`Storyshots Components/Notification Warning 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
 }
 
 .circuit-4:focus {
@@ -8159,13 +8100,13 @@ exports[`Storyshots Components/Notification Warning 1`] = `
 }
 
 .circuit-4:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-4:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-3 {
@@ -8604,15 +8545,15 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right: 0;
@@ -8635,13 +8576,13 @@ HTMLCollection [
 }
 
 .circuit-1:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-1:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-1:hover {
@@ -8671,7 +8612,6 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -8680,6 +8620,7 @@ HTMLCollection [
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
@@ -8756,7 +8697,6 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -8765,6 +8705,7 @@ HTMLCollection [
   border-color: #9DA7B1;
   color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
@@ -8794,7 +8735,7 @@ HTMLCollection [
 
 .circuit-5:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-5:focus {
@@ -8834,15 +8775,15 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -8864,13 +8805,13 @@ HTMLCollection [
 }
 
 .circuit-13:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-13:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <div
@@ -8963,15 +8904,15 @@ exports[`Storyshots Components/Popover Base 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
 }
 
 .circuit-0:focus {
@@ -8991,13 +8932,13 @@ exports[`Storyshots Components/Popover Base 1`] = `
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-1 {
@@ -10012,7 +9953,6 @@ exports[`Storyshots Components/Sidebar Base 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -10021,6 +9961,7 @@ exports[`Storyshots Components/Sidebar Base 1`] = `
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   border: 0;
   border-radius: 100%;
   position: absolute;
@@ -10058,7 +9999,7 @@ exports[`Storyshots Components/Sidebar Base 1`] = `
 
 .circuit-50:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 @media (min-width:960px) {
@@ -10349,7 +10290,6 @@ exports[`Storyshots Components/Step Form 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -10358,6 +10298,7 @@ exports[`Storyshots Components/Step Form 1`] = `
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-24:focus {
@@ -10695,15 +10636,15 @@ exports[`Storyshots Components/Step Slider 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   margin: 8px;
 }
 
@@ -10724,11 +10665,71 @@ exports[`Storyshots Components/Step Slider 1`] = `
 }
 
 .circuit-18:hover {
+  background-color: #FAFBFC;
+  border-color: #5C656F;
+}
+
+.circuit-18:active {
+  background-color: #EEF0F2;
+  border-color: #323E49;
+}
+
+.circuit-20 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: auto;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-weight: 700;
+  border-width: 1px;
+  border-style: solid;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
+  background-color: #3388FF;
+  border-color: #3388FF;
+  color: #FFFFFF;
+  padding: 8px calc(24px - 1px);
+  border-radius: 8px;
+  margin: 8px;
+}
+
+.circuit-20:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-20:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.circuit-20:disabled,
+.circuit-20[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+  box-shadow: none;
+}
+
+.circuit-20:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-18:active {
+.circuit-20:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
@@ -10777,7 +10778,7 @@ exports[`Storyshots Components/Step Slider 1`] = `
     </button>
     <button
       aria-label="play"
-      class="circuit-17 circuit-18"
+      class="circuit-17 circuit-20"
     >
       Play
     </button>
@@ -10814,7 +10815,6 @@ exports[`Storyshots Components/Step Swiper 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -10823,6 +10823,7 @@ exports[`Storyshots Components/Step Swiper 1`] = `
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-3:focus {
@@ -10848,7 +10849,7 @@ exports[`Storyshots Components/Step Swiper 1`] = `
 
 .circuit-3:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-7 {
@@ -13616,7 +13617,6 @@ exports[`Storyshots Components/Tag Removable 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -13625,6 +13625,7 @@ exports[`Storyshots Components/Tag Removable 1`] = `
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   border: 0;
   margin-left: 4px;
   margin-right: -4px;
@@ -13654,7 +13655,7 @@ exports[`Storyshots Components/Tag Removable 1`] = `
 
 .circuit-2:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 <div
@@ -23403,7 +23404,6 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -23412,6 +23412,7 @@ HTMLCollection [
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -23475,15 +23476,15 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -23503,13 +23504,13 @@ HTMLCollection [
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -23544,15 +23545,15 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -23572,13 +23573,13 @@ HTMLCollection [
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -23608,7 +23609,6 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -23617,6 +23617,7 @@ HTMLCollection [
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
diff --git a/src/components/Button/Button.docs.mdx b/src/components/Button/Button.docs.mdx
index c11e05514e..07cff961ea 100644
--- a/src/components/Button/Button.docs.mdx
+++ b/src/components/Button/Button.docs.mdx
@@ -55,11 +55,10 @@ The **tertiary button** should be used for supportive actions, and can be paired
 
 ### Sizes
 
-The button component supports 3 different sizes:
+The button component supports 2 different sizes:
 
 - **mega**, the default size
 - **kilo**, used when there are sizing constraints
-- **giga**, used for extreme cases when there is no constraint on the button's size
 
 <Story id="components-button--sizes" />
 
diff --git a/src/components/Button/Button.spec.tsx b/src/components/Button/Button.spec.tsx
index c4fc4c0a0b..8a1346fb27 100644
--- a/src/components/Button/Button.spec.tsx
+++ b/src/components/Button/Button.spec.tsx
@@ -67,11 +67,6 @@ describe('Button', () => {
       expect(wrapper).toMatchSnapshot();
     });
 
-    it('should render a giga button', () => {
-      const wrapper = renderButton(create, { ...baseProps, size: 'giga' });
-      expect(wrapper).toMatchSnapshot();
-    });
-
     it('should render a disabled button', () => {
       const wrapper = renderButton(create, { ...baseProps, disabled: true });
       expect(wrapper).toMatchSnapshot();
diff --git a/src/components/Button/Button.story.tsx b/src/components/Button/Button.story.tsx
index f9135e47ec..6a2c39d09b 100644
--- a/src/components/Button/Button.story.tsx
+++ b/src/components/Button/Button.story.tsx
@@ -32,7 +32,7 @@ export default {
 export const Primary = () => (
   <Button
     variant={select('Variant', ['primary', 'secondary', 'tertiary'], 'primary')}
-    size={select('Size', ['kilo', 'mega', 'giga'], 'mega')}
+    size={select('Size', ['kilo', 'mega'], 'mega')}
     href={boolean('Link', false) ? '#' : undefined}
     target={boolean('Link', false) ? '_blank' : undefined}
     stretch={boolean('Stretched', false)}
@@ -56,7 +56,6 @@ export const Sizes = () => (
   <>
     <Button size="kilo">Button kilo</Button>
     <Button size="mega">Button mega</Button>
-    <Button size="giga">Button giga</Button>
   </>
 );
 
@@ -64,7 +63,7 @@ export const WithIcon = () => (
   <Button
     icon={ThumbUp}
     variant={select('Variant', ['primary', 'secondary', 'tertiary'], 'primary')}
-    size={select('Size', ['kilo', 'mega', 'giga'], 'mega')}
+    size={select('Size', ['kilo', 'mega'], 'mega')}
   >
     Like
   </Button>
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 746d02f8d3..3ea06db1cc 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -34,7 +34,7 @@ export interface BaseProps {
   /**
    * Choose from 3 sizes. Default: 'mega'.
    */
-  size?: 'kilo' | 'mega' | 'giga';
+  size?: 'kilo' | 'mega';
   /**
    * Visually and functionally disable the button.
    */
@@ -70,7 +70,6 @@ const baseStyles = ({ theme }: StyleProps) => css`
   text-align: center;
   text-decoration: none;
   font-weight: ${theme.fontWeight.bold};
-  border-radius: ${theme.borderRadius.giga};
   border-width: ${BORDER_WIDTH};
   border-style: solid;
   transition: opacity ${theme.transitions.default};
@@ -87,7 +86,7 @@ const baseStyles = ({ theme }: StyleProps) => css`
 
 const primaryStyles = ({
   theme,
-  variant = 'primary'
+  variant = 'secondary'
 }: ButtonProps & StyleProps) =>
   variant === 'primary' &&
   css`
@@ -109,7 +108,7 @@ const primaryStyles = ({
 
 const secondaryStyles = ({
   theme,
-  variant = 'primary'
+  variant = 'secondary'
 }: ButtonProps & StyleProps) =>
   variant === 'secondary' &&
   css`
@@ -125,13 +124,13 @@ const secondaryStyles = ({
 
     &:active {
       background-color: ${theme.colors.n200};
-      border-color: ${theme.colors.n700};
+      border-color: ${theme.colors.n800};
     }
   `;
 
 const tertiaryStyles = ({
   theme,
-  variant = 'primary'
+  variant = 'secondary'
 }: ButtonProps & StyleProps) =>
   variant === 'tertiary' &&
   css`
@@ -151,14 +150,19 @@ const tertiaryStyles = ({
 
 const sizeStyles = ({ theme, size = 'mega' }: ButtonProps & StyleProps) => {
   const sizeMap = {
-    kilo: `${theme.spacings.bit} calc(${theme.spacings.mega} - ${BORDER_WIDTH})`,
-    mega: `${theme.spacings.byte} calc(${theme.spacings.giga} - ${BORDER_WIDTH})`,
-    giga: `${theme.spacings.kilo} calc(${theme.spacings.tera} - ${BORDER_WIDTH})`
+    kilo: {
+      padding: `${theme.spacings.bit} calc(${theme.spacings.mega} - ${BORDER_WIDTH})`,
+      borderRadius: '6px'
+    },
+    mega: {
+      padding: `${theme.spacings.byte} calc(${theme.spacings.giga} - ${BORDER_WIDTH})`,
+      borderRadius: '8px'
+    }
   };
 
   return css({
     label: `button--${size}`,
-    padding: sizeMap[size]
+    ...sizeMap[size]
   });
 };
 
diff --git a/src/components/Button/__snapshots__/Button.spec.tsx.snap b/src/components/Button/__snapshots__/Button.spec.tsx.snap
index 78cdd56862..631af64af8 100644
--- a/src/components/Button/__snapshots__/Button.spec.tsx.snap
+++ b/src/components/Button/__snapshots__/Button.spec.tsx.snap
@@ -23,15 +23,15 @@ exports[`Button styles should render a button with icon 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -51,13 +51,13 @@ exports[`Button styles should render a button with icon 1`] = `
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -107,15 +107,15 @@ exports[`Button styles should render a disabled button 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -135,13 +135,13 @@ exports[`Button styles should render a disabled button 1`] = `
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -152,73 +152,6 @@ exports[`Button styles should render a disabled button 1`] = `
 </button>
 `;
 
-exports[`Button styles should render a giga button 1`] = `
-.circuit-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: auto;
-  height: auto;
-  cursor: pointer;
-  font-size: 16px;
-  line-height: 24px;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font-weight: 700;
-  border-radius: 5px;
-  border-width: 1px;
-  border-style: solid;
-  -webkit-transition: opacity 200ms ease-in-out;
-  transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
-  padding: 12px calc(32px - 1px);
-}
-
-.circuit-0:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px #AFD0FE;
-}
-
-.circuit-0:focus::-moz-focus-inner {
-  border: 0;
-}
-
-.circuit-0:disabled,
-.circuit-0[disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-  box-shadow: none;
-}
-
-.circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
-}
-
-.circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
-}
-
-<button
-  class="circuit-0"
->
-  Button
-</button>
-`;
-
 exports[`Button styles should render a kilo button 1`] = `
 .circuit-0 {
   display: -webkit-box;
@@ -242,15 +175,15 @@ exports[`Button styles should render a kilo button 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
 }
 
 .circuit-0:focus {
@@ -270,13 +203,13 @@ exports[`Button styles should render a kilo button 1`] = `
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -309,15 +242,15 @@ exports[`Button styles should render a mega button 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -337,13 +270,13 @@ exports[`Button styles should render a mega button 1`] = `
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -376,15 +309,15 @@ exports[`Button styles should render a primary button by default 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -404,13 +337,13 @@ exports[`Button styles should render a primary button by default 1`] = `
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -443,7 +376,6 @@ exports[`Button styles should render a secondary button 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -452,6 +384,7 @@ exports[`Button styles should render a secondary button 1`] = `
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
@@ -477,7 +410,7 @@ exports[`Button styles should render a secondary button 1`] = `
 
 .circuit-0:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 <button
@@ -510,15 +443,15 @@ exports[`Button styles should render a stretched button 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   width: 100%;
 }
 
@@ -539,13 +472,13 @@ exports[`Button styles should render a stretched button 1`] = `
 }
 
 .circuit-0:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-0:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <button
@@ -578,7 +511,6 @@ exports[`Button styles should render a tertiary button 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -587,6 +519,7 @@ exports[`Button styles should render a tertiary button 1`] = `
   border-color: transparent;
   color: #3388FF;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-0:focus {
diff --git a/src/components/Carousel/__snapshots__/Carousel.spec.js.snap b/src/components/Carousel/__snapshots__/Carousel.spec.js.snap
index fe7890cbdf..9298bc30d6 100644
--- a/src/components/Carousel/__snapshots__/Carousel.spec.js.snap
+++ b/src/components/Carousel/__snapshots__/Carousel.spec.js.snap
@@ -49,7 +49,7 @@ exports[`Carousel styles should render with children as a function 1`] = `
   }
 }
 
-.circuit-61 {
+.circuit-58 {
   width: 100%;
   height: auto;
   position: relative;
@@ -180,7 +180,7 @@ exports[`Carousel styles should render with children as a function 1`] = `
   z-index: -2;
 }
 
-.circuit-59 {
+.circuit-56 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -290,7 +290,7 @@ exports[`Carousel styles should render with children as a function 1`] = `
   margin-left: 8px;
 }
 
-.circuit-57 {
+.circuit-54 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -307,12 +307,12 @@ exports[`Carousel styles should render with children as a function 1`] = `
 }
 
 @media (max-width:479px) {
-  .circuit-57 {
+  .circuit-54 {
     margin-left: 12px;
   }
 }
 
-.circuit-48 {
+.circuit-47 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -334,89 +334,64 @@ exports[`Carousel styles should render with children as a function 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
-  background-color: #D8DDE1;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  overflow: hidden;
-  border-radius: 50%;
+  border-radius: 8px;
   margin-left: 8px;
 }
 
-.circuit-48:focus {
+.circuit-47:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-48:focus::-moz-focus-inner {
+.circuit-47:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-48:disabled,
-.circuit-48[disabled] {
+.circuit-47:disabled,
+.circuit-47[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-48:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+.circuit-47:hover {
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
-.circuit-48:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+.circuit-47:active {
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
-.circuit-48:first-of-type {
+.circuit-47:first-of-type {
   margin-left: 0;
 }
 
-.circuit-48:active,
-.circuit-48:focus,
-.circuit-48:hover {
-  padding: 0;
-}
-
-@media (max-width:479px) {
-  .circuit-48 {
-    width: 24px;
-    height: 24px;
-  }
-
-  .circuit-48 svg {
-    width: 25%;
-  }
-}
-
 .circuit-45 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
 
 <div
   aria-label="gallery"
-  class="circuit-61 circuit-62"
+  class="circuit-58 circuit-59"
 >
   <div
     class="circuit-36 circuit-37"
@@ -492,7 +467,7 @@ exports[`Carousel styles should render with children as a function 1`] = `
     </div>
   </div>
   <div
-    class="circuit-59 circuit-60"
+    class="circuit-56 circuit-57"
   >
     <p
       class="circuit-38 circuit-39 circuit-40"
@@ -515,78 +490,87 @@ exports[`Carousel styles should render with children as a function 1`] = `
       />
     </div>
     <div
-      class="circuit-57 circuit-58"
+      class="circuit-54 circuit-55"
     >
       <button
         aria-label="pause"
-        class="circuit-47 circuit-48"
+        class="circuit-46 circuit-47"
+        title="Pause"
       >
-        <div
-          class="circuit-45 circuit-46"
+        <svg
+          fill="none"
+          height="16"
+          role="presentation"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M8.5 7v10M15.5 7v10"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-width="2"
-            />
-          </svg>
-        </div>
+          <path
+            d="M4.5 3v10M11.5 3v10"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="circuit-45"
+        >
+          Pause
+        </span>
       </button>
       <button
         aria-label="previous"
-        class="circuit-47 circuit-48"
+        class="circuit-46 circuit-47"
+        title="Previous"
       >
-        <div
-          class="circuit-45 circuit-46"
+        <svg
+          fill="none"
+          height="16"
+          role="presentation"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            fill="none"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M10 4L6 8l4 4"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-          </svg>
-        </div>
+          <path
+            d="M10 4L6 8l4 4"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="circuit-45"
+        >
+          Previous
+        </span>
       </button>
       <button
         aria-label="next"
-        class="circuit-47 circuit-48"
+        class="circuit-46 circuit-47"
+        title="Next"
       >
-        <div
-          class="circuit-45 circuit-46"
+        <svg
+          fill="none"
+          height="16"
+          role="presentation"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            fill="none"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M6 12l4-4-4-4"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-          </svg>
-        </div>
+          <path
+            d="M6 12l4-4-4-4"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="circuit-45"
+        >
+          Next
+        </span>
       </button>
     </div>
   </div>
@@ -644,7 +628,7 @@ exports[`Carousel styles should render with children as a node 1`] = `
   }
 }
 
-.circuit-61 {
+.circuit-58 {
   width: 100%;
   height: auto;
   position: relative;
@@ -775,7 +759,7 @@ exports[`Carousel styles should render with children as a node 1`] = `
   z-index: -2;
 }
 
-.circuit-59 {
+.circuit-56 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -885,7 +869,7 @@ exports[`Carousel styles should render with children as a node 1`] = `
   margin-left: 8px;
 }
 
-.circuit-57 {
+.circuit-54 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -902,12 +886,12 @@ exports[`Carousel styles should render with children as a node 1`] = `
 }
 
 @media (max-width:479px) {
-  .circuit-57 {
+  .circuit-54 {
     margin-left: 12px;
   }
 }
 
-.circuit-48 {
+.circuit-47 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -929,89 +913,64 @@ exports[`Carousel styles should render with children as a node 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
-  background-color: #D8DDE1;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  overflow: hidden;
-  border-radius: 50%;
+  border-radius: 8px;
   margin-left: 8px;
 }
 
-.circuit-48:focus {
+.circuit-47:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-48:focus::-moz-focus-inner {
+.circuit-47:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-48:disabled,
-.circuit-48[disabled] {
+.circuit-47:disabled,
+.circuit-47[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-48:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+.circuit-47:hover {
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
-.circuit-48:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+.circuit-47:active {
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
-.circuit-48:first-of-type {
+.circuit-47:first-of-type {
   margin-left: 0;
 }
 
-.circuit-48:active,
-.circuit-48:focus,
-.circuit-48:hover {
-  padding: 0;
-}
-
-@media (max-width:479px) {
-  .circuit-48 {
-    width: 24px;
-    height: 24px;
-  }
-
-  .circuit-48 svg {
-    width: 25%;
-  }
-}
-
 .circuit-45 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
 
 <div
   aria-label="gallery"
-  class="circuit-61 circuit-62"
+  class="circuit-58 circuit-59"
 >
   <div
     class="circuit-36 circuit-37"
@@ -1087,7 +1046,7 @@ exports[`Carousel styles should render with children as a node 1`] = `
     </div>
   </div>
   <div
-    class="circuit-59 circuit-60"
+    class="circuit-56 circuit-57"
   >
     <p
       class="circuit-38 circuit-39 circuit-40"
@@ -1110,78 +1069,87 @@ exports[`Carousel styles should render with children as a node 1`] = `
       />
     </div>
     <div
-      class="circuit-57 circuit-58"
+      class="circuit-54 circuit-55"
     >
       <button
         aria-label="pause"
-        class="circuit-47 circuit-48"
+        class="circuit-46 circuit-47"
+        title="Pause"
       >
-        <div
-          class="circuit-45 circuit-46"
+        <svg
+          fill="none"
+          height="16"
+          role="presentation"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M8.5 7v10M15.5 7v10"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-width="2"
-            />
-          </svg>
-        </div>
+          <path
+            d="M4.5 3v10M11.5 3v10"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="circuit-45"
+        >
+          Pause
+        </span>
       </button>
       <button
         aria-label="previous"
-        class="circuit-47 circuit-48"
+        class="circuit-46 circuit-47"
+        title="Previous"
       >
-        <div
-          class="circuit-45 circuit-46"
+        <svg
+          fill="none"
+          height="16"
+          role="presentation"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            fill="none"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M10 4L6 8l4 4"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-          </svg>
-        </div>
+          <path
+            d="M10 4L6 8l4 4"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="circuit-45"
+        >
+          Previous
+        </span>
       </button>
       <button
         aria-label="next"
-        class="circuit-47 circuit-48"
+        class="circuit-46 circuit-47"
+        title="Next"
       >
-        <div
-          class="circuit-45 circuit-46"
+        <svg
+          fill="none"
+          height="16"
+          role="presentation"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            fill="none"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M6 12l4-4-4-4"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-          </svg>
-        </div>
+          <path
+            d="M6 12l4-4-4-4"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="circuit-45"
+        >
+          Next
+        </span>
       </button>
     </div>
   </div>
@@ -1238,7 +1206,7 @@ exports[`Carousel styles should render with default paused styles 1`] = `
   }
 }
 
-.circuit-61 {
+.circuit-58 {
   width: 100%;
   height: auto;
   position: relative;
@@ -1369,7 +1337,7 @@ exports[`Carousel styles should render with default paused styles 1`] = `
   z-index: -2;
 }
 
-.circuit-59 {
+.circuit-56 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1439,7 +1407,7 @@ exports[`Carousel styles should render with default paused styles 1`] = `
   margin-left: 8px;
 }
 
-.circuit-57 {
+.circuit-54 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1456,12 +1424,12 @@ exports[`Carousel styles should render with default paused styles 1`] = `
 }
 
 @media (max-width:479px) {
-  .circuit-57 {
+  .circuit-54 {
     margin-left: 12px;
   }
 }
 
-.circuit-48 {
+.circuit-47 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1483,84 +1451,59 @@ exports[`Carousel styles should render with default paused styles 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
-  background-color: #D8DDE1;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  overflow: hidden;
-  border-radius: 50%;
+  border-radius: 8px;
   margin-left: 8px;
 }
 
-.circuit-48:focus {
+.circuit-47:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-48:focus::-moz-focus-inner {
+.circuit-47:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-48:disabled,
-.circuit-48[disabled] {
+.circuit-47:disabled,
+.circuit-47[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-48:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+.circuit-47:hover {
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
-.circuit-48:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+.circuit-47:active {
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
-.circuit-48:first-of-type {
+.circuit-47:first-of-type {
   margin-left: 0;
 }
 
-.circuit-48:active,
-.circuit-48:focus,
-.circuit-48:hover {
-  padding: 0;
-}
-
-@media (max-width:479px) {
-  .circuit-48 {
-    width: 24px;
-    height: 24px;
-  }
-
-  .circuit-48 svg {
-    width: 25%;
-  }
-}
-
 .circuit-45 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
 
 .circuit-41 {
@@ -1605,7 +1548,7 @@ exports[`Carousel styles should render with default paused styles 1`] = `
 
 <div
   aria-label="gallery"
-  class="circuit-61 circuit-62"
+  class="circuit-58 circuit-59"
 >
   <div
     class="circuit-36 circuit-37"
@@ -1681,7 +1624,7 @@ exports[`Carousel styles should render with default paused styles 1`] = `
     </div>
   </div>
   <div
-    class="circuit-59 circuit-60"
+    class="circuit-56 circuit-57"
   >
     <p
       class="circuit-38 circuit-39 circuit-40"
@@ -1704,79 +1647,88 @@ exports[`Carousel styles should render with default paused styles 1`] = `
       />
     </div>
     <div
-      class="circuit-57 circuit-58"
+      class="circuit-54 circuit-55"
     >
       <button
         aria-label="play"
-        class="circuit-47 circuit-48"
+        class="circuit-46 circuit-47"
+        title="Play"
       >
-        <div
-          class="circuit-45 circuit-46"
+        <svg
+          fill="none"
+          height="16"
+          role="presentation"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M17 12l-9 5V7l9 5z"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-          </svg>
-        </div>
+          <path
+            d="M13 8l-9 5V3l9 5z"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="circuit-45"
+        >
+          Play
+        </span>
       </button>
       <button
         aria-label="previous"
-        class="circuit-47 circuit-48"
+        class="circuit-46 circuit-47"
+        title="Previous"
       >
-        <div
-          class="circuit-45 circuit-46"
+        <svg
+          fill="none"
+          height="16"
+          role="presentation"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            fill="none"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M10 4L6 8l4 4"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-          </svg>
-        </div>
+          <path
+            d="M10 4L6 8l4 4"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="circuit-45"
+        >
+          Previous
+        </span>
       </button>
       <button
         aria-label="next"
-        class="circuit-47 circuit-48"
+        class="circuit-46 circuit-47"
+        title="Next"
       >
-        <div
-          class="circuit-45 circuit-46"
+        <svg
+          fill="none"
+          height="16"
+          role="presentation"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            fill="none"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M6 12l4-4-4-4"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-          </svg>
-        </div>
+          <path
+            d="M6 12l4-4-4-4"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="circuit-45"
+        >
+          Next
+        </span>
       </button>
     </div>
   </div>
@@ -1807,7 +1759,7 @@ exports[`Carousel styles should render with default styles 1`] = `
   }
 }
 
-.circuit-61 {
+.circuit-58 {
   width: 100%;
   height: auto;
   position: relative;
@@ -1938,7 +1890,7 @@ exports[`Carousel styles should render with default styles 1`] = `
   z-index: -2;
 }
 
-.circuit-59 {
+.circuit-56 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2048,7 +2000,7 @@ exports[`Carousel styles should render with default styles 1`] = `
   margin-left: 8px;
 }
 
-.circuit-57 {
+.circuit-54 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2065,12 +2017,12 @@ exports[`Carousel styles should render with default styles 1`] = `
 }
 
 @media (max-width:479px) {
-  .circuit-57 {
+  .circuit-54 {
     margin-left: 12px;
   }
 }
 
-.circuit-48 {
+.circuit-47 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2092,89 +2044,64 @@ exports[`Carousel styles should render with default styles 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
-  background-color: #D8DDE1;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  overflow: hidden;
-  border-radius: 50%;
+  border-radius: 8px;
   margin-left: 8px;
 }
 
-.circuit-48:focus {
+.circuit-47:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-48:focus::-moz-focus-inner {
+.circuit-47:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-48:disabled,
-.circuit-48[disabled] {
+.circuit-47:disabled,
+.circuit-47[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-48:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+.circuit-47:hover {
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
-.circuit-48:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+.circuit-47:active {
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
-.circuit-48:first-of-type {
+.circuit-47:first-of-type {
   margin-left: 0;
 }
 
-.circuit-48:active,
-.circuit-48:focus,
-.circuit-48:hover {
-  padding: 0;
-}
-
-@media (max-width:479px) {
-  .circuit-48 {
-    width: 24px;
-    height: 24px;
-  }
-
-  .circuit-48 svg {
-    width: 25%;
-  }
-}
-
 .circuit-45 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
 
 <div
   aria-label="gallery"
-  class="circuit-61 circuit-62"
+  class="circuit-58 circuit-59"
 >
   <div
     class="circuit-36 circuit-37"
@@ -2250,7 +2177,7 @@ exports[`Carousel styles should render with default styles 1`] = `
     </div>
   </div>
   <div
-    class="circuit-59 circuit-60"
+    class="circuit-56 circuit-57"
   >
     <p
       class="circuit-38 circuit-39 circuit-40"
@@ -2273,78 +2200,87 @@ exports[`Carousel styles should render with default styles 1`] = `
       />
     </div>
     <div
-      class="circuit-57 circuit-58"
+      class="circuit-54 circuit-55"
     >
       <button
         aria-label="pause"
-        class="circuit-47 circuit-48"
+        class="circuit-46 circuit-47"
+        title="Pause"
       >
-        <div
-          class="circuit-45 circuit-46"
+        <svg
+          fill="none"
+          height="16"
+          role="presentation"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            fill="none"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M8.5 7v10M15.5 7v10"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-width="2"
-            />
-          </svg>
-        </div>
+          <path
+            d="M4.5 3v10M11.5 3v10"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="circuit-45"
+        >
+          Pause
+        </span>
       </button>
       <button
         aria-label="previous"
-        class="circuit-47 circuit-48"
+        class="circuit-46 circuit-47"
+        title="Previous"
       >
-        <div
-          class="circuit-45 circuit-46"
+        <svg
+          fill="none"
+          height="16"
+          role="presentation"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            fill="none"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M10 4L6 8l4 4"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-          </svg>
-        </div>
+          <path
+            d="M10 4L6 8l4 4"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="circuit-45"
+        >
+          Previous
+        </span>
       </button>
       <button
         aria-label="next"
-        class="circuit-47 circuit-48"
+        class="circuit-46 circuit-47"
+        title="Next"
       >
-        <div
-          class="circuit-45 circuit-46"
+        <svg
+          fill="none"
+          height="16"
+          role="presentation"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            fill="none"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M6 12l4-4-4-4"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-            />
-          </svg>
-        </div>
+          <path
+            d="M6 12l4-4-4-4"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="circuit-45"
+        >
+          Next
+        </span>
       </button>
     </div>
   </div>
diff --git a/src/components/Carousel/components/Buttons/Buttons.js b/src/components/Carousel/components/Buttons/Buttons.js
index 040d0787f4..64ded076a2 100644
--- a/src/components/Carousel/components/Buttons/Buttons.js
+++ b/src/components/Carousel/components/Buttons/Buttons.js
@@ -19,7 +19,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { ChevronLeft, ChevronRight, Pause, Play } from '@sumup/icons';
 
-import CircuitUIButton from '../../../Button';
+import IconButton from '../../../IconButton';
 
 const buttonListStyles = css`
   label: carousel__buttonlist;
@@ -27,68 +27,39 @@ const buttonListStyles = css`
   align-items: center;
   justify-content: center;
 `;
+
 export const ButtonList = styled('div')(buttonListStyles);
 
-const baseButtonStyles = ({ theme }) => css`
+const buttonStyles = ({ theme }) => css`
   label: carousel__button;
-  background-color: ${theme.colors.n300};
-  width: ${theme.iconSizes.giga};
-  height: ${theme.iconSizes.giga};
-  padding: 0;
-  overflow: hidden;
-  border-radius: 50%;
-
   margin-left: ${theme.spacings.byte};
 
   &:first-of-type {
     margin-left: 0;
   }
-  &:active,
-  &:focus,
-  &:hover {
-    padding: 0;
-  }
-
-  ${theme.mq.untilKilo} {
-    width: ${theme.iconSizes.mega};
-    height: ${theme.iconSizes.mega};
-
-    svg {
-      width: 25%;
-    }
-  }
 `;
-export const Button = styled(CircuitUIButton)(baseButtonStyles);
 
-// wrapping button content due to flex bug in Safari 10.1
-// via https://github.com/philipwalton/flexbugs/issues/236
-const innerWrapperStyles = css`
-  label: carousel__button--innerwrapper;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-const InnerWrapper = styled('div')(innerWrapperStyles);
+export const Button = styled(IconButton)(buttonStyles);
+
+Button.defaultProps = {
+  size: 'kilo'
+};
 
 export const NextButton = props => (
-  <Button aria-label="next" {...props}>
-    <InnerWrapper>
-      <ChevronRight />
-    </InnerWrapper>
+  <Button label="Next" {...props}>
+    <ChevronRight />
   </Button>
 );
 
 export const PrevButton = props => (
-  <Button aria-label="previous" {...props}>
-    <InnerWrapper>
-      <ChevronLeft />
-    </InnerWrapper>
+  <Button label="Previous" {...props}>
+    <ChevronLeft />
   </Button>
 );
 
 export const PlayButton = ({ paused, ...props }) => (
-  <Button aria-label={paused ? 'play' : 'pause'} {...props}>
-    <InnerWrapper>{paused ? <Play /> : <Pause />}</InnerWrapper>
+  <Button label={paused ? 'Play' : 'Pause'} {...props}>
+    {paused ? <Play /> : <Pause />}
   </Button>
 );
 
diff --git a/src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap b/src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap
index e21ab4cec4..9552819e34 100644
--- a/src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap
+++ b/src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Buttons styles should render with default styles 1`] = `
-.circuit-16 {
+.circuit-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -16,7 +16,7 @@ exports[`Buttons styles should render with default styles 1`] = `
   justify-content: center;
 }
 
-.circuit-3 {
+.circuit-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -38,183 +38,166 @@ exports[`Buttons styles should render with default styles 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
-  background-color: #D8DDE1;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  overflow: hidden;
-  border-radius: 50%;
+  border-radius: 8px;
   margin-left: 8px;
 }
 
-.circuit-3:focus {
+.circuit-2:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-3:focus::-moz-focus-inner {
+.circuit-2:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-3:disabled,
-.circuit-3[disabled] {
+.circuit-2:disabled,
+.circuit-2[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-3:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+.circuit-2:hover {
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
-.circuit-3:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+.circuit-2:active {
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
-.circuit-3:first-of-type {
+.circuit-2:first-of-type {
   margin-left: 0;
 }
 
-.circuit-3:active,
-.circuit-3:focus,
-.circuit-3:hover {
-  padding: 0;
-}
-
-@media (max-width:479px) {
-  .circuit-3 {
-    width: 24px;
-    height: 24px;
-  }
-
-  .circuit-3 svg {
-    width: 25%;
-  }
-}
-
 .circuit-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
 
 <div
-  class="circuit-16 circuit-17"
+  class="circuit-12 circuit-13"
 >
   <button
-    aria-label="pause"
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
+    title="Pause"
   >
-    <div
-      class="circuit-0 circuit-1"
+    <svg
+      fill="none"
+      height="16"
+      role="presentation"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.5 3v10M11.5 3v10"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-width="2"
+      />
+    </svg>
+    <span
+      class="circuit-0"
     >
-      <svg
-        fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.5 7v10M15.5 7v10"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-width="2"
-        />
-      </svg>
-    </div>
+      Pause
+    </span>
   </button>
   <button
-    aria-label="play"
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
+    title="Play"
   >
-    <div
-      class="circuit-0 circuit-1"
+    <svg
+      fill="none"
+      height="16"
+      role="presentation"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M17 12l-9 5V7l9 5z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
-      </svg>
-    </div>
+      <path
+        d="M13 8l-9 5V3l9 5z"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+      />
+    </svg>
+    <span
+      class="circuit-0"
+    >
+      Play
+    </span>
   </button>
   <button
-    aria-label="previous"
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
+    title="Previous"
   >
-    <div
-      class="circuit-0 circuit-1"
+    <svg
+      fill="none"
+      height="16"
+      role="presentation"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 4L6 8l4 4"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+      />
+    </svg>
+    <span
+      class="circuit-0"
     >
-      <svg
-        fill="none"
-        height="16"
-        viewBox="0 0 16 16"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M10 4L6 8l4 4"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
-      </svg>
-    </div>
+      Previous
+    </span>
   </button>
   <button
-    aria-label="next"
-    class="circuit-2 circuit-3"
+    class="circuit-1 circuit-2"
+    title="Next"
   >
-    <div
-      class="circuit-0 circuit-1"
+    <svg
+      fill="none"
+      height="16"
+      role="presentation"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 12l4-4-4-4"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+      />
+    </svg>
+    <span
+      class="circuit-0"
     >
-      <svg
-        fill="none"
-        height="16"
-        viewBox="0 0 16 16"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 12l4-4-4-4"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
-      </svg>
-    </div>
+      Next
+    </span>
   </button>
 </div>
 `;
diff --git a/src/components/CloseButton/CloseButton.js b/src/components/CloseButton/CloseButton.js
index 89a33ab7f6..01e0e69bb0 100644
--- a/src/components/CloseButton/CloseButton.js
+++ b/src/components/CloseButton/CloseButton.js
@@ -27,7 +27,7 @@ const buttonStyles = () => css`
  * A generic close button.
  */
 const CloseButton = props => (
-  <IconButton variant="secondary" css={buttonStyles} {...props}>
+  <IconButton css={buttonStyles} {...props}>
     <Cross />
   </IconButton>
 );
diff --git a/src/components/CloseButton/__snapshots__/CloseButton.spec.js.snap b/src/components/CloseButton/__snapshots__/CloseButton.spec.js.snap
index 2c74403f36..4bd9633f9c 100644
--- a/src/components/CloseButton/__snapshots__/CloseButton.spec.js.snap
+++ b/src/components/CloseButton/__snapshots__/CloseButton.spec.js.snap
@@ -23,7 +23,6 @@ exports[`CloseButton should render with default styles 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -32,6 +31,7 @@ exports[`CloseButton should render with default styles 1`] = `
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   border: 0;
 }
 
@@ -58,7 +58,7 @@ exports[`CloseButton should render with default styles 1`] = `
 
 .circuit-1:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-0 {
diff --git a/src/components/Hamburger/Hamburger.tsx b/src/components/Hamburger/Hamburger.tsx
index 386b9c6743..707a7b0f34 100644
--- a/src/components/Hamburger/Hamburger.tsx
+++ b/src/components/Hamburger/Hamburger.tsx
@@ -132,12 +132,7 @@ export const Hamburger: FC<HamburgerProps> = ({
   labelInActive = 'Open menu',
   ...props
 }: HamburgerProps) => (
-  <Button
-    label={isActive ? labelActive : labelInActive}
-    variant="secondary"
-    size="kilo"
-    {...props}
-  >
+  <Button label={isActive ? labelActive : labelInActive} {...props}>
     <Box>
       <Layers isActive={isActive} />
     </Box>
diff --git a/src/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap b/src/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap
index 842e047311..f64f31c5f6 100644
--- a/src/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap
+++ b/src/components/Hamburger/__snapshots__/Hamburger.spec.tsx.snap
@@ -23,7 +23,6 @@ exports[`Hamburger should render with active styles when passed the isActive pro
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -32,6 +31,7 @@ exports[`Hamburger should render with active styles when passed the isActive pro
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   border: 0;
 }
 
@@ -58,7 +58,7 @@ exports[`Hamburger should render with active styles when passed the isActive pro
 
 .circuit-3:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-1 {
@@ -197,7 +197,6 @@ exports[`Hamburger should render with default styles 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -206,6 +205,7 @@ exports[`Hamburger should render with default styles 1`] = `
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   border: 0;
 }
 
@@ -232,7 +232,7 @@ exports[`Hamburger should render with default styles 1`] = `
 
 .circuit-3:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-1 {
diff --git a/src/components/Header/Header.story.js b/src/components/Header/Header.story.js
index 3525462669..e396af0707 100644
--- a/src/components/Header/Header.story.js
+++ b/src/components/Header/Header.story.js
@@ -29,6 +29,6 @@ export default {
 
 export const base = () => (
   <Header title="Title" mobileOnly={boolean('mobileOnly')}>
-    <Hamburger light />
+    <Hamburger size="kilo" />
   </Header>
 );
diff --git a/src/components/IconButton/IconButton.story.tsx b/src/components/IconButton/IconButton.story.tsx
index 9a4c1d00a5..cbbeae8b91 100644
--- a/src/components/IconButton/IconButton.story.tsx
+++ b/src/components/IconButton/IconButton.story.tsx
@@ -33,7 +33,7 @@ export const Base = () => (
   <IconButton
     label={text('Label', 'Download')}
     variant={select('Variant', ['primary', 'secondary', 'tertiary'], 'primary')}
-    size={select('Size', ['kilo', 'mega', 'giga'], 'mega')}
+    size={select('Size', ['kilo', 'mega'], 'mega')}
     stretch={boolean('Stretched', false)}
     disabled={boolean('Disabled', false)}
   >
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index 441704626a..80afcf80a7 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -40,8 +40,7 @@ const sizeStyles = (size: IconButtonProps['size'] = 'mega') => (
 ) => {
   const sizeMap = {
     kilo: theme.spacings.byte,
-    mega: theme.spacings.kilo,
-    giga: theme.spacings.mega
+    mega: theme.spacings.kilo
   };
 
   return css({
diff --git a/src/components/IconButton/__snapshots__/IconButton.spec.tsx.snap b/src/components/IconButton/__snapshots__/IconButton.spec.tsx.snap
index 19f2808fef..cd978f36c2 100644
--- a/src/components/IconButton/__snapshots__/IconButton.spec.tsx.snap
+++ b/src/components/IconButton/__snapshots__/IconButton.spec.tsx.snap
@@ -23,15 +23,15 @@ exports[`IconButton should render with the default styles 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-1:focus {
@@ -51,13 +51,13 @@ exports[`IconButton should render with the default styles 1`] = `
 }
 
 .circuit-1:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-1:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-0 {
diff --git a/src/components/LoadingButton/LoadingButton.story.tsx b/src/components/LoadingButton/LoadingButton.story.tsx
index 19f2939ec7..e3d6da76fb 100644
--- a/src/components/LoadingButton/LoadingButton.story.tsx
+++ b/src/components/LoadingButton/LoadingButton.story.tsx
@@ -48,7 +48,7 @@ const StatefulLoadingButton = (props: Partial<LoadingButtonProps>) => {
         ['primary', 'secondary', 'tertiary'],
         'primary'
       )}
-      size={select('Size', ['kilo', 'mega', 'giga'], 'mega')}
+      size={select('Size', ['kilo', 'mega'], 'mega')}
       {...props}
     >
       Things take time
diff --git a/src/components/LoadingButton/__snapshots__/LoadingButton.spec.tsx.snap b/src/components/LoadingButton/__snapshots__/LoadingButton.spec.tsx.snap
index 40d5ceb8b4..a63391abe5 100644
--- a/src/components/LoadingButton/__snapshots__/LoadingButton.spec.tsx.snap
+++ b/src/components/LoadingButton/__snapshots__/LoadingButton.spec.tsx.snap
@@ -37,15 +37,15 @@ exports[`LoadingButton styles should render with default styles 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-3:focus {
@@ -65,13 +65,13 @@ exports[`LoadingButton styles should render with default styles 1`] = `
 }
 
 .circuit-3:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-3:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-1 {
@@ -190,15 +190,15 @@ exports[`LoadingButton styles should render with loading styles 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
 }
 
 .circuit-3:focus {
@@ -218,13 +218,13 @@ exports[`LoadingButton styles should render with loading styles 1`] = `
 }
 
 .circuit-3:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-3:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-0 {
diff --git a/src/components/Pagination/PageButton/PageButton.js b/src/components/Pagination/PageButton/PageButton.js
index d5f685b4c9..fe39ff5f1a 100644
--- a/src/components/Pagination/PageButton/PageButton.js
+++ b/src/components/Pagination/PageButton/PageButton.js
@@ -40,7 +40,7 @@ const baseStyles = ({ theme }) => css`
   }
 `;
 
-const primaryStyles = ({ theme, variant = 'primary' }) =>
+const primaryStyles = ({ theme, variant = 'secondary' }) =>
   variant === 'primary' &&
   css`
     font-weight: bold;
diff --git a/src/components/Pagination/PageButton/__snapshots__/PageButton.spec.js.snap b/src/components/Pagination/PageButton/__snapshots__/PageButton.spec.js.snap
index 5ad2a43ca4..f47a3036ed 100644
--- a/src/components/Pagination/PageButton/__snapshots__/PageButton.spec.js.snap
+++ b/src/components/Pagination/PageButton/__snapshots__/PageButton.spec.js.snap
@@ -23,21 +23,19 @@ exports[`PageButton styles should render with default styles 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
   border-color: #D8DDE1;
-  font-weight: bold;
-  pointer-events: none;
 }
 
 .circuit-1:focus {
@@ -57,13 +55,13 @@ exports[`PageButton styles should render with default styles 1`] = `
 }
 
 .circuit-1:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-1:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-1:focus {
@@ -81,11 +79,6 @@ exports[`PageButton styles should render with default styles 1`] = `
   box-shadow: none;
 }
 
-.circuit-1:hover {
-  border-color: #D8DDE1;
-  box-shadow: none;
-}
-
 <button
   class="circuit-0 circuit-1"
 />
diff --git a/src/components/Pagination/PaginationButton/__snapshots__/PaginationButton.spec.js.snap b/src/components/Pagination/PaginationButton/__snapshots__/PaginationButton.spec.js.snap
index 38bd8f1f13..cd81f3dcd6 100644
--- a/src/components/Pagination/PaginationButton/__snapshots__/PaginationButton.spec.js.snap
+++ b/src/components/Pagination/PaginationButton/__snapshots__/PaginationButton.spec.js.snap
@@ -23,7 +23,6 @@ exports[`PaginationButton styles should render with default styles 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -32,6 +31,7 @@ exports[`PaginationButton styles should render with default styles 1`] = `
   border-color: #9DA7B1;
   color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
@@ -61,7 +61,7 @@ exports[`PaginationButton styles should render with default styles 1`] = `
 
 .circuit-1:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-1:focus {
diff --git a/src/components/Pagination/PaginationContainer/__snapshots__/PaginationContainer.spec.js.snap b/src/components/Pagination/PaginationContainer/__snapshots__/PaginationContainer.spec.js.snap
index e6c0a6a478..10ea80491e 100644
--- a/src/components/Pagination/PaginationContainer/__snapshots__/PaginationContainer.spec.js.snap
+++ b/src/components/Pagination/PaginationContainer/__snapshots__/PaginationContainer.spec.js.snap
@@ -36,15 +36,15 @@ exports[`PaginationContainer styles when the current page is 1 should render wit
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right: 0;
@@ -67,13 +67,13 @@ exports[`PaginationContainer styles when the current page is 1 should render wit
 }
 
 .circuit-1:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-1:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-1:hover {
@@ -103,15 +103,15 @@ exports[`PaginationContainer styles when the current page is 1 should render wit
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -133,13 +133,13 @@ exports[`PaginationContainer styles when the current page is 1 should render wit
 }
 
 .circuit-3:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-3:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <div
@@ -194,15 +194,15 @@ exports[`PaginationContainer styles when the current page is not the first and l
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right: 0;
@@ -225,13 +225,13 @@ exports[`PaginationContainer styles when the current page is not the first and l
 }
 
 .circuit-1:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-1:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-1:hover {
@@ -261,15 +261,15 @@ exports[`PaginationContainer styles when the current page is not the first and l
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -291,13 +291,13 @@ exports[`PaginationContainer styles when the current page is not the first and l
 }
 
 .circuit-3:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-3:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <div
@@ -351,15 +351,15 @@ exports[`PaginationContainer styles when the current page is the last page shoul
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right: 0;
@@ -382,13 +382,13 @@ exports[`PaginationContainer styles when the current page is the last page shoul
 }
 
 .circuit-1:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-1:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-1:hover {
@@ -418,15 +418,15 @@ exports[`PaginationContainer styles when the current page is the last page shoul
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -448,13 +448,13 @@ exports[`PaginationContainer styles when the current page is the last page shoul
 }
 
 .circuit-3:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-3:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <div
diff --git a/src/components/Pagination/__snapshots__/Pagination.spec.js.snap b/src/components/Pagination/__snapshots__/Pagination.spec.js.snap
index f8768fb11f..4d8b1370a3 100644
--- a/src/components/Pagination/__snapshots__/Pagination.spec.js.snap
+++ b/src/components/Pagination/__snapshots__/Pagination.spec.js.snap
@@ -36,15 +36,15 @@ exports[`Pagination styles With 5 or less pages should render only the number of
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right: 0;
@@ -67,13 +67,13 @@ exports[`Pagination styles With 5 or less pages should render only the number of
 }
 
 .circuit-1:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-1:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-1:hover {
@@ -103,7 +103,6 @@ exports[`Pagination styles With 5 or less pages should render only the number of
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -112,6 +111,7 @@ exports[`Pagination styles With 5 or less pages should render only the number of
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
@@ -188,7 +188,6 @@ exports[`Pagination styles With 5 or less pages should render only the number of
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -197,6 +196,7 @@ exports[`Pagination styles With 5 or less pages should render only the number of
   border-color: #9DA7B1;
   color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
@@ -226,7 +226,7 @@ exports[`Pagination styles With 5 or less pages should render only the number of
 
 .circuit-5:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-5:focus {
@@ -266,15 +266,15 @@ exports[`Pagination styles With 5 or less pages should render only the number of
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -296,13 +296,13 @@ exports[`Pagination styles With 5 or less pages should render only the number of
 }
 
 .circuit-13:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-13:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 <div
@@ -395,15 +395,15 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right: 0;
@@ -426,13 +426,13 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
 }
 
 .circuit-1:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-1:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-1:hover {
@@ -462,7 +462,6 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -471,6 +470,7 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
@@ -547,7 +547,6 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -556,6 +555,7 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
   border-color: #9DA7B1;
   color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
@@ -585,7 +585,7 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
 
 .circuit-3:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-3:focus {
@@ -625,15 +625,15 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -655,13 +655,13 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
 }
 
 .circuit-15:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-15:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-5 {
@@ -686,21 +686,20 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
   border-color: #D8DDE1;
-  font-weight: bold;
-  pointer-events: none;
+  opacity: 1 !important;
 }
 
 .circuit-5:focus {
@@ -720,13 +719,13 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
 }
 
 .circuit-5:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-5:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-5:focus {
@@ -746,12 +745,6 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
 
 .circuit-5:hover {
   border-color: #D8DDE1;
-  box-shadow: none;
-  opacity: 1 !important;
-}
-
-.circuit-5:hover:hover {
-  border-color: #D8DDE1;
 }
 
 <div
@@ -849,15 +842,15 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right: 0;
@@ -880,13 +873,13 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
 }
 
 .circuit-1:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-1:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-1:hover {
@@ -916,7 +909,6 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -925,6 +917,7 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
@@ -1001,7 +994,6 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -1010,6 +1002,7 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
   border-color: #9DA7B1;
   color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
@@ -1039,7 +1032,7 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
 
 .circuit-3:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-3:focus {
@@ -1079,15 +1072,15 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -1109,13 +1102,13 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
 }
 
 .circuit-15:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-15:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-5 {
@@ -1140,21 +1133,20 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
   border-color: #D8DDE1;
-  font-weight: bold;
-  pointer-events: none;
+  opacity: 1 !important;
 }
 
 .circuit-5:focus {
@@ -1174,13 +1166,13 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
 }
 
 .circuit-5:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-5:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-5:focus {
@@ -1200,12 +1192,6 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
 
 .circuit-5:hover {
   border-color: #D8DDE1;
-  box-shadow: none;
-  opacity: 1 !important;
-}
-
-.circuit-5:hover:hover {
-  border-color: #D8DDE1;
 }
 
 <div
@@ -1304,15 +1290,15 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right: 0;
@@ -1335,13 +1321,13 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
 }
 
 .circuit-1:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-1:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-1:hover {
@@ -1371,7 +1357,6 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -1380,6 +1365,7 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
@@ -1456,7 +1442,6 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -1465,6 +1450,7 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
   border-color: #9DA7B1;
   color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
@@ -1494,7 +1480,7 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
 
 .circuit-3:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-3:focus {
@@ -1534,15 +1520,15 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -1564,13 +1550,13 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
 }
 
 .circuit-15:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-15:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-11 {
@@ -1595,21 +1581,20 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
   border-color: #D8DDE1;
-  font-weight: bold;
-  pointer-events: none;
+  opacity: 1 !important;
 }
 
 .circuit-11:focus {
@@ -1629,13 +1614,13 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
 }
 
 .circuit-11:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-11:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-11:focus {
@@ -1655,12 +1640,6 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
 
 .circuit-11:hover {
   border-color: #D8DDE1;
-  box-shadow: none;
-  opacity: 1 !important;
-}
-
-.circuit-11:hover:hover {
-  border-color: #D8DDE1;
 }
 
 <div
@@ -1758,15 +1737,15 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right: 0;
@@ -1789,13 +1768,13 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
 }
 
 .circuit-1:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-1:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-1:hover {
@@ -1825,7 +1804,6 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -1834,6 +1812,7 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
@@ -1910,7 +1889,6 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -1919,6 +1897,7 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
   border-color: #9DA7B1;
   color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
@@ -1948,7 +1927,7 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
 
 .circuit-3:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-3:focus {
@@ -1988,15 +1967,15 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -2018,13 +1997,13 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
 }
 
 .circuit-17:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-17:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-5 {
@@ -2049,21 +2028,20 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
   border-color: #D8DDE1;
-  font-weight: bold;
-  pointer-events: none;
+  opacity: 1 !important;
 }
 
 .circuit-5:focus {
@@ -2083,13 +2061,13 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
 }
 
 .circuit-5:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-5:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-5:focus {
@@ -2109,12 +2087,6 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
 
 .circuit-5:hover {
   border-color: #D8DDE1;
-  box-shadow: none;
-  opacity: 1 !important;
-}
-
-.circuit-5:hover:hover {
-  border-color: #D8DDE1;
 }
 
 <div
@@ -2218,15 +2190,15 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-right: 0;
@@ -2249,13 +2221,13 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
 }
 
 .circuit-1:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-1:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-1:hover {
@@ -2285,7 +2257,6 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -2294,6 +2265,7 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
@@ -2370,7 +2342,6 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -2379,6 +2350,7 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
   border-color: #9DA7B1;
   color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
@@ -2408,7 +2380,7 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
 
 .circuit-5:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 .circuit-5:focus {
@@ -2448,15 +2420,15 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -2478,13 +2450,13 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
 }
 
 .circuit-15:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-15:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-11 {
@@ -2509,21 +2481,20 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
-  background-color: #3388FF;
-  border-color: #3388FF;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #9DA7B1;
+  color: #323E49;
   padding: 4px calc(16px - 1px);
+  border-radius: 6px;
   border-radius: 0;
   border-right: 0;
   font-weight: 400;
   border-color: #D8DDE1;
-  font-weight: bold;
-  pointer-events: none;
+  opacity: 1 !important;
 }
 
 .circuit-11:focus {
@@ -2543,13 +2514,13 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
 }
 
 .circuit-11:hover {
-  background-color: #1760CE;
-  border-color: #1760CE;
+  background-color: #FAFBFC;
+  border-color: #5C656F;
 }
 
 .circuit-11:active {
-  background-color: #003C8B;
-  border-color: #003C8B;
+  background-color: #EEF0F2;
+  border-color: #323E49;
 }
 
 .circuit-11:focus {
@@ -2569,12 +2540,6 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
 
 .circuit-11:hover {
   border-color: #D8DDE1;
-  box-shadow: none;
-  opacity: 1 !important;
-}
-
-.circuit-11:hover:hover {
-  border-color: #D8DDE1;
 }
 
 <div
diff --git a/src/components/SearchInput/SearchInput.js b/src/components/SearchInput/SearchInput.js
index 74370c46ad..de9aa04b02 100644
--- a/src/components/SearchInput/SearchInput.js
+++ b/src/components/SearchInput/SearchInput.js
@@ -44,7 +44,6 @@ const SearchInput = ({ children, value, onClear, clearLabel, ...props }) => (
         <ClearButton
           onClick={onClear}
           label={clearLabel}
-          variant="secondary"
           data-testid="input-clear"
           {...renderProps}
         >
diff --git a/src/components/Sidebar/__snapshots__/Sidebar.spec.js.snap b/src/components/Sidebar/__snapshots__/Sidebar.spec.js.snap
index 1691921212..baa5ced953 100644
--- a/src/components/Sidebar/__snapshots__/Sidebar.spec.js.snap
+++ b/src/components/Sidebar/__snapshots__/Sidebar.spec.js.snap
@@ -106,7 +106,6 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -115,6 +114,7 @@ HTMLCollection [
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   border: 0;
   border-radius: 100%;
   position: absolute;
@@ -152,7 +152,7 @@ HTMLCollection [
 
 .circuit-2:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 @media (min-width:960px) {
@@ -269,7 +269,6 @@ HTMLCollection [
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -278,6 +277,7 @@ HTMLCollection [
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   border: 0;
   border-radius: 100%;
   position: absolute;
@@ -313,7 +313,7 @@ HTMLCollection [
 
 .circuit-2:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 @media (min-width:960px) {
diff --git a/src/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap b/src/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap
index 5995b1e319..2ccf41bd6f 100644
--- a/src/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap
+++ b/src/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap
@@ -23,7 +23,6 @@ exports[`CloseButton styles should render and match snapshot when not visible 1`
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -32,6 +31,7 @@ exports[`CloseButton styles should render and match snapshot when not visible 1`
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   border: 0;
   border-radius: 100%;
   position: absolute;
@@ -67,7 +67,7 @@ exports[`CloseButton styles should render and match snapshot when not visible 1`
 
 .circuit-2:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 @media (min-width:960px) {
@@ -152,7 +152,6 @@ exports[`CloseButton styles should render and match snapshot when visible 1`] =
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -161,6 +160,7 @@ exports[`CloseButton styles should render and match snapshot when visible 1`] =
   border-color: #9DA7B1;
   color: #323E49;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   border: 0;
   border-radius: 100%;
   position: absolute;
@@ -198,7 +198,7 @@ exports[`CloseButton styles should render and match snapshot when visible 1`] =
 
 .circuit-2:active {
   background-color: #EEF0F2;
-  border-color: #5C656F;
+  border-color: #323E49;
 }
 
 @media (min-width:960px) {
diff --git a/src/components/Tag/__snapshots__/Tag.spec.js.snap b/src/components/Tag/__snapshots__/Tag.spec.js.snap
index 8a8f0034c2..d415db2897 100644
--- a/src/components/Tag/__snapshots__/Tag.spec.js.snap
+++ b/src/components/Tag/__snapshots__/Tag.spec.js.snap
@@ -110,7 +110,6 @@ exports[`Tag when is selected should change the close icon color 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 700;
-  border-radius: 5px;
   border-width: 1px;
   border-style: solid;
   -webkit-transition: opacity 200ms ease-in-out;
@@ -119,6 +118,7 @@ exports[`Tag when is selected should change the close icon color 1`] = `
   border-color: #3388FF;
   color: #FFFFFF;
   padding: 8px calc(24px - 1px);
+  border-radius: 8px;
   border: 0;
   margin-left: 4px;
   margin-right: -4px;
diff --git a/yarn.lock b/yarn.lock
index fca1e2dfbe..2df874be16 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2611,9 +2611,9 @@
     yargs "^12.0.5"
 
 "@sumup/icons@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@sumup/icons/-/icons-1.0.0.tgz#4acba5ea8038b7cef234cc2628f5bb74ba2aa0f0"
-  integrity sha512-SpY/Tyxv7sSOc0TMiTjGycjnaFvOHrt4ltHYdhB73v44zhBh5R7qm23NS7uIRpoioGhcVKTkIiAg6cxrhUhBYQ==
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@sumup/icons/-/icons-1.0.1.tgz#50c76cc64fbb576dbd818d4ddc3af3d35b15bba3"
+  integrity sha512-NkWjLKU1tnFcgBe6beRDS0LE9E4Kwb/d8Mb2SV+dv3tSb52r/SYOvPS2/NPpVCuOblqxf27Fwswo0XPPEEyyEg==
 
 "@sumup/intl@^1.0.0":
   version "1.0.0"