diff --git a/package.json b/package.json
index 51c8de327..bd53eba41 100644
--- a/package.json
+++ b/package.json
@@ -140,7 +140,7 @@
     "polished": "4.0.5",
     "react-popper": "2.2.4",
     "react-svg": "11.2.1",
-    "suomifi-design-tokens": "^3.0.0",
+    "suomifi-design-tokens": "3.1.0",
     "suomifi-icons": "^2.0.0",
     "uuid": "8.3.2"
   },
diff --git a/src/core/Button/Button.baseStyles.tsx b/src/core/Button/Button.baseStyles.tsx
index 5a769e414..cb5569fe2 100644
--- a/src/core/Button/Button.baseStyles.tsx
+++ b/src/core/Button/Button.baseStyles.tsx
@@ -67,22 +67,32 @@ const secondaryNoBorderStyles = css`
   &.fi-button--secondary-noborder {
     ${secondary}
     border: none;
+    background-color: transparent;
   }
 `;
 
-const tertiaryStyles = css`
-  &.fi-button--tertiary {
+const linkStyles = css`
+  &.fi-button--link {
+    color: ${theme.colors.highlightBase};
     ${secondary}
-    background: ${theme.gradients.highlightLight3ToHighlightLight2};
+    background: ${theme.gradients.depthSecondaryToDepthSecondaryDark1};
     border: none;
 
     &:hover {
-      background: ${theme.colors.highlightLight3};
+      background: ${theme.gradients.highlightLight4ToDepthSecondary};
     }
 
     &:active {
       background: ${theme.gradients.depthLight3ToDepthLight2};
     }
+
+    &.fi-button--disabled,
+    &[disabled],
+    &:disabled {
+      color: ${theme.colors.depthBase};
+      background: none;
+      background-color: ${theme.colors.depthLight3};
+    }
   }
 `;
 
@@ -136,7 +146,7 @@ export const baseStyles = css`
   ${invertedStyles}
   ${secondaryStyles}
   ${secondaryNoBorderStyles}
