diff --git a/.storybook/components/Icons.js b/.storybook/components/Icons.js
index 8d15a5aa4b..5910c6fccd 100644
--- a/.storybook/components/Icons.js
+++ b/.storybook/components/Icons.js
@@ -19,11 +19,11 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';
 import { keys, entries, includes, isEmpty, groupBy, sortBy } from 'lodash/fp';
+import { light } from '@sumup/design-tokens';
 import * as iconComponents from '@sumup/icons';
 import { icons } from '@sumup/icons/manifest.json';
 
 import {
-  theme as themes,
   Heading,
   Text,
   InlineElements,
@@ -122,7 +122,7 @@ const Icons = () => {
   );
 
   return (
-    <ThemeProvider theme={themes.circuit}>
+    <ThemeProvider theme={light}>
       <Filters>
         <Label htmlFor="search-icon">
           Filter icons by name
diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index 56775152c3..7fbc33b540 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -9357,7 +9357,7 @@ exports[`Storyshots Components/Notification/NotificationList Base 1`] = `
   flex-direction: column;
   width: 400px;
   max-width: 90vw;
-  max-width: calc(100vw - 48px);
+  max-width: calc(100vw - (24px * 2));
 }
 
 .circuit-9 > * {
@@ -9612,7 +9612,7 @@ HTMLCollection [
 .circuit-4:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-4:hover {
@@ -9695,7 +9695,7 @@ HTMLCollection [
 .circuit-7:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-7:hover {
@@ -9953,7 +9953,7 @@ exports[`Storyshots Components/ProgressBar Base 1`] = `
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }
@@ -10027,7 +10027,7 @@ HTMLCollection [
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }
@@ -10093,7 +10093,7 @@ HTMLCollection [
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }
@@ -10159,7 +10159,7 @@ HTMLCollection [
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }
@@ -10229,7 +10229,7 @@ exports[`Storyshots Components/ProgressBar With Fraction 1`] = `
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }
@@ -10298,7 +10298,7 @@ exports[`Storyshots Components/ProgressBar With Percentage 1`] = `
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }
@@ -11157,7 +11157,7 @@ label + .circuit-14 {
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }
diff --git a/src/components/BaseStyles/__snapshots__/BaseStylesService.spec.js.snap b/src/components/BaseStyles/__snapshots__/BaseStylesService.spec.js.snap
index 9f01c19a59..2b5041639d 100644
--- a/src/components/BaseStyles/__snapshots__/BaseStylesService.spec.js.snap
+++ b/src/components/BaseStyles/__snapshots__/BaseStylesService.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`BaseStylesService should return the global base styles 1`] = `
 "html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}*,*::before,*::after{box-sizing:inherit;}html{box-sizing:border-box;[type='button']{appearance:none;}}body{background-color:#FAFBFC;color:#0F131A;
-    font-size: 16px;
-    line-height: 24px;
-  ;}html,body,input,select,optgroup,textarea,button{font-weight:400;font-family:aktiv-grotesk, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\";font-feature-settings:'kern';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility;}pre,code{font-family:Consolas, monaco, monospace;}"
+      font-size: 16px;
+      line-height: 24px;
+    ;;}html,body,input,select,optgroup,textarea,button{font-weight:400;font-family:aktiv-grotesk, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\";font-feature-settings:'kern';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility;}pre,code{font-family:Consolas, monaco, monospace;}"
 `;
diff --git a/src/components/Button/components/RegularButton/RegularButton.js b/src/components/Button/components/RegularButton/RegularButton.js
index 4c510124ef..7a53139d52 100644
--- a/src/components/Button/components/RegularButton/RegularButton.js
+++ b/src/components/Button/components/RegularButton/RegularButton.js
@@ -18,7 +18,26 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import isPropValid from '@emotion/is-prop-valid';
 
