diff --git a/package.json b/package.json
index c33a4003..0b1dc87b 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "webpack-dev-server": "^1.16.2"
   },
   "dependencies": {
+    "arc-theme": "^0.2.1",
     "history": "3.0.0",
     "lodash": "^4.16.4",
     "react": "^15.3.2",
@@ -63,6 +64,6 @@
     "react-modal": "^1.6.4",
     "react-router": "^3.0.0",
     "react-router-scroll": "^0.4.1",
-    "styled-components": "1.1.1"
+    "styled-components": "^1.2.1"
   }
 }
diff --git a/src-clean/components/globals.js b/src-clean/components/globals.js
deleted file mode 100644
index 6214251b..00000000
--- a/src-clean/components/globals.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export const colors = {
-  primary: ['#1976d2', '#2196f3', '#71bcf7', '#c2e2fb'],
-  secondary: ['#c2185b', '#e91e63', '#f06292', '#f8bbd0'],
-  danger: ['#d32f2f', '#f44336', '#f8877f', '#ffcdd2'],
-  alert: ['#ffa000', '#ffc107', '#ffd761', '#ffecb3'],
-  success: ['#388e3c', '#4caf50', '#7cc47f', '#c8e6c9'],
-  grayscale: ['#212121', '#616161', '#9e9e9e', '#bdbdbd', '#e0e0e0', '#eeeeee', '#ffffff']
-}
-
-export const reverseColors = {}
-
-Object.keys(colors).forEach((key) => {
-  reverseColors[key] = [ ...colors[key] ].reverse()
-})
-
-export const fonts = {
-  primary: 'Helvetica Neue, Helvetica, Roboto, sans-serif',
-  pre: 'Consolas, Liberation Mono, Menlo, Courier, monospace',
-  quote: 'Georgia, serif'
-}
diff --git a/src/components/App.js b/src/components/App.js
index 47b1d977..0e338016 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,7 +1,7 @@
 import React, { PropTypes, Component } from 'react'
 import { injectGlobal, ThemeProvider } from 'styled-components'
 
-import theme from './theme'
+import theme from './themes/default'
 
 injectGlobal`
   body {
diff --git a/src/components/atoms/Atom/index.js b/src/components/atoms/Atom/index.js
index 0c020662..37900f6c 100644
--- a/src/components/atoms/Atom/index.js
+++ b/src/components/atoms/Atom/index.js
@@ -1,14 +1,10 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
-export const color = ({ theme, reverse, color }) =>
-  theme[reverse ? 'reverseColors' : 'colors'][color][color === 'grayscale' ? 0 : 1]
+import { font, color } from 'arc-theme'
 
 const Atom = styled.span`
-  font-family: ${fontFamily};
-  color: ${color};
+  font-family: ${font('primary')};
+  color: ${color({ grayscale: 0 }, 1)};
 `
 
 Atom.propTypes = {
@@ -17,18 +13,7 @@ Atom.propTypes = {
 }
 
 Atom.defaultProps = {
-  color: 'grayscale',
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' }
-    }
-  }
+  color: 'grayscale'
 }
 
 export default Atom
diff --git a/src/components/atoms/Atom/index.test.js b/src/components/atoms/Atom/index.test.js
index 6352ec98..ca02bd9c 100644
--- a/src/components/atoms/Atom/index.test.js
+++ b/src/components/atoms/Atom/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Atom, * as styles from '.'
+import Atom from '.'
 
 const wrap = (props = {}) => shallow(<Atom {...props} />)
 
@@ -13,34 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' },
-      primary: { 1: 'red' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' },
-      primary: { 1: 'blue' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('color', () => {
-    const props = {
-      color: 'grayscale',
-      reverse: false,
-      theme
-    }
-    expect(styles.color(props)).toBe(theme.colors.grayscale[0])
-    expect(styles.color({ ...props, reverse: true })).toBe(theme.reverseColors.grayscale[0])
-    expect(styles.color({ ...props, color: 'primary' })).toBe(theme.colors.primary[1])
-  })
-})
diff --git a/src/components/atoms/Badge/index.js b/src/components/atoms/Badge/index.js
index 6a18ee68..8bf10e90 100644
--- a/src/components/atoms/Badge/index.js
+++ b/src/components/atoms/Badge/index.js
@@ -1,21 +1,14 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
-export const color = ({ reverse, theme }) =>
-  reverse ? theme.colors.grayscale[0] : theme.reverseColors.grayscale[0]
-
-export const backgroundColor = ({ reverse, theme, color }) =>
-  theme[reverse ? 'reverseColors' : 'colors'][color][1]
+import { font, color, reverseColor } from 'arc-theme'
 
 const Badge = styled.span`
-  font-family: ${fontFamily};
+  font-family: ${font('primary')};
   font-size: 0.75rem;
   line-height: 1.5em;
   padding: 0 0.3em;
-  color: ${color};
-  background-color: ${backgroundColor};
+  color: ${reverseColor('grayscale', 0)};
+  background-color: ${color(1)};
   border-radius: 0.16667em;
 `
 
@@ -25,20 +18,7 @@ Badge.propTypes = {
 }
 
 Badge.defaultProps = {
-  color: 'primary',
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222', 1: '#555' },
-      primary: { 1: '#2196f3' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff', 1: '#bbb' },
-      primary: { 1: '#71bcf7' }
-    }
-  }
+  color: 'primary'
 }
 
 export default Badge
diff --git a/src/components/atoms/Badge/index.test.js b/src/components/atoms/Badge/index.test.js
index f9383d84..0fb7062e 100644
--- a/src/components/atoms/Badge/index.test.js
+++ b/src/components/atoms/Badge/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Badge, * as styles from '.'
+import Badge from '.'
 
 const wrap = (props = {}) => shallow(<Badge {...props} />)
 
@@ -13,38 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222', 1: '#555' },
-      primary: { 1: '#2196f3' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff', 1: '#bbb' },
-      primary: { 1: '#71bcf7' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('color', () => {
-    expect(styles.color({ theme, reverse: false })).toBe(theme.reverseColors.grayscale[0])
-    expect(styles.color({ theme, reverse: true })).toBe(theme.colors.grayscale[0])
-  })
-
-  test('backgroundColor', () => {
-    const props = {
-      color: 'primary',
-      reverse: false,
-      theme
-    }
-    expect(styles.backgroundColor(props)).toBe(theme.colors.primary[1])
-    expect(styles.backgroundColor({ ...props, reverse: true })).toBe(theme.reverseColors.primary[1])
-  })
-})
diff --git a/src/components/atoms/Block/index.js b/src/components/atoms/Block/index.js
index 216fb697..b7475c22 100644
--- a/src/components/atoms/Block/index.js
+++ b/src/components/atoms/Block/index.js
@@ -1,18 +1,11 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
-export const backgroundColor = ({ theme, reverse, color, transparent }) =>
-  transparent ? 'transparent' : theme[reverse ? 'colors' : 'reverseColors'][color][0]
-
-export const color = ({ theme, reverse, color }) =>
-  theme[reverse ? 'reverseColors' : 'colors'][color][color === 'grayscale' ? 0 : 1]
+import { font, color, reverseColor, ifProps } from 'arc-theme'
 
 const Block = styled.div`
