diff --git a/src/atoms/typography/Heading/Heading.js b/src/atoms/typography/Heading/Heading.js
index b3136899..ac34fd3f 100644
--- a/src/atoms/typography/Heading/Heading.js
+++ b/src/atoms/typography/Heading/Heading.js
@@ -4,7 +4,7 @@ import { createStyledTag, createTheme } from '../../../utils';
 
 type HeadingProps = {|
   children?: React$Node,
-  kind?: 'primary' | 'secondary' | 'disabled',
+  kind?: 'primary' | 'secondary' | 'disabled' | 'white',
   text?: string,
   type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6',
   weight?: 'light' | 'normal' | 'semibold' | 'bold',
@@ -44,6 +44,9 @@ const theme = createTheme(name, (colors) => ({
       disabled: {
         color: colors.DARK_DISABLED_TEXT_COLOR,
       },
+      white: {
+        color: colors.WHITE,
+      },
     },
     weight: {
       light: {
@@ -68,7 +71,7 @@ const theme = createTheme(name, (colors) => ({
 
 const StyledTag = createStyledTag(name, {
   lineHeight: 1.1,
-  fontFamily: 'Sofia Pro, sans-serif',
+  fontFamily: 'Poppins',
   fontWeight: 400,
   margin: 0,
 });
diff --git a/src/atoms/typography/Icon/Icon.js b/src/atoms/typography/Icon/Icon.js
index f0c23bbc..2a65c5f2 100644
--- a/src/atoms/typography/Icon/Icon.js
+++ b/src/atoms/typography/Icon/Icon.js
@@ -9,7 +9,7 @@ type IconProps = {
   /** icon name */
   name: string,
   /** icon color */
-  color?: 'red' | 'green' | 'blue' | 'primary' | 'secondary',
+  color?: 'red' | 'green' | 'blue' | 'primary' | 'secondary' | 'white',
   /** icon size */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'stretch',
 };
@@ -24,6 +24,7 @@ const theme : Theme<IconProps> = createTheme(name, (colors: *): * => ({
       red: { color: colors.RED },
       green: { color: colors.GREEN },
       blue: { color: colors.BLUE },
+      white: { color: colors.WHITE },
     },
     size: {
       xs: {
diff --git a/src/atoms/typography/Icon/glyphs/Mail.svg b/src/atoms/typography/Icon/glyphs/Mail.svg
new file mode 100644
index 00000000..65c400d3
--- /dev/null
+++ b/src/atoms/typography/Icon/glyphs/Mail.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 24 24" focusable="false" role="presentation">
+  <path d="M21.5,20h-19C1.122,20,0,18.878,0,17.5v-11C0,5.122,1.122,4,2.5,4h19C22.878,4,24,5.122,24,6.5v11
+    C24,18.878,22.878,20,21.5,20z M2.5,5C1.673,5,1,5.673,1,6.5v11C1,18.327,1.673,19,2.5,19h19c0.827,0,1.5-0.673,1.5-1.5v-11
+    C23,5.673,22.327,5,21.5,5H2.5z" fill="currentColor" />
+  <path d="M12,13.017c-0.55,0-1.101-0.164-1.581-0.493L2.218,6.913C1.99,6.757,1.932,6.446,2.087,6.218s0.466-0.287,0.695-0.13
+    l8.201,5.611c0.617,0.422,1.415,0.422,2.033,0l8.201-5.611c0.229-0.155,0.54-0.098,0.695,0.13c0.156,0.228,0.098,0.539-0.13,0.695
+    l-8.201,5.611C13.101,12.853,12.55,13.017,12,13.017z" fill="currentColor" />
+  <path d="M2.5,18c-0.144,0-0.286-0.061-0.385-0.18c-0.177-0.212-0.148-0.528,0.064-0.705l6-5c0.212-0.176,0.528-0.147,0.705,0.064
+    c0.177,0.212,0.148,0.528-0.064,0.705l-6,5C2.727,17.962,2.613,18,2.5,18z" fill="currentColor" />
+  <path d="M21.5,18c-0.113,0-0.226-0.038-0.32-0.116l-6-5c-0.212-0.177-0.241-0.492-0.064-0.705c0.177-0.211,0.492-0.24,0.705-0.064
+    l6,5c0.212,0.177,0.241,0.492,0.064,0.705C21.785,17.939,21.643,18,21.5,18z" fill="currentColor" />
+</svg>
diff --git a/src/atoms/typography/Icon/glyphs/index.js b/src/atoms/typography/Icon/glyphs/index.js
index 2983cff7..b0db4995 100644
--- a/src/atoms/typography/Icon/glyphs/index.js
+++ b/src/atoms/typography/Icon/glyphs/index.js
@@ -2,12 +2,14 @@
 // eslint-disable-next-line no-unused-vars
 import React from 'react';
 
+import Mail from './Mail.svg';
 import Check from './Check.svg';
 import ChevronDown from './ChevronDown.svg';
 import Search from './Search.svg';
 import Trashcan from './Trashcan.svg';
 
 export {
+  Mail,
   Check,
   ChevronDown,
   Search,
diff --git a/src/atoms/typography/Link/Link.js b/src/atoms/typography/Link/Link.js
index d857ab4d..13af0512 100644
--- a/src/atoms/typography/Link/Link.js
+++ b/src/atoms/typography/Link/Link.js
@@ -5,26 +5,53 @@ import React from 'react';
 import { createStyledTag, createTheme } from '../../../utils';
 
 type LinkProps = {|
-  to: string,
+  to?: string,
   text?: string,
+  tagName: string | React$Component<*>,
   children?: React$Node,
   component?: React$Node,
 |};
 
 const name = 'link';
 
-const theme = createTheme(name, {
+const theme = createTheme(name, (colors: *) => ({
   modifiers: {
+    size: {
+      lg: {
+        fontSize: '1.8rem',
+      },
+      md: {
+        fontSize: '1.4rem',
+      },
+      sm: {
+        fontSize: '1.2rem',
+      },
+    },
+    color: {
+      primary: {
+        color: colors.PRIMARY_LINK_COLOR,
+      },
+      white: {
+        color: colors.WHITE,
+      },
+      brand: {
+        color: colors.BRAND,
+      },
+    },
+    underline: {
+      textDecoration: 'underline',
+    },
   },
   defaults: {
+    size: 'md',
+    color: 'primary',
+    underline: false,
   },
-});
+}));
 
-const StyledTag = createStyledTag(name, (props) => ({
+const StyledTag = createStyledTag(name, () => ({
   cursor: 'pointer',
-  color: props.theme.COLORS.PRIMARY_LINK_COLOR,
   fontFamily: 'Poppins',
-  fontSize: '1.4rem',
   fontWeight: 400,
   lineHeight: '1',
   textDecoration: 'none',
@@ -37,15 +64,15 @@ const StyledTag = createStyledTag(name, (props) => ({
 function Link({
   text,
   children,
-  component,
+  tagName,
   ...rest
   }: LinkProps) {
-  return <StyledTag { ...rest } tagName={ component }>{ text || children }</StyledTag>;
+  return <StyledTag { ...rest } tagName={ tagName }>{ text || children }</StyledTag>;
 }
 
 Link.defaultProps = {
   ...theme[name].defaults,
-  component: 'a',
+  tagName: 'a',
 };
 
 export { Link, theme };
diff --git a/src/atoms/typography/Paragraph/Paragraph.js b/src/atoms/typography/Paragraph/Paragraph.js
index ac03a121..4037c3e4 100644
--- a/src/atoms/typography/Paragraph/Paragraph.js
+++ b/src/atoms/typography/Paragraph/Paragraph.js
@@ -4,7 +4,8 @@ import { createStyledTag, createTheme } from '../../../utils';
 
 type ParagraphProps = {|
   children?: React$Node,
-  kind?: 'primary' | 'secondary' | 'disabled',
+  kind?: 'primary' | 'secondary' | 'disabled' | 'white',
+  size: 'md' | 'lg',
   text?: string,
 |};
 
@@ -22,10 +23,22 @@ const theme = createTheme(name, (colors) => ({
       disabled: {
         color: colors.DARK_DISABLED_TEXT_COLOR,
       },
+      white: {
+        color: colors.WHITE,
+      },
+    },
+    size: {
+      lg: {
+        fontSize: '1.8rem',
+      },
+      md: {
+        fontSize: '1.4rem',
+      },
     },
   },
   defaults: {
     kind: 'primary',
+    size: 'md',
   },
 }));
 
diff --git a/src/atoms/typography/Text/Text.js b/src/atoms/typography/Text/Text.js
index 92f162d0..648cf6ff 100644
--- a/src/atoms/typography/Text/Text.js
+++ b/src/atoms/typography/Text/Text.js
@@ -6,15 +6,15 @@ import { createStyledTag, createTheme } from '../../../utils';
 
 type TextProps = {|
   /** text to display in the component */
-  children?: string | number,
+  children?: React$Node | string | number,
   /** another way to set displayed text */
   text?: string | number,
   /** possible text colors */
-  color?: 'primary' | 'secondary' | 'red' | 'green' | 'blue',
+  color?: 'primary' | 'secondary' | 'red' | 'green' | 'blue' | 'white',
   /** disabled text state*/
   disabled?: boolean,
-  /** set style to bold */
-  bold?: boolean,
+  /** set style to bold or other weights */
+  weight?: 'light' | 'normal' | 'semibold' | 'bold',
   /** possible sizes */
   size?: PropSizes,
   /** text align */
@@ -41,6 +41,9 @@ const theme = createTheme(name, (colors: *): * => ({
       blue: {
         color: colors.BLUE,
       },
+      white: {
+        color: colors.WHITE,
+      },
     },
 
     align: {
@@ -53,8 +56,19 @@ const theme = createTheme(name, (colors: *): * => ({
       color: colors.DISABLED_TEXT_COLOR,
     },
 
-    bold: {
-      fontWeight: 600,
+    weight: {
+      light: {
+        fontWeight: 300,
+      },
+      normal: {
+        fontWeight: 400,
+      },
+      semibold: {
+        fontWeight: 600,
+      },
+      bold: {
+        fontWeight: 700,
+      },
     },
 
     size: {
@@ -78,13 +92,12 @@ const theme = createTheme(name, (colors: *): * => ({
   defaults: {
     color: 'primary',
     size: 'md',
-    bold: false,
+    weight: 'normal',
   },
 }));
 
 const StyledTag = createStyledTag(name, {
   fontFamily: 'Poppins',
-  fontWeight: 400,
   fontSize: '1.4rem',
   lineHeight: 1.4,
   margin: 0,
diff --git a/src/atoms/typography/Text/Text.stories.js b/src/atoms/typography/Text/Text.stories.js
index 6a394d26..4968f799 100644
--- a/src/atoms/typography/Text/Text.stories.js
+++ b/src/atoms/typography/Text/Text.stories.js
@@ -34,7 +34,7 @@ export default (asStory: *) => {
         <Text disabled>Disabled Text</Text>
       ))
       .add('with bold modifier', () => (
-        <Text bold>Disabled Text</Text>
+        <Text weight="bold">Disabled Text</Text>
       ))
       .add('with custom size', () => (
         <Text size="lg">Disabled Text</Text>
diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
index e24ad9fc..802422a0 100644
--- a/storybook/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -11067,7 +11067,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with kind modifiers  1`] = `
 
 .emotion-0 {
   line-height: 1.1;
-  font-family: Sofia Pro,sans-serif;
+  font-family: Poppins;
   font-weight: 400;
   margin: 0;
   font-size: 3.2rem;
@@ -11075,7 +11075,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with kind modifiers  1`] = `
 
 .emotion-1 {
   line-height: 1.1;
-  font-family: Sofia Pro,sans-serif;
+  font-family: Poppins;
   font-weight: 400;
   margin: 0;
   font-size: 2.4rem;
@@ -11083,7 +11083,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with kind modifiers  1`] = `
 
 .emotion-2 {
   line-height: 1.1;
-  font-family: Sofia Pro,sans-serif;
+  font-family: Poppins;
   font-weight: 400;
   margin: 0;
   font-size: 2rem;
@@ -11120,7 +11120,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with type modifiers 1`] = `
 
 .emotion-0 {
   line-height: 1.1;
-  font-family: Sofia Pro,sans-serif;
+  font-family: Poppins;
   font-weight: 400;
   margin: 0;
   font-size: 3.2rem;
@@ -11128,7 +11128,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with type modifiers 1`] = `
 
 .emotion-1 {
   line-height: 1.1;
-  font-family: Sofia Pro,sans-serif;
+  font-family: Poppins;
   font-weight: 400;
   margin: 0;
   font-size: 2.4rem;
@@ -11136,7 +11136,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with type modifiers 1`] = `
 
 .emotion-2 {
   line-height: 1.1;
-  font-family: Sofia Pro,sans-serif;
+  font-family: Poppins;
   font-weight: 400;
   margin: 0;
   font-size: 2rem;
@@ -11144,7 +11144,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with type modifiers 1`] = `
 
 .emotion-3 {
   line-height: 1.1;
-  font-family: Sofia Pro,sans-serif;
+  font-family: Poppins;
   font-weight: 400;
   margin: 0;
   font-size: 1.4rem;
@@ -11152,7 +11152,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with type modifiers 1`] = `
 
 .emotion-4 {
   line-height: 1.1;
-  font-family: Sofia Pro,sans-serif;
+  font-family: Poppins;
   font-weight: 400;
   margin: 0;
   font-size: 1.2rem;
@@ -11160,7 +11160,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Heading with type modifiers 1`] = `
 
 .emotion-5 {
   line-height: 1.1;
-  font-family: Sofia Pro,sans-serif;
+  font-family: Poppins;
   font-weight: 400;
   margin: 0;
   font-size: 1rem;
@@ -11540,13 +11540,13 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Link with children 1`] = `
 
 .emotion-1 {
   cursor: pointer;
-  color: #4DA1FF;
   font-family: Poppins;
-  font-size: 1.4rem;
   font-weight: 400;
   line-height: 1;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  font-size: 1.4rem;
+  color: #4DA1FF;
 }
 
 .emotion-1:hover {
@@ -11576,13 +11576,13 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Link with text 1`] = `
 
 .emotion-0 {
   cursor: pointer;
-  color: #4DA1FF;
   font-family: Poppins;
-  font-size: 1.4rem;
   font-weight: 400;
   line-height: 1;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  font-size: 1.4rem;
+  color: #4DA1FF;
 }
 
 .emotion-0:hover {
@@ -11610,7 +11610,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Paragraph with children 1`] = `
 .emotion-0 {
   font-family: Poppins;
   font-weight: 400;
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 28px;
   margin: 0;
 }
@@ -11634,7 +11634,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Paragraph with kind modifiers  1`] = `
 .emotion-0 {
   font-family: Poppins;
   font-weight: 400;
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 28px;
   margin: 0;
 }
@@ -11668,7 +11668,7 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Paragraph with text 1`] = `
 .emotion-0 {
   font-family: Poppins;
   font-weight: 400;
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 28px;
   margin: 0;
 }
@@ -11691,32 +11691,32 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with align modifiers  1`] = `
 
 .emotion-0 {
   font-family: Poppins;
-  font-weight: 600;
   font-size: 1.4rem;
   line-height: 1.4;
   margin: 0;
   color: #323c47;
   text-align: left;
+  font-weight: 400;
 }
 
 .emotion-1 {
   font-family: Poppins;
-  font-weight: 600;
   font-size: 1.4rem;
   line-height: 1.4;
   margin: 0;
   color: #323c47;
   text-align: right;
+  font-weight: 400;
 }
 
 .emotion-2 {
   font-family: Poppins;
-  font-weight: 600;
   font-size: 1.4rem;
   line-height: 1.4;
   margin: 0;
   color: #323c47;
   text-align: center;
+  font-weight: 400;
 }
 
 <div
@@ -11759,11 +11759,11 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with bold modifier 1`] = `
 
 .emotion-0 {
   font-family: Poppins;
-  font-weight: 600;
   font-size: 1.4rem;
   line-height: 1.4;
   margin: 0;
   color: #323c47;
+  font-weight: 700;
 }
 
 <div
@@ -11784,11 +11784,11 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with children 1`] = `
 
 .emotion-0 {
   font-family: Poppins;
-  font-weight: 600;
   font-size: 1.4rem;
   line-height: 1.4;
   margin: 0;
   color: #323c47;
+  font-weight: 400;
 }
 
 <div
@@ -11809,47 +11809,47 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with color modifiers  1`] = `
 
 .emotion-0 {
   font-family: Poppins;
-  font-weight: 600;
   font-size: 1.4rem;
   line-height: 1.4;
   margin: 0;
   color: #323c47;
+  font-weight: 400;
 }
 
 .emotion-1 {
   font-family: Poppins;
-  font-weight: 600;
   font-size: 1.4rem;
   line-height: 1.4;
   margin: 0;
   color: #878c93;
+  font-weight: 400;
 }
 
 .emotion-2 {
   font-family: Poppins;
-  font-weight: 600;
   font-size: 1.4rem;
   line-height: 1.4;
   margin: 0;
   color: #eb4235;
+  font-weight: 400;
 }
 
 .emotion-3 {
   font-family: Poppins;
-  font-weight: 600;
   font-size: 1.4rem;
   line-height: 1.4;
   margin: 0;
   color: #00bb6e;
+  font-weight: 400;
 }
 
 .emotion-4 {
   font-family: Poppins;
-  font-weight: 600;
   font-size: 1.4rem;
   line-height: 1.4;
   margin: 0;
   color: #1968cb;
+  font-weight: 400;
 }
 
 <div
@@ -11892,11 +11892,11 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with custom size 1`] = `
 
 .emotion-0 {
   font-family: Poppins;
-  font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.4;
   margin: 0;
   color: #323c47;
+  font-weight: 400;
 }
 
 <div
@@ -11917,11 +11917,11 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with disabled modifier 1`] = `
 
 .emotion-0 {
   font-family: Poppins;
-  font-weight: 600;
   font-size: 1.4rem;
   line-height: 1.4;
   margin: 0;
   color: #d0d7dd;
+  font-weight: 400;
 }
 
 <div
@@ -11942,11 +11942,11 @@ exports[`Storyshots ATOMS/TYPOGRAPHY/Text with text 1`] = `
 
 .emotion-0 {
   font-family: Poppins;
-  font-weight: 600;
   font-size: 1.4rem;
   line-height: 1.4;
   margin: 0;
   color: #323c47;
+  font-weight: 400;
 }
 
 <div
@@ -12536,11 +12536,11 @@ exports[`Storyshots MOLECULES/Rating with default modifiers 1`] = `
 
 .emotion-2 {
   font-family: Poppins;
-  font-weight: 600;
   font-size: 1.4rem;
   line-height: 1.4;
   margin: 0;
   color: #323c47;
+  font-weight: 400;
 }
 
 .emotion-4 {