diff --git a/package.json b/package.json
index 705208959..e81ecfae0 100644
--- a/package.json
+++ b/package.json
@@ -138,8 +138,8 @@
     "polished": "4.0.3",
     "react-popper": "2.2.3",
     "react-svg": "11.1.0",
-    "suomifi-design-tokens": "^2.0.0",
-    "suomifi-icons": "^1.0.2",
+    "suomifi-design-tokens": "^3.0.0",
+    "suomifi-icons": "^1.1.1",
     "uuid": "8.3.1"
   },
   "peerDependencies": {
diff --git a/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
index 6a32771bf..690427b3e 100644
--- a/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -166,7 +166,7 @@ exports[`calling render with the same component on the same container does not r
 .c5:focus {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
 }
 
 .c5:hover,
diff --git a/src/core/Button/__snapshots__/Button.test.tsx.snap b/src/core/Button/__snapshots__/Button.test.tsx.snap
index 04621fe45..abb4eb163 100644
--- a/src/core/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/core/Button/__snapshots__/Button.test.tsx.snap
@@ -97,7 +97,7 @@ exports[`calling render with the same component on the same container does not r
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
diff --git a/src/core/Chip/__snapshots__/Chip.test.tsx.snap b/src/core/Chip/__snapshots__/Chip.test.tsx.snap
index 1568de0f9..877384f43 100644
--- a/src/core/Chip/__snapshots__/Chip.test.tsx.snap
+++ b/src/core/Chip/__snapshots__/Chip.test.tsx.snap
@@ -107,7 +107,7 @@ exports[`children should match snapshot 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
   border-radius: 16px;
 }
@@ -295,7 +295,7 @@ exports[`classnames should match snapshot 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
   border-radius: 16px;
 }
@@ -479,7 +479,7 @@ exports[`disabled should match snapshot 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
   border-radius: 16px;
 }
diff --git a/src/core/Colors/__snapshots__/Colors.test.tsx.snap b/src/core/Colors/__snapshots__/Colors.test.tsx.snap
index 1ec777cca..28003b314 100644
--- a/src/core/Colors/__snapshots__/Colors.test.tsx.snap
+++ b/src/core/Colors/__snapshots__/Colors.test.tsx.snap
@@ -462,7 +462,7 @@ exports[`check that snapshot matches 1`] = `
   height: 196px;
   max-width: 100%;
   color: #000;
-  border-bottom: 4px solid hsl(202,7%,67%);
+  border-bottom: 4px solid hsl(201,7%,46%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -550,7 +550,7 @@ exports[`check that snapshot matches 1`] = `
   height: 196px;
   max-width: 100%;
   color: #000;
-  border-bottom: 4px solid hsl(202,7%,97%);
+  border-bottom: 4px solid hsl(201,7%,58%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -638,7 +638,7 @@ exports[`check that snapshot matches 1`] = `
   height: 196px;
   max-width: 100%;
   color: #000;
-  border-bottom: 4px solid hsl(202,7%,93%);
+  border-bottom: 4px solid hsl(202,7%,67%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -726,7 +726,7 @@ exports[`check that snapshot matches 1`] = `
   height: 196px;
   max-width: 100%;
   color: #000;
-  border-bottom: 4px solid hsl(202,7%,80%);
+  border-bottom: 4px solid hsl(202,7%,97%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -814,7 +814,7 @@ exports[`check that snapshot matches 1`] = `
   height: 196px;
   max-width: 100%;
   color: #000;
-  border-bottom: 4px solid hsl(215,100%,91%);
+  border-bottom: 4px solid hsl(202,7%,93%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -902,7 +902,7 @@ exports[`check that snapshot matches 1`] = `
   height: 196px;
   max-width: 100%;
   color: #000;
-  border-bottom: 4px solid hsl(215,100%,97%);
+  border-bottom: 4px solid hsl(202,7%,80%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -989,8 +989,8 @@ exports[`check that snapshot matches 1`] = `
   width: 208px;
   height: 196px;
   max-width: 100%;
-  color: #fff;
-  border-bottom: 4px solid hsl(212,63%,37%);
+  color: #000;
+  border-bottom: 4px solid hsl(215,100%,91%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -998,7 +998,7 @@ exports[`check that snapshot matches 1`] = `
 }
 
 .c12:hover {
-  border-bottom-color: #fff;
+  border-bottom-color: #000;
 }
 
 .c12 figcaption {
@@ -1077,8 +1077,8 @@ exports[`check that snapshot matches 1`] = `
   width: 208px;
   height: 196px;
   max-width: 100%;
-  color: #fff;
-  border-bottom: 4px solid hsl(212,63%,45%);
+  color: #000;
+  border-bottom: 4px solid hsl(215,100%,97%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -1086,7 +1086,7 @@ exports[`check that snapshot matches 1`] = `
 }
 
 .c13:hover {
-  border-bottom-color: #fff;
+  border-bottom-color: #000;
 }
 
 .c13 figcaption {
@@ -1165,8 +1165,8 @@ exports[`check that snapshot matches 1`] = `
   width: 208px;
   height: 196px;
   max-width: 100%;
-  color: #000;
-  border-bottom: 4px solid hsl(212,63%,49%);
+  color: #fff;
+  border-bottom: 4px solid hsl(212,63%,37%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -1174,7 +1174,7 @@ exports[`check that snapshot matches 1`] = `
 }
 
 .c14:hover {
-  border-bottom-color: #000;
+  border-bottom-color: #fff;
 }
 
 .c14 figcaption {
@@ -1253,8 +1253,8 @@ exports[`check that snapshot matches 1`] = `
   width: 208px;
   height: 196px;
   max-width: 100%;
-  color: #000;
-  border-bottom: 4px solid hsl(212,63%,90%);
+  color: #fff;
+  border-bottom: 4px solid hsl(212,63%,45%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -1262,7 +1262,7 @@ exports[`check that snapshot matches 1`] = `
 }
 
 .c15:hover {
-  border-bottom-color: #000;
+  border-bottom-color: #fff;
 }
 
 .c15 figcaption {
@@ -1342,7 +1342,7 @@ exports[`check that snapshot matches 1`] = `
   height: 196px;
   max-width: 100%;
   color: #000;
-  border-bottom: 4px solid hsl(212,63%,95%);
+  border-bottom: 4px solid hsl(212,63%,49%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -1430,7 +1430,7 @@ exports[`check that snapshot matches 1`] = `
   height: 196px;
   max-width: 100%;
   color: #000;
-  border-bottom: 4px solid hsl(212,63%,98%);
+  border-bottom: 4px solid hsl(212,63%,90%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -1518,7 +1518,7 @@ exports[`check that snapshot matches 1`] = `
   height: 196px;
   max-width: 100%;
   color: #000;
-  border-bottom: 4px solid hsl(23,82%,53%);
+  border-bottom: 4px solid hsl(212,63%,95%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -1606,7 +1606,7 @@ exports[`check that snapshot matches 1`] = `
   height: 196px;
   max-width: 100%;
   color: #000;
-  border-bottom: 4px solid hsl(196,77%,55%);
+  border-bottom: 4px solid hsl(212,63%,98%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -1694,7 +1694,7 @@ exports[`check that snapshot matches 1`] = `
   height: 196px;
   max-width: 100%;
   color: #000;
-  border-bottom: 4px solid hsl(196,77%,95%);
+  border-bottom: 4px solid hsl(23,82%,53%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -1781,8 +1781,8 @@ exports[`check that snapshot matches 1`] = `
   width: 208px;
   height: 196px;
   max-width: 100%;
-  color: #fff;
-  border-bottom: 4px solid hsl(284,36%,45%);
+  color: #000;
+  border-bottom: 4px solid hsl(196,77%,44%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -1790,7 +1790,7 @@ exports[`check that snapshot matches 1`] = `
 }
 
 .c21:hover {
-  border-bottom-color: #fff;
+  border-bottom-color: #000;
 }
 
 .c21 figcaption {
@@ -1870,7 +1870,7 @@ exports[`check that snapshot matches 1`] = `
   height: 196px;
   max-width: 100%;
   color: #000;
-  border-bottom: 4px solid hsl(284,36%,54%);
+  border-bottom: 4px solid hsl(196,77%,97%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -1957,8 +1957,8 @@ exports[`check that snapshot matches 1`] = `
   width: 208px;
   height: 196px;
   max-width: 100%;
-  color: #000;
-  border-bottom: 4px solid hsl(166,90%,36%);
+  color: #fff;
+  border-bottom: 4px solid hsl(284,36%,45%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -1966,7 +1966,7 @@ exports[`check that snapshot matches 1`] = `
 }
 
 .c23:hover {
-  border-bottom-color: #000;
+  border-bottom-color: #fff;
 }
 
 .c23 figcaption {
@@ -2046,7 +2046,7 @@ exports[`check that snapshot matches 1`] = `
   height: 196px;
   max-width: 100%;
   color: #000;
-  border-bottom: 4px solid hsl(166,54%,80%);
+  border-bottom: 4px solid hsl(284,36%,54%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -2134,7 +2134,7 @@ exports[`check that snapshot matches 1`] = `
   height: 196px;
   max-width: 100%;
   color: #000;
-  border-bottom: 4px solid hsl(42,100%,49%);
+  border-bottom: 4px solid hsl(166,90%,34%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -2221,8 +2221,8 @@ exports[`check that snapshot matches 1`] = `
   width: 208px;
   height: 196px;
   max-width: 100%;
-  color: #fff;
-  border-bottom: 4px solid hsl(3,59%,48%);
+  color: #000;
+  border-bottom: 4px solid hsl(166,54%,80%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -2230,7 +2230,7 @@ exports[`check that snapshot matches 1`] = `
 }
 
 .c26:hover {
-  border-bottom-color: #fff;
+  border-bottom-color: #000;
 }
 
 .c26 figcaption {
@@ -2310,7 +2310,7 @@ exports[`check that snapshot matches 1`] = `
   height: 196px;
   max-width: 100%;
   color: #000;
-  border-bottom: 4px solid hsl(3,59%,95%);
+  border-bottom: 4px solid hsl(42,100%,49%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -2377,6 +2377,182 @@ exports[`check that snapshot matches 1`] = `
   text-decoration: underline;
 }
 
+.c28 {
+  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
+  font-size: 18px;
+  line-height: 1.5;
+  font-weight: 400;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  float: left;
+  width: 208px;
+  height: 196px;
+  max-width: 100%;
+  color: #fff;
+  border-bottom: 4px solid hsl(3,59%,48%);
+  cursor: pointer;
+  z-index: 2;
+  position: relative;
+  margin: 0;
+}
+
+.c28:hover {
+  border-bottom-color: #fff;
+}
+
+.c28 figcaption {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+}
+
+.c28 svg {
+  width: 100%;
+  height: 100%;
+}
+
+.c28 svg rect {
+  width: 100%;
+  height: 100%;
+}
+
+.c28 .fi-color_name {
+  position: relative;
+  width: 100%;
+  text-align: right;
+  overflow-wrap: break-word;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.c28 .fi-color_name--hex {
+  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 400;
+  opacity: .4;
+}
+
+.c28 .fi-color_name--key {
+  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
+  font-size: 18px;
+  line-height: 1.5;
+  font-weight: 600;
+}
+
+.c28:hover .fi-color_name--key {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c29 {
+  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
+  font-size: 18px;
+  line-height: 1.5;
+  font-weight: 400;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  float: left;
+  width: 208px;
+  height: 196px;
+  max-width: 100%;
+  color: #000;
+  border-bottom: 4px solid hsl(0,59%,96%);
+  cursor: pointer;
+  z-index: 2;
+  position: relative;
+  margin: 0;
+}
+
+.c29:hover {
+  border-bottom-color: #000;
+}
+
+.c29 figcaption {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+}
+
+.c29 svg {
+  width: 100%;
+  height: 100%;
+}
+
+.c29 svg rect {
+  width: 100%;
+  height: 100%;
+}
+
+.c29 .fi-color_name {
+  position: relative;
+  width: 100%;
+  text-align: right;
+  overflow-wrap: break-word;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.c29 .fi-color_name--hex {
+  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 400;
+  opacity: .4;
+}
+
+.c29 .fi-color_name--key {
+  font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
+  font-size: 18px;
+  line-height: 1.5;
+  font-weight: 600;
+}
+
+.c29:hover .fi-color_name--key {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
 .c0:after {
   display: block;
   content: '';
@@ -2563,6 +2739,76 @@ exports[`check that snapshot matches 1`] = `
   </figure>
   <figure
     class="c6"
+    color="hsl(201, 7%, 46%)"
+    tabindex="0"
+  >
+    <figcaption>
+      <div
+        class="fi-color__name"
+      >
+        hsl(201, 7%, 46%)
+      </div>
+      <div
+        class="fi-color__name fi-color__name--hex"
+      >
+        #6d787e
+      </div>
+      <div
+        class="fi-color__name fi-color__name--key"
+      >
+        depthDark2
+      </div>
+    </figcaption>
+    <svg
+      aria-label="hsl(201, 7%, 46%)"
+      role="img"
+    >
+      <rect
+        fill="hsl(201, 7%, 46%)"
+      >
+        <title>
+          depthDark2
+        </title>
+      </rect>
+    </svg>
+  </figure>
+  <figure
+    class="c7"
+    color="hsl(201, 7%, 58%)"
+    tabindex="0"
+  >
+    <figcaption>
+      <div
+        class="fi-color__name"
+      >
+        hsl(201, 7%, 58%)
+      </div>
+      <div
+        class="fi-color__name fi-color__name--hex"
+      >
+        #8c969b
+      </div>
+      <div
+        class="fi-color__name fi-color__name--key"
+      >
+        depthDark3
+      </div>
+    </figcaption>
+    <svg
+      aria-label="hsl(201, 7%, 58%)"
+      role="img"
+    >
+      <rect
+        fill="hsl(201, 7%, 58%)"
+      >
+        <title>
+          depthDark3
+        </title>
+      </rect>
+    </svg>
+  </figure>
+  <figure
+    class="c8"
     color="hsl(202, 7%, 67%)"
     tabindex="0"
   >
@@ -2597,7 +2843,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c7"
+    class="c9"
     color="hsl(202, 7%, 97%)"
     tabindex="0"
   >
@@ -2632,7 +2878,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c8"
+    class="c10"
     color="hsl(202, 7%, 93%)"
     tabindex="0"
   >
@@ -2667,7 +2913,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c9"
+    class="c11"
     color="hsl(202, 7%, 80%)"
     tabindex="0"
   >
@@ -2702,7 +2948,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c10"
+    class="c12"
     color="hsl(215, 100%, 91%)"
     tabindex="0"
   >
@@ -2737,7 +2983,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c11"
+    class="c13"
     color="hsl(215, 100%, 97%)"
     tabindex="0"
   >
@@ -2772,7 +3018,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c12"
+    class="c14"
     color="hsl(212, 63%, 37%)"
     tabindex="0"
   >
@@ -2807,7 +3053,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c13"
+    class="c15"
     color="hsl(212, 63%, 45%)"
     tabindex="0"
   >
@@ -2842,7 +3088,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c14"
+    class="c16"
     color="hsl(212, 63%, 49%)"
     tabindex="0"
   >
@@ -2877,7 +3123,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c15"
+    class="c17"
     color="hsl(212, 63%, 90%)"
     tabindex="0"
   >
@@ -2912,7 +3158,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c16"
+    class="c18"
     color="hsl(212, 63%, 95%)"
     tabindex="0"
   >
@@ -2947,7 +3193,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c17"
+    class="c19"
     color="hsl(212, 63%, 98%)"
     tabindex="0"
   >
@@ -2982,7 +3228,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c18"
+    class="c20"
     color="hsl(23, 82%, 53%)"
     tabindex="0"
   >
@@ -3017,20 +3263,20 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c19"
-    color="hsl(196, 77%, 55%)"
+    class="c21"
+    color="hsl(196, 77%, 44%)"
     tabindex="0"
   >
     <figcaption>
       <div
         class="fi-color__name"
       >
-        hsl(196, 77%, 55%)
+        hsl(196, 77%, 44%)
       </div>
       <div
         class="fi-color__name fi-color__name--hex"
       >
-        #34b5e5
+        #1a99c7
       </div>
       <div
         class="fi-color__name fi-color__name--key"
@@ -3039,11 +3285,11 @@ exports[`check that snapshot matches 1`] = `
       </div>
     </figcaption>
     <svg
-      aria-label="hsl(196, 77%, 55%)"
+      aria-label="hsl(196, 77%, 44%)"
       role="img"
     >
       <rect
-        fill="hsl(196, 77%, 55%)"
+        fill="hsl(196, 77%, 44%)"
       >
         <title>
           accentSecondary
@@ -3052,20 +3298,20 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c20"
-    color="hsl(196, 77%, 95%)"
+    class="c22"
+    color="hsl(196, 77%, 97%)"
     tabindex="0"
   >
     <figcaption>
       <div
         class="fi-color__name"
       >
-        hsl(196, 77%, 95%)
+        hsl(196, 77%, 97%)
       </div>
       <div
         class="fi-color__name fi-color__name--hex"
       >
-        #e8f7fc
+        #f1fafd
       </div>
       <div
         class="fi-color__name fi-color__name--key"
@@ -3074,11 +3320,11 @@ exports[`check that snapshot matches 1`] = `
       </div>
     </figcaption>
     <svg
-      aria-label="hsl(196, 77%, 95%)"
+      aria-label="hsl(196, 77%, 97%)"
       role="img"
     >
       <rect
-        fill="hsl(196, 77%, 95%)"
+        fill="hsl(196, 77%, 97%)"
       >
         <title>
           accentSecondaryLight1
@@ -3087,7 +3333,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c21"
+    class="c23"
     color="hsl(284, 36%, 45%)"
     tabindex="0"
   >
@@ -3122,7 +3368,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c22"
+    class="c24"
     color="hsl(284, 36%, 54%)"
     tabindex="0"
   >
@@ -3157,20 +3403,20 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c23"
-    color="hsl(166, 90%, 36%)"
+    class="c25"
+    color="hsl(166, 90%, 34%)"
     tabindex="0"
   >
     <figcaption>
       <div
         class="fi-color__name"
       >
-        hsl(166, 90%, 36%)
+        hsl(166, 90%, 34%)
       </div>
       <div
         class="fi-color__name fi-color__name--hex"
       >
-        #09ae88
+        #09a580
       </div>
       <div
         class="fi-color__name fi-color__name--key"
@@ -3179,11 +3425,11 @@ exports[`check that snapshot matches 1`] = `
       </div>
     </figcaption>
     <svg
-      aria-label="hsl(166, 90%, 36%)"
+      aria-label="hsl(166, 90%, 34%)"
       role="img"
     >
       <rect
-        fill="hsl(166, 90%, 36%)"
+        fill="hsl(166, 90%, 34%)"
       >
         <title>
           successBase
@@ -3192,7 +3438,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c24"
+    class="c26"
     color="hsl(166, 54%, 80%)"
     tabindex="0"
   >
@@ -3227,7 +3473,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c25"
+    class="c27"
     color="hsl(42, 100%, 49%)"
     tabindex="0"
   >
@@ -3262,7 +3508,7 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c26"
+    class="c28"
     color="hsl(3, 59%, 48%)"
     tabindex="0"
   >
@@ -3297,20 +3543,20 @@ exports[`check that snapshot matches 1`] = `
     </svg>
   </figure>
   <figure
-    class="c27"
-    color="hsl(3, 59%, 95%)"
+    class="c29"
+    color="hsl(0, 59%, 96%)"
     tabindex="0"
   >
     <figcaption>
       <div
         class="fi-color__name"
       >
-        hsl(3, 59%, 95%)
+        hsl(0, 59%, 96%)
       </div>
       <div
         class="fi-color__name fi-color__name--hex"
       >
-        #faebeb
+        #fbefef
       </div>
       <div
         class="fi-color__name fi-color__name--key"
@@ -3319,11 +3565,11 @@ exports[`check that snapshot matches 1`] = `
       </div>
     </figcaption>
     <svg
-      aria-label="hsl(3, 59%, 95%)"
+      aria-label="hsl(0, 59%, 96%)"
       role="img"
     >
       <rect
-        fill="hsl(3, 59%, 95%)"
+        fill="hsl(0, 59%, 96%)"
       >
         <title>
           alertLight1
diff --git a/src/core/Dropdown/Dropdown.baseStyles.tsx b/src/core/Dropdown/Dropdown.baseStyles.tsx
index 0d371c703..11c6cc707 100644
--- a/src/core/Dropdown/Dropdown.baseStyles.tsx
+++ b/src/core/Dropdown/Dropdown.baseStyles.tsx
@@ -19,6 +19,7 @@ export const baseStyles = withSuomifiTheme(
       overflow-wrap: break-word;
       min-height: 22px;
       padding: 7px 38px 7px 7px;
+      border-color: ${theme.colors.depthDark3};
       text-align: left;
       line-height: 1.5;
       background-color: ${theme.colors.whiteBase};
@@ -41,12 +42,12 @@ export const baseStyles = withSuomifiTheme(
         right: 16px;
         margin-top: -3px;
         border-style: solid;
-        border-color: ${theme.colors.depthDark1} transparent transparent
+        border-color: ${theme.colors.depthDark3} transparent transparent
           transparent;
         border-width: 6px 4px 0 4px;
       }
       &[aria-expanded='true']:before {
-        border-color: transparent transparent ${theme.colors.depthDark1}
+        border-color: transparent transparent ${theme.colors.depthDark3}
           transparent;
         border-width: 0 4px 6px 4px;
       }
@@ -75,7 +76,7 @@ export const listboxPopoverStyles = withSuomifiTheme(
       font-size: 100%;
       border: 0;
       background-color: ${theme.colors.whiteBase};
-      border-color: ${theme.colors.depthLight1};
+      border-color: ${theme.colors.depthDark3};
       border-style: solid;
       border-width: 0 1px 1px 1px;
       border-radius: 0px 0px ${theme.radius.basic} ${theme.radius.basic};
diff --git a/src/core/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/src/core/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index 3b03ed389..e7f88c999 100644
--- a/src/core/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/src/core/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -114,6 +114,7 @@ exports[`Basic dropdown should match snapshot 1`] = `
   overflow-wrap: break-word;
   min-height: 22px;
   padding: 7px 38px 7px 7px;
+  border-color: hsl(201,7%,58%);
   text-align: left;
   line-height: 1.5;
   background-color: hsl(0,0%,100%);
@@ -138,7 +139,7 @@ exports[`Basic dropdown should match snapshot 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
@@ -149,12 +150,12 @@ exports[`Basic dropdown should match snapshot 1`] = `
   right: 16px;
   margin-top: -3px;
   border-style: solid;
-  border-color: hsl(202,7%,40%) transparent transparent transparent;
+  border-color: hsl(201,7%,58%) transparent transparent transparent;
   border-width: 6px 4px 0 4px;
 }
 
 .c1 [data-reach-listbox-button].fi-dropdown_button[aria-expanded='true']:before {
-  border-color: transparent transparent hsl(202,7%,40%) transparent;
+  border-color: transparent transparent hsl(201,7%,58%) transparent;
   border-width: 0 4px 6px 4px;
 }
 
@@ -329,6 +330,7 @@ exports[`Controlled Dropdown should match snapshot 1`] = `
   overflow-wrap: break-word;
   min-height: 22px;
   padding: 7px 38px 7px 7px;
+  border-color: hsl(201,7%,58%);
   text-align: left;
   line-height: 1.5;
   background-color: hsl(0,0%,100%);
@@ -353,7 +355,7 @@ exports[`Controlled Dropdown should match snapshot 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
@@ -364,12 +366,12 @@ exports[`Controlled Dropdown should match snapshot 1`] = `
   right: 16px;
   margin-top: -3px;
   border-style: solid;
-  border-color: hsl(202,7%,40%) transparent transparent transparent;
+  border-color: hsl(201,7%,58%) transparent transparent transparent;
   border-width: 6px 4px 0 4px;
 }
 
 .c1 [data-reach-listbox-button].fi-dropdown_button[aria-expanded='true']:before {
-  border-color: transparent transparent hsl(202,7%,40%) transparent;
+  border-color: transparent transparent hsl(201,7%,58%) transparent;
   border-width: 0 4px 6px 4px;
 }
 
@@ -545,6 +547,7 @@ exports[`Dropdown as action menu should match snapshot 1`] = `
   overflow-wrap: break-word;
   min-height: 22px;
   padding: 7px 38px 7px 7px;
+  border-color: hsl(201,7%,58%);
   text-align: left;
   line-height: 1.5;
   background-color: hsl(0,0%,100%);
@@ -569,7 +572,7 @@ exports[`Dropdown as action menu should match snapshot 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
@@ -580,12 +583,12 @@ exports[`Dropdown as action menu should match snapshot 1`] = `
   right: 16px;
   margin-top: -3px;
   border-style: solid;
-  border-color: hsl(202,7%,40%) transparent transparent transparent;
+  border-color: hsl(201,7%,58%) transparent transparent transparent;
   border-width: 6px 4px 0 4px;
 }
 
 .c1 [data-reach-listbox-button].fi-dropdown_button[aria-expanded='true']:before {
-  border-color: transparent transparent hsl(202,7%,40%) transparent;
+  border-color: transparent transparent hsl(201,7%,58%) transparent;
   border-width: 0 4px 6px 4px;
 }
 
@@ -760,6 +763,7 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = `
   overflow-wrap: break-word;
   min-height: 22px;
   padding: 7px 38px 7px 7px;
+  border-color: hsl(201,7%,58%);
   text-align: left;
   line-height: 1.5;
   background-color: hsl(0,0%,100%);
@@ -784,7 +788,7 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
@@ -795,12 +799,12 @@ exports[`Dropdown with additional aria-label should match snapshot 1`] = `
   right: 16px;
   margin-top: -3px;
   border-style: solid;
-  border-color: hsl(202,7%,40%) transparent transparent transparent;
+  border-color: hsl(201,7%,58%) transparent transparent transparent;
   border-width: 6px 4px 0 4px;
 }
 
 .c1 [data-reach-listbox-button].fi-dropdown_button[aria-expanded='true']:before {
-  border-color: transparent transparent hsl(202,7%,40%) transparent;
+  border-color: transparent transparent hsl(201,7%,58%) transparent;
   border-width: 0 4px 6px 4px;
 }
 
@@ -963,6 +967,7 @@ exports[`Dropdown with hidden label should match snapshot 1`] = `
   overflow-wrap: break-word;
   min-height: 22px;
   padding: 7px 38px 7px 7px;
+  border-color: hsl(201,7%,58%);
   text-align: left;
   line-height: 1.5;
   background-color: hsl(0,0%,100%);
@@ -987,7 +992,7 @@ exports[`Dropdown with hidden label should match snapshot 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
@@ -998,12 +1003,12 @@ exports[`Dropdown with hidden label should match snapshot 1`] = `
   right: 16px;
   margin-top: -3px;
   border-style: solid;
-  border-color: hsl(202,7%,40%) transparent transparent transparent;
+  border-color: hsl(201,7%,58%) transparent transparent transparent;
   border-width: 6px 4px 0 4px;
 }
 
 .c1 [data-reach-listbox-button].fi-dropdown_button[aria-expanded='true']:before {
-  border-color: transparent transparent hsl(202,7%,40%) transparent;
+  border-color: transparent transparent hsl(201,7%,58%) transparent;
   border-width: 0 4px 6px 4px;
 }
 
diff --git a/src/core/Expander/__snapshots__/Expander.test.tsx.snap b/src/core/Expander/__snapshots__/Expander.test.tsx.snap
index e0173fa69..137de9c8d 100644
--- a/src/core/Expander/__snapshots__/Expander.test.tsx.snap
+++ b/src/core/Expander/__snapshots__/Expander.test.tsx.snap
@@ -186,7 +186,7 @@ exports[`calling render with the same component on the same container does not r
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
diff --git a/src/core/Expander/__snapshots__/ExpanderGroup.test.tsx.snap b/src/core/Expander/__snapshots__/ExpanderGroup.test.tsx.snap
index b747f7045..3a66dcdd5 100644
--- a/src/core/Expander/__snapshots__/ExpanderGroup.test.tsx.snap
+++ b/src/core/Expander/__snapshots__/ExpanderGroup.test.tsx.snap
@@ -216,7 +216,7 @@ exports[`calling render with the same component on the same container does not r
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
@@ -302,7 +302,7 @@ exports[`calling render with the same component on the same container does not r
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
diff --git a/src/core/Form/Checkbox/Checkbox.baseStyles.tsx b/src/core/Form/Checkbox/Checkbox.baseStyles.tsx
index 9e7ade290..e81b7d6e6 100644
--- a/src/core/Form/Checkbox/Checkbox.baseStyles.tsx
+++ b/src/core/Form/Checkbox/Checkbox.baseStyles.tsx
@@ -75,7 +75,7 @@ const largeVariantStyles = ({ theme }: SuomifiThemeProp) => css`
         box-sizing: border-box;
         height: 30px;
         width: 30px;
-        color: ${theme.colors.depthBase};
+        color: ${theme.colors.depthDark3};
         border: 2px solid;
       }
       & .fi-checkbox_icon {
@@ -112,8 +112,7 @@ export const baseStyles = withSuomifiTheme(
         box-sizing: border-box;
         height: 18px;
         width: 18px;
-        color: ${theme.colors.depthBase};
-        border: 1px solid;
+        border: 1px solid ${theme.colors.depthDark3};
         border-radius: ${theme.radius.basic};
         background-color: ${theme.colors.whiteBase};
       }
diff --git a/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 5ed7a2a8f..cba26c300 100644
--- a/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/core/Form/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -108,8 +108,7 @@ exports[`props children has matching snapshot 1`] = `
   box-sizing: border-box;
   height: 18px;
   width: 18px;
-  color: hsl(202,7%,67%);
-  border: 1px solid;
+  border: 1px solid hsl(201,7%,58%);
   border-radius: 2px;
   background-color: hsl(0,0%,100%);
 }
@@ -125,7 +124,7 @@ exports[`props children has matching snapshot 1`] = `
 .c1:focus-within .fi-checkbox_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
 }
 
 .c1 .fi-checkbox_input {
@@ -166,7 +165,7 @@ exports[`props children has matching snapshot 1`] = `
   box-sizing: border-box;
   height: 30px;
   width: 30px;
-  color: hsl(202,7%,67%);
+  color: hsl(201,7%,58%);
   border: 2px solid;
 }
 
diff --git a/src/core/Form/RadioButton/RadioButton.baseStyles.tsx b/src/core/Form/RadioButton/RadioButton.baseStyles.tsx
index 22a9689d0..af73ca3d8 100644
--- a/src/core/Form/RadioButton/RadioButton.baseStyles.tsx
+++ b/src/core/Form/RadioButton/RadioButton.baseStyles.tsx
@@ -40,7 +40,7 @@ export const baseStyles = withSuomifiTheme(
             width: 16px;
             height: 16px;
             border-radius: 50%;
-            border: 1px solid ${theme.colors.depthBase};
+            border: 1px solid ${theme.colors.depthDark3};
             background: transparent;
           }
           /* Radio input circle when selected */
diff --git a/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap
index 68a034a43..a07dc04c1 100644
--- a/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap
+++ b/src/core/Form/RadioButton/__snapshots__/RadioButton.test.tsx.snap
@@ -124,7 +124,7 @@ exports[`children should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -150,7 +150,7 @@ exports[`children should match snapshot 1`] = `
 .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
@@ -371,7 +371,7 @@ exports[`className should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -397,7 +397,7 @@ exports[`className should match snapshot 1`] = `
 .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
@@ -618,7 +618,7 @@ exports[`disabled should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -644,7 +644,7 @@ exports[`disabled should match snapshot 1`] = `
 .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
@@ -890,7 +890,7 @@ exports[`hintText should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -916,7 +916,7 @@ exports[`hintText should match snapshot 1`] = `
 .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
@@ -1144,7 +1144,7 @@ exports[`id should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -1170,7 +1170,7 @@ exports[`id should match snapshot 1`] = `
 .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
@@ -1391,7 +1391,7 @@ exports[`name should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -1417,7 +1417,7 @@ exports[`name should match snapshot 1`] = `
 .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
@@ -1639,7 +1639,7 @@ exports[`value should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -1665,7 +1665,7 @@ exports[`value should match snapshot 1`] = `
 .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
@@ -1886,7 +1886,7 @@ exports[`variant should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -1912,7 +1912,7 @@ exports[`variant should match snapshot 1`] = `
 .c1.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
diff --git a/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap b/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
index 6db4935e9..a0534107d 100644
--- a/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
+++ b/src/core/Form/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
@@ -189,7 +189,7 @@ exports[`default, with only required props should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -215,7 +215,7 @@ exports[`default, with only required props should match snapshot 1`] = `
 .c3.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
@@ -553,7 +553,7 @@ exports[`props className should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -579,7 +579,7 @@ exports[`props className should match snapshot 1`] = `
 .c3.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
@@ -917,7 +917,7 @@ exports[`props defaultValue should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -943,7 +943,7 @@ exports[`props defaultValue should match snapshot 1`] = `
 .c3.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
@@ -1282,7 +1282,7 @@ exports[`props hintText should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -1308,7 +1308,7 @@ exports[`props hintText should match snapshot 1`] = `
 .c3.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
@@ -1652,7 +1652,7 @@ exports[`props id should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -1678,7 +1678,7 @@ exports[`props id should match snapshot 1`] = `
 .c3.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
@@ -2016,7 +2016,7 @@ exports[`props label should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -2042,7 +2042,7 @@ exports[`props label should match snapshot 1`] = `
 .c3.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
@@ -2392,7 +2392,7 @@ exports[`props labelMode should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -2418,7 +2418,7 @@ exports[`props labelMode should match snapshot 1`] = `
 .c4.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
@@ -2756,7 +2756,7 @@ exports[`props name should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -2782,7 +2782,7 @@ exports[`props name should match snapshot 1`] = `
 .c3.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
@@ -3120,7 +3120,7 @@ exports[`props value should match snapshot 1`] = `
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 1px solid hsl(202,7%,67%);
+  border: 1px solid hsl(201,7%,58%);
   background: transparent;
 }
 
@@ -3146,7 +3146,7 @@ exports[`props value should match snapshot 1`] = `
 .c3.fi-radio-button .fi-radio-button_input:focus + .fi-radio-button_label::before {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   border-radius: 50%;
 }
 
diff --git a/src/core/Form/SearchInput/SearchInput.baseStyles.tsx b/src/core/Form/SearchInput/SearchInput.baseStyles.tsx
index b12123eed..84fa1dbf5 100644
--- a/src/core/Form/SearchInput/SearchInput.baseStyles.tsx
+++ b/src/core/Form/SearchInput/SearchInput.baseStyles.tsx
@@ -38,7 +38,7 @@ export const baseStyles = withSuomifiTheme(
         width: 100%;
         height: 40px;
         box-sizing: border-box;
-        border: 1px solid ${theme.colors.depthLight1};
+        border: 1px solid ${theme.colors.depthDark3};
         border-radius: ${theme.radius.basic};
       }
 
@@ -52,23 +52,25 @@ export const baseStyles = withSuomifiTheme(
         min-height: 36px;
         margin-top: 1px;
         margin-bottom: 1px;
-        ::placeholder {
+        &::placeholder {
           font-style: italic;
+          color: ${theme.colors.depthDark2};
+          opacity: 1;
         }
-        ::-ms-clear {
+        &::-ms-clear {
           display: none;
           width: 0;
           height: 0;
         }
-        ::-ms-reveal {
+        &::-ms-reveal {
           display: none;
           width: 0;
           height: 0;
         }
-        ::-webkit-search-decoration,
-        ::-webkit-search-cancel-button,
-        ::-webkit-search-results-button,
-        ::-webkit-search-results-decoration {
+        &::-webkit-search-decoration,
+        &::-webkit-search-cancel-button,
+        &::-webkit-search-results-button,
+        &::-webkit-search-results-decoration {
           display: none;
         }
         appearance: none;
diff --git a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap
index dddd186f9..a7b866f36 100644
--- a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap
+++ b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap
@@ -189,12 +189,12 @@ exports[`snapshot should have matching default structure 1`] = `
   width: 100%;
   height: 40px;
   box-sizing: border-box;
-  border: 1px solid hsl(202,7%,80%);
+  border: 1px solid hsl(201,7%,58%);
   border-radius: 2px;
 }
 
 .c1 .fi-search-input_input-element-container > input:focus {
-  outline-color: hsl(196,77%,55%);
+  outline-color: hsl(196,77%,44%);
   outline-width: 2px;
   outline-offset: 2px;
   outline-style: solid;
@@ -221,7 +221,7 @@ exports[`snapshot should have matching default structure 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
   top: -3px;
   bottom: -3px;
@@ -269,18 +269,26 @@ exports[`snapshot should have matching default structure 1`] = `
 
 .c1 .fi-search-input_input::-webkit-input-placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c1 .fi-search-input_input::-moz-placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c1 .fi-search-input_input:-ms-input-placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c1 .fi-search-input_input::placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c1 .fi-search-input_input::-ms-clear {
@@ -393,7 +401,7 @@ exports[`snapshot should have matching default structure 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
diff --git a/src/core/Form/TextInput/TextInput.baseStyles.tsx b/src/core/Form/TextInput/TextInput.baseStyles.tsx
index 0f7619146..d90488bf4 100644
--- a/src/core/Form/TextInput/TextInput.baseStyles.tsx
+++ b/src/core/Form/TextInput/TextInput.baseStyles.tsx
@@ -69,9 +69,12 @@ export const baseStyles = withSuomifiTheme(
       width: 100%;
       min-height: 40px;
       padding-left: ${theme.spacing.insetL};
+      border-color: ${theme.colors.depthDark3};
 
       &::placeholder {
         font-style: italic;
+        color: ${theme.colors.depthDark2};
+        opacity: 1;
       }
     }
 
diff --git a/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap b/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap
index 8805a5dbb..085a010a7 100644
--- a/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap
+++ b/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap
@@ -169,7 +169,7 @@ exports[`snapshots match error status with statustext 1`] = `
 }
 
 .c2 .fi-text-input_input-element-container > input:focus {
-  outline-color: hsl(196,77%,55%);
+  outline-color: hsl(196,77%,44%);
   outline-width: 2px;
   outline-offset: 2px;
   outline-style: solid;
@@ -195,7 +195,7 @@ exports[`snapshots match error status with statustext 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
@@ -273,22 +273,31 @@ exports[`snapshots match error status with statustext 1`] = `
   width: 100%;
   min-height: 40px;
   padding-left: 10px;
+  border-color: hsl(201,7%,58%);
 }
 
 .c2 .fi-text-input_input::-webkit-input-placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c2 .fi-text-input_input::-moz-placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c2 .fi-text-input_input:-ms-input-placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c2 .fi-text-input_input::placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c2.fi-text-input_with-icon .fi-text-input_input-element-container {
@@ -316,7 +325,7 @@ exports[`snapshots match error status with statustext 1`] = `
 }
 
 .c2.fi-text-input--success .fi-text-input_input {
-  border-color: hsl(166,90%,36%);
+  border-color: hsl(166,90%,34%);
 }
 
 .c2.fi-text-input--disabled .fi-text-input_input {
@@ -522,7 +531,7 @@ exports[`snapshots match hidden label with placeholder 1`] = `
 }
 
 .c2 .fi-text-input_input-element-container > input:focus {
-  outline-color: hsl(196,77%,55%);
+  outline-color: hsl(196,77%,44%);
   outline-width: 2px;
   outline-offset: 2px;
   outline-style: solid;
@@ -548,7 +557,7 @@ exports[`snapshots match hidden label with placeholder 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
@@ -626,22 +635,31 @@ exports[`snapshots match hidden label with placeholder 1`] = `
   width: 100%;
   min-height: 40px;
   padding-left: 10px;
+  border-color: hsl(201,7%,58%);
 }
 
 .c2 .fi-text-input_input::-webkit-input-placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c2 .fi-text-input_input::-moz-placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c2 .fi-text-input_input:-ms-input-placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c2 .fi-text-input_input::placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c2.fi-text-input_with-icon .fi-text-input_input-element-container {
@@ -669,7 +687,7 @@ exports[`snapshots match hidden label with placeholder 1`] = `
 }
 
 .c2.fi-text-input--success .fi-text-input_input {
-  border-color: hsl(166,90%,36%);
+  border-color: hsl(166,90%,34%);
 }
 
 .c2.fi-text-input--disabled .fi-text-input_input {
@@ -857,7 +875,7 @@ exports[`snapshots match minimal implementation 1`] = `
 }
 
 .c2 .fi-text-input_input-element-container > input:focus {
-  outline-color: hsl(196,77%,55%);
+  outline-color: hsl(196,77%,44%);
   outline-width: 2px;
   outline-offset: 2px;
   outline-style: solid;
@@ -883,7 +901,7 @@ exports[`snapshots match minimal implementation 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
@@ -961,22 +979,31 @@ exports[`snapshots match minimal implementation 1`] = `
   width: 100%;
   min-height: 40px;
   padding-left: 10px;
+  border-color: hsl(201,7%,58%);
 }
 
 .c2 .fi-text-input_input::-webkit-input-placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c2 .fi-text-input_input::-moz-placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c2 .fi-text-input_input:-ms-input-placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c2 .fi-text-input_input::placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c2.fi-text-input_with-icon .fi-text-input_input-element-container {
@@ -1004,7 +1031,7 @@ exports[`snapshots match minimal implementation 1`] = `
 }
 
 .c2.fi-text-input--success .fi-text-input_input {
-  border-color: hsl(166,90%,36%);
+  border-color: hsl(166,90%,34%);
 }
 
 .c2.fi-text-input--disabled .fi-text-input_input {
diff --git a/src/core/Form/Textarea/Textarea.baseStyles.tsx b/src/core/Form/Textarea/Textarea.baseStyles.tsx
index 310ce48fb..a981afc6c 100644
--- a/src/core/Form/Textarea/Textarea.baseStyles.tsx
+++ b/src/core/Form/Textarea/Textarea.baseStyles.tsx
@@ -27,7 +27,7 @@ export const baseStyles = withSuomifiTheme(
 
       & .fi-textarea_hintText {
         display: block;
-        color: ${theme.colors.depthDark1};
+        color: ${theme.colors.blackBase};
         ${theme.typography.bodyTextSmall};
         word-break: break-word;
       }
@@ -48,7 +48,7 @@ export const baseStyles = withSuomifiTheme(
         display: block;
         resize: ${!!resize ? resize : 'vertical'};
         border-radius: 2px;
-        border: 1px solid ${theme.colors.depthLight1};
+        border: 1px solid ${theme.colors.depthDark3};
         box-shadow: ${theme.shadows.actionElementBoxShadow};
         padding: 8px 14px 13px 10px;
         ${theme.typography.bodyTextSmall};
@@ -58,8 +58,10 @@ export const baseStyles = withSuomifiTheme(
           outline: none;
         }
 
-        ::placeholder {
+        &::placeholder {
           font-style: italic;
+          color: ${theme.colors.depthDark2};
+          opacity: 1;
         }
       }
 
diff --git a/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap b/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap
index e74e8fea6..245497e44 100644
--- a/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap
+++ b/src/core/Form/Textarea/__snapshots__/Textarea.test.tsx.snap
@@ -175,7 +175,7 @@ exports[`snapshot default structure should match snapshot 1`] = `
 
 .c1.fi-textarea .fi-textarea_hintText {
   display: block;
-  color: hsl(202,7%,40%);
+  color: hsl(0,0%,16%);
   font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -204,7 +204,7 @@ exports[`snapshot default structure should match snapshot 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
@@ -212,7 +212,7 @@ exports[`snapshot default structure should match snapshot 1`] = `
   display: block;
   resize: vertical;
   border-radius: 2px;
-  border: 1px solid hsl(202,7%,80%);
+  border: 1px solid hsl(201,7%,58%);
   box-shadow: 0 1px 2px 0 rgba(0,53,122,0.1) inset;
   padding: 8px 14px 13px 10px;
   font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
@@ -228,18 +228,26 @@ exports[`snapshot default structure should match snapshot 1`] = `
 
 .c1.fi-textarea .fi-textarea_textarea::-webkit-input-placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c1.fi-textarea .fi-textarea_textarea::-moz-placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c1.fi-textarea .fi-textarea_textarea:-ms-input-placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c1.fi-textarea .fi-textarea_textarea::placeholder {
   font-style: italic;
+  color: hsl(201,7%,46%);
+  opacity: 1;
 }
 
 .c1.fi-textarea .fi-textarea_statusText {
diff --git a/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap b/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap
index df5f25534..cd8bb2328 100644
--- a/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap
+++ b/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap
@@ -224,7 +224,7 @@ exports[`Toggle variant default:  calling render with the same component on the
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
   border-radius: 14px;
   right: -4px;
@@ -247,7 +247,7 @@ exports[`Toggle variant default:  calling render with the same component on the
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
   border-radius: 14px;
   right: -4px;
@@ -313,7 +313,7 @@ exports[`Toggle variant default:  calling render with the same component on the
 }
 
 .c2 .fi-toggle_icon.fi-toggle_icon--checked .icon-toggle_svg__fi-toggle-icon-circle {
-  fill: hsl(166,90%,36%);
+  fill: hsl(166,90%,34%);
 }
 
 .c2 .fi-toggle_icon.fi-toggle_icon--checked.fi-toggle_icon--disabled .icon-toggle_svg__fi-toggle-icon-circle {
@@ -727,7 +727,7 @@ exports[`Toggle variant withInput:  calling render with the same component on th
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
   border-radius: 14px;
   right: -4px;
@@ -750,7 +750,7 @@ exports[`Toggle variant withInput:  calling render with the same component on th
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
   border-radius: 14px;
   right: -4px;
@@ -816,7 +816,7 @@ exports[`Toggle variant withInput:  calling render with the same component on th
 }
 
 .c2 .fi-toggle_icon.fi-toggle_icon--checked .icon-toggle_svg__fi-toggle-icon-circle {
-  fill: hsl(166,90%,36%);
+  fill: hsl(166,90%,34%);
 }
 
 .c2 .fi-toggle_icon.fi-toggle_icon--checked.fi-toggle_icon--disabled .icon-toggle_svg__fi-toggle-icon-circle {
diff --git a/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap b/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
index a89b23aed..12c9219e3 100644
--- a/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
+++ b/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`calling render with the same component on the same container does not r
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
diff --git a/src/core/Link/__snapshots__/Link.test.tsx.snap b/src/core/Link/__snapshots__/Link.test.tsx.snap
index 8a39d703d..4bb78bf72 100644
--- a/src/core/Link/__snapshots__/Link.test.tsx.snap
+++ b/src/core/Link/__snapshots__/Link.test.tsx.snap
@@ -70,7 +70,7 @@ exports[`calling render with the same component on the same container does not r
 .c1:focus {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
 }
 
 .c1:hover,
diff --git a/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap b/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap
index 73ec7f842..38a8cd8f5 100644
--- a/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap
+++ b/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap
@@ -118,7 +118,7 @@ exports[`calling render with the same component on the same container does not r
 .c1:focus {
   outline: 0;
   border-radius: 2px;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
 }
 
 .c1:hover,
@@ -154,7 +154,8 @@ exports[`calling render with the same component on the same container does not r
     width="1em"
   >
     <path
-      d="M21 4.414l-7.793 7.793a.997.997 0 01-1.414 0 .999.999 0 010-1.414L19.586 3h-3.243a1 1 0 010-2H22a1 1 0 011 1v5.657a1 1 0 01-2 0V4.414zM4 22c-1.103 0-2-.897-2-2V6c0-1.103.897-2 2-2h8a1 1 0 010 2H4v14h15v-8a1 1 0 012 0v8c0 1.103-.897 2-2 2H4z"
+      d="M12 4a1 1 0 010 2H2v16h16V12a1 1 0 012 0v10c0 1.103-.897 2-2 2H2c-1.103 0-2-.897-2-2V6c0-1.103.897-2 2-2h10zm11-4a1 1 0 011 1v6.657a1 1 0 01-2 0l-.001-4.242-9.792 9.792a.997.997 0 01-1.414 0 .999.999 0 010-1.414L20.586 2h-4.243a1 1 0 010-2H23z"
+      fill-rule="evenodd"
     />
   </svg>
 </a>
diff --git a/src/core/theme/__snapshots__/tokens.test.tsx.snap b/src/core/theme/__snapshots__/tokens.test.tsx.snap
index e47d09ff0..c9254a6a0 100644
--- a/src/core/theme/__snapshots__/tokens.test.tsx.snap
+++ b/src/core/theme/__snapshots__/tokens.test.tsx.snap
@@ -216,7 +216,7 @@ exports[`snapshot testing 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
@@ -302,7 +302,7 @@ exports[`snapshot testing 1`] = `
   background-color: transparent;
   border: 0px solid hsl(0,0%,100%);
   box-sizing: border-box;
-  box-shadow: 0 0 0 2px hsl(196,77%,55%);
+  box-shadow: 0 0 0 2px hsl(196,77%,44%);
   z-index: 9999;
 }
 
diff --git a/yarn.lock b/yarn.lock
index bb78ce2e6..9bed8f69d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12955,15 +12955,15 @@ sugarss@^2.0.0:
   dependencies:
     postcss "^7.0.2"
 
-suomifi-design-tokens@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/suomifi-design-tokens/-/suomifi-design-tokens-2.0.0.tgz#c7d7219ce0c1d97e76cf7238f507b99058835e92"
-  integrity sha512-5jBQSmWlQJoIjyytG6JWB8ILhlWY0x416eO9iH4KxXuPpy7GeA+oyfabdsgPWFUPge0oOlO98A6qtLNZnsT9iA==
+suomifi-design-tokens@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/suomifi-design-tokens/-/suomifi-design-tokens-3.0.0.tgz#e84b665b62234edbbc449f9ec8de96e23dcb308c"
+  integrity sha512-fbwY0XPI71K5BOrjICsmm7bVwWYsOCFYW48ZzKQtKCNCPEqdSkfh63C8CXDjYoEJNKW0gfR7dsHMHNhDzAhfdg==
 
-suomifi-icons@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/suomifi-icons/-/suomifi-icons-1.0.2.tgz#ba4c078111d16fce12a2562b23b4643ab6543199"
-  integrity sha512-Py4ONldrjukDHtW7XsC7egFhSE51dvGpbmWCvGOzKZDJYJickemUhh/89WrBnq/Ms/KZ2oW4vFi52//cqXbsYA==
+suomifi-icons@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/suomifi-icons/-/suomifi-icons-1.1.1.tgz#9b6ed2e98b2629f411af80897f1851b607686f1f"
+  integrity sha512-csdIAGuY/xL64LniHgIbmU4E5TSWeZJKjDEySie88Vx5iy4NGrH9eUfEC2LXyQuJnxQ6IggLAKpDlh8WSNs+kg==
 
 supports-color@^2.0.0:
   version "2.0.0"