-  font-family: ${fontFamily};
-  background-color: ${backgroundColor};
-  color: ${color};
+  font-family: ${font('primary')};
+  background-color: ${ifProps('transparent', 'transparent', reverseColor(0))};
+  color: ${color({ grayscale: 0 }, 1)};
 `
 
 Block.propTypes = {
@@ -21,18 +14,7 @@ Block.propTypes = {
 }
 
 Block.defaultProps = {
-  color: 'grayscale',
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' }
-    }
-  }
+  color: 'grayscale'
 }
 
 export default Block
diff --git a/src/components/atoms/Block/index.test.js b/src/components/atoms/Block/index.test.js
index ff85b90c..f4d6bf36 100644
--- a/src/components/atoms/Block/index.test.js
+++ b/src/components/atoms/Block/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Block, * as styles from '.'
+import Block from '.'
 
 const wrap = (props = {}) => shallow(<Block {...props} />)
 
@@ -13,47 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' },
-      primary: { 0: 'darkred', 1: 'red' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' },
-      primary: { 0: 'lightblue', 1: 'blue' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('backgroundColor', () => {
-    const props = {
-      color: 'grayscale',
-      reverse: false,
-      theme
-    }
-    expect(styles.backgroundColor(props)).toBe(theme.reverseColors.grayscale[0])
-    expect(styles.backgroundColor({ ...props, transparent: true })).toBe('transparent')
-    expect(styles.backgroundColor({ ...props, reverse: true })).toBe(theme.colors.grayscale[0])
-    expect(styles.backgroundColor({ ...props, color: 'primary' }))
-      .toBe(theme.reverseColors.primary[0])
-  })
-
-  test('color', () => {
-    const props = {
-      color: 'grayscale',
-      reverse: false,
-      theme
-    }
-    expect(styles.color(props)).toBe(theme.colors.grayscale[0])
-    expect(styles.color({ ...props, reverse: true })).toBe(theme.reverseColors.grayscale[0])
-    expect(styles.color({ ...props, color: 'primary' })).toBe(theme.colors.primary[1])
-  })
-})
diff --git a/src/components/atoms/Button/index.js b/src/components/atoms/Button/index.js
index 4bd90bac..d764aa80 100644
--- a/src/components/atoms/Button/index.js
+++ b/src/components/atoms/Button/index.js
@@ -1,52 +1,42 @@
 import React, { PropTypes } from 'react'
 import styled, { css } from 'styled-components'
 import { Link } from 'react-router'
+import { font, color, reverseColor, ifProps } from 'arc-theme'
 
-export const colorKind = ({ theme, reverse }) => theme[reverse ? 'reverseColors' : 'colors']
+const fontSize = ({ height }) => `${height / 40}rem`
 
-export const fontFamily = ({ theme }) => theme.fonts.primary
-export const fontSize = ({ height }) => `${height / 40}rem`
-export const borderColor = ({ transparent }) => transparent ? 'currentcolor' : 'transparent'
-export const cursor = ({ disabled }) => disabled ? 'default' : 'pointer'
-export const pointerEvents = ({ disabled }) => disabled ? 'none' : 'auto'
+const backgroundColor = ({ transparent, disabled }) =>
+  transparent ? 'transparent' : color(disabled ? 2 : 1)
 
-export const backgroundColor = ({ transparent, disabled, color, ...props }) =>
-  transparent ? 'transparent' : colorKind(props)[color][disabled ? 2 : 1]
+const foregroundColor = ({ transparent, disabled }) =>
+  transparent ? color(disabled ? 2 : 1) : reverseColor('grayscale', 0)
 
-export const color = ({ transparent, disabled, color, ...props, reverse }) =>
-  transparent
-  ? colorKind(props)[color][disabled ? 2 : 1]
-  : colorKind({ ...props, reverse: !reverse }).grayscale[0]
-
-export const hoverBackgroundColor = ({ disabled, transparent, color, ...props }) =>
-  !disabled && !transparent && colorKind(props)[color][0]
-
-export const hoverColor = ({ disabled, transparent, color, ...props }) =>
-  !disabled && transparent && colorKind(props)[color][0]
+const hoverBackgroundColor = ({ disabled, transparent }) => !disabled && !transparent && color(0)
+const hoverForegroundColor = ({ disabled, transparent }) => !disabled && transparent && color(0)
 
 const styles = css`
   display: inline-flex;
-  font-family: ${fontFamily};
+  font-family: ${font('primary')};
   align-items: center;
   white-space: nowrap;
   font-size: ${fontSize};
-  border: 0.0625em solid ${borderColor};
+  border: 0.0625em solid ${ifProps('transparent', 'currentcolor', 'transparent')};
   height: 2.5em;
   justify-content: center;
   text-decoration: none;
-  cursor: ${cursor};
+  cursor: ${ifProps('disabled', 'default', 'pointer')};
   appearance: none;
   padding: 0 1em;
   border-radius: 0.125em;
   box-sizing: border-box;
-  pointer-events: ${pointerEvents};
+  pointer-events: ${ifProps('disabled', 'none', 'auto')};
   transition: background-color 250ms ease-out, color 250ms ease-out, border-color 250ms ease-out;
   background-color: ${backgroundColor};