-import { textMega, calculatePadding } from '../../../../styles/style-helpers';
+import { textMega } from '../../../../styles/style-helpers';
+import { sizes } from '../../../../styles/constants';
+
+const { KILO, MEGA, GIGA } = sizes;
+
+const calculatePadding = ({ theme, size: buttonSize }) => (diff = '0px') => {
+  const sizeMap = {
+    /* eslint-disable max-len */
+    [KILO]: `calc(${theme.spacings.bit} - ${diff}) calc(${theme.spacings.mega} - ${diff})`,
+    [MEGA]: `calc(${theme.spacings.byte} - ${diff}) calc(${theme.spacings.giga} - ${diff})`,
+    [GIGA]: `calc(${theme.spacings.kilo} - ${diff}) calc(${theme.spacings.tera} - ${diff})`
+    /* eslint-enable max-len */
+  };
+
+  if (!sizeMap[buttonSize] && buttonSize) {
+    return null;
+  }
+
+  return sizeMap[buttonSize] || sizeMap.mega;
+};
 
 const baseStyles = ({ theme, ...props }) => css`
   label: button;
diff --git a/src/components/InlineElements/InlineElements.js b/src/components/InlineElements/InlineElements.js
index ab084b6b55..ca6d0bfce5 100644
--- a/src/components/InlineElements/InlineElements.js
+++ b/src/components/InlineElements/InlineElements.js
@@ -41,7 +41,7 @@ const fallbackBaseStyles = ({ children, theme }) => {
         );
       }
 
-      ${clearfix};
+      ${clearfix()};
     }
   `;
 };
@@ -111,7 +111,7 @@ const fallbackInlineMobileStyles = ({ theme, inlineMobile, children }) => {
         );
       }
 
-      ${clearfix};
+      ${clearfix()};
     }
   `;
 };
diff --git a/src/components/NotificationList/NotificationList.js b/src/components/NotificationList/NotificationList.js
index 11f1f2a63a..46760f837c 100644
--- a/src/components/NotificationList/NotificationList.js
+++ b/src/components/NotificationList/NotificationList.js
@@ -18,7 +18,6 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 
 import { childrenPropType } from '../../util/shared-prop-types';
-import { multiplyUnit } from '../../styles/style-helpers';
 import Card from '../Card';
 
 // The first max-width rule is a fallback for old versions of Android
@@ -29,7 +28,7 @@ const baseStyles = ({ theme }) => css`
   flex-direction: column;
   width: 400px;
   max-width: 90vw;
