diff --git a/src/App/App.tsx b/src/App/App.tsx
index f645847..458536e 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -11,20 +11,20 @@ import Footer from '../components/Footer';
 import Box from '../muiComponents/Box';
 import Loading from '../components/Loading';
 import StyleBaseline from '../design-tokens/StyleBaseline';
-import { breakpoints } from '../utils/styles/media';
+import { Theme } from '../design-tokens/theme';
 
 import AppContextProvider from './AppContextProvider';
 import AppRoute, { history } from './AppRoute';
 
-const StyledBoxContent = styled(Box)({
+const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
   padding: 15,
-  [`@media screen and (min-width: ${breakpoints.container}px)`]: {
-    maxWidth: breakpoints.container,
+  [`@media screen and (min-width: ${theme && theme.breakPoints.container}px)`]: {
+    maxWidth: theme && theme.breakPoints.container,
     width: '100%',
     marginLeft: 'auto',
     marginRight: 'auto',
   },
-});
+}));
 
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable react-hooks/exhaustive-deps */
diff --git a/src/components/Author/styles.ts b/src/components/Author/styles.ts
index 27c11df..40a8cae 100644
--- a/src/components/Author/styles.ts
+++ b/src/components/Author/styles.ts
@@ -1,14 +1,14 @@
 import styled from '@emotion/styled';
 
-import { fontWeight } from '../../utils/styles/sizes';
 import ListItem from '../../muiComponents/ListItem';
 import Text from '../../muiComponents/Text';
 import ListItemText from '../../muiComponents/ListItemText';
+import { Theme } from '../../design-tokens/theme';
 