-  color: ${color};
+  color: ${foregroundColor};
 
   &:hover, &:focus, &:active {
     background-color: ${hoverBackgroundColor};
-    color: ${hoverColor};
+    color: ${hoverForegroundColor};
   }
 
   &:focus {
@@ -83,20 +73,7 @@ Button.propTypes = {
 Button.defaultProps = {
   color: 'primary',
   type: 'button',
-  height: 40,
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222', 1: '#555', 2: '#888' },
-      primary: { 0: '#1976d2', 1: '#2196f3', 2: '#71bcf7' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff', 1: '#bbb', 2: '#888' },
-      primary: { 0: '#c2e2fb', 1: '#71bcf7', 2: '#2196f3' }
-    }
-  }
+  height: 40
 }
 
 export default Button
diff --git a/src/components/atoms/Button/index.test.js b/src/components/atoms/Button/index.test.js
index 17dd48b4..67ea7308 100644
--- a/src/components/atoms/Button/index.test.js
+++ b/src/components/atoms/Button/index.test.js
@@ -1,9 +1,15 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Button, * as styles from '.'
+import Button from '.'
 
 const wrap = (props = {}) => shallow(<Button {...props} />).dive()
 
+it('renders with different combination of props', () => {
+  wrap({ disabled: true })
+  wrap({ transparent: true })
+  wrap({ disabled: true, transparent: true })
+})
+
 it('renders children when passed in', () => {
   const wrapper = wrap({ children: 'test' })
   expect(wrapper.contains('test')).toBe(true)
@@ -28,109 +34,3 @@ it('renders Link when to is passed in', () => {
   const wrapper = wrap({ to: 'test' }).dive()
   expect(wrapper.find('Link')).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222', 1: '#555', 2: '#888' },
-      primary: { 0: '#1976d2', 1: '#2196f3', 2: '#71bcf7' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff', 1: '#bbb', 2: '#888' },
-      primary: { 0: '#c2e2fb', 1: '#71bcf7', 2: '#2196f3' }
-    }
-  }
-
-  test('colorKind', () => {
-    expect(styles.colorKind({ theme, reverse: false })).toEqual(theme.colors)
-    expect(styles.colorKind({ theme, reverse: true })).toEqual(theme.reverseColors)
-  })
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('borderColor', () => {
-    expect(styles.borderColor({ transparent: false })).toBe('transparent')
-    expect(styles.borderColor({ transparent: true })).toBe('currentcolor')
-  })
-
-  test('cursor', () => {
-    expect(styles.cursor({ disabled: false })).toBe('pointer')
-    expect(styles.cursor({ disabled: true })).toBe('default')
-  })
-
-  test('pointerEvents', () => {
-    expect(styles.pointerEvents({ disabled: false })).toBe('auto')
-    expect(styles.pointerEvents({ disabled: true })).toBe('none')
-  })
-
-  test('backgroundColor', () => {
-    const props = {
-      color: 'primary',
-      transparent: false,
-      disabled: false,
-      reverse: false,
-      theme
-    }
-    const f = styles.backgroundColor
-    expect(f(props)).toBe(theme.colors.primary[1])
-    expect(f({ ...props, color: 'grayscale' })).toBe(theme.colors.grayscale[1])
-    expect(f({ ...props, transparent: true })).toBe('transparent')
-    expect(f({ ...props, disabled: true })).toBe(theme.colors.primary[2])
-    expect(f({ ...props, reverse: true })).toBe(theme.reverseColors.primary[1])
-    expect(f({ ...props, disabled: true, reverse: true })).toBe(theme.reverseColors.primary[2])
-  })
-
-  test('color', () => {
-    const props = {
-      color: 'primary',
-      transparent: true,
-      disabled: false,
-      reverse: false,
-      theme
-    }
-    const f = styles.color
-    expect(f(props)).toBe(theme.colors.primary[1])
-    expect(f({ ...props, transparent: false })).toBe(theme.reverseColors.grayscale[0])
-    expect(f({ ...props, disabled: true })).toBe(theme.colors.primary[2])
-    expect(f({ ...props, reverse: true })).toBe(theme.reverseColors.primary[1])
-    expect(f({ ...props, disabled: true, reverse: true })).toBe(theme.reverseColors.primary[2])
-  })
-
-  test('hoverBackgroundColor', () => {
-    const props = {
-      color: 'primary',
-      transparent: false,
-      disabled: false,
-      reverse: false,
-      theme
-    }
-    const f = styles.hoverBackgroundColor
-    expect(f(props)).toBe(theme.colors.primary[0])
-    expect(f({ ...props, color: 'grayscale' })).toBe(theme.colors.grayscale[0])
-    expect(f({ ...props, transparent: true })).toBe(false)
-    expect(f({ ...props, disabled: true })).toBe(false)
-    expect(f({ ...props, reverse: true })).toBe(theme.reverseColors.primary[0])
-    expect(f({ ...props, disabled: true, reverse: true })).toBe(false)
-  })
-
-  test('hoverColor', () => {
-    const props = {
-      color: 'primary',
-      transparent: true,
-      disabled: false,
-      reverse: false,
-      theme
-    }
-    const f = styles.hoverColor
-    expect(f(props)).toBe(theme.colors.primary[0])
-    expect(f({ ...props, transparent: false })).toBe(false)
-    expect(f({ ...props, disabled: true })).toBe(false)
-    expect(f({ ...props, reverse: true })).toBe(theme.reverseColors.primary[0])
-    expect(f({ ...props, disabled: true, reverse: true })).toBe(false)
-  })
-})
diff --git a/src/components/atoms/Caption/index.js b/src/components/atoms/Caption/index.js
index 5049ba96..f71f5437 100644
--- a/src/components/atoms/Caption/index.js
+++ b/src/components/atoms/Caption/index.js
@@ -1,14 +1,10 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
-export const color = ({ theme, reverse }) =>
-  theme[reverse ? 'reverseColors' : 'colors'].grayscale[1]
+import { font, color } from 'arc-theme'
 
 const Caption = styled.caption`
-  font-family: ${fontFamily};
-  color: ${color};
+  font-family: ${font('primary')};
+  color: ${color('grayscale', 1)};
   font-weight: 500;
   line-height: 2rem;
   font-size: 0.875rem;
@@ -19,18 +15,4 @@ Caption.propTypes = {
   reverse: PropTypes.bool
 }
 
-Caption.defaultProps = {
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 1: '#555' }
-    },
-    reverseColors: {
-      grayscale: { 1: '#bbb' }
-    }
-  }
-}
-
 export default Caption
diff --git a/src/components/atoms/Caption/index.test.js b/src/components/atoms/Caption/index.test.js
index bed91d2c..24259130 100644
--- a/src/components/atoms/Caption/index.test.js
+++ b/src/components/atoms/Caption/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Caption, * as styles from '.'
+import Caption from '.'
 
 const wrap = (props = {}) => shallow(<Caption {...props} />)
 
@@ -13,26 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 1: '#555' }
-    },
-    reverseColors: {
-      grayscale: { 1: '#bbb' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('color', () => {
-    expect(styles.color({ theme })).toBe(theme.colors.grayscale[1])
-    expect(styles.color({ theme, reverse: true })).toBe(theme.reverseColors.grayscale[1])
-  })
-})
diff --git a/src/components/atoms/Heading/index.js b/src/components/atoms/Heading/index.js
index 2af643c0..51ea4617 100644
--- a/src/components/atoms/Heading/index.js
+++ b/src/components/atoms/Heading/index.js
@@ -1,20 +1,17 @@
 import React, { PropTypes } from 'react'
 import styled, { css } from 'styled-components'
+import { font, color } from 'arc-theme'
 
-export const fontFamily = ({ theme }) => theme.fonts.primary
 export const fontSize = ({ level }) => `${0.75 + 1 * (1 / level)}rem`
 
-export const color = ({ theme, reverse, color }) =>
-  theme[reverse ? 'reverseColors' : 'colors'][color][color === 'grayscale' ? 0 : 1]
-
 const styles = css`
-  font-family: ${fontFamily};
+  font-family: ${font('primary')};
   font-weight: 500;
   font-size: ${fontSize};
   margin: 0;
   margin-top: 0.85714em;
   margin-bottom: 0.57142em;
-  color: ${color};
+  color: ${color({ grayscale: 0 }, 1)};
 `
 
 const Heading = styled(({ level, children, reverse, theme, ...props }) => {
@@ -30,18 +27,7 @@ Heading.propTypes = {
 
 Heading.defaultProps = {
   level: 1,
-  color: 'grayscale',
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' }
-    }
-  }
+  color: 'grayscale'
 }
 
 export default Heading
diff --git a/src/components/atoms/Heading/index.test.js b/src/components/atoms/Heading/index.test.js
index e87f1c83..d99b8cd8 100644
--- a/src/components/atoms/Heading/index.test.js
+++ b/src/components/atoms/Heading/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Heading, * as styles from '.'
+import Heading from '.'
 
 const wrap = (props = {}) => shallow(<Heading {...props} />).dive()
 
@@ -23,44 +23,3 @@ it('renders hLevel when level is passed in', () => {
   const wrapper = wrap({ level: 2 })
   expect(wrapper.find('h2')).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' },
-      primary: { 1: 'red' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' },
-      primary: { 1: 'blue' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('fontSize', () => {
-    const fontSize = (level) => parseFloat(styles.fontSize({ level })).toFixed(2)
-    expect(fontSize(1)).toBe('1.75')
-    expect(fontSize(2)).toBe('1.25')
-    expect(fontSize(3)).toBe('1.08')
-    expect(fontSize(4)).toBe('1.00')
-    expect(fontSize(5)).toBe('0.95')
-    expect(fontSize(6)).toBe('0.92')
-  })
-
-  test('color', () => {
-    const props = {
-      color: 'grayscale',
-      reverse: false,
-      theme
-    }
-    expect(styles.color(props)).toBe(theme.colors.grayscale[0])
-    expect(styles.color({ ...props, reverse: true })).toBe(theme.reverseColors.grayscale[0])
-    expect(styles.color({ ...props, color: 'primary' })).toBe(theme.colors.primary[1])
-  })
-})
diff --git a/src/components/atoms/HorizontalRule/index.js b/src/components/atoms/HorizontalRule/index.js
index 28b7eccd..f9a3445b 100644
--- a/src/components/atoms/HorizontalRule/index.js
+++ b/src/components/atoms/HorizontalRule/index.js
@@ -1,11 +1,9 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-
-export const borderColor = ({ theme, reverse, color }) =>
-  theme[reverse ? 'colors' : 'reverseColors'][color][1]
+import { reverseColor } from 'arc-theme'
 
 const HorizontalRule = styled.hr`
-  border: 1px solid ${borderColor};
+  border: 1px solid ${reverseColor(1)};
   border-width: 0 0 1px;
   width: 100%;
 `
@@ -16,15 +14,7 @@ HorizontalRule.propTypes = {
 }
 
 HorizontalRule.defaultProps = {
-  color: 'grayscale',
-  theme: {
-    colors: {
-      grayscale: { 1: '#555' }
-    },
-    reverseColors: {
-      grayscale: { 1: '#eee' }
-    }
-  }
+  color: 'grayscale'
 }
 
 export default HorizontalRule
diff --git a/src/components/atoms/HorizontalRule/index.test.js b/src/components/atoms/HorizontalRule/index.test.js
index 271de137..cccd9179 100644
--- a/src/components/atoms/HorizontalRule/index.test.js
+++ b/src/components/atoms/HorizontalRule/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import HorizontalRule, * as styles from '.'
+import HorizontalRule from '.'
 
 const wrap = (props = {}) => shallow(<HorizontalRule {...props} />)
 
@@ -8,24 +8,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    colors: {
-      grayscale: { 1: '#555' }
-    },
-    reverseColors: {
-      grayscale: { 1: '#eee' }
-    }
-  }
-
-  test('borderColor', () => {
-    const props = {
-      color: 'grayscale',
-      reverse: false,
-      theme
-    }
-    expect(styles.borderColor(props)).toBe(theme.reverseColors.grayscale[1])
-    expect(styles.borderColor({ ...props, reverse: true })).toBe(theme.colors.grayscale[1])
-  })
-})
diff --git a/src/components/atoms/Icon/index.js b/src/components/atoms/Icon/index.js
index 0eb40eb3..f04b4f70 100644
--- a/src/components/atoms/Icon/index.js
+++ b/src/components/atoms/Icon/index.js
@@ -1,16 +1,13 @@
 import React, { PropTypes } from 'react'
 import styled from 'styled-components'
+import { color, ifProps } from 'arc-theme'
 
 export const fontSize = ({ height }) => height ? `${height / 16}rem` : '1.25em'
 
-export const color = ({ theme, reverse, color }) => color
-  ? theme[reverse ? 'reverseColors' : 'colors'][color][color === 'grayscale' ? 0 : 1]
-  : 'currentcolor'
-
 const Wrapper = styled.span`
   display: inline-block;
   font-size: ${fontSize};
-  color: ${color};
+  color: ${ifProps('color', color({ grayscale: 0 }, 1), 'currentcolor')};
   width: 1em;
   height: 1em;
   margin: 0.1em;
@@ -36,15 +33,4 @@ Icon.propTypes = {
   reverse: PropTypes.bool
 }
 
-Icon.defaultProps = {
-  theme: {
-    colors: {
-      grayscale: { 0: '#222' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' }
-    }
-  }
-}
-
 export default Icon
diff --git a/src/components/atoms/Icon/index.test.js b/src/components/atoms/Icon/index.test.js
index b4184941..1652e585 100644
--- a/src/components/atoms/Icon/index.test.js
+++ b/src/components/atoms/Icon/index.test.js
@@ -1,42 +1,14 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Icon, * as styles from '.'
+import Icon from '.'
 
 const wrap = (props = {}) => shallow(<Icon icon="github" {...props} />).dive()
 
+it('renders with different combination of props', () => {
+  wrap({ height: 40 })
+})
+
 it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    colors: {
-      grayscale: { 0: '#222' },
-      primary: { 1: 'red' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' },
-      primary: { 1: 'blue' }
-    }
-  }
-
-  test('fontSize', () => {
-    const fontSize = (height) => parseFloat(styles.fontSize({ height })).toFixed(2)
-    expect(fontSize()).toBe('1.25')
-    expect(fontSize(20)).toBe('1.25')
-    expect(fontSize(16)).toBe('1.00')
-  })
-
-  test('color', () => {
-    const props = {
-      color: 'grayscale',
-      reverse: false,
-      theme
-    }
-    expect(styles.color(props)).toBe(theme.colors.grayscale[0])
-    expect(styles.color({ ...props, reverse: true })).toBe(theme.reverseColors.grayscale[0])
-    expect(styles.color({ ...props, color: 'primary' })).toBe(theme.colors.primary[1])
-    expect(styles.color({ ...props, color: null })).toBe('currentcolor')
-  })
-})
diff --git a/src/components/atoms/Input/index.js b/src/components/atoms/Input/index.js
index 6240ed4a..f5628ae6 100644
--- a/src/components/atoms/Input/index.js
+++ b/src/components/atoms/Input/index.js
@@ -1,33 +1,22 @@
 import React, { PropTypes } from 'react'
 import styled, { css } from 'styled-components'
+import { font, color, reverseColor, ifProps } from 'arc-theme'
 
-export const fontFamily = ({ theme }) => theme.fonts.primary
 export const fontSize = ({ height }) => `${height / 35.5555555556}rem`
-export const padding = ({ type }) => type === 'textarea' ? '0.4444444444em' : '0 0.4444444444em'
-export const height = ({ type }) => type === 'textarea' ? 'auto' : '2.2222222222em'
-
-export const color = ({ theme, reverse }) =>
-  theme[reverse ? 'reverseColors' : 'colors'].grayscale[0]
-
-export const borderColor = ({ invalid, theme, reverse }) =>
-  theme[reverse ? 'reverseColors' : 'colors'][invalid ? 'danger' : 'grayscale'][invalid ? 2 : 3]
-
-export const backgroundColor = ({ theme, reverse }) =>
-  theme[reverse ? 'colors' : 'reverseColors'].grayscale[0]
 
 const styles = css`
-  font-family: ${fontFamily};
+  font-family: ${font('primary')};
   display: block;
   width: 100%;
   margin: 0;
   box-sizing: border-box;
   font-size: ${fontSize};
-  padding: ${padding};
-  height: ${height};
-  color: ${color};
-  border: 1px solid ${borderColor};
+  padding: ${ifProps({ type: 'textarea' }, '0.4444444444em', '0 0.4444444444em')};
+  height: ${ifProps({ type: 'textarea' }, 'auto', '2.2222222222em')};
+  color: ${color('grayscale', 0)};
+  background-color: ${reverseColor('grayscale', 0)};
+  border: 1px solid ${ifProps('invalid', color('danger', 2), color('grayscale', 3))};
   border-radius: 2px;
-  background-color: ${backgroundColor};
 
   &[type=checkbox], &[type=radio] {
     display: inline-block;
@@ -61,20 +50,7 @@ Input.propTypes = {
 
 Input.defaultProps = {
   type: 'text',
-  height: 40,
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      danger: { 2: '#f8877f' },
-      grayscale: { 0: '#222', 3: '#bbb' }
-    },
-    reverseColors: {
-      danger: { 2: '#f44336' },
-      grayscale: { 0: '#fff', 3: '#555' }
-    }
-  }
+  height: 40
 }
 
 export default Input
diff --git a/src/components/atoms/Input/index.test.js b/src/components/atoms/Input/index.test.js
index 25330c2d..54fa078a 100644
--- a/src/components/atoms/Input/index.test.js
+++ b/src/components/atoms/Input/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Input, * as styles from '.'
+import Input from '.'
 
 const wrap = (props = {}) => shallow(<Input {...props} />).dive()
 
@@ -23,48 +23,3 @@ it('renders textarea when type is textarea', () => {
   const wrapper = wrap({ type: 'textarea' })
   expect(wrapper.find('textarea')).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      danger: { 2: '#f8877f' },
-      grayscale: { 0: '#222', 3: '#bbb' }
-    },
-    reverseColors: {
-      danger: { 2: '#f44336' },
-      grayscale: { 0: '#fff', 3: '#555' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('fontSize', () => {
-    const fontSize = (height) => parseFloat(styles.fontSize({ height })).toFixed(2)
-    expect(fontSize(40)).toBe('1.12')
-    expect(fontSize(50)).toBe('1.41')
-    expect(fontSize(60)).toBe('1.69')
-  })
-
-  test('color', () => {
-    expect(styles.color({ theme })).toBe(theme.colors.grayscale[0])
-    expect(styles.color({ theme, reverse: true })).toBe(theme.reverseColors.grayscale[0])
-  })
-
-  test('borderColor', () => {
-    expect(styles.borderColor({ theme })).toBe(theme.colors.grayscale[3])
-    expect(styles.borderColor({ theme, reverse: true })).toBe(theme.reverseColors.grayscale[3])
-    expect(styles.borderColor({ theme, invalid: true })).toBe(theme.colors.danger[2])
-    expect(styles.borderColor({ theme, invalid: true, reverse: true }))
-      .toBe(theme.reverseColors.danger[2])
-  })
-
-  test('backgroundColor', () => {
-    expect(styles.backgroundColor({ theme })).toBe(theme.reverseColors.grayscale[0])
-    expect(styles.backgroundColor({ theme, reverse: true })).toBe(theme.colors.grayscale[0])
-  })
-})
diff --git a/src/components/atoms/Label/index.js b/src/components/atoms/Label/index.js
index 8b186935..4141d8f9 100644
--- a/src/components/atoms/Label/index.js
+++ b/src/components/atoms/Label/index.js
@@ -1,14 +1,10 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
-export const color = ({ theme, reverse }) =>
-  theme[reverse ? 'reverseColors' : 'colors'].grayscale[1]
+import { font, color } from 'arc-theme'
 
 const Label = styled.label`
-  font-family: ${fontFamily};
-  color: ${color};
+  font-family: ${font('primary')};
+  color: ${color('grayscale', 1)};
   font-size: 1rem;
   line-height: 2em;
 `
@@ -17,18 +13,4 @@ Label.propTypes = {
   reverse: PropTypes.bool
 }
 
-Label.defaultProps = {
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 1: '#555' }
-    },
-    reverseColors: {
-      grayscale: { 1: '#bbb' }
-    }
-  }
-}
-
 export default Label
diff --git a/src/components/atoms/Label/index.test.js b/src/components/atoms/Label/index.test.js
index 496a1cbb..6bf28aaa 100644
--- a/src/components/atoms/Label/index.test.js
+++ b/src/components/atoms/Label/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Label, * as styles from '.'
+import Label from '.'
 
 const wrap = (props = {}) => shallow(<Label {...props} />)
 
@@ -13,26 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ htmlFor: 'foo' })
   expect(wrapper.find({ htmlFor: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 1: '#555' }
-    },
-    reverseColors: {
-      grayscale: { 1: '#bbb' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('color', () => {
-    expect(styles.color({ theme })).toBe(theme.colors.grayscale[1])
-    expect(styles.color({ theme, reverse: true })).toBe(theme.reverseColors.grayscale[1])
-  })
-})
diff --git a/src/components/atoms/Link/index.js b/src/components/atoms/Link/index.js
index 17663302..25edd655 100644
--- a/src/components/atoms/Link/index.js
+++ b/src/components/atoms/Link/index.js
@@ -1,17 +1,13 @@
 import React, { PropTypes } from 'react'
 import styled, { css } from 'styled-components'
 import { Link as RouterLink } from 'react-router'
-
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
-export const color = ({ theme, reverse, color }) =>
-  theme[reverse ? 'reverseColors' : 'colors'][color][color === 'grayscale' ? 0 : 1]
+import { font, color } from 'arc-theme'
 
 const styles = css`
-  font-family: ${fontFamily};
+  font-family: ${font('primary')};
   text-decoration: none;
   font-weight: 500;
-  color: ${color};
+  color: ${color({ grayscale: 0 }, 1)};
 
   &:hover {
     text-decoration: underline;
@@ -37,20 +33,7 @@ Link.propTypes = {
 }
 
 Link.defaultProps = {
-  color: 'primary',
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' },
-      primary: { 1: '#2196f3' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' },
-      primary: { 1: '#71bcf7' }
-    }
-  }
+  color: 'primary'
 }
 
 export default Link
diff --git a/src/components/atoms/Link/index.test.js b/src/components/atoms/Link/index.test.js
index a4e0d539..991b05dd 100644
--- a/src/components/atoms/Link/index.test.js
+++ b/src/components/atoms/Link/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Link, * as styles from '.'
+import Link from '.'
 
 const wrap = (props = {}) => shallow(<Link {...props} />).dive()
 
@@ -23,34 +23,3 @@ it('renders Link when prop to is passed in', () => {
   const wrapper = wrap({ to: 'test' }).dive()
   expect(wrapper.find('Link')).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' },
-      primary: { 1: '#2196f3' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' },
-      primary: { 1: '#71bcf7' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('color', () => {
-    const props = {
-      color: 'grayscale',
-      reverse: false,
-      theme
-    }
-    expect(styles.color(props)).toBe(theme.colors.grayscale[0])
-    expect(styles.color({ ...props, reverse: true })).toBe(theme.reverseColors.grayscale[0])
-    expect(styles.color({ ...props, color: 'primary' })).toBe(theme.colors.primary[1])
-  })
-})
diff --git a/src/components/atoms/List/index.js b/src/components/atoms/List/index.js
index fdf3c426..5caddebd 100644
--- a/src/components/atoms/List/index.js
+++ b/src/components/atoms/List/index.js
@@ -1,17 +1,13 @@
 import React, { PropTypes } from 'react'
 import styled, { css } from 'styled-components'
-
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
-export const color = ({ theme, reverse, color }) =>
-  theme[reverse ? 'reverseColors' : 'colors'][color][color === 'grayscale' ? 0 : 1]
+import { font, color } from 'arc-theme'
 
 const styles = css`
-  font-family: ${fontFamily};
+  font-family: ${font('primary')};
   margin: 1rem 0;
   padding-left: 1.6rem;
   line-height: 1.7rem;
-  color: ${color};
+  color: ${color({ grayscale: 0 }, 1)};
 `
 
 const Ol = styled.ol`${styles}`
@@ -29,18 +25,7 @@ List.propTypes = {
 }
 
 List.defaultProps = {
-  color: 'grayscale',
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' }
-    }
-  }
+  color: 'grayscale'
 }
 
 export default List
diff --git a/src/components/atoms/List/index.test.js b/src/components/atoms/List/index.test.js
index eafe312a..89bcea06 100644
--- a/src/components/atoms/List/index.test.js
+++ b/src/components/atoms/List/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import List, * as styles from '.'
+import List from '.'
 
 const wrap = (props = {}) => shallow(<List {...props} />).dive()
 
@@ -23,34 +23,3 @@ it('renders ol when ordered prop is passed in', () => {
   const wrapper = wrap({ ordered: true })
   expect(wrapper.find('ol')).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' },
-      primary: { 1: 'red' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' },
-      primary: { 1: 'blue' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('color', () => {
-    const props = {
-      color: 'grayscale',
-      reverse: false,
-      theme
-    }
-    expect(styles.color(props)).toBe(theme.colors.grayscale[0])
-    expect(styles.color({ ...props, reverse: true })).toBe(theme.reverseColors.grayscale[0])
-    expect(styles.color({ ...props, color: 'primary' })).toBe(theme.colors.primary[1])
-  })
-})
diff --git a/src/components/atoms/Paragraph/index.js b/src/components/atoms/Paragraph/index.js
index d9619cd6..f33c34b1 100644
--- a/src/components/atoms/Paragraph/index.js
+++ b/src/components/atoms/Paragraph/index.js
@@ -1,14 +1,10 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
-export const color = ({ theme, reverse }) =>
-  theme[reverse ? 'reverseColors' : 'colors'].grayscale[0]
+import { font, color } from 'arc-theme'
 
 const Paragraph = styled.p`
-  font-family: ${fontFamily};
-  color: ${color};
+  font-family: ${font('primary')};
+  color: ${color('grayscale', 0)};
   font-size: 1rem;
   line-height: 1.3;
   margin: 1rem 0 0;
@@ -18,18 +14,4 @@ Paragraph.propTypes = {
   reverse: PropTypes.bool
 }
 
-Paragraph.defaultProps = {
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' }
-    }
-  }
-}
-
 export default Paragraph
diff --git a/src/components/atoms/Paragraph/index.test.js b/src/components/atoms/Paragraph/index.test.js
index cca25a0c..11cc958a 100644
--- a/src/components/atoms/Paragraph/index.test.js
+++ b/src/components/atoms/Paragraph/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Paragraph, * as styles from '.'
+import Paragraph from '.'
 
 const wrap = (props = {}) => shallow(<Paragraph {...props} />)
 
@@ -13,26 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('color', () => {
-    expect(styles.color({ theme })).toBe(theme.colors.grayscale[0])
-    expect(styles.color({ theme, reverse: true })).toBe(theme.reverseColors.grayscale[0])
-  })
-})
diff --git a/src/components/atoms/Spinner/index.js b/src/components/atoms/Spinner/index.js
index 7891390e..42b0e50e 100644
--- a/src/components/atoms/Spinner/index.js
+++ b/src/components/atoms/Spinner/index.js
@@ -1,11 +1,6 @@
 import { PropTypes } from 'react'
 import styled, { keyframes } from 'styled-components'
-
-export const backgroundColor = ({ theme, reverse }) =>
-  theme[reverse ? 'colors' : 'reverseColors'].grayscale[1]
-
-export const color = ({ theme, reverse, color }) =>
-  theme[reverse ? 'reverseColors' : 'colors'][color][1]
+import { color, reverseColor } from 'arc-theme'
 
 const spin = keyframes`
   0% { transform: rotate(0deg); }
@@ -14,8 +9,8 @@ const spin = keyframes`
 
 const Spinner = styled.div`
   position: relative;
-  border: 0.2em solid ${backgroundColor};
-  border-bottom-color: ${color};
+  border: 0.2em solid ${reverseColor('grayscale', 1)};
+  border-bottom-color: ${color(1)};
   border-radius: 50%;
   margin: 0 auto;
   width: 1em;
@@ -29,20 +24,7 @@ Spinner.propTypes = {
 }
 
 Spinner.defaultProps = {
-  color: 'primary',
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      primary: { 1: '#2196f3' },
-      grayscale: { 1: '#555' }
-    },
-    reverseColors: {
-      primary: { 1: '#71bcf7' },
-      grayscale: { 1: '#bbb' }
-    }
-  }
+  color: 'primary'
 }
 
 export default Spinner
diff --git a/src/components/atoms/Spinner/index.test.js b/src/components/atoms/Spinner/index.test.js
index c6122a09..9b683b38 100644
--- a/src/components/atoms/Spinner/index.test.js
+++ b/src/components/atoms/Spinner/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Spinner, * as styles from '.'
+import Spinner from '.'
 
 const wrap = (props = {}) => shallow(<Spinner {...props} />)
 
@@ -8,34 +8,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      primary: { 1: '#2196f3' },
-      grayscale: { 1: '#555' }
-    },
-    reverseColors: {
-      primary: { 1: '#71bcf7' },
-      grayscale: { 1: '#bbb' }
-    }
-  }
-
-  test('backgroundColor', () => {
-    expect(styles.backgroundColor({ theme })).toBe(theme.reverseColors.grayscale[1])
-    expect(styles.backgroundColor({ theme, reverse: true })).toBe(theme.colors.grayscale[1])
-  })
-
-  test('color', () => {
-    const props = {
-      color: 'primary',
-      reverse: false,
-      theme
-    }
-    expect(styles.color(props)).toBe(theme.colors.primary[1])
-    expect(styles.color({ ...props, reverse: true })).toBe(theme.reverseColors.primary[1])
-  })
-})
diff --git a/src/components/atoms/TableRow/index.js b/src/components/atoms/TableRow/index.js
index 30a8e03d..d3371cdd 100644
--- a/src/components/atoms/TableRow/index.js
+++ b/src/components/atoms/TableRow/index.js
@@ -1,8 +1,8 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
+import { reverseColor } from 'arc-theme'
 