-  max-width: calc(100vw - ${multiplyUnit(theme.spacings.giga, 2)});
+  max-width: calc(100vw - (${theme.spacings.giga} * 2));
 
   > * {
     margin-top: ${theme.spacings.mega};
diff --git a/src/components/NotificationList/__snapshots__/NotificationList.spec.js.snap b/src/components/NotificationList/__snapshots__/NotificationList.spec.js.snap
index c38def1edf..9cc9b8b08c 100644
--- a/src/components/NotificationList/__snapshots__/NotificationList.spec.js.snap
+++ b/src/components/NotificationList/__snapshots__/NotificationList.spec.js.snap
@@ -11,7 +11,7 @@ exports[`NotificationList should render with default styles 1`] = `
   flex-direction: column;
   width: 400px;
   max-width: 90vw;
-  max-width: calc(100vw - 48px);
+  max-width: calc(100vw - (24px * 2));
 }
 
 .circuit-2 > * {
diff --git a/src/components/Pagination/PageButton/PageButton.js b/src/components/Pagination/PageButton/PageButton.js
index 6625aa7012..1511aa4ca1 100644
--- a/src/components/Pagination/PageButton/PageButton.js
+++ b/src/components/Pagination/PageButton/PageButton.js
@@ -17,7 +17,6 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 
 import Button from '../../Button';
-import { calculatePadding } from '../../../styles/style-helpers'; // eslint-disable-line max-len
 
 const baseStyles = ({ theme }) => css`
   label: pagination__button;
@@ -29,7 +28,7 @@ const baseStyles = ({ theme }) => css`
   &:focus {
     border-color: ${theme.colors.n300};
     border-width: ${theme.borderWidth.kilo};
-    padding: ${calculatePadding({ theme, size: 'kilo' })()};
+    padding: ${theme.spacings.bit} ${theme.spacings.mega};
   }
 
   &:hover {
diff --git a/src/components/Pagination/PageButton/__snapshots__/PageButton.spec.js.snap b/src/components/Pagination/PageButton/__snapshots__/PageButton.spec.js.snap
index 0b6f200569..3db934fea5 100644
--- a/src/components/Pagination/PageButton/__snapshots__/PageButton.spec.js.snap
+++ b/src/components/Pagination/PageButton/__snapshots__/PageButton.spec.js.snap
@@ -67,7 +67,7 @@ exports[`PageButton styles should render with default styles 1`] = `
 .circuit-1:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-1:hover {
diff --git a/src/components/Pagination/PaginationButton/__snapshots__/PaginationButton.spec.js.snap b/src/components/Pagination/PaginationButton/__snapshots__/PaginationButton.spec.js.snap
index f6c781d8be..ff84418955 100644
--- a/src/components/Pagination/PaginationButton/__snapshots__/PaginationButton.spec.js.snap
+++ b/src/components/Pagination/PaginationButton/__snapshots__/PaginationButton.spec.js.snap
@@ -67,7 +67,7 @@ exports[`PaginationButton styles should render with default styles 1`] = `
 .circuit-1:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-1:hover {
@@ -127,7 +127,7 @@ exports[`PaginationButton styles should render with plain styles 1`] = `
 .circuit-1:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-1:hover {
diff --git a/src/components/Pagination/__snapshots__/Pagination.spec.js.snap b/src/components/Pagination/__snapshots__/Pagination.spec.js.snap
index e37839fb1e..56876988c2 100644
--- a/src/components/Pagination/__snapshots__/Pagination.spec.js.snap
+++ b/src/components/Pagination/__snapshots__/Pagination.spec.js.snap
@@ -170,7 +170,7 @@ exports[`Pagination styles With 5 or less pages should render only the number of
 .circuit-4:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-4:hover {
@@ -253,7 +253,7 @@ exports[`Pagination styles With 5 or less pages should render only the number of
 .circuit-7:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-7:hover {
@@ -550,7 +550,7 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
 .circuit-16:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-16:hover {
@@ -633,7 +633,7 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
 .circuit-4:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-4:hover {
@@ -773,7 +773,7 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
 .circuit-7:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-7:hover {
@@ -1018,7 +1018,7 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
 .circuit-19:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-19:hover {
@@ -1101,7 +1101,7 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
 .circuit-4:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-4:hover {
@@ -1241,7 +1241,7 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
 .circuit-7:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-7:hover {
@@ -1487,7 +1487,7 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
 .circuit-7:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-7:hover {
@@ -1570,7 +1570,7 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
 .circuit-4:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-4:hover {
@@ -1710,7 +1710,7 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
 .circuit-16:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-16:hover {
@@ -1955,7 +1955,7 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
 .circuit-13:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-13:hover {
@@ -2038,7 +2038,7 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
 .circuit-4:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-4:hover {
@@ -2178,7 +2178,7 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
 .circuit-7:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-7:hover {
@@ -2429,7 +2429,7 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
 .circuit-4:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-4:hover {
@@ -2512,7 +2512,7 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
 .circuit-7:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-7:hover {
@@ -2652,7 +2652,7 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
 .circuit-16:focus {
   border-color: #D8DDE1;
   border-width: 1px;
-  padding: calc(4px - 0px) calc(16px - 0px);
+  padding: 4px 16px;
 }
 
 .circuit-16:hover {
diff --git a/src/components/ProgressBar/ProgressBar.js b/src/components/ProgressBar/ProgressBar.js
index 5fec8e0320..e214d4d1c5 100644
--- a/src/components/ProgressBar/ProgressBar.js
+++ b/src/components/ProgressBar/ProgressBar.js
@@ -19,7 +19,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 
 import { childrenPropType } from '../../util/shared-prop-types';
-import { textKilo, subtractUnit } from '../../styles/style-helpers';
+import { textKilo } from '../../styles/style-helpers';
 import { uniqueId } from '../../util/id';
 import { sizes } from '../../styles/constants';
 
@@ -44,10 +44,7 @@ const wrapperStyles = ({ theme }) => css`
 const progressStyles = ({ theme, size, value, max }) => {
   const outerBorderWidth = '1px';
   const outerBorderRadius = theme.borderRadius.mega;
-  const innerBorderRadiusLeft = `${subtractUnit(
-    outerBorderRadius,
-    outerBorderWidth
-  )}`;
+  const innerBorderRadiusLeft = `calc(${outerBorderRadius} - ${outerBorderWidth})`;
   const innerBorderRadiusRight =
     value && max && (value / max) * 100 === 100 ? innerBorderRadiusLeft : 0;
   const width = value && max ? (value / max) * 100 : 0;
diff --git a/src/components/ProgressBar/__snapshots__/ProgressBar.spec.js.snap b/src/components/ProgressBar/__snapshots__/ProgressBar.spec.js.snap
index c1b3f3c878..a12ac17b10 100644
--- a/src/components/ProgressBar/__snapshots__/ProgressBar.spec.js.snap
+++ b/src/components/ProgressBar/__snapshots__/ProgressBar.spec.js.snap
@@ -34,7 +34,7 @@ exports[`ProgressBar should render with default styles 1`] = `
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }
@@ -105,7 +105,7 @@ exports[`ProgressBar should render with progress styles 1`] = `
   background-color: #3388FF;
   border: 1px solid #1760CE;
   box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
 }
diff --git a/src/components/Row/Row.js b/src/components/Row/Row.js
index c6e2b31802..37ee4f60de 100644
--- a/src/components/Row/Row.js
+++ b/src/components/Row/Row.js
@@ -37,7 +37,7 @@ const baseStyles = ({ theme }) => css`
   label: row;
 
   position: relative;
-  ${clearfix};
+  ${clearfix()};
 
   ${getBreakPointStyles(theme, 'untilKilo')};
   ${getBreakPointStyles(theme, 'kilo')};
diff --git a/src/styles/style-helpers.js b/src/styles/style-helpers.js
deleted file mode 100644
index ae6ef1873c..0000000000
--- a/src/styles/style-helpers.js
+++ /dev/null
@@ -1,169 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { css } from '@emotion/core';
-import { stripUnit, transparentize } from 'polished';
-
-import { mapValues } from '../util/fp';
-import { sizes } from './constants';
-
-const { KILO, MEGA, GIGA } = sizes;
-
-/**
- * Shadows
- */
-
-export const shadowBorder = (color, borderSize = '1px') => `
-  box-shadow: 0px 0px 0px ${borderSize} ${color};
-`;
-
-export const shadowGround = ({ theme }) => `
-  box-shadow: 0 0 0 2px ${transparentize(0.97, theme.colors.shadow)};
-`;
-
-export const shadowSingle = ({ theme }) => `
-  box-shadow: 0 0 0 1px ${transparentize(0.98, theme.colors.shadow)},
-    0 0 1px 0 ${transparentize(0.94, theme.colors.shadow)},
-    0 2px 2px 0 ${transparentize(0.94, theme.colors.shadow)};
-`;
-
-export const shadowDouble = ({ theme }) => `
-  box-shadow: 0 0 0 1px ${transparentize(0.98, theme.colors.shadow)},
-    0 2px 2px 0 ${transparentize(0.94, theme.colors.shadow)},
-    0 4px 4px 0 ${transparentize(0.94, theme.colors.shadow)};
-`;
-
-export const shadowTriple = ({ theme }) => `
-  box-shadow: 0 0 0 1px ${transparentize(0.98, theme.colors.shadow)},
-    0 4px 4px 0 ${transparentize(0.94, theme.colors.shadow)},
-    0 8px 8px 0 ${transparentize(0.94, theme.colors.shadow)};
-`;
-
-/**
- * Typography
- */
-
-const createTypeHelper = (type, name) => ({ theme }) => {
-  const { fontSize, lineHeight } = theme.typography[type][name];
-  return `
-    font-size: ${fontSize};
-    line-height: ${lineHeight};
-  `;
-};
-
-export const headingKilo = createTypeHelper('headings', 'kilo');
-export const headingMega = createTypeHelper('headings', 'mega');
-export const headingGiga = createTypeHelper('headings', 'giga');
-export const headingTera = createTypeHelper('headings', 'tera');
-export const headingPeta = createTypeHelper('headings', 'peta');
-export const headingExa = createTypeHelper('headings', 'exa');
-export const headingZetta = createTypeHelper('headings', 'zetta');
-
-export const subHeadingKilo = createTypeHelper('subHeadings', 'kilo');
-export const subHeadingMega = createTypeHelper('subHeadings', 'mega');
-
-export const textKilo = createTypeHelper('text', 'kilo');
-export const textMega = createTypeHelper('text', 'mega');
-export const textGiga = createTypeHelper('text', 'giga');
-export const textTera = createTypeHelper('text', 'tera');
-
-/**
- * Utilities
- */
-
-export const disableVisually = () => `
-  opacity: 0.5;
-  pointer-events: none;
-  box-shadow: none;
-`;
-
-const add = (a, b) => a + b;
-const subtract = (a, b) => a - b;
-const multiply = (a, b) => a * b;
-const divide = (a, b) => a / b;
-
-const transformUnit = (values, transform, allowMultipleUnits = true) => {
-  const getUnit = (value, otherUnit) => {
-    const [unit] = /[a-zA-Z]+/.exec(value) || [];
-
-    const multipleValuesWithUnit = !allowMultipleUnits && unit && otherUnit;
-    if (multipleValuesWithUnit) {
-      // eslint-disable-next-line no-console
-      console.warn(`You cannot ${transform.name} multiple values with a unit.`);
-      return 'undefined';
-    }
-
-    const valuesWithDifferentUnits = unit && otherUnit && unit !== otherUnit;
-    if (valuesWithDifferentUnits) {
-      // eslint-disable-next-line no-console
-      console.warn(`You cannot ${transform.name} values with different units.`);
-      return 'undefined';
-    }
-    return unit;
-  };
-  const transformedValue = values.reduce((result, value) => {
-    const { amount, unit } = result;
-    const newAmount = stripUnit(value);
-    const newUnit = getUnit(value, unit);
-    return {
-      amount: amount ? transform(amount, newAmount) : newAmount,
-      unit: newUnit || unit
-    };
-  }, {});
-  return `${transformedValue.amount}${transformedValue.unit}`;
-};
-
-export const addUnit = (...args) => transformUnit(args, add);
-export const subtractUnit = (...args) => transformUnit(args, subtract);
-export const multiplyUnit = (...args) => transformUnit(args, multiply, false);
-export const divideUnit = (...args) => transformUnit(args, divide, false);
-
-export const clearfix = css`
-  /*
- * For modern browsers
- * 1. The space content is one way to avoid an Opera bug when the
- *  contenteditable attribute is included anywhere else in the document.
- *  Otherwise it causes space to appear at the top and bottom of elements
- *  that are clearfixed.
- * 2. The use of table rather than "block" is only necessary if using
- * ":before" to contain the top-margins of child elements.
- */
-  &::before,
-  &::after {
-    content: ' '; /* 1 */
-    display: table; /* 2 */
-  }
-  &::after {
-    clear: both;
-  }
-`;
-
-export const calculatePadding = ({ theme, size: buttonSize }) => (
-  diff = '0px'
-) => {
-  const sizeMap = {
-    /* eslint-disable max-len */
-    [KILO]: `calc(${theme.spacings.bit} - ${diff}) calc(${theme.spacings.mega} - ${diff})`,
-    [MEGA]: `calc(${theme.spacings.byte} - ${diff}) calc(${theme.spacings.giga} - ${diff})`,
-    [GIGA]: `calc(${theme.spacings.kilo} - ${diff}) calc(${theme.spacings.tera} - ${diff})`
-    /* eslint-enable max-len */
-  };
-
-  if (!sizeMap[buttonSize] && buttonSize) {
-    return null;
-  }
-
-  return sizeMap[buttonSize] || sizeMap.mega;
-};
diff --git a/src/styles/style-helpers.spec.js b/src/styles/style-helpers.spec.js
index e71916f600..6076d8daf4 100644
--- a/src/styles/style-helpers.spec.js
+++ b/src/styles/style-helpers.spec.js
@@ -13,55 +13,202 @@
  * limitations under the License.
  */
 
+import { light } from '@sumup/design-tokens';
+
 import * as StyleHelpers from './style-helpers';
 
 describe('Style helpers', () => {
-  describe('CSS unit calculations', () => {
-    const a = '25px';
-    const b = '5px';
-    const c = 5;
-    const d = '2rem';
+  describe('shadowBorder', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.shadowBorder(light.colors.black);
+      expect(styles).toMatchInlineSnapshot(`
+        "
+          box-shadow: 0px 0px 0px 1px #0F131A;
+        "
+      `);
+    });
+  });
 
-    it('should add values of the same unit', () => {
-      const actual = StyleHelpers.addUnit(a, b, c);
-      const expected = '35px';
-      expect(actual).toBe(expected);
+  describe('shadowSingle', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.shadowSingle({ theme: light });
+      expect(styles).toMatchInlineSnapshot(`
+        "
+          box-shadow: 0 0 0 1px rgba(12,15,20,0.02),
+            0 0 1px 0 rgba(12,15,20,0.06),
+            0 2px 2px 0 rgba(12,15,20,0.06);
+        "
+      `);
     });
+  });
 
-    it('should subtract values of the same unit', () => {
-      const actual = StyleHelpers.subtractUnit(a, b, c);
-      const expected = '15px';
-      expect(actual).toBe(expected);
+  describe('shadowDouble', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.shadowDouble({ theme: light });
+      expect(styles).toMatchInlineSnapshot(`
+        "
+          box-shadow: 0 0 0 1px rgba(12,15,20,0.02),
+            0 2px 2px 0 rgba(12,15,20,0.06),
+            0 4px 4px 0 rgba(12,15,20,0.06);
+        "
+      `);
     });
+  });
 
-    it('should multiply values of the same unit', () => {
-      const actual = StyleHelpers.multiplyUnit(a, c);
-      const expected = '125px';
-      expect(actual).toBe(expected);
+  describe('shadowTriple', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.shadowTriple({ theme: light });
+      expect(styles).toMatchInlineSnapshot(`
+        "
+          box-shadow: 0 0 0 1px rgba(12,15,20,0.02),
+            0 4px 4px 0 rgba(12,15,20,0.06),
+            0 8px 8px 0 rgba(12,15,20,0.06);
+        "
+      `);
     });
+  });
 
-    it('should divide values of the same unit', () => {
-      const actual = StyleHelpers.divideUnit(a, c);
-      const expected = '5px';
-      expect(actual).toBe(expected);
+  describe('headingKilo', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.headingKilo({ theme: light });
+      expect(styles).toMatchInlineSnapshot(`
+        "
+              font-size: 17px;
+              line-height: 24px;
+            "
+      `);
     });
+  });
 
-    it('should add values without a unit', () => {
-      const actual = StyleHelpers.addUnit(a, b, c);
-      const expected = '35px';
-      expect(actual).toBe(expected);
+  describe('headingMega', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.headingMega({ theme: light });
+      expect(styles).toMatchInlineSnapshot(`
+        "
+              font-size: 19px;
+              line-height: 24px;
+            "
+      `);
     });
+  });
+
+  describe('headingGiga', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.headingGiga({ theme: light });
+      expect(styles).toMatchInlineSnapshot(`
+        "
+              font-size: 22px;
+              line-height: 24px;
+            "
+      `);
+    });
+  });
+
+  describe('headingTera', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.headingTera({ theme: light });
+      expect(styles).toMatchInlineSnapshot(`
+        "
+              font-size: 24px;
+              line-height: 32px;
+            "
+      `);
+    });
+  });
+
+  describe('headingPeta', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.headingPeta({ theme: light });
+      expect(styles).toMatchInlineSnapshot(`
+        "
+              font-size: 28px;
+              line-height: 32px;
+            "
+      `);
+    });
+  });
 
-    it('should return undefined when values do not have the same unit', () => {
-      const actual = StyleHelpers.addUnit(a, b, d);
-      const expected = '32undefined';
-      expect(actual).toBe(expected);
+  describe('headingExa', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.headingExa({ theme: light });
+      expect(styles).toMatchInlineSnapshot(`
+        "
+              font-size: 36px;
+              line-height: 44px;
+            "
+      `);
     });
+  });
+
+  describe('headingZetta', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.headingZetta({ theme: light });
+      expect(styles).toMatchInlineSnapshot(`
+        "
+              font-size: 42px;
+              line-height: 48px;
+            "
+      `);
+    });
+  });
+
+  describe('subHeadingKilo', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.subHeadingKilo({ theme: light });
+      expect(styles).toMatchInlineSnapshot(`
+        "
+              font-size: 12px;
+              line-height: 20px;
+            "
+      `);
+    });
+  });
+
+  describe('subHeadingMega', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.subHeadingMega({ theme: light });
+      expect(styles).toMatchInlineSnapshot(`
+        "
+              font-size: 14px;
+              line-height: 18px;
+            "
+      `);
+    });
+  });
+
+  describe('textKilo', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.textKilo({ theme: light });
+      expect(styles).toMatchInlineSnapshot(`
+        "
+              font-size: 13px;
+              line-height: 20px;
+            "
+      `);
+    });
+  });
+
+  describe('textMega', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.textMega({ theme: light });
+      expect(styles).toMatchInlineSnapshot(`
+        "
+              font-size: 16px;
+              line-height: 24px;
+            "
+      `);
+    });
+  });
 
