diff --git a/frontend/.storybook/config.js b/frontend/.storybook/config.js
index 3fc3ca29f4..72f4f170e4 100644
--- a/frontend/.storybook/config.js
+++ b/frontend/.storybook/config.js
@@ -1,11 +1,17 @@
-import { configure } from "@storybook/react";
+import { configure, addDecorator as add } from '@storybook/react';
 
-import 'modern-normalize';
+import 'reset-css';
+
+import { wrapper } from './wrapper';
 
 function loadStories() {
-  require("../src/stories/index.tsx");
-  require("../src/stories/navbar/index.tsx");
-  require("../src/stories/logo/index.tsx");
+  require('../src/stories/index.tsx');
+  require('../src/stories/navbar/index.tsx');
+  require('../src/stories/logo/index.tsx');
+  require('../src/stories/box/index.tsx');
+  require('../src/stories/typography/index.tsx');
 }
 
+add(wrapper());
+
 configure(loadStories, module);
diff --git a/frontend/.storybook/preview-head.html b/frontend/.storybook/preview-head.html
new file mode 100644
index 0000000000..7c2fc75ec9
--- /dev/null
+++ b/frontend/.storybook/preview-head.html
@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Rubik:500,700" rel="stylesheet">
diff --git a/frontend/.storybook/wrapper.js b/frontend/.storybook/wrapper.js
new file mode 100644
index 0000000000..dd38165fe4
--- /dev/null
+++ b/frontend/.storybook/wrapper.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { ThemeProvider } from 'emotion-theming';
+
+import { theme } from '../src/theme';
+
+export function wrapper() {
+  return story => {
+    return (
+      <ThemeProvider theme={theme}>
+        <div>{story()}</div>
+      </ThemeProvider>
+    );
+  };
+}
diff --git a/frontend/package.json b/frontend/package.json
index 846c3a6d93..6ba76941ee 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,11 +4,14 @@
   "private": true,
   "dependencies": {
     "emotion": "^9.0.2",
-    "modern-normalize": "^0.4.0",
+    "emotion-theming": "^9.0.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-emotion": "^9.0.2",
-    "react-scripts-ts": "2.13.0"
+    "react-scripts-ts": "2.13.0",
+    "recompose": "^0.26.0",
+    "reset-css": "^3.0.0",
+    "styled-system": "^2.1.1"
   },
   "scripts": {
     "start": "react-scripts-ts start",
diff --git a/frontend/public/index.html b/frontend/public/index.html
index e8128ed074..cf29d0167e 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -6,6 +6,8 @@
     <meta name="theme-color" content="#000000">
 
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Rubik:500,700" rel="stylesheet">
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/frontend/src/components/box/index.tsx b/frontend/src/components/box/index.tsx
new file mode 100644
index 0000000000..1063121ef5
--- /dev/null
+++ b/frontend/src/components/box/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import {
+  space,
+  width,
+  fontSize,
+  color,
+  boxShadow,
+  SpaceProps,
+  WidthProps,
+  FontSizeProps,
+  ColorProps,
+  BoxShadowProps
+} from 'styled-system';
+
+import styled from '../../styled';
+
+type BoxProps = SpaceProps &
+  WidthProps &
+  FontSizeProps &
+  ColorProps &
+  BoxShadowProps;
+
+export const Box: React.SFC<BoxProps> = styled('div')`
+  ${space}
+  ${width}
+  ${fontSize}
+  ${color}
+  ${boxShadow}
+`;
diff --git a/frontend/src/components/typography/index.tsx b/frontend/src/components/typography/index.tsx
new file mode 100644
index 0000000000..1b05d211d4
--- /dev/null
+++ b/frontend/src/components/typography/index.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { withTheme } from 'emotion-theming';
+import withProps from 'recompose/withProps';
+
+import { Theme } from '../../theme';
+
+import {
+  space,
+  fontSize,
+  color,
+  lineHeight,
+  fontFamily,
+  FontFamilyProps,
+  LineHeightProps,
+  SpaceProps,
+  FontSizeProps,
+  ColorProps,
+  BoxShadowProps
+} from 'styled-system';
+
+import styled from '../../styled';
+
+type TypographyProps = SpaceProps &
+  FontSizeProps &
+  LineHeightProps &
+  ColorProps &
+  FontFamilyProps &
+  BoxShadowProps;
+
+const BaseTypography = styled<TypographyProps, 'h1'>('h1')`
+  ${space}
+  ${fontFamily}
+  ${fontSize}
+  ${lineHeight}
+  ${color}
+`;
+
+interface TitleProps {
+  level: 1 | 2 | 3;
+  children: React.ReactNode;
+}
+
+// TODO spacing etc
+const BaseTitle = ({
+  theme,
+  level,
+  children
+}: TitleProps & { theme: Theme }) => {
+  // ugly, but works :)
+  const tagName: keyof JSX.IntrinsicElements = `h${level}` as keyof JSX.IntrinsicElements;
+  const name = `title${level}`;
+
+  const X = BaseTypography.withComponent(tagName);
+
+  return (
+    <X fontSize={name} lineHeight={name} fontFamily="title">
+      {children}
+    </X>
+  );
+};
+
+export const Title = withTheme<TitleProps, Theme>(BaseTitle);
+
+const BaseParagraph = withProps({
+  fontFamily: 'base',
+  fontSize: 'body',
+  lineHeight: 'body',
+  mb: 3
+})(BaseTypography.withComponent('p'));
+
+export const Paragraph = withTheme<{}, Theme>(BaseParagraph);
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 3f17f12c15..a3356af9a2 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -2,6 +2,15 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import App from './App';
 
-import 'modern-normalize';
+import { ThemeProvider } from 'emotion-theming';
 
-ReactDOM.render(<App />, document.getElementById('root') as HTMLElement);
+import { theme } from './theme';
+
+import 'reset-css';
+
+ReactDOM.render(
+  <ThemeProvider theme={theme}>
+    <App />
+  </ThemeProvider>,
+  document.getElementById('root') as HTMLElement
+);
diff --git a/frontend/src/stories/box/index.tsx b/frontend/src/stories/box/index.tsx
new file mode 100644
index 0000000000..e51a17ce8b
--- /dev/null
+++ b/frontend/src/stories/box/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Box } from '../../components/box';
+
+storiesOf('Box', module)
+  .add('plain', () => <Box>Hello world</Box>)
+  .add('font size', () => <Box fontSize={4}>Hello world</Box>)
+  .add('complex', () => (
+    <Box m={2} p={1} boxShadow={1}>
+      Hello world
+    </Box>
+  ))
+  .add('padding', () => (
+    // padding: 32px (theme.space[3])
+    <Box p={3}>Hello world</Box>
+  ))
+  .add('color', () => (
+    // color
+    <Box color="tomato">Hello world </Box>
+  ))
+  .add('background color', () => (
+    // background color
+    <Box bg="tomato">Hello world</Box>
+  ));
diff --git a/frontend/src/stories/typography/index.tsx b/frontend/src/stories/typography/index.tsx
new file mode 100644
index 0000000000..e318be0e06
--- /dev/null
+++ b/frontend/src/stories/typography/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Title, Paragraph } from '../../components/typography';
+
+storiesOf('Typography', module)
+  .add('titles', () => (
+    <div>
+      <Title level={1}>Title 1</Title>
+      <Title level={2}>Title 2</Title>
+      <Title level={3}>Title 3</Title>
+    </div>
+  ))
+  .add('paragraphs', () => (
+    <div>
+      <Paragraph>
+        Legio eligo sed medius, negotium oblivio sed neque neque culpa lacrima
+        dulcis lorem, sit quis, sit infantia gratia virtus quis in trivia trivia
+        benevolentia legis ergo dolor lacuna virtus insula sit canvallis caelum
+        quis impera fabula lacuna lorem medius ora.
+      </Paragraph>
+      <Paragraph>
+        Legio eligo sed medius, negotium oblivio sed neque neque culpa lacrima
+        dulcis lorem, sit quis, sit infantia gratia virtus quis in trivia trivia
+        benevolentia legis ergo dolor lacuna virtus insula sit canvallis caelum
+        quis impera fabula lacuna lorem medius ora.
+      </Paragraph>
+    </div>
+  ));
diff --git a/frontend/src/styled/index.ts b/frontend/src/styled/index.ts
new file mode 100644
index 0000000000..6bfa106c96
--- /dev/null
+++ b/frontend/src/styled/index.ts
@@ -0,0 +1,5 @@
+import styled, { ThemedReactEmotionInterface } from 'react-emotion';
+
+import { Theme } from '../theme';
+
+export default styled as ThemedReactEmotionInterface<Theme>;
diff --git a/frontend/src/theme/index.ts b/frontend/src/theme/index.ts
new file mode 100644
index 0000000000..5ae90a4eb4
--- /dev/null
+++ b/frontend/src/theme/index.ts
@@ -0,0 +1,62 @@
+const breakpoints = ['40em', '52em', '64em'];
+
+const colors = {
+  text: '#333333',
+  blue: '#0c67ff',
+
+  grey: '#f4f4f4',
+  white: '#ffffff'
+};
+
+const space = [0, 4, 8, 16, 32, 64, 128, 256, 512];
+
+const fontSizes = {
+  title1: 45.234335104,
+  title2: 31.990336,
+  title3: 22.624,
+  body: 16
+};
+
+const lineHeights = {
+  title1: 1.1,
+  title2: 1.2,
+  title3: 1.3,
+  body: 1.4
+};
+
+const fontWeights = {
+  normal: 500,
+  bold: 700
+};
+
+const letterSpacings = {
+  normal: 'normal',
+  caps: '0.25em'
+};
+
+const radii = [0, 2, 4, 8];
+
+const borders = [0, '1px solid', '2px solid'];
+
+const shadows = [`0 1px 2px 0 ${colors.text}`, `0 1px 4px 0 ${colors.text}`];
+
+const fonts = {
+  title: 'Rubik',
+  base: 'Roboto Mono',
+};
+
+export const theme = {
+  breakpoints,
+  colors,
+  space,
+  fontSizes,
+  lineHeights,
+  fontWeights,
+  letterSpacings,
+  radii,
+  fonts,
+  borders,
+  shadows
+};
+
+export type Theme = typeof theme;
diff --git a/frontend/src/typings/recompose/index.d.ts b/frontend/src/typings/recompose/index.d.ts
new file mode 100644
index 0000000000..6d98e5fec2
--- /dev/null
+++ b/frontend/src/typings/recompose/index.d.ts
@@ -0,0 +1,2 @@
+declare module 'recompose';
+declare module 'recompose/withProps';
diff --git a/frontend/src/typings/styled-system/index.d.ts b/frontend/src/typings/styled-system/index.d.ts
new file mode 100644
index 0000000000..e2f76f7a1d
--- /dev/null
+++ b/frontend/src/typings/styled-system/index.d.ts
@@ -0,0 +1,334 @@
+declare namespace StyledSystem {
+  export interface BaseTheme {
+    breakpoints?: number[];
+    space?: number[];
+    fontSizes?: number[];
+    colors?: {
+      [name: string]: string;
+    };
+  }
+
+  type ResponsiveValue<T> = T | (T | null)[];
+
+  //
+  // Core
+  //
+
+  export type SpaceValue = number | string;
+  export type ResponsiveSpaceValue = ResponsiveValue<SpaceValue>;
+
+  export interface SpaceProps {
+    m?: ResponsiveSpaceValue;
+    mt?: ResponsiveSpaceValue;
+    mr?: ResponsiveSpaceValue;
+    mb?: ResponsiveSpaceValue;
+    ml?: ResponsiveSpaceValue;
+    mx?: ResponsiveSpaceValue;
+    my?: ResponsiveSpaceValue;
+    p?: ResponsiveSpaceValue;
+    pt?: ResponsiveSpaceValue;
+    pr?: ResponsiveSpaceValue;
+    pb?: ResponsiveSpaceValue;
+    pl?: ResponsiveSpaceValue;
+    px?: ResponsiveSpaceValue;
+    py?: ResponsiveSpaceValue;
+  }
+
+  export function space(...args: any[]): any;
+
+  export type WidthValue = number | string;
+  export type ResponsiveWidthValue = ResponsiveValue<WidthValue>;
+
+  export interface WidthProps {
+    width?: ResponsiveWidthValue;
+  }
+
+  export function width(...args: any[]): any;
+
+  export type FontSizeValue = number | string;
+  export type ResponsiveFontSizeValue = ResponsiveValue<FontSizeValue>;
+
+  export interface FontSizeProps {
+    fontSize?: ResponsiveFontSizeValue;
+  }
+
+  export function fontSize(...args: any[]): any;
+
+  export type ColorValue = string;
+  export type ResponsiveColorValue = ResponsiveValue<ColorValue>;
+
+  export interface ColorProps {
+    color?: ResponsiveColorValue;
+    bg?: ResponsiveColorValue;
+  }
+
+  export function color(...args: any[]): any;
+
+  export interface FontFamilyProps {
+    fontFamily?: number | string;
+    font?: number | string;
+  }
+  export function fontFamily(...args: any[]): any;
+
+  //
+  // Extras
+  //
+
+  export type TextAlignValue =
+    | 'left'
+    | 'right'
+    | 'center'
+    | 'justify'
+    | 'justify-all'
+    | 'start'
+    | 'end'
+    | 'match-parent';
+  export type ResponsiveTextAlignValue = ResponsiveValue<TextAlignValue>;
+
+  export interface TextAlignProps {
+    align?: ResponsiveTextAlignValue;
+  }
+
+  export function textAlign(...args: any[]): any;
+
+  export type FontWeightValue =
+    | 'normal'
+    | 'bold'
+    | 'lighter'
+    | 'bolder'
+    | 100
+    | 200
+    | 300
+    | 400
+    | 500
+    | 600
+    | 700
+    | 800
+    | 900;
+
+  export interface FontWeightProps {
+    fontWeight?: FontWeightValue;
+  }
+
+  export function fontWeight(...args: any[]): any;
+
+  export interface LineHeightProps {
+    lineHeight?: number | string;
+  }
+
+  export function lineHeight(...args: any[]): any;
+
+  export type AlignItemsValue =
+    | 'normal'
+    | 'stretch'
+    | 'center'
+    | 'start'
+    | 'end'
+    | 'flex-start'
+    | 'flex-end'
+    | 'self-start'
+    | 'self-end'
+    | 'left'
+    | 'right'
+    | 'baseline'
+    | 'first baseline'
+    | 'last baseline'
+    | 'safe center'
+    | 'unsafe center';
+  export type ResponsiveAlignItemsValue = ResponsiveValue<AlignItemsValue>;
+
+  export interface AlignItemsProps {
+    align?: ResponsiveAlignItemsValue;
+  }
+
+  export function alignItems(...args: any[]): any;
+
+  export type JustifyContentValue =
+    | 'center'
+    | 'start'
+    | 'end'
+    | 'flex-start'
+    | 'flex-end'
+    | 'left'
+    | 'right'
+    | 'baseline'
+    | 'first baseline'
+    | 'last baseline'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly'
+    | 'stretch'
+    | 'safe center'
+    | 'unsafe center';
+  export type ResponsiveJustifyContentValue = ResponsiveValue<
+    JustifyContentValue
+  >;
+
+  export interface JustifyContentProps {
+    justify?: ResponsiveJustifyContentValue;
+  }
+
+  export function justifyContent(...args: any[]): any;
+
+  export interface FlexWrapProps {
+    wrap?: boolean;
+  }
+
+  export function flexWrap(...args: any[]): any;
+
+  export type FlexDirectionValue =
+    | 'row'
+    | 'row-reverse'
+    | 'column'
+    | 'column-reverse';
+  export type ResponsiveFlexDirectionValue = ResponsiveValue<
+    FlexDirectionValue
+  >;
+
+  export interface FlexDirectionProps {
+    flexDirection?: ResponsiveFlexDirectionValue;
+  }
+
+  export function flexDirection(...args: any[]): any;
+
+  export type FlexValue = string;
+  export type ResponsiveFlexValue = ResponsiveValue<FlexValue>;
+
+  export interface FlexProps {
+    flex?: ResponsiveFlexValue;
+  }
+
+  export function flex(...args: any[]): any;
+
+  export type AlignSelfValue =
+    | 'auto'
+    | 'normal'
+    | 'center'
+    | 'start'
+    | 'end'
+    | 'self-start'
+    | 'self-end'
+    | 'flex-start'
+    | 'flex-end'
+    | 'left'
+    | 'right'
+    | 'baseline'
+    | 'first baseline'
+    | 'last baseline'
+    | 'stretch'
+    | 'safe center'
+    | 'unsafe center';
+  export type ResponsiveAlignSelfValue = ResponsiveValue<AlignSelfValue>;
+
+  export interface AlignSelfProps {
+    alignSelf?: ResponsiveAlignSelfValue;
+  }
+
+  export function alignSelf(...args: any[]): any;
+
+  export type BorderRadiusValue = number;
+
+  export interface BorderRadiusProps {
+    borderRadius?: BorderRadiusValue;
+  }
+
+  export function borderRadius(...args: any[]): any;
+
+  export type BorderColorValue = string;
+
+  export interface BorderColorProps {
+    borderColor?: BorderColorValue;
+  }
+
+  export function borderColor(...args: any[]): any;
+
+  export type BorderWidthValue = number;
+
+  export interface BorderWidthProps {
+    borderWidth?: BorderWidthValue;
+    borderTop?: boolean;
+    borderRight?: boolean;
+    borderBottom?: boolean;
+    borderLeft?: boolean;
+  }
+
+  export function borderWidth(...args: any[]): any;
+
+  export type BoxShadowValue = number;
+
+  export interface BoxShadowProps {
+    boxShadow?: BoxShadowValue;
+  }
+
+  export function boxShadow(...args: any[]): any;
+
+  export type PseudoStyleValue = {
+    color?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    boxShadow?: number;
+  };
+
+  export type HoverValue = PseudoStyleValue;
+
+  export interface HoverProps {
+    hover?: HoverValue;
+  }
+
+  export function hover(...args: any[]): any;
+
+  export type FocusValue = PseudoStyleValue;
+
+  export interface FocusProps {
+    focus?: FocusValue;
+  }
+
+  export function focus(...args: any[]): any;
+
+  export type ActiveValue = PseudoStyleValue;
+
+  export interface ActiveProps {
+    active?: ActiveValue;
+  }
+
+  export function active(...args: any[]): any;
+
+  export type DisabledValue = PseudoStyleValue;
+
+  export interface DisabledProps {
+    disabledStyle?: DisabledValue;
+  }
+
+  export function disabled(...args: any[]): any;
+
+  //
+  // Utilities
+  //
+
+  export function theme(keys: string): any;
+
+  export function cleanElement(component: any): any;
+
+  export function removeProps(props: any): any;
+
+  //
+  // Low-level style functions
+  //
+
+  export interface LowLevelStyleFunctionArguments {
+    prop: string;
+    cssProperty: string;
+    key?: string;
+    numberToPx?: boolean;
+  }
+
+  export function style(args: LowLevelStyleFunctionArguments): any;
+
+  export function responsiveStyle(args: LowLevelStyleFunctionArguments): any;
+
+  export function pseudoStyle(args: LowLevelStyleFunctionArguments): any;
+}
+
+declare module 'styled-system' {
+  export = StyledSystem;
+}
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index a88d940769..bbf5176e6a 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2150,6 +2150,10 @@ chalk@~0.4.0:
     has-color "~0.1.0"
     strip-ansi "~0.1.0"
 