-export const backgroundColor = ({ theme, filled, reverse }) =>
-  theme[reverse ? 'colors' : 'reverseColors'].grayscale[filled ? 1 : 0]
+const backgroundColor = ({ filled }) => reverseColor('grayscale', filled ? 1 : 0)
 
 const TableRow = styled.tr`
   background-color: ${backgroundColor};
@@ -13,15 +13,4 @@ TableRow.propTypes = {
   reverse: PropTypes.bool
 }
 
-TableRow.defaultProps = {
-  theme: {
-    colors: {
-      grayscale: { 0: '#222', 1: '#555' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff', 1: '#bbb' }
-    }
-  }
-}
-
 export default TableRow
diff --git a/src/components/atoms/TableRow/index.test.js b/src/components/atoms/TableRow/index.test.js
index f92518bc..bc97e8c8 100644
--- a/src/components/atoms/TableRow/index.test.js
+++ b/src/components/atoms/TableRow/index.test.js
@@ -1,9 +1,13 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import TableRow, * as styles from '.'
+import TableRow from '.'
 
 const wrap = (props = {}) => shallow(<TableRow {...props} />)
 
+it('renders with different combination of props', () => {
+  wrap({ filled: true })
+})
+
 it('renders children when passed in', () => {
   const wrapper = wrap({ children: 'test' })
   expect(wrapper.contains('test')).toBe(true)
@@ -13,22 +17,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    colors: {
-      grayscale: { 0: '#222', 1: '#555' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff', 1: '#bbb' }
-    }
-  }
-
-  test('backgroundColor', () => {
-    expect(styles.backgroundColor({ theme })).toBe(theme.reverseColors.grayscale[0])
-    expect(styles.backgroundColor({ theme, filled: true })).toBe(theme.reverseColors.grayscale[1])
-    expect(styles.backgroundColor({ theme, reverse: true })).toBe(theme.colors.grayscale[0])
-    expect(styles.backgroundColor({ theme, filled: true, reverse: true }))
-      .toBe(theme.colors.grayscale[1])
-  })
-})
diff --git a/src/components/atoms/Tooltip/index.js b/src/components/atoms/Tooltip/index.js
index 236a7965..d5ea0858 100644
--- a/src/components/atoms/Tooltip/index.js
+++ b/src/components/atoms/Tooltip/index.js
@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react'
 import styled, { css } from 'styled-components'
+import { font, ifProps } from 'arc-theme'
 
 const opposites = {
   top: 'bottom',
@@ -18,13 +19,7 @@ export const perpendicularOpposite = (props) => opposites[perpendicular(props)]
 export const perpendicularAxis = ({ position }) =>
   position === 'left' || position === 'right' ? 'Y' : 'X'
 
-const fontFamily = ({ theme }) => theme.fonts.primary
-
-const backgroundColor = ({ reverse }) =>
-  reverse ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.85)'
-
-const color = ({ reverse }) =>
-  reverse ? 'black' : 'white'
+const backgroundColor = ifProps('reverse', 'rgba(255, 255, 255, 0.85)', 'rgba(0, 0, 0, 0.85)')
 
 const styles = css`
   position: relative;