-export const StyledText = styled(Text)({
-  fontWeight: fontWeight.bold,
+export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
   textTransform: 'capitalize',
-});
+}));
 
 export const AuthorListItem = styled(ListItem)({
   padding: 0,
diff --git a/src/components/AutoComplete/AutoComplete.tsx b/src/components/AutoComplete/AutoComplete.tsx
index ecb3f8e..977cc91 100644
--- a/src/components/AutoComplete/AutoComplete.tsx
+++ b/src/components/AutoComplete/AutoComplete.tsx
@@ -4,13 +4,13 @@ import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } fro
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
 
-import { fontWeight } from '../../utils/styles/sizes';
 import MenuItem from '../../muiComponents/MenuItem';
+import { Theme } from '../../design-tokens/theme';
 
 import { Wrapper, InputField, SuggestionContainer } from './styles';
 
-const StyledAnchor = styled('a')<{ fw: number }>(props => ({
-  fontWeight: props.fw,
+const StyledAnchor = styled('a')<{ highlight: boolean; theme?: Theme }>(props => ({
+  fontWeight: props.theme && props.highlight ? props.theme.fontWeight.semiBold : props.theme.fontWeight.light,
 }));
 
 const StyledMenuItem = styled(MenuItem)({
@@ -64,9 +64,8 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): JSX.Element =>
     <StyledMenuItem component="div" selected={isHighlighted}>
       <div>
         {parts.map((part, index) => {
-          const fw = part.highlight ? fontWeight.semiBold : fontWeight.light;
           return (
-            <StyledAnchor fw={fw} key={String(index)}>
+            <StyledAnchor highlight={part.highlight} key={String(index)}>
               {part.text}
             </StyledAnchor>
           );
diff --git a/src/components/Dependencies/styles.ts b/src/components/Dependencies/styles.ts
index 2996b00..7a6f480 100644
--- a/src/components/Dependencies/styles.ts
+++ b/src/components/Dependencies/styles.ts
@@ -1,18 +1,18 @@
 import styled from '@emotion/styled';
 
-import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';
 import Card from '../../muiComponents/Card';
 import Chip from '../../muiComponents/Chip';
+import { Theme } from '../../design-tokens/theme';
 
 export const CardWrap = styled(Card)({
   margin: '0 0 16px',
 });
 
-export const StyledText = styled(Text)({
-  fontWeight: fontWeight.bold,
+export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
   textTransform: 'capitalize',
-});
+}));
 
 export const Tags = styled('div')({
   display: 'flex',
diff --git a/src/components/Developers/styles.ts b/src/components/Developers/styles.ts
index 369e4d9..0fb80ed 100644
--- a/src/components/Developers/styles.ts
+++ b/src/components/Developers/styles.ts
@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 
-import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';
 import FloatingActionButton from '../../muiComponents/FloatingActionButton';
 import { Theme } from '../../design-tokens/theme';
@@ -20,11 +19,11 @@ export const Content = styled('div')({
   },
 });
 
-export const StyledText = styled(Text)({
-  fontWeight: fontWeight.bold,
+export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
   marginBottom: '10px',
   textTransform: 'capitalize',
-});
+}));
 
 export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
   backgroundColor: props.theme && props.theme.palette.primary.main,
diff --git a/src/components/Dist/styles.ts b/src/components/Dist/styles.ts
index f73de93..5c00d0e 100644
--- a/src/components/Dist/styles.ts
+++ b/src/components/Dist/styles.ts
@@ -1,16 +1,15 @@
 import styled from '@emotion/styled';
 
-import { Theme } from '../../design-tokens/theme';
-import { fontWeight } from '../../utils/styles/sizes';
 import ListItem from '../../muiComponents/ListItem';
 import Text from '../../muiComponents/Text';
 import FloatingActionButton from '../../muiComponents/FloatingActionButton';
 import Chip from '../../muiComponents/Chip';
+import { Theme } from '../../design-tokens/theme';
 
-export const StyledText = styled(Text)({
-  fontWeight: fontWeight.bold,
+export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
   textTransform: 'capitalize',
-});
+}));
 
 export const DistListItem = styled(ListItem)({
   paddingLeft: 0,
diff --git a/src/components/Engines/styles.ts b/src/components/Engines/styles.ts
index 8bdd9d1..50d1444 100644
--- a/src/components/Engines/styles.ts
+++ b/src/components/Engines/styles.ts
@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
 
-import { fontWeight } from '../../utils/styles/sizes';
 import ListItem from '../../muiComponents/ListItem';
 import Text from '../../muiComponents/Text';
+import { Theme } from '../../design-tokens/theme';
 
-export const StyledText = styled(Text)({
-  fontWeight: fontWeight.bold,
+export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
   textTransform: 'capitalize',
-});
+}));
 
 export const EngineListItem = styled(ListItem)({
   paddingLeft: 0,
diff --git a/src/components/Footer/styles.ts b/src/components/Footer/styles.ts
index c001a5c..4559980 100644
--- a/src/components/Footer/styles.ts
+++ b/src/components/Footer/styles.ts
@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 
-import { breakpoints } from '../../utils/styles/media';
 import Icon from '../Icon/Icon';
 import { Theme } from '../../design-tokens/theme';
 
@@ -12,29 +11,29 @@ export const Wrapper = styled('div')<{ theme?: Theme }>(props => ({
   padding: '20px',
 }));
 
-export const Inner = styled('div')({
+export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'flex-end',
   width: '100%',
-  [`@media (min-width: ${breakpoints.medium}px)`]: {
+  [`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
     minWidth: 400,
     maxWidth: 800,
     margin: 'auto',
     justifyContent: 'space-between',
   },
-  [`@media (min-width: ${breakpoints.large}px)`]: {
+  [`@media (min-width: ${theme && theme.breakPoints.large}px)`]: {
     maxWidth: 1240,
   },
-});
+}));
 
-export const Left = styled('div')({
+export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   alignItems: 'center',
   display: 'none',
-  [`@media (min-width: ${breakpoints.medium}px)`]: {
+  [`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
     display: 'flex',
   },
-});
+}));
 
 export const Right = styled(Left)({
   display: 'flex',
diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts
index 1217f0a..d80c950 100644
--- a/src/components/Header/styles.ts
+++ b/src/components/Header/styles.ts
@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 
 import { Theme } from '../../design-tokens/theme';
-import { breakpoints } from '../../utils/styles/media';
 import IconButton from '../../muiComponents/IconButton';
 import AppBar from '../../muiComponents/AppBar';
 import Toolbar from '../../muiComponents/Toolbar';
@@ -54,12 +53,12 @@ export const SearchWrapper = styled('div')({
   width: '100%',
 });
 
-export const NavBar = styled(AppBar)<{ theme?: Theme }>(props => ({
-  backgroundColor: props.theme && props.theme.palette.primary.main,
+export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
+  backgroundColor: theme && theme.palette.primary.main,
   minHeight: 60,
   display: 'flex',
   justifyContent: 'center',
-  [`@media (min-width: ${breakpoints.medium}px)`]: css`
+  [`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: css`
     ${SearchWrapper} {
       display: flex;
     }
@@ -70,12 +69,12 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(props => ({
       display: none;
     }
   `,
-  [`@media (min-width: ${breakpoints.large}px)`]: css`
+  [`@media (min-width: ${theme && theme.breakPoints.large}px)`]: css`
     ${InnerNavBar} {
       padding: 0 20px;
     }
   `,
-  [`@media (min-width: ${breakpoints.xlarge}px)`]: css`
+  [`@media (min-width: ${theme && theme.breakPoints.xlarge}px)`]: css`
     ${InnerNavBar} {
       max-width: 1240px;
       width: 100%;
diff --git a/src/components/Install/Install.tsx b/src/components/Install/Install.tsx
index 9f10ee3..fef71e2 100644
--- a/src/components/Install/Install.tsx
+++ b/src/components/Install/Install.tsx
@@ -2,16 +2,16 @@ import React, { useContext } from 'react';
 import styled from '@emotion/styled';
 
 import { DetailContext } from '../../pages/Version';
-import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';
 import List from '../../muiComponents/List';
+import { Theme } from '../../design-tokens/theme';
 
 import InstallListItem, { DependencyManager } from './InstallListItem';
 
-const StyledText = styled(Text)({
-  fontWeight: fontWeight.bold,
+const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
   textTransform: 'capitalize',
-});
+}));
 
 const Install: React.FC = () => {
   const detailContext = useContext(DetailContext);
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index d8ef06d..df9977c 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-import { fontWeight } from '../../utils/styles/sizes';
+import { Theme } from '../../design-tokens/theme';
 
 interface Props {
   text: string;
@@ -14,8 +14,8 @@ interface WrapperProps {
   weight: string;
 }
 
-const Wrapper = styled('div')<WrapperProps>(props => ({
-  fontWeight: fontWeight[props.weight],
+const Wrapper = styled('div')<WrapperProps & { theme?: Theme }>(props => ({
+  fontWeight: props.theme && props.theme.fontWeight[props.weight],
   textTransform: props.capitalize ? 'capitalize' : 'none',
 }));
 
diff --git a/src/components/NotFound/NotFound.tsx b/src/components/NotFound/NotFound.tsx
index 0dfdc86..6d80b50 100644
--- a/src/components/NotFound/NotFound.tsx
+++ b/src/components/NotFound/NotFound.tsx
@@ -5,7 +5,6 @@ import { useHistory } from 'react-router-dom';
 import Box from '../../muiComponents/Box';
 import Button from '../../muiComponents/Button';
 import Heading from '../../muiComponents/Heading';
-import { spacings } from '../../utils/styles/spacings';
 import { Theme } from '../../design-tokens/theme';
 
 import PackageImg from './img/package.svg';
@@ -21,7 +20,7 @@ const EmptyPackage = styled('img')({
 
 const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({
   color: props.theme && props.theme.palette.primary.main,
-  marginBottom: spacings.sm,
+  marginBottom: 16,
 }));
 
 const NotFound: React.FC = () => {
diff --git a/src/components/Package/styles.ts b/src/components/Package/styles.ts
index 77007fc..33e6076 100644
--- a/src/components/Package/styles.ts
+++ b/src/components/Package/styles.ts
@@ -1,10 +1,8 @@
 import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
 
-import { breakpoints } from '../../utils/styles/media';
 import Ico from '../Icon';
 import Label from '../Label';
-import { fontWeight } from '../../utils/styles/sizes';
 import { default as MuiIconButton } from '../../muiComponents/IconButton';
 import { default as Photo } from '../../muiComponents/Avatar';
 import List from '../../muiComponents/List';
@@ -13,18 +11,18 @@ import Grid from '../../muiComponents/Grid';
 import ListItemText from '../../muiComponents/ListItemText';
 import { Theme } from '../../design-tokens/theme';
 
-export const OverviewItem = styled('span')<{ theme?: Theme }>(props => ({
+export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   margin: '0 0 0 16px',
-  color: props.theme && props.theme.palette.greyLight2,
+  color: theme && theme.palette.greyLight2,
   fontSize: 12,
-  [`@media (max-width: ${breakpoints.medium}px)`]: {
+  [`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
     ':nth-of-type(3)': {
       display: 'none',
     },
   },
-  [`@media (max-width: ${breakpoints.small}px)`]: {
+  [`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
     ':nth-of-type(4)': {
       display: 'none',
     },
@@ -43,7 +41,7 @@ export const Published = styled('span')<{ theme?: Theme }>(props => ({
 
 export const Text = styled(Label)<{ theme?: Theme }>(props => ({
   fontSize: '12px',
-  fontWeight: fontWeight.semiBold,
+  fontWeight: props.theme && props.theme.fontWeight.semiBold,
   color: props.theme && props.theme.palette.greyLight2,
 }));
 
@@ -68,17 +66,17 @@ export const WrapperLink = styled(Link)({
   textDecoration: 'none',
 });
 
-export const PackageTitle = styled('span')<{ theme?: Theme }>(props => ({
-  fontWeight: 600,
+export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
+  fontWeight: theme && theme.fontWeight.bold,
   fontSize: 20,
   display: 'block',
   marginBottom: 12,
-  color: props.theme && props.theme.palette.eclipse,
+  color: theme && theme.palette.eclipse,
   cursor: 'pointer',
   ':hover': {
-    color: props.theme && props.theme.palette.black,
+    color: theme && theme.palette.black,
   },
-  [`@media (max-width: ${breakpoints.small}px)`]: {
+  [`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
     fontSize: 14,
     marginBottom: 8,
   },
@@ -105,14 +103,14 @@ export const IconButton = styled(MuiIconButton)({
   },
 });
 
-export const TagContainer = styled('span')({
+export const TagContainer = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   marginTop: 8,
   marginBottom: 12,
   display: 'block',
-  [`@media (max-width: ${breakpoints.medium}px)`]: {
+  [`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
     display: 'none',
   },
-});
+}));
 
 export const PackageListItemText = styled(ListItemText)({
   paddingRight: 0,
diff --git a/src/components/PackageList/PackageList.tsx b/src/components/PackageList/PackageList.tsx
index c20044e..5d4e056 100644
--- a/src/components/PackageList/PackageList.tsx
+++ b/src/components/PackageList/PackageList.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, ReactNode } from 'react';
+import styled from '@emotion/styled';
 
 import Package from '../Package';
 import Help from '../Help';
@@ -6,7 +7,10 @@ import { formatLicense } from '../../utils/package';
 import { PackageInterface } from '../Package/Package';
 import Divider from '../../muiComponents/Divider';
 
-import * as classes from './styles';
+const PkgContainer = styled('div')({
+  margin: 0,
+  padding: 0,
+});
 
 interface Props {
   packages: PackageInterface[];
@@ -32,7 +36,7 @@ export const PackageList: React.FC<Props> = ({ packages }) => {
 
   return (
     <div className={'package-list-items'}>
-      <div className={classes.pkgContainer}>{hasPackages() ? renderPackages() : <Help />}</div>
+      <PkgContainer>{hasPackages() ? renderPackages() : <Help />}</PkgContainer>
     </div>
   );
 };
diff --git a/src/components/PackageList/styles.ts b/src/components/PackageList/styles.ts
deleted file mode 100644
index b5268c1..0000000
--- a/src/components/PackageList/styles.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { css } from 'emotion';
-
-import { fontWeight, fontSize } from '../../utils/styles/sizes';
-
-export const listTitle = css({
-  fontWeight: fontWeight.regular,
-  fontSize: fontSize.xl,
-  margin: `0 0 10px 0`,
-});
-
-export const pkgContainer = css`
-  margin: 0;
-  padding: 0;
-
-  & .listTitle {
-    ${listTitle}
-  }
-`;
diff --git a/src/components/RegistryInfoDialog/styles.ts b/src/components/RegistryInfoDialog/styles.ts
index c8fbccc..236bb04 100644
--- a/src/components/RegistryInfoDialog/styles.ts
+++ b/src/components/RegistryInfoDialog/styles.ts
@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 
-import { fontSize } from '../../utils/styles/sizes';
 import DialogTitle from '../../muiComponents/DialogTitle';
 import DialogContent from '../../muiComponents/DialogContent';
 import { Theme } from '../../design-tokens/theme';
@@ -8,7 +7,7 @@ import { Theme } from '../../design-tokens/theme';
 export const Title = styled(DialogTitle)<{ theme?: Theme }>(props => ({
   backgroundColor: props.theme && props.theme.palette.primary.main,
   color: props.theme && props.theme.palette.white,
-  fontSize: fontSize.lg,
+  fontSize: props.theme && props.theme.fontSize.lg,
 }));
 
 export const Content = styled(DialogContent)({
diff --git a/src/components/Repository/Repository.tsx b/src/components/Repository/Repository.tsx
index a94384c..3b09207 100644
--- a/src/components/Repository/Repository.tsx
+++ b/src/components/Repository/Repository.tsx
@@ -10,14 +10,13 @@ import CopyToClipBoard from '../CopyToClipBoard';
 import List from '../../muiComponents/List';
 import { DetailContext } from '../../pages/Version';
 import { Theme } from '../../design-tokens/theme';
-import { fontWeight } from '../../utils/styles/sizes';
 
 import git from './img/git.png';
 
-const StyledText = styled(Text)({
-  fontWeight: fontWeight.bold,
+const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
   textTransform: 'capitalize',
-});
+}));
 
 const GithubLink = styled('a')<{ theme?: Theme }>(props => ({
   color: props.theme && props.theme.palette.primary.main,
diff --git a/src/components/UpLinks/styles.ts b/src/components/UpLinks/styles.ts
index d4940d4..7758d4b 100644
--- a/src/components/UpLinks/styles.ts
+++ b/src/components/UpLinks/styles.ts
@@ -2,11 +2,11 @@ import styled from '@emotion/styled';
 
 import Text from '../../muiComponents/Text';
 import { default as MuiListItemText } from '../../muiComponents/ListItemText';
-import { fontWeight } from '../../utils/styles/sizes';
+import { Theme } from '../../design-tokens/theme';
 
-export const StyledText = styled(Text)({
-  fontWeight: fontWeight.bold,
-});
+export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
+}));
 
 export const Spacer = styled('div')({
   flex: '1 1 auto',
diff --git a/src/components/Versions/styles.ts b/src/components/Versions/styles.ts
index 8cbc8f1..d272558 100644
--- a/src/components/Versions/styles.ts
+++ b/src/components/Versions/styles.ts
@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
 
-import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';
 import { default as MuiListItemText } from '../../muiComponents/ListItemText';
+import { Theme } from '../../design-tokens/theme';
 import Link from '../Link';
 
-export const StyledText = styled(Text)({
-  fontWeight: fontWeight.bold,
-});
+export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
+  fontWeight: props.theme && props.theme.fontWeight.bold,
+}));
 
 export const Spacer = styled('div')({
   flex: '1 1 auto',
diff --git a/src/design-tokens/ResetStyles.tsx b/src/design-tokens/ResetStyles.tsx
index 88d77ab..038d724 100644
--- a/src/design-tokens/ResetStyles.tsx
+++ b/src/design-tokens/ResetStyles.tsx
@@ -1,17 +1,16 @@
 import { makeStyles } from '@material-ui/styles';
 import React from 'react';
 
-import { fontWeight } from '../utils/styles/sizes';
-import { breakpoints } from '../utils/styles/media';
+import { Theme } from './theme';
 
-const resetStyles = makeStyles(() => ({
+const resetStyles = makeStyles(({ theme }: { theme?: Theme }) => ({
   '@global': {
     // eslint-disable-next-line max-len
     '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': {
       fontFamily: '"Roboto", Helvetica Neue, Arial, sans-serif',
     },
     strong: {
-      fontWeight: fontWeight.semiBold,
+      fontWeight: theme && theme.fontWeight.semiBold,
     },
     'html, body, #root': {
       height: '100%',
@@ -25,8 +24,8 @@ const resetStyles = makeStyles(() => ({
       padding: 15,
       flex: 1,
 
-      [`@media screen and (min-width: ${breakpoints.container}px)`]: {
-        maxWidth: breakpoints.container,
+      [`@media screen and (min-width: ${theme && theme.breakPoints.container}px)`]: {
+        maxWidth: theme && theme.breakPoints.container,
         width: '100%',
         marginLeft: 'auto',
         marginRight: 'auto',
diff --git a/src/design-tokens/theme.ts b/src/design-tokens/theme.ts
index b07ccf3..b5a2231 100644
--- a/src/design-tokens/theme.ts
+++ b/src/design-tokens/theme.ts
@@ -28,6 +28,44 @@ const colors = {
 
 export type Colors = keyof typeof colors;
 
+const fontSize = {
+  xxl: 26,
+  xl: 24,
+  lg: 21,
+  md: 18,
+  default: 16,
+  sm: 14,
+};
+
+export type FontSize = keyof typeof fontSize;
+
+const fontWeight = {
+  light: 300,
+  regular: 400,
+  semiBold: 500,
+  bold: 700,
+};
+
+export type FontWeight = keyof typeof fontWeight;
+
+export const breakPoints = {
+  small: 576,
+  medium: 768,
+  large: 1024,
+  container: 1240,
+  xlarge: 1275,
+};
+
+export type BreakPoints = typeof breakPoints;
+
+const customizedTheme = {
+  fontSize,
+  fontWeight,
+  breakPoints,
+};
+
+type CustomizedTheme = typeof customizedTheme;
+
 export const theme = createMuiTheme({
   typography: {
     fontFamily: 'inherit',
@@ -38,10 +76,18 @@ export const theme = createMuiTheme({
     secondary: { main: colors.secondary },
     error: { main: colors.red },
   },
+  ...customizedTheme,
 });
 
 export type Theme = typeof theme;
 
+declare module '@material-ui/core/styles/createMuiTheme' {
+  /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+  interface Theme extends CustomizedTheme {}
+  /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+  interface ThemeOptions extends CustomizedTheme {}
+}
+
 declare module '@material-ui/core/styles/createPalette' {
   interface CustomPalette {
     black: string;
diff --git a/src/utils/styles/media.ts b/src/utils/styles/media.ts
deleted file mode 100644
index 8b05741..0000000
--- a/src/utils/styles/media.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { css, Interpolation } from 'emotion';
-
-export const breakpoints = {
-  small: 576,
-  medium: 768,
-  large: 1024,
-  container: 1240,
-  xlarge: 1275,
-};
-
-type Breakpoints = typeof breakpoints;
-type Sizes = keyof Breakpoints;
-
-type MediaQuery<T> = {
-  [P in keyof T]: (args: Interpolation, key?: P) => string;
-};
-
-function constructMQ(breakpoint: Sizes, args: Interpolation): string {
-  const label = breakpoints[breakpoint];
-  const prefix = typeof label === 'string' ? '' : 'min-width:';
-  const suffix = typeof label === 'string' ? '' : 'px';
-
-  return css`
-    @media (${prefix + breakpoints[breakpoint] + suffix}) {
-      ${args};
-    }
-  `;
-}
-
-const mq: MediaQuery<Breakpoints> = {
-  small: (args, b = 'small') => constructMQ(b, args),
-  large: (args, b = 'large') => constructMQ(b, args),
-  container: (args, b = 'container') => constructMQ(b, args),
-  medium: (args, b = 'medium') => constructMQ(b, args),
-  xlarge: (args, b = 'xlarge') => constructMQ(b, args),
-};
-
-export default mq;
diff --git a/src/utils/styles/mixings.ts b/src/utils/styles/mixings.ts
deleted file mode 100644
index a273df1..0000000
--- a/src/utils/styles/mixings.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * CSS to represent truncated text with an ellipsis.
- */
-export function ellipsis(width: string | number): {} {
-  return {
-    display: 'inline-block',
-    maxWidth: width,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    wordWrap: 'normal',
-  };
-}
-
-/**
- * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.
- */
-interface SpacingShortHand<type> {
-  top?: type;
-  right?: type;
-  bottom?: type;
-  left?: type;
-}
-
-const positionMap = ['Top', 'Right', 'Bottom', 'Left'];
-
-export function spacing(property: 'padding' | 'margin', ...values: SpacingShortHand<number | string>[]): {} {
-  const [firstValue = 0, secondValue = 0, thirdValue = 0, fourthValue = 0] = values;
-  const valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
-  let styles = {};
-  for (let i = 0; i < valuesWithDefaults.length; i += 1) {
-    if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {
-      styles = {
-        ...styles,
-        [`${property}${positionMap[i]}`]: valuesWithDefaults[i],
-      };
-    }
-  }
-  return styles;
-}
diff --git a/src/utils/styles/sizes.ts b/src/utils/styles/sizes.ts
deleted file mode 100644
index 083c9b2..0000000
--- a/src/utils/styles/sizes.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export const fontSize = {
-  xxl: '26px',
-  xl: '24px',
-  lg: '21px',
-  md: '18px',
-  base: '16px',
-  sm: '14px',
-};
-
-export const lineHeight = {
-  xl: '30px',
-  sm: '18px',
-  xs: '2',
-  xxs: '1.5',
-};
-
-export const fontWeight = {
-  light: 300,
-  regular: 400,
-  semiBold: 500,
-  bold: 700,
-};
diff --git a/src/utils/styles/spacings.ts b/src/utils/styles/spacings.ts
deleted file mode 100644
index 7478d92..0000000
--- a/src/utils/styles/spacings.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Spacings
-// -------------------------
-
-export const spacings = {
-  lg: '30px',
-  sm: '16px',
-};