-  ${tertiaryStyles}
+  ${linkStyles}
 
   & > .fi-button_icon {
     width: 16px;
diff --git a/src/core/Button/Button.md b/src/core/Button/Button.md
index 9664aa031..cedb310b9 100644
--- a/src/core/Button/Button.md
+++ b/src/core/Button/Button.md
@@ -88,15 +88,15 @@ import { Button } from 'suomifi-ui-components';
     Secondary Button disabled fullWidth icon="login"
   </Button>
 
-  <Button variant="secondaryNoborder">
+  <Button variant="secondaryNoBorder">
     Borderless secondary Button
   </Button>
 
-  <Button variant="secondaryNoborder" icon="login">
+  <Button variant="secondaryNoBorder" icon="login">
     Borderless secondary Button icon="login"
   </Button>
 
-  <Button variant="secondaryNoborder" disabled icon="login">
+  <Button variant="secondaryNoBorder" disabled icon="login">
     Borderless secondary Button disabled icon="login"
   </Button>
 </>;
@@ -106,10 +106,10 @@ import { Button } from 'suomifi-ui-components';
 import { Button } from 'suomifi-ui-components';
 
 <>
-  <Button variant="tertiary">Tertiary Button</Button>
+  <Button variant="link">Link Button</Button>
 
-  <Button variant="tertiary" disabled icon="login">
-    Tertiary Button disabled icon="login"
+  <Button variant="link" disabled icon="login">
+    Link Button disabled icon="login"
   </Button>
 </>;
 ```
diff --git a/src/core/Button/Button.test.tsx b/src/core/Button/Button.test.tsx
index 3d4c6cacf..537376af3 100644
--- a/src/core/Button/Button.test.tsx
+++ b/src/core/Button/Button.test.tsx
@@ -67,17 +67,15 @@ describe('Button variant', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('secondary-noborder should match snapshot', () => {
+  it('secondaryNoBorder should match snapshot', () => {
     const { container } = render(
-      <Button variant="secondary-noborder">Secondary-noborder button</Button>,
+      <Button variant="secondaryNoBorder">secondaryNoBorder button</Button>,
     );
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('tertiary match snapshot', () => {
-    const { container } = render(
-      <Button variant="tertiary">Tertiary button</Button>,
-    );
+  it('link match snapshot', () => {
+    const { container } = render(<Button variant="link">Link button</Button>);
     expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/src/core/Button/Button.tsx b/src/core/Button/Button.tsx
index c38a04d78..7a416e9a8 100644
--- a/src/core/Button/Button.tsx
+++ b/src/core/Button/Button.tsx
@@ -9,13 +9,13 @@ type ButtonVariant =
   | 'default'
   | 'inverted'
   | 'secondary'
-  | 'secondary-noborder'
-  | 'tertiary';
+  | 'secondaryNoBorder'
+  | 'link';
 
 interface InternalButtonProps
   extends Omit<HtmlButtonProps, 'aria-disabled' | 'onClick'> {
   /**
-   * 'default' | 'inverted' | 'secondary' | 'secondary-noborder' | 'tertiary'
+   * 'default' | 'inverted' | 'secondary' | 'secondaryNoBorder' | 'link'
    * @default default
    */
   variant?: ButtonVariant;
@@ -101,7 +101,11 @@ class BaseButton extends Component<ButtonProps & InnerRef> {
           disabled={!!disabled}
           className={classnames(baseClassName, className, {
             [disabledClassName]: !!disabled || !!ariaDisabled,
-            [`${baseClassName}--${variant}`]: variant !== 'default',
+            [`${baseClassName}--inverted`]: variant === 'inverted',
+            [`${baseClassName}--secondary`]: variant === 'secondary',
+            [`${baseClassName}--secondary-noborder`]:
+              variant === 'secondaryNoBorder',
+            [`${baseClassName}--link`]: variant === 'link',
             [fullWidthClassName]: fullWidth,
           })}
         >
@@ -145,8 +149,6 @@ const StyledButton = styled(
 /**
  * <i class="semantics" />
  * Use for inside Application onClick events.<br />
- * When using Button secondaryNoborder variant with other than white background,<br />
- * define styles background color for all needed states (:hover, :active, :disabled)<br /><br />
  */
 export const Button = forwardRef(
   (props: ButtonProps, ref: React.RefObject<HTMLButtonElement>) => (
diff --git a/src/core/Button/__snapshots__/Button.test.tsx.snap b/src/core/Button/__snapshots__/Button.test.tsx.snap
index 4da9e3768..14b64b6c4 100644
--- a/src/core/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/core/Button/__snapshots__/Button.test.tsx.snap
@@ -165,7 +165,7 @@ exports[`Button variant default should match snapshot 1`] = `
 }
 
 .c1.fi-button--secondary:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
 .c1.fi-button--secondary:active {
@@ -190,10 +190,11 @@ exports[`Button variant default should match snapshot 1`] = `
   border: 1px solid hsl(212,63%,45%);
   text-shadow: none;
   border: none;
+  background-color: transparent;
 }
 
 .c1.fi-button--secondary-noborder:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
 .c1.fi-button--secondary-noborder:active {
@@ -211,28 +212,29 @@ exports[`Button variant default should match snapshot 1`] = `
   border-color: hsl(202,7%,67%);
 }
 