@@ -53,13 +48,13 @@ const styles = css`
 
   &:before {
     content: attr(data-title);
-    font-family: ${fontFamily};
+    font-family: ${font('primary')};
     white-space: nowrap;
     text-transform: none;
     font-size: 0.8125rem;
     line-height: 1.5;
     text-align: center;
-    color: ${color};
+    color: ${ifProps('reverse', 'black', 'white')};
     background-color: ${backgroundColor};
     border-radius: 0.15384em;
     padding: 0.75em 1em;
@@ -107,12 +102,7 @@ Tooltip.propTypes = {
 
 Tooltip.defaultProps = {
   position: 'top',
-  align: 'center',
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    }
-  }
+  align: 'center'
 }
 
 export default Tooltip
diff --git a/src/components/atoms/Tooltip/index.test.js b/src/components/atoms/Tooltip/index.test.js
index bef62f75..6df2b98b 100644
--- a/src/components/atoms/Tooltip/index.test.js
+++ b/src/components/atoms/Tooltip/index.test.js
@@ -9,7 +9,6 @@ const wrap = (props = {}) => shallow(
 ).dive()
 
 it('renders with different props', () => {
-  wrap({ reverse: true })
   wrap({ align: 'start' })
   wrap({ align: 'end' })
 })
diff --git a/src/components/molecules/Blockquote/index.js b/src/components/molecules/Blockquote/index.js
index 76eadde9..c521490a 100644
--- a/src/components/molecules/Blockquote/index.js
+++ b/src/components/molecules/Blockquote/index.js
@@ -1,41 +1,33 @@
 import React, { PropTypes } from 'react'
 import styled from 'styled-components'
-
-export const quoteFontFamily = ({ theme }) => theme.fonts.quote
-export const citeFontFamily = ({ theme }) => theme.fonts.primary
-
-export const color = ({ theme, reverse }) =>
-  theme[reverse ? 'reverseColors' : 'colors'].grayscale[1]
-
-export const borderColor = ({ theme, reverse }) =>
-  theme[reverse ? 'colors' : 'reverseColors'].grayscale[2]
+import { font, color, reverseColor } from 'arc-theme'
 
 const StyledBlockquote = styled.blockquote`
   position: relative;