+change-emitter@^0.1.2:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
+
 chardet@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
@@ -3075,6 +3079,12 @@ emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
 
+emotion-theming@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-9.0.0.tgz#3b7dd07ceae70aab98280e81df8bfd7f9254d5c3"
+  dependencies:
+    hoist-non-react-statics "^2.3.1"
+
 emotion-utils@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/emotion-utils/-/emotion-utils-9.0.1.tgz#db1034410d8ac4e399845d346471c3f2db5124d7"
@@ -3503,7 +3513,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.9:
+fbjs@^0.8.1, fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.9:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -4123,6 +4133,10 @@ hoist-non-react-statics@1.x.x, hoist-non-react-statics@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
 
+hoist-non-react-statics@^2.3.1:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
+
 home-or-tmp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-1.0.0.tgz#4b9f1e40800c3e50c6c27f781676afcce71f3985"
@@ -5719,10 +5733,6 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd
   dependencies:
     minimist "0.0.8"
 
-modern-normalize@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-0.4.0.tgz#1ccbc52861e1bce258144d28e890dc709b120ed2"
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -7193,6 +7203,15 @@ rechoir@^0.6.2:
   dependencies:
     resolve "^1.1.6"
 
+recompose@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.26.0.tgz#9babff039cb72ba5bd17366d55d7232fbdfb2d30"
+  dependencies:
+    change-emitter "^0.1.2"
+    fbjs "^0.8.1"
+    hoist-non-react-statics "^2.3.1"
+    symbol-observable "^1.0.4"
+
 recursive-readdir@2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.1.tgz#90ef231d0778c5ce093c9a48d74e5c5422d13a99"
@@ -7434,6 +7453,10 @@ requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+reset-css@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/reset-css/-/reset-css-3.0.0.tgz#9b421d34fefc6e5d5b915ee7bfd72b1bc19cfbb0"
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -8142,6 +8165,12 @@ style-loader@^0.20.2:
     loader-utils "^1.1.0"
     schema-utils "^0.4.3"
 
+styled-system@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-2.1.1.tgz#ec7cd9c25f8413662c90a3ff1b6660cf8d744163"
+  dependencies:
+    prop-types "^15.6.0"
+
 stylis-rule-sheet@^0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.5.tgz#ebae935cc1f6fb31b9b62dba47f2ea8b833dad9f"
@@ -8218,7 +8247,7 @@ sw-toolbox@^3.4.0:
     path-to-regexp "^1.0.1"
     serviceworker-cache-polyfill "^4.0.0"
 
-symbol-observable@^1.0.3:
+symbol-observable@^1.0.3, symbol-observable@^1.0.4:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"