diff --git a/.storybook/main.js b/.storybook/main.js
index c8e0b9d9d..2989e3bbc 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -29,7 +29,8 @@ module.exports = {
               // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
               require.resolve('babel-plugin-remove-graphql-queries'),
               // use babel-plugin-react-docgen to ensure PropTables still appear
-              require.resolve('babel-plugin-react-docgen')
+              require.resolve('babel-plugin-react-docgen'),
+              require.resolve('babel-plugin-styled-components')
             ]
           }
         }
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 2dc9fe840..f3664684f 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,9 +1,8 @@
-import { ThemeProvider } from 'styled-components'
 import { LocationProvider } from '@gatsbyjs/reach-router'
-
+import { ThemeProvider } from 'styled-components'
 import Flex from 'components/elements/Flex'
+import themeSpec, { themeCss } from 'theme'
 import React from 'react'
-import theme from 'theme'
 
 import '@storybook/addon-console'
 
@@ -24,13 +23,15 @@ window.___navigate = pathname => {
 
 export const decorators = [
   Story => (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={themeSpec}>
       <LocationProvider>
         <Flex
-          p={3}
-          justiContent='center'
-          alignItems='baseline'
-          flexDirection='column'
+          css={themeCss({
+            p: 3,
+            justifyContent: 'center',
+            alignItems: 'baseline',
+            flexDirection: 'column'
+          })}
         >
           <Story />
         </Flex>
diff --git a/package.json b/package.json
index 144e48474..cad1bc9e7 100644
--- a/package.json
+++ b/package.json
@@ -112,6 +112,7 @@
     "@techstack/styled-system": "~1.0.341",
     "@tippyjs/react": "~4.2.6",
     "@vercel/analytics": "~1.1.1",
+    "babel-plugin-styled-components": "~2.1.4",
     "beauty-error": "~1.2.18",
     "cssnano": "~6.0.2",
     "cssnano-preset-advanced": "~6.0.2",
diff --git a/src/components/elements/Button/Button.js b/src/components/elements/Button/Button.js
index 95b98c025..3316f2c67 100644
--- a/src/components/elements/Button/Button.js
+++ b/src/components/elements/Button/Button.js
@@ -2,15 +2,15 @@ import styled, { css } from 'styled-components'
 import { createCssState } from 'helpers/style'
 import { colors } from 'theme'
 
-import ButtonBase from './ButtonBase'
+import ButtonBase, { getColorVariant } from './ButtonBase'
 
 export const hoverStyle = createCssState({
   selector: '&:hover:not([disabled])',
   state: 'hover',
   css: css`
-    background-color: ${({ color }) => colors[color]};
-    color: ${({ bg }) => colors[bg]};
-    box-shadow: 0 0 0 1px ${({ bg }) => colors[bg]};
+    background: ${getColorVariant('color')};
+    color: ${getColorVariant('background')};
+    box-shadow: 0 0 0 1px ${getColorVariant('background')};
   `
 })
 
diff --git a/src/components/elements/Button/ButtonBase.js b/src/components/elements/Button/ButtonBase.js
index 36f72bcc3..daceac726 100644
--- a/src/components/elements/Button/ButtonBase.js
+++ b/src/components/elements/Button/ButtonBase.js
@@ -1,34 +1,47 @@
+import { transition, themeCss } from 'theme'
 import styled from 'styled-components'
-import { transition } from 'theme'
 import Text from '../Text'
 
-const Button = styled(Text)({
-  transition: `background-color ${transition.medium}, color ${transition.medium}, box-shadow ${transition.medium}`,
-  appearance: 'none',
-  display: 'inline-block',
-  textAlign: 'center',
-  lineHeight: 16 / 14,
-  textDecoration: 'none',
-  verticalAlign: 'middle',
-  WebkitFontSmoothing: 'antialiased',
-  whiteSpace: 'nowrap',
-  outline: 0,
-  '&:hover': {
-    cursor: 'pointer'
-  }
-})
+const getColor = ({ theme, variant }, propName) =>
+  theme.colors[theme.variants.button[variant][propName]]
+
+export const getColorVariant = propName => props => getColor(props, propName)
+
+const Button = styled(Text)(
+  props => {
+    return {
+      transition: `background-color ${transition.medium}, color ${transition.medium}, box-shadow ${transition.medium}`,
+      appearance: 'none',
+      display: 'inline-block',
+      textAlign: 'center',
+      lineHeight: 16 / 14,
+      textDecoration: 'none',
+      verticalAlign: 'middle',
+      WebkitFontSmoothing: 'antialiased',
+      whiteSpace: 'nowrap',
+      outline: 0,
+      '&:hover': {
+        cursor: 'pointer'
+      },
+      color: getColorVariant('color'),
+      background: getColorVariant('background'),
+      boxShadow: props.variant === 'white' ? '0 0 0 1px black' : undefined
+    }
+  },
+  themeCss({
+    fontFamily: 'sans',
+    fontSize: 1,
+    fontWeight: 'bold',
+    px: 3,
+    py: 2,
+    border: 0,
+    borderRadius: 2
+  })
+)
 
 Button.defaultProps = {
   as: 'button',
-  fontFamily: 'sans',
-  fontSize: 1,
-  fontWeight: 'bold',
-  px: 3,
-  py: 2,
-  color: 'white',
-  bg: 'link',
-  border: 0,
-  borderRadius: 2
+  variant: 'base'
 }
 
 export default Button
diff --git a/src/components/elements/Button/Buttons.stories.js b/src/components/elements/Button/Buttons.stories.js
index e32552536..ca0852686 100644
--- a/src/components/elements/Button/Buttons.stories.js
+++ b/src/components/elements/Button/Buttons.stories.js
@@ -1,12 +1,15 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { storiesOf } from '@storybook/react'
 import { Caps, Flex, Button } from 'components/elements'
+import { themeCss } from 'theme'
 
 import { Story } from 'story'
 
 const states = [null, 'hover', 'disabled', 'loading']
 
-const text = 'Get it'
+const variants = ['base', 'black', 'white']
+
+const text = 'BUY'
 
 const code = `
 import { Button } from 'components/elements'
@@ -16,21 +19,53 @@ export default () => (
 )
 `
 
+const BuyButton = ({ children, loading: initialLoading, ...props }) => {
+  const [isLoading, setIsLoading] = useState(initialLoading)
+
+  const onClick = async () => {
+    setIsLoading(true)
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    setIsLoading(false)
+  }
+
+  return (
+    <Button
+      loading={isLoading}
+      onClick={onClick}
+      css={themeCss({ mx: 3 })}
+      {...props}
+    >
+      <Caps
+        css={themeCss({
+          fontSize: 1
+        })}
+      >
+        {children}
+      </Caps>
+    </Button>
+  )
+}
+
 storiesOf('Elements', module).add('Button', () => (
   <Story name='Button' code={code}>
-    <Flex>
-      {states.map(state => (
-        <Button
-          mr={3}
-          mb={3}
-          key={state}
-          state={state}
-          disabled={state === 'disabled'}
-          loading={state === 'loading'}
-        >
-          <Caps fontSize={1}>{text}</Caps>
-        </Button>
-      ))}
+    <Flex css={themeCss({ pb: 4 })}>
+      <BuyButton>BUY</BuyButton>
+      <BuyButton variant='black'>BUY NOW</BuyButton>
     </Flex>
+    {variants.map((variant, index) => (
+      <Flex css={themeCss({ pt: index > 0 ? 4 : 0 })} key={variant}>
+        {states.map(state => (
+          <BuyButton
+            key={state}
+            variant={variant}
+            state={state}
+            disabled={state === 'disabled'}
+            loading={state === 'loading'}
+          >
+            BUY
+          </BuyButton>
+        ))}
+      </Flex>
+    ))}
   </Story>
 ))
diff --git a/src/components/elements/Dot/Dot.js b/src/components/elements/Dot/Dot.js
index 80ea04491..8441372c1 100644
--- a/src/components/elements/Dot/Dot.js
+++ b/src/components/elements/Dot/Dot.js
@@ -1,5 +1,6 @@
-import { createElement } from 'react'
 import styled from 'styled-components'
+import { colors } from 'theme'
+import React from 'react'
 
 import Text from '../Text'
 
@@ -14,9 +15,20 @@ Dot.defaultProps = {
   as: 'span'
 }
 
-const DotSuccess = props => createElement(Dot, { bg: 'teal3', ...props })
-const DotError = props => createElement(Dot, { bg: 'red6', ...props })
-const DotWarning = props => createElement(Dot, { bg: 'yellow6', ...props })
+const createDot = color => props =>
+  (
+    <Dot
+      css={{
+        background: color,
+        boxShadow: `0 0 12px 0 ${color}`
+      }}
+      {...props}
+    />
+  )
+
+const DotSuccess = createDot(colors.teal3)
+const DotError = createDot(colors.red6)
+const DotWarning = createDot(colors.yellow6)
 
 Dot.Success = DotSuccess
 Dot.Error = DotError
diff --git a/src/components/elements/Input/Input.js b/src/components/elements/Input/Input.js
index 6053525ea..65f5c27c4 100644
--- a/src/components/elements/Input/Input.js
+++ b/src/components/elements/Input/Input.js
@@ -1,34 +1,35 @@
-import { transition, colors, borders } from 'theme'
+import { transition, colors, borders, themeCss } from 'theme'
 import React, { useMemo, useState } from 'react'
 import styled, { css } from 'styled-components'
 
 import Text from '../Text'
 import Flex from '../Flex'
 
-const InputBase = styled(Text)({
-  maxWidth: '100%',
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  border: 0,
-  appearance: 'none',
-  '&:focus': {
-    outline: '0'
+const InputBase = styled(Text)(
+  {
+    lineHeight: 'inherit',
+    background: 'transparent',
+    maxWidth: '100%',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    appearance: 'none',
+    '&:focus': {
+      outline: '0'
+    },
+    '&:disabled': {
+      opacity: 1 / 4
+    }
   },
-  '&:disabled': {
-    opacity: 1 / 4
-  }
-})
+  themeCss({
+    border: 0,
+    p: 0,
+    mx: 2
+  })
+)
 
 InputBase.defaultProps = {
   as: 'input',
-  type: 'text',
-  lineHeight: 'inherit',
-  width: 1,
-  border: 0,
-  p: 0,
-  mx: 2,
-  color: 'inherit',
-  bg: 'transparent'
+  type: 'text'
 }
 
 const focusStyle = css`
@@ -58,11 +59,10 @@ const Input = ({
   iconComponent: Icon,
   suggestions,
   children,
-  theme,
+  isDark,
   ...props
 }) => {
   const [isFocus, setFocus] = useState(props.autoFocus)
-  const isDark = theme === 'dark'
 
   const list = useMemo(() => {
     if (!suggestions) return undefined
@@ -77,13 +77,15 @@ const Input = ({
   return (
     <InputWrapper
       as='label'
-      alignItems='center'
-      borderRadius={2}
       focus={isFocus}
       isDark={isDark}
-      py='12px'
-      pl={2}
-      pr={suggestions ? 0 : 2}
+      css={themeCss({
+        pr: suggestions ? 0 : 2,
+        py: '12px',
+        pl: 2,
+        alignItems: 'center',
+        borderRadius: 2
+      })}
     >
       {Icon && <Flex>{Icon}</Flex>}
       <InputBase
diff --git a/src/components/elements/Link/solid.js b/src/components/elements/Link/solid.js
index 6219a9063..2b109ef85 100644
--- a/src/components/elements/Link/solid.js
+++ b/src/components/elements/Link/solid.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
 import { createCssState } from 'helpers/style'
-import { textGradient, colors } from 'theme'
+import { textGradient, colors, themeCss } from 'theme'
 import { lighten } from 'polished'
 
 import Box from '../Box'
@@ -56,18 +56,10 @@ LinkSolidWrapper.defaultProps = {
   fontWeight: 'regular'
 }
 
-const LinkSolid = ({ fontWeight, href, children, color, theme, ...props }) => {
+const LinkSolid = props => {
   return (
     <Box display='inline'>
-      <LinkSolidWrapper
-        {...props}
-        color={color}
-        href={href}
-        fontWeight={fontWeight}
-        isDark={theme === 'dark'}
-      >
-        {children}
-      </LinkSolidWrapper>
+      <LinkSolidWrapper css={themeCss({ fontWeight: 'regular' })} {...props} />
     </Box>
   )
 }
diff --git a/src/components/patterns/Footer/Footer.js b/src/components/patterns/Footer/Footer.js
index 4b4f1256c..efcf4b40c 100644
--- a/src/components/patterns/Footer/Footer.js
+++ b/src/components/patterns/Footer/Footer.js
@@ -1,5 +1,5 @@
+import { layout, colors, themeCss } from 'theme'
 import { Microlink } from 'components/logos'
-import { layout, colors } from 'theme'
 import { Mail } from 'react-feather'
 import { issueUrl } from 'helpers'
 import React from 'react'
@@ -24,8 +24,6 @@ import {
 const LIGHT_THEME = {
   bg: 'white',
   textColor: 'black60',
-  buttonColor: 'white',
-  buttonBg: 'black',
   inputIconColor: colors.black40,
   iconColor: colors.black80
 }
@@ -33,42 +31,54 @@ const LIGHT_THEME = {
 const DARK_THEME = {
   bg: 'black',
   textColor: 'white60',
-  buttonColor: 'black',
-  buttonBg: 'white',
   inputIconColor: colors.white40,
   iconColor: colors.white80
 }
 
 const Footer = ({ theme, ...props }) => {
   const isDark = theme === 'dark'
-  const { bg, textColor, buttonColor, buttonBg, inputIconColor } = isDark
-    ? DARK_THEME
-    : LIGHT_THEME
+  const { bg, textColor, inputIconColor } = isDark ? DARK_THEME : LIGHT_THEME
 
   return (
-    <Container px={0} maxWidth={layout.large} pb={Container.defaultProps.pt}>
+    <Container
+      css={themeCss({
+        px: 0,
+        maxWidth: layout.large,
+        pb: Container.defaultProps.pt
+      })}
+    >
       <Flex
-        bg={bg}
-        flexDirection={['column', 'column', 'column', 'row']}
-        justifyContent='space-between'
-        alignItems='center'
+        css={themeCss({
+          bg,
+          flexDirection: ['column', 'column', 'column', 'row'],
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        })}
         {...props}
       >
-        <Box px={0}>
-          <Flex flexDirection='column'>
-            <Flex justifyContent='center'>
+        <Box css={themeCss({ px: 0 })}>
+          <Flex css={themeCss({ flexDirection: 'column' })}>
+            <Flex css={themeCss({ justifyContent: 'center' })}>
               <Microlink />
             </Flex>
-            <Flex flexDirection='column' alignItems='center'>
-              <Text color={textColor} fontSize={1} pt={3}>
+            <Flex
+              css={themeCss({ flexDirection: 'column', alignItems: 'center' })}
+            >
+              <Text css={themeCss({ color: textColor, fontSize: 1, pt: 3 })}>
                 Turn websites into data
               </Text>
             </Flex>
             <Flex
-              alignItems={['center', 'center', 'center', 'inherit']}
-              flexDirection='column'
+              css={themeCss({
+                alignItems: ['center', 'center', 'center', 'inherit'],
+                flexDirection: 'column'
+              })}
             >
-              <Flex pt={3}>
+              <Flex
+                css={themeCss({
+                  pt: 3
+                })}
+              >
                 <form
                   action='https://microlink.us17.list-manage.com/subscribe/post?u=13504896341022a643b87c538&id=0d0978d452'
                   method='post'
@@ -78,167 +88,182 @@ const Footer = ({ theme, ...props }) => {
                       type='email'
                       name='EMAIL'
                       placeholder='you@domain.com'
-                      width='8rem'
-                      fontSize={0}
                       iconComponent={<Mail color={inputIconColor} size={16} />}
-                      theme={theme}
+                      isDark={isDark}
+                      css={themeCss({ fontSize: 1, width: '8rem' })}
                       required
                     />
 
                     <Button
-                      ml={2}
                       data-event-location='Footer'
                       data-event-name='Be Notified'
-                      bg={buttonBg}
-                      color={buttonColor}
+                      variant={isDark ? 'white' : 'black'}
+                      css={themeCss({ ml: 2 })}
                     >
-                      <Caps fontSize={0}>Be Notified</Caps>
+                      <Caps
+                        css={themeCss({
+                          fontSize: 0
+                        })}
+                      >
+                        Be Notified
+                      </Caps>
                     </Button>
                   </Flex>
                 </form>
               </Flex>
-              <Text textAlign='center' color={textColor} fontSize={1} pt={3}>
+              <Text
+                css={themeCss({
+                  textAlign: 'center',
+                  color: textColor,
+                  fontSize: 1,
+                  pt: 3
+                })}
+              >
                 Early access & updates on new releases.
               </Text>
             </Flex>
           </Flex>
         </Box>
-        <Box mt={[2, 0, 0, 0]} pt={[3, 3, 3, 0]} pb={[3, 3, 3, 0]} px={0}>
-          <Flex flexDirection={['row', 'row', 'row', 'column']}>
-            <LinkSolid
-              theme={theme}
-              data-event-location='Footer'
-              data-event-name='API'
-              fontSize={[0, 0, 0, 1]}
-              mr={[2, 2, 2, 0]}
-              mb={[0, 0, 0, 3]}
-              href='/docs/api/getting-started/overview'
-            >
-              API
-            </LinkSolid>
-            <LinkSolid
-              theme={theme}
-              data-event-location='Footer'
-              data-event-name='Blog'
-              fontSize={[0, 0, 0, 1]}
-              mr={[2, 2, 2, 0]}
-              mb={[0, 0, 0, 3]}
-              href='/blog'
-            >
-              Blog
-            </LinkSolid>
-            <LinkSolid
-              theme={theme}
-              data-event-location='Footer'
-              data-event-name='Chat'
-              fontSize={[0, 0, 0, 1]}
-              mr={[2, 2, 2, 0]}
-              mb={[0, 0, 0, 3]}
-              href='/community'
-            >
-              Community
-            </LinkSolid>
-            <LinkSolid
-              theme={theme}
-              data-event-location='Footer'
-              data-event-name='Status'
-              fontSize={[0, 0, 0, 1]}
-              href='/status'
-            >
-              Status
-            </LinkSolid>
+        <Box
+          css={themeCss({
+            mt: [2, 0, 0, 0],
+            pt: [3, 3, 3, 0],
+            pb: [3, 3, 3, 0],
+            px: 0
+          })}
+        >
+          <Flex
+            css={themeCss({
+              flexDirection: ['row', 'row', 'row', 'column']
+            })}
+          >
+            {[
+              { children: 'API', href: '/docs/api/getting-started/overview' },
+              { children: 'Blog', href: '/blog' },
+              { children: 'Chat', href: '/community' },
+              { children: 'Status', href: '/status' }
+            ].map(({ href, children }) => (
+              <LinkSolid
+                key={href}
+                isDark={isDark}
+                href={href}
+                data-event-name='Footer'
+                data-event-location={children}
+                css={themeCss({
+                  fontSize: [0, 0, 0, 1],
+                  mr: [2, 2, 2, 0],
+                  mb: [0, 0, 0, 3]
+                })}
+              >
+                {children}
+              </LinkSolid>
+            ))}
           </Flex>
         </Box>
-        <Box mb={[2, 0, 0, 0]} pb={[3, 3, 3, 0]} px={0}>
-          <Flex flexDirection={['row', 'row', 'row', 'column']}>
-            <LinkSolid
-              theme={theme}
-              data-event-location='Footer'
-              data-event-name='SDK'
-              fontSize={[0, 0, 0, 1]}
-              mr={[2, 2, 2, 0]}
-              mb={[0, 0, 0, 3]}
-              href='/docs/sdk/getting-started/overview/'
-            >
-              SDK
-            </LinkSolid>
-            <LinkSolid
-              theme={theme}
-              data-event-location='Footer'
-              data-event-name='Pricing'
-              fontSize={[0, 0, 0, 1]}
-              mr={[2, 2, 2, 0]}
-              mb={[0, 0, 0, 3]}
-              href='/#pricing'
-            >
-              Pricing
-            </LinkSolid>
-            <LinkSolid
-              theme={theme}
-              data-event-location='Footer'
-              data-event-name='Open Source'
-              fontSize={[0, 0, 0, 1]}
-              mr={[2, 2, 2, 0]}
-              mb={[0, 0, 0, 3]}
-              href='/oss'
-            >
-              Open Source
-            </LinkSolid>
-            <LinkSolid
-              theme={theme}
-              data-event-location='Footer'
-              data-event-name='Bug Reports'
-              fontSize={[0, 0, 0, 1]}
-              href={issueUrl.bug()}
-            >
-              Bug Reports
-            </LinkSolid>
+        <Box
+          css={themeCss({
+            mb: [2, 0, 0, 0],
+            pb: [3, 3, 3, 0],
+            px: 0
+          })}
+        >
+          <Flex
+            css={themeCss({
+              flexDirection: ['row', 'row', 'row', 'column']
+            })}
+          >
+            {[
+              { children: 'SDK', href: '/docs/sdk/getting-started/overview/' },
+              { children: 'Pricing', href: '/#pricing' },
+              { children: 'Open Source', href: '/oss' },
+              { children: 'Bug Reports', href: issueUrl.bug() }
+            ].map(({ href, children }) => (
+              <LinkSolid
+                key={href}
+                isDark={isDark}
+                href={href}
+                data-event-name='Footer'
+                data-event-location={children}
+                css={themeCss({
+                  fontSize: [0, 0, 0, 1],
+                  mr: [2, 2, 2, 0],
+                  mb: [0, 0, 0, 3]
+                })}
+              >
+                {children}
+              </LinkSolid>
+            ))}
           </Flex>
         </Box>
-        <Box px={0}>
-          <Flex flexDirection='column'>
+        <Box css={themeCss({ px: 0 })}>
+          <Flex css={themeCss({ flexDirection: 'column' })}>
             <Flex
-              alignItems='center'
-              justifyContent={['center', 'inherit', 'inherit', 'inherit']}
+              css={themeCss({
+                alignItems: 'center',
+                justifyContent: ['center', 'inherit', 'inherit', 'inherit']
+              })}
             >
-              <Flex flexDirection='column'>
+              <Flex
+                css={themeCss({
+                  flexDirection: 'column'
+                })}
+              >
                 <Healthcheck>
                   {({ isHealthy, isLoading }) => {
                     if (isLoading) {
                       return (
                         <LinkSolid
-                          theme={theme}
-                          px={0}
+                          isDark={isDark}
                           data-event-location='Footer'
                           data-event-name='Status'
                           href='/status'
+                          css={themeCss({
+                            px: 0
+                          })}
                         >
-                          <Text fontSize={[0, 0, 0, 1]}>Status Page</Text>
+                          <Text
+                            css={themeCss({
+                              fontSize: [0, 0, 0, 1]
+                            })}
+                          >
+                            Status Page
+                          </Text>
                         </LinkSolid>
                       )
                     }
 
                     return (
                       <Link
-                        theme={theme}
-                        px={0}
                         data-event-location='Footer'
                         data-event-name='Status'
                         href='/status'
-                        color={colors[textColor]}
+                        css={themeCss({
+                          color: colors[textColor],
+                          px: 0
+                        })}
                       >
                         <Text
-                          pb={[3, 3, 3, 0]}
-                          fontSize={[0, 0, 0, 1]}
-                          color='inherit'
+                          css={themeCss({
+                            pb: [3, 3, 3, 0],
+                            fontSize: [0, 0, 0, 1],
+                            color: 'inherit'
+                          })}
                         >
                           <Choose>
                             <Choose.When condition={isHealthy}>
-                              <Dot.Success mr={2} />
+                              <Dot.Success
+                                css={themeCss({
+                                  mr: 2
+                                })}
+                              />
                               All systems operational
                             </Choose.When>
                             <Choose.Otherwise>
-                              <Dot.Warning mr={2} />
+                              <Dot.Warning
+                                css={themeCss({
+                                  mr: 2
+                                })}
+                              />
                               System performance degradation
                             </Choose.Otherwise>
                           </Choose>
@@ -251,38 +276,56 @@ const Footer = ({ theme, ...props }) => {
             </Flex>
 
             <Hide breakpoints={[0, 1, 2]}>
-              <Flex alignItems='center' py={[0, 0, 0, 4]}>
-                <Text color={textColor} mr={2} pb='2px' fontSize={1}>
+              <Flex
+                css={themeCss({
+                  alignItems: 'center',
+                  py: [0, 0, 0, 4]
+                })}
+              >
+                <Text
+                  css={themeCss({
+                    color: textColor,
+                    mr: 2,
+                    pb: '2px',
+                    fontSize: 1
+                  })}
+                >
                   © Microlink
                 </Text>
-                <LinkSolid
-                  theme={theme}
-                  fontWeight='normal'
-                  mr={2}
-                  fontSize={0}
-                  href='/tos'
-                  data-event-location='Footer'
-                  data-event-name='Terms'
-                >
-                  Terms
-                </LinkSolid>
-                <LinkSolid
-                  theme={theme}
-                  fontWeight='normal'
-                  fontSize={0}
-                  data-event-location='Footer'
-                  data-event-name='Privacy'
-                  href='/privacy'
-                >
-                  Privacy
-                </LinkSolid>
+                {[
+                  {
+                    href: '/tos',
+                    children: 'Terms'
+                  },
+                  {
+                    href: '/privacy',
+                    children: 'Privacy'
+                  }
+                ].map(({ href, children }) => (
+                  <LinkSolid
+                    key={href}
+                    isDark={isDark}
+                    href={href}
+                    data-event-name='Footer'
+                    data-event-location={children}
+                    css={themeCss({
+                      fontWeight: 'normal',
+                      mr: 2,
+                      fontSize: 1
+                    })}
+                  >
+                    {children}
+                  </LinkSolid>
+                ))}
               </Flex>
             </Hide>
 
             <Flex
-              alignItems='center'
-              justifyContent={['center', 'center', 'center', 'inherit']}
-              mt={[3, 0, 0, 0]}
+              css={themeCss({
+                alignItems: 'center',
+                justifyContent: ['center', 'center', 'center', 'inherit'],
+                mt: [3, 0, 0, 0]
+              })}
             >
               {[
                 {
@@ -304,10 +347,12 @@ const Footer = ({ theme, ...props }) => {
                 <LinkSolid
                   data-event-location='Footer'
                   data-event-name={props.children}
-                  theme={theme}
+                  isDark={isDark}
                   key={props.children}
-                  pl={index > 0 ? 2 : 0}
-                  fontSize={0}
+                  css={themeCss({
+                    pl: index > 0 ? 2 : 0,
+                    fontSize: 1
+                  })}
                   icon
                   {...props}
                 />
diff --git a/src/components/patterns/Layout.js b/src/components/patterns/Layout.js
index bff56342e..68fe14c7f 100644
--- a/src/components/patterns/Layout.js
+++ b/src/components/patterns/Layout.js
@@ -1,7 +1,7 @@
+import { ThemeProvider } from 'styled-components'
 import { Toolbar, Footer } from 'components/patterns'
 import React, { useEffect, createElement } from 'react'
 import { BreakpointProvider } from 'context/breakpoint'
-import { ThemeProvider } from 'styled-components'
 import { Box, Flex } from 'components/elements'
 import { useBreakpoint } from 'components/hook'
 import { noop } from 'helpers'
@@ -73,11 +73,11 @@ const Layout = ({
             },
             children
           )} */}
-          {/* {footer && (
+          {footer && (
             <Box as='footer' className='hidden-print'>
               <Footer theme={theme} {...footer} />
             </Box>
-          )} */}
+          )}
         </Flex>
       </ThemeProvider>
     </BreakpointProvider>
diff --git a/src/helpers/hoc/with-spinner.js b/src/helpers/hoc/with-spinner.js
index 32dc5be0f..81fa7ba27 100644
--- a/src/helpers/hoc/with-spinner.js
+++ b/src/helpers/hoc/with-spinner.js
@@ -1,5 +1,4 @@
-import React, { Component, createElement } from 'react'
-
+import React, { createElement, useState, useEffect, useRef } from 'react'
 import SpinnerIcon from '../../components/elements/Spinner'
 import Flex from '../../components/elements/Flex'
 
@@ -12,34 +11,34 @@ export const withSpinner = ChildComponent => {
     </ChildComponent>
   )
 
-  class SpinnerWrapper extends Component {
-    componentDidMount () {
-      if (this.button) {
-        const { width } = this.button.getBoundingClientRect()
-        this.setState({ width })
-      }
-    }
+  const SpinnerWrapper = ({ loading, ...props }) => {
+    const [width, setWidth] = useState(undefined)
+    const [height, setHeight] = useState(undefined)
+    const ref = useRef(null)
 
-    render () {
-      const { loading, ...props } = this.props
-      if (!loading) {
-        return (
-          <ChildComponent ref={button => (this.button = button)} {...props} />
-        )
-      } else {
-        const children = createElement(SpinnerIcon)
-        const width = this.state && this.state.width
-        return createElement(
-          SpinnerButton,
-          {
-            ...props,
-            disabled: true,
-            style: { width, cursor: 'wait' }
-          },
-          children
-        )
+    useEffect(() => {
+      if (ref.current) {
+        const computed = window.getComputedStyle(ref.current)
+        setWidth(parseInt(computed.getPropertyValue('width')))
+        setHeight(parseInt(computed.getPropertyValue('height')))
       }
+    }, [])
+
+    if (!loading) {
+      return <ChildComponent ref={ref} {...props} />
     }
+
+    const children = createElement(SpinnerIcon)
+
+    return createElement(
+      SpinnerButton,
+      {
+        ...props,
+        disabled: true,
+        style: { width, height, cursor: 'wait' }
+      },
+      children
+    )
   }
 
   return SpinnerWrapper
diff --git a/src/helpers/style/index.js b/src/helpers/style/index.js
index ef76f0dc0..9dc3c6f5e 100644
--- a/src/helpers/style/index.js
+++ b/src/helpers/style/index.js
@@ -1,12 +1,14 @@
 import { css } from 'styled-components'
 
-export const createCssState = ({ selector, state, css: cssStyle }) => props =>
-  css`
-    ${props => props.state === state && cssStyle}
-    ${selector} {
-      ${cssStyle};
-    }
-  `
+export const createCssState =
+  ({ selector, state, css: cssStyle }) =>
+  () =>
+    css`
+      ${props => props.state === state && cssStyle}
+      ${selector} {
+        ${cssStyle};
+      }
+    `
 
 export const wordBreak = css`
   /* These are technically the same, but use both */
diff --git a/src/theme/index.js b/src/theme/index.js
index 9c892034a..75eec435f 100644
--- a/src/theme/index.js
+++ b/src/theme/index.js
@@ -283,7 +283,19 @@ export const variants = {
     gradient: textGradient
   },
   button: {
-    gradient
+    gradient,
+    base: {
+      color: 'white',
+      background: 'link'
+    },
+    black: {
+      background: 'black',
+      color: 'white'
+    },
+    white: {
+      background: 'white',
+      color: 'black'
+    }
   }
 }