-  font-family: ${quoteFontFamily};
+  font-family: ${font('quote')};
   font-style: italic;
   font-size: 1.2rem;
   line-height: 2rem;
   box-sizing: border-box;
-  color: ${color};
-  border-left: 5px solid ${borderColor};
+  color: ${color('grayscale', 1)};
+  border-left: 5px solid ${reverseColor('grayscale', 2)};
   margin: 1rem 0;
   padding: 0.5rem 0 0.5rem 1.5rem;
 `
 
 const Cite = styled.cite`
   display: block;
-  font-family: ${citeFontFamily};
+  font-family: ${font('primary')};
   font-weight: 300;
   font-style: normal;
   margin-top: 0.4rem;
 `
 
-const Blockquote = ({ cite, children, ...props, theme }) => {
+const Blockquote = ({ cite, children, ...props }) => {
   return (
     <StyledBlockquote {...props}>
       <div>{children}</div>
-      {cite && <Cite theme={theme}>{cite}</Cite>}
+      {cite && <Cite>{cite}</Cite>}
     </StyledBlockquote>
   )
 }
@@ -47,19 +39,4 @@ Blockquote.propTypes = {
   theme: PropTypes.object
 }
 
-Blockquote.defaultProps = {
-  theme: {
-    fonts: {
-      primary: 'sans-serif',
-      quote: 'serif'
-    },
-    colors: {
-      grayscale: { 1: '#555', 2: '#888' }
-    },
-    reverseColors: {
-      grayscale: { 1: '#bbb', 2: '#888' }
-    }
-  }
-}
-
 export default Blockquote
diff --git a/src/components/molecules/Blockquote/index.test.js b/src/components/molecules/Blockquote/index.test.js
index f2f4e609..ee11fc23 100644
--- a/src/components/molecules/Blockquote/index.test.js
+++ b/src/components/molecules/Blockquote/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Blockquote, * as styles from '.'
+import Blockquote from '.'
 
 const wrap = (props = {}) => shallow(<Blockquote {...props} />).dive()
 
@@ -18,36 +18,3 @@ it('renders cite when passed in', () => {
   const wrapper = wrap({ cite: 'foo' })
   expect(wrapper.contains('foo')).toBe(true)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif',
-      quote: 'serif'
-    },
-    colors: {
-      grayscale: { 1: '#555', 2: '#888' }
-    },
-    reverseColors: {
-      grayscale: { 1: '#bbb', 2: '#888' }
-    }
-  }
-
-  test('quoteFontFamily', () => {
-    expect(styles.quoteFontFamily({ theme })).toBe(theme.fonts.quote)
-  })
-
-  test('citeFontFamily', () => {
-    expect(styles.citeFontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('color', () => {
-    expect(styles.color({ theme })).toBe(theme.colors.grayscale[1])
-    expect(styles.color({ theme, reverse: true })).toBe(theme.reverseColors.grayscale[1])
-  })
-
-  test('borderColor', () => {
-    expect(styles.borderColor({ theme })).toBe(theme.reverseColors.grayscale[2])
-    expect(styles.borderColor({ theme, reverse: true })).toBe(theme.colors.grayscale[2])
-  })
-})
diff --git a/src/components/molecules/Field/index.js b/src/components/molecules/Field/index.js
index 7697b2f6..7788d2f4 100644
--- a/src/components/molecules/Field/index.js
+++ b/src/components/molecules/Field/index.js
@@ -11,14 +11,14 @@ const Wrapper = styled.div`
   margin-bottom: 1rem;
 `
 
-const Field = ({ error, name, invalid, label, type, ...props, theme }) => {
+const Field = ({ error, name, invalid, label, type, ...props }) => {
   const inputProps = { id: name, name, type, invalid, 'aria-describedby': `${name}Error`, ...props }
   return (
     <Wrapper>
       {label && <Label htmlFor={inputProps.id}>{label}</Label>}
       <Input {...inputProps} />
       {invalid && error &&
-        <Error id={`${name}Error`} role="alert" color="danger" theme={theme} transparent>
+        <Error id={`${name}Error`} role="alert" color="danger" transparent>
           {error}
         </Error>
       }
@@ -31,25 +31,11 @@ Field.propTypes = {
   invalid: PropTypes.bool,
   error: PropTypes.string,
   label: PropTypes.string,
-  type: PropTypes.string,
-  theme: PropTypes.object
+  type: PropTypes.string
 }
 
 Field.defaultProps = {
-  type: 'text',
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      danger: { 1: '#f44336', 2: '#f8877f' },
-      grayscale: { 0: '#222', 3: '#bbb' }
-    },
-    reverseColors: {
-      danger: { 1: '#f8877f', 2: '#f44336' },
-      grayscale: { 0: '#fff', 3: '#555' }
-    }
-  }
+  type: 'text'
 }
 
 export default Field
diff --git a/src/components/molecules/Modal/index.js b/src/components/molecules/Modal/index.js
index 2e7da740..d73912f4 100644
--- a/src/components/molecules/Modal/index.js
+++ b/src/components/molecules/Modal/index.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
 import styled, { css, injectGlobal } from 'styled-components'
 import ReactModal from 'react-modal'
+import { font, color, reverseColor } from 'arc-theme'
 
 import { Heading, IconButton } from 'components'
 
@@ -32,11 +33,11 @@ const ModalBox = styled(ReactModal)`
   position: absolute;
   display: flex;
   flex-direction: column;
-  font-family: ${({ theme }) => theme.fonts.primary};
+  font-family: ${font('primary')};
   font-size: 1rem;