-    it('should return undefined when multiple values have a unit', () => {
-      const actual = StyleHelpers.multiplyUnit(a, b);
-      const expected = '125undefined';
-      expect(actual).toBe(expected);
+  describe('textGiga', () => {
+    it('should match the snapshot', () => {
+      const { styles } = StyleHelpers.textGiga({ theme: light });
+      expect(styles).toMatchInlineSnapshot(`
+        "
+              font-size: 18px;
+              line-height: 28px;
+            "
+      `);
     });
   });
 });
diff --git a/src/styles/style-helpers.ts b/src/styles/style-helpers.ts
new file mode 100644
index 0000000000..46df9beb23
--- /dev/null
+++ b/src/styles/style-helpers.ts
@@ -0,0 +1,105 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { css, SerializedStyles } from '@emotion/core';
+import { transparentize } from 'polished';
+import { Theme } from '@sumup/design-tokens';
+
+interface StyleArgs {
+  theme: Theme;
+}
+
+export const shadowBorder = (
+  color: string,
+  borderSize = '1px'
+): SerializedStyles => css`
+  box-shadow: 0px 0px 0px ${borderSize} ${color};
+`;
+
+export const shadowSingle = ({ theme }: StyleArgs): SerializedStyles => css`
+  box-shadow: 0 0 0 1px ${transparentize(0.98, theme.colors.shadow)},
+    0 0 1px 0 ${transparentize(0.94, theme.colors.shadow)},
+    0 2px 2px 0 ${transparentize(0.94, theme.colors.shadow)};
+`;
+
+export const shadowDouble = ({ theme }: StyleArgs): SerializedStyles => css`
+  box-shadow: 0 0 0 1px ${transparentize(0.98, theme.colors.shadow)},
+    0 2px 2px 0 ${transparentize(0.94, theme.colors.shadow)},
+    0 4px 4px 0 ${transparentize(0.94, theme.colors.shadow)};
+`;
+
+export const shadowTriple = ({ theme }: StyleArgs): SerializedStyles => css`
+  box-shadow: 0 0 0 1px ${transparentize(0.98, theme.colors.shadow)},
+    0 4px 4px 0 ${transparentize(0.94, theme.colors.shadow)},
+    0 8px 8px 0 ${transparentize(0.94, theme.colors.shadow)};
+`;
+
+function createTypeHelper<T extends 'headings' | 'subHeadings' | 'text'>(
+  type: T,
+  size: keyof Theme['typography'][T]
+) {
+  return ({ theme }: StyleArgs): SerializedStyles => {
+    const { fontSize, lineHeight } = (theme.typography[type][
+      size
+    ] as unknown) as {
+      fontSize: string;
+      lineHeight: string;
+    };
+    return css`
+      font-size: ${fontSize};
+      line-height: ${lineHeight};
+    `;
+  };
+}
+
+export const headingKilo = createTypeHelper('headings', 'kilo');
+export const headingMega = createTypeHelper('headings', 'mega');
+export const headingGiga = createTypeHelper('headings', 'giga');
+export const headingTera = createTypeHelper('headings', 'tera');
+export const headingPeta = createTypeHelper('headings', 'peta');
+export const headingExa = createTypeHelper('headings', 'exa');
+export const headingZetta = createTypeHelper('headings', 'zetta');
+
+export const subHeadingKilo = createTypeHelper('subHeadings', 'kilo');
+export const subHeadingMega = createTypeHelper('subHeadings', 'mega');
+
+export const textKilo = createTypeHelper('text', 'kilo');
+export const textMega = createTypeHelper('text', 'mega');
+export const textGiga = createTypeHelper('text', 'giga');
+
+/**
+ * Visually communicate to the user that an element is disabled
+ * and prevent user interactions.
+ */
+export const disableVisually = (): SerializedStyles => css`
+  opacity: 0.5;
+  pointer-events: none;
+  box-shadow: none;
+`;
+
+/**
+ * A CSS hack to force an element to self-clear its floated children.
+ * Taken from [CSS Tricks](https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/).
+ */
+export const clearfix = (): SerializedStyles => css`
+  &::before,
+  &::after {
+    content: ' ';
+    display: table;
+  }
+  &::after {
+    clear: both;
+  }
+`;