-.c1.fi-button--tertiary {
+.c1.fi-button--link {
+  color: hsl(212,63%,45%);
   color: hsl(212,63%,45%);
   background: none;
   background-color: hsl(0,0%,100%);
   border: 1px solid hsl(212,63%,45%);
   text-shadow: none;
-  background: linear-gradient(0deg,hsl(212,63%,90%),hsl(212,63%,95%));
+  background: linear-gradient(0deg,hsl(215,100%,97%),hsl(215,100%,95%));
   border: none;
 }
 
-.c1.fi-button--tertiary:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+.c1.fi-button--link:hover {
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
-.c1.fi-button--tertiary:active {
+.c1.fi-button--link:active {
   background: none;
   background-color: hsl(202,7%,93%);
 }
 
-.c1.fi-button--tertiary.fi-button--disabled,
-.c1.fi-button--tertiary[disabled],
-.c1.fi-button--tertiary:disabled {
+.c1.fi-button--link.fi-button--disabled,
+.c1.fi-button--link[disabled],
+.c1.fi-button--link:disabled {
   color: hsl(202,7%,67%);
   text-shadow: none;
   background: none;
@@ -240,14 +242,22 @@ exports[`Button variant default should match snapshot 1`] = `
   border-color: hsl(202,7%,67%);
 }
 
-.c1.fi-button--tertiary:hover {
-  background: hsl(212,63%,95%);
+.c1.fi-button--link:hover {
+  background: linear-gradient(0deg,hsl(212,63%,98%),hsl(215,100%,97%));
 }
 
-.c1.fi-button--tertiary:active {
+.c1.fi-button--link:active {
   background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%));
 }
 
+.c1.fi-button--link.fi-button--disabled,
+.c1.fi-button--link[disabled],
+.c1.fi-button--link:disabled {
+  color: hsl(202,7%,67%);
+  background: none;
+  background-color: hsl(202,7%,97%);
+}
+
 .c1 > .fi-button_icon {
   width: 16px;
   height: 16px;
@@ -442,7 +452,7 @@ exports[`Button variant inverted should match snapshot 1`] = `
 }
 
 .c1.fi-button--secondary:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
 .c1.fi-button--secondary:active {
@@ -467,10 +477,11 @@ exports[`Button variant inverted should match snapshot 1`] = `
   border: 1px solid hsl(212,63%,45%);
   text-shadow: none;
   border: none;
+  background-color: transparent;
 }
 
 .c1.fi-button--secondary-noborder:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
 .c1.fi-button--secondary-noborder:active {
@@ -488,28 +499,29 @@ exports[`Button variant inverted should match snapshot 1`] = `
   border-color: hsl(202,7%,67%);
 }
 
-.c1.fi-button--tertiary {
+.c1.fi-button--link {
+  color: hsl(212,63%,45%);
   color: hsl(212,63%,45%);
   background: none;
   background-color: hsl(0,0%,100%);
   border: 1px solid hsl(212,63%,45%);
   text-shadow: none;
-  background: linear-gradient(0deg,hsl(212,63%,90%),hsl(212,63%,95%));
+  background: linear-gradient(0deg,hsl(215,100%,97%),hsl(215,100%,95%));
   border: none;
 }
 
-.c1.fi-button--tertiary:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+.c1.fi-button--link:hover {
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
-.c1.fi-button--tertiary:active {
+.c1.fi-button--link:active {
   background: none;
   background-color: hsl(202,7%,93%);
 }
 
-.c1.fi-button--tertiary.fi-button--disabled,
-.c1.fi-button--tertiary[disabled],
-.c1.fi-button--tertiary:disabled {
+.c1.fi-button--link.fi-button--disabled,
+.c1.fi-button--link[disabled],
+.c1.fi-button--link:disabled {
   color: hsl(202,7%,67%);
   text-shadow: none;
   background: none;
@@ -517,14 +529,22 @@ exports[`Button variant inverted should match snapshot 1`] = `
   border-color: hsl(202,7%,67%);
 }
 
-.c1.fi-button--tertiary:hover {
-  background: hsl(212,63%,95%);
+.c1.fi-button--link:hover {
+  background: linear-gradient(0deg,hsl(212,63%,98%),hsl(215,100%,97%));
 }
 
-.c1.fi-button--tertiary:active {
+.c1.fi-button--link:active {
   background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%));
 }
 
+.c1.fi-button--link.fi-button--disabled,
+.c1.fi-button--link[disabled],
+.c1.fi-button--link:disabled {
+  color: hsl(202,7%,67%);
+  background: none;
+  background-color: hsl(202,7%,97%);
+}
+
 .c1 > .fi-button_icon {
   width: 16px;
   height: 16px;
@@ -554,7 +574,7 @@ exports[`Button variant inverted should match snapshot 1`] = `
 </button>
 `;
 
-exports[`Button variant secondary should match snapshot 1`] = `
+exports[`Button variant link match snapshot 1`] = `
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -719,7 +739,7 @@ exports[`Button variant secondary should match snapshot 1`] = `
 }
 
 .c1.fi-button--secondary:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
 .c1.fi-button--secondary:active {
@@ -744,10 +764,11 @@ exports[`Button variant secondary should match snapshot 1`] = `
   border: 1px solid hsl(212,63%,45%);
   text-shadow: none;
   border: none;
+  background-color: transparent;
 }
 
 .c1.fi-button--secondary-noborder:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
 .c1.fi-button--secondary-noborder:active {
@@ -765,28 +786,29 @@ exports[`Button variant secondary should match snapshot 1`] = `
   border-color: hsl(202,7%,67%);
 }
 
-.c1.fi-button--tertiary {
+.c1.fi-button--link {
+  color: hsl(212,63%,45%);
   color: hsl(212,63%,45%);
   background: none;
   background-color: hsl(0,0%,100%);
   border: 1px solid hsl(212,63%,45%);
   text-shadow: none;
-  background: linear-gradient(0deg,hsl(212,63%,90%),hsl(212,63%,95%));
+  background: linear-gradient(0deg,hsl(215,100%,97%),hsl(215,100%,95%));
   border: none;
 }
 
-.c1.fi-button--tertiary:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+.c1.fi-button--link:hover {
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
-.c1.fi-button--tertiary:active {
+.c1.fi-button--link:active {
   background: none;
   background-color: hsl(202,7%,93%);
 }
 
-.c1.fi-button--tertiary.fi-button--disabled,
-.c1.fi-button--tertiary[disabled],
-.c1.fi-button--tertiary:disabled {
+.c1.fi-button--link.fi-button--disabled,
+.c1.fi-button--link[disabled],
+.c1.fi-button--link:disabled {
   color: hsl(202,7%,67%);
   text-shadow: none;
   background: none;
@@ -794,14 +816,22 @@ exports[`Button variant secondary should match snapshot 1`] = `
   border-color: hsl(202,7%,67%);
 }
 
-.c1.fi-button--tertiary:hover {
-  background: hsl(212,63%,95%);
+.c1.fi-button--link:hover {
+  background: linear-gradient(0deg,hsl(212,63%,98%),hsl(215,100%,97%));
 }
 
-.c1.fi-button--tertiary:active {
+.c1.fi-button--link:active {
   background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%));
 }
 
+.c1.fi-button--link.fi-button--disabled,
+.c1.fi-button--link[disabled],
+.c1.fi-button--link:disabled {
+  color: hsl(202,7%,67%);
+  background: none;
+  background-color: hsl(202,7%,97%);
+}
+
 .c1 > .fi-button_icon {
   width: 16px;
   height: 16px;
@@ -823,15 +853,15 @@ exports[`Button variant secondary should match snapshot 1`] = `
 
 <button
   aria-disabled="false"
-  class="c0 fi-button c1 fi-button--secondary"
+  class="c0 fi-button c1 fi-button--link"
   tabindex="0"
   type="button"
 >
-  Secondary button
+  Link button
 </button>
 `;
 
-exports[`Button variant secondary-noborder should match snapshot 1`] = `
+exports[`Button variant secondary should match snapshot 1`] = `
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -996,7 +1026,7 @@ exports[`Button variant secondary-noborder should match snapshot 1`] = `
 }
 
 .c1.fi-button--secondary:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
 .c1.fi-button--secondary:active {
@@ -1021,10 +1051,11 @@ exports[`Button variant secondary-noborder should match snapshot 1`] = `
   border: 1px solid hsl(212,63%,45%);
   text-shadow: none;
   border: none;
+  background-color: transparent;
 }
 
 .c1.fi-button--secondary-noborder:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
 .c1.fi-button--secondary-noborder:active {
@@ -1042,28 +1073,29 @@ exports[`Button variant secondary-noborder should match snapshot 1`] = `
   border-color: hsl(202,7%,67%);
 }
 
-.c1.fi-button--tertiary {
+.c1.fi-button--link {
+  color: hsl(212,63%,45%);
   color: hsl(212,63%,45%);
   background: none;
   background-color: hsl(0,0%,100%);
   border: 1px solid hsl(212,63%,45%);
   text-shadow: none;
-  background: linear-gradient(0deg,hsl(212,63%,90%),hsl(212,63%,95%));
+  background: linear-gradient(0deg,hsl(215,100%,97%),hsl(215,100%,95%));
   border: none;
 }
 
-.c1.fi-button--tertiary:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+.c1.fi-button--link:hover {
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
-.c1.fi-button--tertiary:active {
+.c1.fi-button--link:active {
   background: none;
   background-color: hsl(202,7%,93%);
 }
 
-.c1.fi-button--tertiary.fi-button--disabled,
-.c1.fi-button--tertiary[disabled],
-.c1.fi-button--tertiary:disabled {
+.c1.fi-button--link.fi-button--disabled,
+.c1.fi-button--link[disabled],
+.c1.fi-button--link:disabled {
   color: hsl(202,7%,67%);
   text-shadow: none;
   background: none;
@@ -1071,14 +1103,22 @@ exports[`Button variant secondary-noborder should match snapshot 1`] = `
   border-color: hsl(202,7%,67%);
 }
 
-.c1.fi-button--tertiary:hover {
-  background: hsl(212,63%,95%);
+.c1.fi-button--link:hover {
+  background: linear-gradient(0deg,hsl(212,63%,98%),hsl(215,100%,97%));
 }
 
-.c1.fi-button--tertiary:active {
+.c1.fi-button--link:active {
   background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%));
 }
 
+.c1.fi-button--link.fi-button--disabled,
+.c1.fi-button--link[disabled],
+.c1.fi-button--link:disabled {
+  color: hsl(202,7%,67%);
+  background: none;
+  background-color: hsl(202,7%,97%);
+}
+
 .c1 > .fi-button_icon {
   width: 16px;
   height: 16px;
@@ -1100,15 +1140,15 @@ exports[`Button variant secondary-noborder should match snapshot 1`] = `
 
 <button
   aria-disabled="false"
-  class="c0 fi-button c1 fi-button--secondary-noborder"
+  class="c0 fi-button c1 fi-button--secondary"
   tabindex="0"
   type="button"
 >
-  Secondary-noborder button
+  Secondary button
 </button>
 `;
 
-exports[`Button variant tertiary match snapshot 1`] = `
+exports[`Button variant secondaryNoBorder should match snapshot 1`] = `
 .c0 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -1273,7 +1313,7 @@ exports[`Button variant tertiary match snapshot 1`] = `
 }
 
 .c1.fi-button--secondary:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
 .c1.fi-button--secondary:active {
@@ -1298,10 +1338,11 @@ exports[`Button variant tertiary match snapshot 1`] = `
   border: 1px solid hsl(212,63%,45%);
   text-shadow: none;
   border: none;
+  background-color: transparent;
 }
 
 .c1.fi-button--secondary-noborder:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
 .c1.fi-button--secondary-noborder:active {
@@ -1319,28 +1360,29 @@ exports[`Button variant tertiary match snapshot 1`] = `
   border-color: hsl(202,7%,67%);
 }
 
-.c1.fi-button--tertiary {
+.c1.fi-button--link {
+  color: hsl(212,63%,45%);
   color: hsl(212,63%,45%);
   background: none;
   background-color: hsl(0,0%,100%);
   border: 1px solid hsl(212,63%,45%);
   text-shadow: none;
-  background: linear-gradient(0deg,hsl(212,63%,90%),hsl(212,63%,95%));
+  background: linear-gradient(0deg,hsl(215,100%,97%),hsl(215,100%,95%));
   border: none;
 }
 
-.c1.fi-button--tertiary:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+.c1.fi-button--link:hover {
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
-.c1.fi-button--tertiary:active {
+.c1.fi-button--link:active {
   background: none;
   background-color: hsl(202,7%,93%);
 }
 
-.c1.fi-button--tertiary.fi-button--disabled,
-.c1.fi-button--tertiary[disabled],
-.c1.fi-button--tertiary:disabled {
+.c1.fi-button--link.fi-button--disabled,
+.c1.fi-button--link[disabled],
+.c1.fi-button--link:disabled {
   color: hsl(202,7%,67%);
   text-shadow: none;
   background: none;
@@ -1348,14 +1390,22 @@ exports[`Button variant tertiary match snapshot 1`] = `
   border-color: hsl(202,7%,67%);
 }
 
-.c1.fi-button--tertiary:hover {
-  background: hsl(212,63%,95%);
+.c1.fi-button--link:hover {
+  background: linear-gradient(0deg,hsl(212,63%,98%),hsl(215,100%,97%));
 }
 
-.c1.fi-button--tertiary:active {
+.c1.fi-button--link:active {
   background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%));
 }
 
+.c1.fi-button--link.fi-button--disabled,
+.c1.fi-button--link[disabled],
+.c1.fi-button--link:disabled {
+  color: hsl(202,7%,67%);
+  background: none;
+  background-color: hsl(202,7%,97%);
+}
+
 .c1 > .fi-button_icon {
   width: 16px;
   height: 16px;
@@ -1377,10 +1427,10 @@ exports[`Button variant tertiary match snapshot 1`] = `
 
 <button
   aria-disabled="false"
-  class="c0 fi-button c1 fi-button--tertiary"
+  class="c0 fi-button c1 fi-button--secondary-noborder"
   tabindex="0"
   type="button"
 >
-  Tertiary button
+  secondaryNoBorder button
 </button>
 `;
diff --git a/src/core/Colors/__snapshots__/Colors.test.tsx.snap b/src/core/Colors/__snapshots__/Colors.test.tsx.snap
index 28003b314..3484c58e1 100644
--- a/src/core/Colors/__snapshots__/Colors.test.tsx.snap
+++ b/src/core/Colors/__snapshots__/Colors.test.tsx.snap
@@ -990,7 +990,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(215,100%,95%);
   cursor: pointer;
   z-index: 2;
   position: relative;
@@ -2949,19 +2949,19 @@ exports[`check that snapshot matches 1`] = `
   </figure>
   <figure
     class="c12"
-    color="hsl(215, 100%, 91%)"
+    color="hsl(215, 100%, 95%)"
     tabindex="0"
   >
     <figcaption>
       <div
         class="fi-color__name"
       >
-        hsl(215, 100%, 91%)
+        hsl(215, 100%, 95%)
       </div>
       <div
         class="fi-color__name fi-color__name--hex"
       >
-        #d1e4ff
+        #e5f0ff
       </div>
       <div
         class="fi-color__name fi-color__name--key"
@@ -2970,11 +2970,11 @@ exports[`check that snapshot matches 1`] = `
       </div>
     </figcaption>
     <svg
-      aria-label="hsl(215, 100%, 91%)"
+      aria-label="hsl(215, 100%, 95%)"
       role="img"
     >
       <rect
-        fill="hsl(215, 100%, 91%)"
+        fill="hsl(215, 100%, 95%)"
       >
         <title>
           depthSecondaryDark1
diff --git a/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap b/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap
index 0e90dba65..9fc5e7570 100644
--- a/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/src/core/Modal/Modal/__snapshots__/Modal.test.tsx.snap
@@ -641,7 +641,7 @@ exports[`Basic modal should match snapshot 1`] = `
 }
 
 .c8.fi-button--secondary:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
 .c8.fi-button--secondary:active {
@@ -666,10 +666,11 @@ exports[`Basic modal should match snapshot 1`] = `
   border: 1px solid hsl(212,63%,45%);
   text-shadow: none;
   border: none;
+  background-color: transparent;
 }
 
 .c8.fi-button--secondary-noborder:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
 .c8.fi-button--secondary-noborder:active {
@@ -687,28 +688,29 @@ exports[`Basic modal should match snapshot 1`] = `
   border-color: hsl(202,7%,67%);
 }
 
-.c8.fi-button--tertiary {
+.c8.fi-button--link {
+  color: hsl(212,63%,45%);
   color: hsl(212,63%,45%);
   background: none;
   background-color: hsl(0,0%,100%);
   border: 1px solid hsl(212,63%,45%);
   text-shadow: none;
-  background: linear-gradient(0deg,hsl(212,63%,90%),hsl(212,63%,95%));
+  background: linear-gradient(0deg,hsl(215,100%,97%),hsl(215,100%,95%));
   border: none;
 }
 
-.c8.fi-button--tertiary:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+.c8.fi-button--link:hover {
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
-.c8.fi-button--tertiary:active {
+.c8.fi-button--link:active {
   background: none;
   background-color: hsl(202,7%,93%);
 }
 
-.c8.fi-button--tertiary.fi-button--disabled,
-.c8.fi-button--tertiary[disabled],
-.c8.fi-button--tertiary:disabled {
+.c8.fi-button--link.fi-button--disabled,
+.c8.fi-button--link[disabled],
+.c8.fi-button--link:disabled {
   color: hsl(202,7%,67%);
   text-shadow: none;
   background: none;
@@ -716,14 +718,22 @@ exports[`Basic modal should match snapshot 1`] = `
   border-color: hsl(202,7%,67%);
 }
 
-.c8.fi-button--tertiary:hover {
-  background: hsl(212,63%,95%);
+.c8.fi-button--link:hover {
+  background: linear-gradient(0deg,hsl(212,63%,98%),hsl(215,100%,97%));
 }
 
-.c8.fi-button--tertiary:active {
+.c8.fi-button--link:active {
   background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%));
 }
 
+.c8.fi-button--link.fi-button--disabled,
+.c8.fi-button--link[disabled],
+.c8.fi-button--link:disabled {
+  color: hsl(202,7%,67%);
+  background: none;
+  background-color: hsl(202,7%,97%);
+}
+
 .c8 > .fi-button_icon {
   width: 16px;
   height: 16px;
diff --git a/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap b/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap
index 855e81e31..50fbc519b 100644
--- a/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap
+++ b/src/core/Modal/ModalFooter/__snapshots__/ModalFooter.test.tsx.snap
@@ -321,7 +321,7 @@ exports[`Basic ModalFooter should match snapshot 1`] = `
 }
 
 .c4.fi-button--secondary:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
 .c4.fi-button--secondary:active {
@@ -346,10 +346,11 @@ exports[`Basic ModalFooter should match snapshot 1`] = `
   border: 1px solid hsl(212,63%,45%);
   text-shadow: none;
   border: none;
+  background-color: transparent;
 }
 
 .c4.fi-button--secondary-noborder:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
 .c4.fi-button--secondary-noborder:active {
@@ -367,28 +368,29 @@ exports[`Basic ModalFooter should match snapshot 1`] = `
   border-color: hsl(202,7%,67%);
 }
 
-.c4.fi-button--tertiary {
+.c4.fi-button--link {
+  color: hsl(212,63%,45%);
   color: hsl(212,63%,45%);
   background: none;
   background-color: hsl(0,0%,100%);
   border: 1px solid hsl(212,63%,45%);
   text-shadow: none;
-  background: linear-gradient(0deg,hsl(212,63%,90%),hsl(212,63%,95%));
+  background: linear-gradient(0deg,hsl(215,100%,97%),hsl(215,100%,95%));
   border: none;
 }
 
-.c4.fi-button--tertiary:hover {
-  background: linear-gradient(0deg,hsl(202,7%,93%) 0%,hsl(0,0%,100%) 100%);
+.c4.fi-button--link:hover {
+  background: linear-gradient(-180deg,hsl(202,7%,93%) 0%,rgba(255,255,255,0) 100%);
 }
 
-.c4.fi-button--tertiary:active {
+.c4.fi-button--link:active {
   background: none;
   background-color: hsl(202,7%,93%);
 }
 
-.c4.fi-button--tertiary.fi-button--disabled,
-.c4.fi-button--tertiary[disabled],
-.c4.fi-button--tertiary:disabled {
+.c4.fi-button--link.fi-button--disabled,
+.c4.fi-button--link[disabled],
+.c4.fi-button--link:disabled {
   color: hsl(202,7%,67%);
   text-shadow: none;
   background: none;
@@ -396,14 +398,22 @@ exports[`Basic ModalFooter should match snapshot 1`] = `
   border-color: hsl(202,7%,67%);
 }
 
-.c4.fi-button--tertiary:hover {
-  background: hsl(212,63%,95%);
+.c4.fi-button--link:hover {
+  background: linear-gradient(0deg,hsl(212,63%,98%),hsl(215,100%,97%));
 }
 
-.c4.fi-button--tertiary:active {
+.c4.fi-button--link:active {
   background: linear-gradient(0deg,hsl(202,7%,93%),hsl(202,7%,97%));
 }
 
+.c4.fi-button--link.fi-button--disabled,
+.c4.fi-button--link[disabled],
+.c4.fi-button--link:disabled {
+  color: hsl(202,7%,67%);
+  background: none;
+  background-color: hsl(202,7%,97%);
+}
+
 .c4 > .fi-button_icon {
   width: 16px;
   height: 16px;
diff --git a/src/core/theme/colors.ts b/src/core/theme/colors.ts
index f732dbfcd..1c9ef390f 100644
--- a/src/core/theme/colors.ts
+++ b/src/core/theme/colors.ts
@@ -106,9 +106,13 @@ export const gradients = {
   whiteBaseNegative: `linear-gradient(-180deg, ${alphaHex(0.1)(
     colors.whiteBase,
   )} 0%, ${alphaHex(0)(colors.whiteBase)} 100%)`,
-  whiteBaseToDepthLight2: `linear-gradient(0deg, ${colors.depthLight2} 0%, ${colors.whiteBase} 100%)`,
+  whiteBaseToDepthLight2: `linear-gradient(-180deg, ${
+    colors.depthLight2
+  } 0%, ${alphaHex(0)(colors.whiteBase)} 100%)`,
   highlightLight3ToHighlightLight2: `linear-gradient(0deg, ${colors.highlightLight2}, ${colors.highlightLight3})`,
   depthLight3ToDepthLight2: `linear-gradient(0deg, ${colors.depthLight2}, ${colors.depthLight3})`,
+  depthSecondaryToDepthSecondaryDark1: `linear-gradient(0deg, ${colors.depthSecondary}, ${colors.depthSecondaryDark1})`,
+  highlightLight4ToDepthSecondary: `linear-gradient(0deg, ${colors.highlightLight4}, ${colors.depthSecondary})`,
 };
 
 export const outlines = {
diff --git a/yarn.lock b/yarn.lock
index 69736cb4b..e0e7f2dd8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12915,10 +12915,10 @@ sugarss@^2.0.0:
   dependencies:
     postcss "^7.0.2"
 
-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-design-tokens@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/suomifi-design-tokens/-/suomifi-design-tokens-3.1.0.tgz#ebaacb5851c206953e41a75a8be37b01e1693dae"
+  integrity sha512-TcyimLgcKwCO8b2sNm84El+DYBgu0v4QiJISiWValGdAt7U+HCoaY1ImpBsOVfuiKfZsiJPvRd0k7OgNVbN1oQ==
 
 suomifi-icons@^2.0.0:
   version "2.0.0"