-  background-color: ${({ theme }) => theme.reverseColors.grayscale[0]};
+  background-color: ${reverseColor('grayscale', 0)};
   border-radius: 0.125em;
-  color: ${({ theme }) => theme.colors.grayscale[0]};
+  color: ${color('grayscale', 0)};
   top: calc(50% - 1rem);
   left: calc(50% - 1rem);
   right: auto;
@@ -88,7 +89,7 @@ const StyledReactModal = styled(({ className, ...props }) =>
   <ModalBox overlayClassName={className} closeTimeoutMS={250} {...props} />
 )`${overlayStyles}`
 
-const Modal = ({ children, title, closeable, onClose, ...props }) => {
+const Modal = ({ children, title, closeable, onClose, ...props, reverse }) => {
   const hasHeader = title || closeable
   return (
     <StyledReactModal
@@ -98,7 +99,7 @@ const Modal = ({ children, title, closeable, onClose, ...props }) => {
       {...props}>
       {hasHeader &&
         <Header>
-          <StyledHeading level={2}>{title}</StyledHeading>
+          <StyledHeading level={2} reverse={reverse}>{title}</StyledHeading>
           {closeable && <IconButton icon="close" onClick={onClose} color="white" reverse />}
         </Header>
       }
@@ -113,21 +114,8 @@ Modal.propTypes = {
   children: PropTypes.node,
   title: PropTypes.string,
   closeable: PropTypes.bool,
+  reverse: PropTypes.bool,
   onClose: PropTypes.func.isRequired
 }
 
-Modal.defaultProps = {
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' }
-    }
-  }
-}
-
 export default Modal
diff --git a/src/components/molecules/Molecule/index.js b/src/components/molecules/Molecule/index.js
index 57505626..f616532c 100644
--- a/src/components/molecules/Molecule/index.js
+++ b/src/components/molecules/Molecule/index.js
@@ -1,14 +1,10 @@
 import React, { PropTypes } from 'react'
 import styled from 'styled-components'
-
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
-export const color = ({ theme, reverse }) =>
-  theme[reverse ? 'reverseColors' : 'colors'].grayscale[0]
+import { font, color } from 'arc-theme'
 
 const Wrapper = styled.div`
-  font-family: ${fontFamily};
-  color: ${color};
+  font-family: ${font('primary')};
+  color: ${color('grayscale', 0)};
 `
 
 const Molecule = ({ children, ...props }) => {
@@ -24,18 +20,4 @@ Molecule.propTypes = {
   children: PropTypes.node
 }
 
-Molecule.defaultProps = {
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' }
-    }
-  }
-}
-
 export default Molecule
diff --git a/src/components/molecules/Molecule/index.test.js b/src/components/molecules/Molecule/index.test.js
index 1fe0da98..751e5201 100644
--- a/src/components/molecules/Molecule/index.test.js
+++ b/src/components/molecules/Molecule/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Molecule, * as styles from '.'
+import Molecule from '.'
 
 const wrap = (props = {}) => shallow(<Molecule {...props} />)
 
@@ -13,26 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('color', () => {
-    expect(styles.color({ theme })).toBe(theme.colors.grayscale[0])
-    expect(styles.color({ theme, reverse: true })).toBe(theme.reverseColors.grayscale[0])
-  })
-})
diff --git a/src/components/molecules/PrimaryNavigation/index.js b/src/components/molecules/PrimaryNavigation/index.js
index 2c158ce3..85416391 100644
--- a/src/components/molecules/PrimaryNavigation/index.js
+++ b/src/components/molecules/PrimaryNavigation/index.js
@@ -1,14 +1,9 @@
 import React, { PropTypes } from 'react'
 import styled from 'styled-components'
+import { color } from 'arc-theme'
 
 import { Link } from 'components'
 
-export const linkColor = ({ theme, reverse }) =>
-  theme[reverse ? 'reverseColors' : 'colors'].grayscale[2]
-
-export const activeLinkColor = ({ theme, reverse }) =>
-  theme[reverse ? 'reverseColors' : 'colors'].grayscale[0]
-
 const Nav = styled.nav`
   display: flex;
   list-style: none;
@@ -17,10 +12,10 @@ const Nav = styled.nav`
   }
   a {
     font-weight: 300;
-    color: ${linkColor};
+    color: ${color('grayscale', 2)};
     font-size: 1.25rem;
     &.active {
-      color: ${activeLinkColor};
+      color: ${color('grayscale', 0)};
     }
   }
 `
@@ -38,15 +33,4 @@ PrimaryNavigation.propTypes = {
   reverse: PropTypes.bool
 }
 
-PrimaryNavigation.defaultProps = {
-  theme: {
-    colors: {
-      grayscale: { 0: '#222', 2: '#888' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff', 2: '#888' }
-    }
-  }
-}
-
 export default PrimaryNavigation
diff --git a/src/components/molecules/PrimaryNavigation/index.test.js b/src/components/molecules/PrimaryNavigation/index.test.js
index 47e0033c..a0639834 100644
--- a/src/components/molecules/PrimaryNavigation/index.test.js
+++ b/src/components/molecules/PrimaryNavigation/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import PrimaryNavigation, * as styles from '.'
+import PrimaryNavigation from '.'
 
 const wrap = (props = {}) => shallow(<PrimaryNavigation {...props} />)
 
@@ -8,24 +8,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    colors: {
-      grayscale: { 0: '#222', 2: '#888' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff', 2: '#888' }
-    }
-  }
-
-  test('linkColor', () => {
-    expect(styles.linkColor({ theme })).toBe(theme.colors.grayscale[2])
-    expect(styles.linkColor({ theme, reverse: true })).toBe(theme.reverseColors.grayscale[2])
-  })
-
-  test('activeLinkColor', () => {
-    expect(styles.activeLinkColor({ theme })).toBe(theme.colors.grayscale[0])
-    expect(styles.activeLinkColor({ theme, reverse: true })).toBe(theme.reverseColors.grayscale[0])
-  })
-})
diff --git a/src/components/molecules/Table/index.js b/src/components/molecules/Table/index.js
index 8ac07438..4efa2d8a 100644
--- a/src/components/molecules/Table/index.js
+++ b/src/components/molecules/Table/index.js
@@ -1,28 +1,21 @@
 import React, { PropTypes } from 'react'
 import styled from 'styled-components'
+import { font, color, reverseColor } from 'arc-theme'
 
 import { Caption } from 'components'
 
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
-export const borderColor = ({ theme, reverse }) =>
-  theme[reverse ? 'colors' : 'reverseColors'].grayscale[1]
-
-export const color = ({ theme, reverse }) =>
-  theme[reverse ? 'reverseColors' : 'colors'].grayscale[0]
-
 const StyledTable = styled.table`
-  font-family: ${fontFamily};
+  font-family: ${font('primary')};
   border-collapse: collapse;
   width: 100%;
-  border: 1px solid ${borderColor};
-  color: ${color};
+  border: 1px solid ${reverseColor('grayscale', 1)};
+  color: ${color('grayscale', 0)};
 `
 
-const Table = ({ caption, head, foot, children, ...props }) => {
+const Table = ({ caption, head, foot, children, ...props, reverse }) => {
   return (
     <StyledTable {...props}>
-      {caption && <Caption>{caption}</Caption>}
+      {caption && <Caption reverse={reverse}>{caption}</Caption>}
       {head && <thead>{head}</thead>}
       {foot && <tfoot>{foot}</tfoot>}
       <tbody>{children}</tbody>
@@ -38,18 +31,4 @@ Table.propTypes = {
   reverse: PropTypes.bool
 }
 
-Table.defaultProps = {
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222', 1: '#5555' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff', 1: '#bbb' }
-    }
-  }
-}
-
 export default Table
diff --git a/src/components/molecules/Table/index.test.js b/src/components/molecules/Table/index.test.js
index ba603635..dc8d5032 100644
--- a/src/components/molecules/Table/index.test.js
+++ b/src/components/molecules/Table/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Table, * as styles from '.'
+import Table from '.'
 
 const wrap = (props = {}) => shallow(<Table {...props} />)
 
@@ -28,31 +28,3 @@ it('renders foot when passed in', () => {
   const wrapper = wrap({ foot: 'test foot' })
   expect(wrapper.contains('test foot')).toBe(true)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222', 1: '#5555' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff', 1: '#bbb' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('borderColor', () => {
-    expect(styles.borderColor({ theme })).toBe(theme.reverseColors.grayscale[1])
-    expect(styles.borderColor({ theme, reverse: true })).toBe(theme.colors.grayscale[1])
-  })
-
-  test('color', () => {
-    expect(styles.color({ theme })).toBe(theme.colors.grayscale[0])
-    expect(styles.color({ theme, reverse: true })).toBe(theme.reverseColors.grayscale[0])
-  })
-})
diff --git a/src/components/organisms/Footer/index.js b/src/components/organisms/Footer/index.js
index 4c63a0d9..001ee0b8 100644
--- a/src/components/organisms/Footer/index.js
+++ b/src/components/organisms/Footer/index.js
@@ -1,10 +1,11 @@
 import React from 'react'
 import styled from 'styled-components'
+import { reverseColor } from 'arc-theme'
 
 import { Paragraph, Link, Icon } from 'components'
 
 const Wrapper = styled.div`
-  background-color: ${({ theme }) => theme.reverseColors.grayscale[1]};
+  background-color: ${reverseColor('grayscale', 1)};
   padding: 2rem;
 `
 
@@ -24,12 +25,4 @@ const Footer = (props) => {
   )
 }
 
-Footer.defaultProps = {
-  theme: {
-    reverseColors: {
-      grayscale: { 1: '#bbb' }
-    }
-  }
-}
-
 export default Footer
diff --git a/src/components/organisms/Hero/index.js b/src/components/organisms/Hero/index.js
index 01e55488..fa058ffa 100644
--- a/src/components/organisms/Hero/index.js
+++ b/src/components/organisms/Hero/index.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
+import { color } from 'arc-theme'
 
-import { Paragraph, IconLink, IconButton, LogoImage, Tooltip } from 'components'
+import { Block, Paragraph, IconLink, IconButton, LogoImage, Tooltip } from 'components'
 
-const Wrapper = styled.div`
-  background-color: ${({ theme }) => theme.colors.grayscale[0]};
+const Wrapper = styled(Block)`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -13,15 +13,13 @@ const Wrapper = styled.div`
   padding: 2rem 6rem;
   box-sizing: border-box;
   text-align: center;
-  > p {
-    color: ${({ theme }) => theme.colors.grayscale[3]};
-  }
   @media screen and (max-width: 640px) {
     padding: 1rem;
   }
 `
 
 const Text = styled(Paragraph)`
+  color: ${color('grayscale', 3)}
   margin: 3rem auto;
   max-width: 800px;
   font-weight: 300;
@@ -45,7 +43,7 @@ const StyledIconButton = styled(IconButton)`
 
 const Hero = (props) => {
   return (
-    <Wrapper {...props}>
+    <Wrapper reverse {...props}>
       <Logo />
       <Text>
         <strong>ARc</strong> is a <IconLink reverse icon="react" href="https://facebook.github.io/react/">React</IconLink> starter kit based on the <IconLink reverse icon="atomic-design" href="http://bradfrost.com/blog/post/atomic-web-design/">Atomic Design</IconLink> methodology. It's <strong>progressive</strong>, which means that you can start with the basic boilerplate and try the other features when you are comfortable.
@@ -64,12 +62,4 @@ const Hero = (props) => {
   )
 }
 
-Hero.defaultProps = {
-  theme: {
-    colors: {
-      grayscale: { 0: '#222', 3: '#bbb' }
-    }
-  }
-}
-
 export default Hero
diff --git a/src/components/organisms/Organism/index.js b/src/components/organisms/Organism/index.js
index 26bc7b8f..1c57ceb4 100644
--- a/src/components/organisms/Organism/index.js
+++ b/src/components/organisms/Organism/index.js
@@ -1,14 +1,10 @@
 import React, { PropTypes } from 'react'
 import styled from 'styled-components'
-
-export const fontFamily = ({ theme }) => theme.fonts.primary
-
-export const color = ({ theme, reverse }) =>
-  theme[reverse ? 'reverseColors' : 'colors'].grayscale[0]
+import { font, color } from 'arc-theme'
 
 const Wrapper = styled.div`
-  font-family: ${fontFamily};
-  color: ${color};
+  font-family: ${font('primary')};
+  color: ${color('grayscale', 0)};
 `
 
 const Organism = ({ children, ...props }) => {
@@ -24,18 +20,4 @@ Organism.propTypes = {
   children: PropTypes.node
 }
 
-Organism.defaultProps = {
-  theme: {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' }
-    }
-  }
-}
-
 export default Organism
diff --git a/src/components/organisms/Organism/index.test.js b/src/components/organisms/Organism/index.test.js
index 97c0a09c..b28759b3 100644
--- a/src/components/organisms/Organism/index.test.js
+++ b/src/components/organisms/Organism/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Organism, * as styles from '.'
+import Organism from '.'
 
 const wrap = (props = {}) => shallow(<Organism {...props} />)
 
@@ -13,26 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  const theme = {
-    fonts: {
-      primary: 'sans-serif'
-    },
-    colors: {
-      grayscale: { 0: '#222' }
-    },
-    reverseColors: {
-      grayscale: { 0: '#fff' }
-    }
-  }
-
-  test('fontFamily', () => {
-    expect(styles.fontFamily({ theme })).toBe(theme.fonts.primary)
-  })
-
-  test('color', () => {
-    expect(styles.color({ theme })).toBe(theme.colors.grayscale[0])
-    expect(styles.color({ theme, reverse: true })).toBe(theme.reverseColors.grayscale[0])
-  })
-})
diff --git a/src/components/theme.js b/src/components/themes/default.js
similarity index 71%
rename from src/components/theme.js
rename to src/components/themes/default.js
index e1108195..5340f4f6 100644
--- a/src/components/theme.js
+++ b/src/components/themes/default.js
@@ -1,4 +1,8 @@
-export const colors = {
+import { reverse } from 'arc-theme'
+
+const theme = {}
+
+theme.colors = {
   primary: ['#1976d2', '#2196f3', '#71bcf7', '#c2e2fb'],
   secondary: ['#c2185b', '#e91e63', '#f06292', '#f8bbd0'],
   danger: ['#d32f2f', '#f44336', '#f8877f', '#ffcdd2'],
@@ -8,16 +12,12 @@ export const colors = {
   white: ['#fff', '#fff', '#eee']
 }
 
-export const reverseColors = {}
-
-Object.keys(colors).forEach((key) => {
-  reverseColors[key] = [ ...colors[key] ].reverse()
-})
+theme.reverseColors = reverse(theme.colors)
 
-export const fonts = {
+theme.fonts = {
   primary: 'Helvetica Neue, Helvetica, Roboto, sans-serif',
   pre: 'Consolas, Liberation Mono, Menlo, Courier, monospace',
   quote: 'Georgia, serif'
 }
 
-export default { colors, reverseColors, fonts }
+export default theme
diff --git a/yarn.lock b/yarn.lock
index e14f9920..93268af4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -101,6 +101,12 @@ aproba@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.0.4.tgz#2713680775e7614c8ba186c065d4e2e52d1072c0"
 
+arc-theme@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/arc-theme/-/arc-theme-0.2.1.tgz#e38cf7ff65218ee12b6ba7fc5e97a6601cf333fe"
+  dependencies:
+    lodash "^4.17.4"
+
 are-we-there-yet@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz#80e470e95a084794fe1899262c5667c6e88de1b3"
@@ -1400,7 +1406,7 @@ css-select@^1.1.0, css-select@~1.2.0:
     domutils "1.5.1"
     nth-check "~1.0.1"
 
-css-to-react-native@^1.0.3:
+css-to-react-native@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-1.0.6.tgz#728c7e774e56536558a0ecaa990d9507c43a4ac4"
   dependencies:
@@ -2510,7 +2516,7 @@ ini@~1.3.0:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
 
-inline-style-prefixer@^2.0.4:
+inline-style-prefixer@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz#c153c7e88fd84fef5c602e95a8168b2770671fe7"
   dependencies:
@@ -2629,6 +2635,10 @@ is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
 
+is-function@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
+
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
@@ -2680,6 +2690,12 @@ is-path-inside@^1.0.0:
   dependencies:
     path-is-inside "^1.0.1"
 
+is-plain-object@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.1.tgz#4d7ca539bc9db9b737b8acb612f2318ef92f294f"
+  dependencies:
+    isobject "^1.0.0"
+
 is-posix-bracket@^0.1.0:
   version "0.1.1"
   resolved "http://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
@@ -2742,6 +2758,10 @@ isexe@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
 
+isobject@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-1.0.2.tgz#f0f9b8ce92dd540fa0740882e3835a2e022ec78a"
+
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
@@ -3275,7 +3295,7 @@ lodash.some@^4.4.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d"
 
-lodash@^4.0.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1:
+lodash@^4.0.0, lodash@^4.14.0, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -4636,16 +4656,17 @@ strip-json-comments@~1.0.1, strip-json-comments@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
 
-styled-components@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-1.1.1.tgz#14fa0f4d34fec62e22edceaef3e291f108607d40"
+styled-components@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-1.2.1.tgz#5884267dd9c6a8199d4abd3e0714afb973772b42"
   dependencies:
     buffer "^5.0.0"
-    css-to-react-native "^1.0.3"
+    css-to-react-native "^1.0.6"
     fbjs "^0.8.4"
     glamor "^2.15.5"
-    inline-style-prefixer "^2.0.4"
-    lodash "^4.15.0"
+    inline-style-prefixer "^2.0.5"
+    is-function "^1.0.1"
+    is-plain-object "^2.0.1"
     supports-color "^3.1.2"
 
 supports-color@^0.2.0: