diff --git a/package.json b/package.json
index a743ccc6..7ea5e294 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "webpack-dev-server": "^1.16.2"
   },
   "dependencies": {
-    "arc-theme": "^0.1.1",
+    "arc-theme": "^0.2.1",
     "history": "3.0.0",
     "lodash": "^4.16.4",
     "react": "^15.3.2",
diff --git a/src/components/atoms/Atom/index.js b/src/components/atoms/Atom/index.js
index ff8f34bb..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'
-import { get, getColor } from 'arc-theme'
-
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
-export const color = ({ theme, reverse, color }) =>
-  getColor([color, color === 'grayscale' ? 0 : 1], reverse, theme)
+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 = {
diff --git a/src/components/atoms/Atom/index.test.js b/src/components/atoms/Atom/index.test.js
index b0a142ce..ca02bd9c 100644
--- a/src/components/atoms/Atom/index.test.js
+++ b/src/components/atoms/Atom/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Atom, * as styles from '.'
+import Atom from '.'
 
 const wrap = (props = {}) => shallow(<Atom {...props} />)
 
@@ -14,20 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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 cd1ad985..8bf10e90 100644
--- a/src/components/atoms/Badge/index.js
+++ b/src/components/atoms/Badge/index.js
@@ -1,18 +1,14 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-import { get, getColor } from 'arc-theme'
-
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
-export const color = ({ reverse, theme }) => getColor('grayscale[0]', !reverse, theme)
-export const backgroundColor = ({ reverse, theme, color }) => getColor([color, 1], reverse, theme)
+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;
 `
 
diff --git a/src/components/atoms/Badge/index.test.js b/src/components/atoms/Badge/index.test.js
index 2c3df954..0fb7062e 100644
--- a/src/components/atoms/Badge/index.test.js
+++ b/src/components/atoms/Badge/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Badge, * as styles from '.'
+import Badge from '.'
 
 const wrap = (props = {}) => shallow(<Badge {...props} />)
 
@@ -14,24 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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 e99be231..b7475c22 100644
--- a/src/components/atoms/Block/index.js
+++ b/src/components/atoms/Block/index.js
@@ -1,19 +1,11 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-import { get, getColor } from 'arc-theme'
-
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
-
-export const backgroundColor = ({ theme, reverse, color, transparent }) =>
-  transparent ? 'transparent' : getColor([color, 0], !reverse, theme)
-
-export const color = ({ theme, reverse, color }) =>
-  getColor([color, color === 'grayscale' ? 0 : 1], reverse, theme)
+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 = {
diff --git a/src/components/atoms/Block/index.test.js b/src/components/atoms/Block/index.test.js
index a64dec15..f4d6bf36 100644
--- a/src/components/atoms/Block/index.test.js
+++ b/src/components/atoms/Block/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Block, * as styles from '.'
+import Block from '.'
 
 const wrap = (props = {}) => shallow(<Block {...props} />)
 
@@ -14,33 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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 0fa2b3f5..d764aa80 100644
--- a/src/components/atoms/Button/index.js
+++ b/src/components/atoms/Button/index.js
@@ -1,51 +1,42 @@
 import React, { PropTypes } from 'react'
 import styled, { css } from 'styled-components'
 import { Link } from 'react-router'
-import { get, getColor } from 'arc-theme'
+import { font, color, reverseColor, ifProps } from 'arc-theme'
 
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
-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 fontSize = ({ height }) => `${height / 40}rem`
 
-export const backgroundColor = ({ transparent, disabled, color, theme, reverse }) =>
-  transparent ? 'transparent' : getColor([color, disabled ? 2 : 1], reverse, theme)
+const backgroundColor = ({ transparent, disabled }) =>
+  transparent ? 'transparent' : color(disabled ? 2 : 1)
 
-export const color = ({ transparent, disabled, color, theme, reverse }) =>
-  transparent
-  ? getColor([color, disabled ? 2 : 1], reverse, theme)
-  : getColor('grayscale[0]', !reverse, theme)
+const foregroundColor = ({ transparent, disabled }) =>
+  transparent ? color(disabled ? 2 : 1) : reverseColor('grayscale', 0)
 
-export const hoverBackgroundColor = ({ disabled, transparent, color, theme, reverse }) =>
-  !disabled && !transparent && getColor([color, 0], reverse, theme)
-
-export const hoverColor = ({ disabled, transparent, color, theme, reverse }) =>
-  !disabled && transparent && getColor([color, 0], reverse, theme)
+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 {
diff --git a/src/components/atoms/Button/index.test.js b/src/components/atoms/Button/index.test.js
index aa25db20..67ea7308 100644
--- a/src/components/atoms/Button/index.test.js
+++ b/src/components/atoms/Button/index.test.js
@@ -1,10 +1,15 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-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)
@@ -29,90 +34,3 @@ it('renders Link when to is passed in', () => {
   const wrapper = wrap({ to: 'test' }).dive()
   expect(wrapper.find('Link')).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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 ee16aec3..f71f5437 100644
--- a/src/components/atoms/Caption/index.js
+++ b/src/components/atoms/Caption/index.js
@@ -1,13 +1,10 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-import { get, getColor } from 'arc-theme'
-
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
-export const color = ({ theme, reverse }) => getColor('grayscale[1]', reverse, theme)
+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;
diff --git a/src/components/atoms/Caption/index.test.js b/src/components/atoms/Caption/index.test.js
index f93f2c4a..24259130 100644
--- a/src/components/atoms/Caption/index.test.js
+++ b/src/components/atoms/Caption/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Caption, * as styles from '.'
+import Caption from '.'
 
 const wrap = (props = {}) => shallow(<Caption {...props} />)
 
@@ -14,14 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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 82a3fe57..51ea4617 100644
--- a/src/components/atoms/Heading/index.js
+++ b/src/components/atoms/Heading/index.js
@@ -1,21 +1,17 @@
 import React, { PropTypes } from 'react'
 import styled, { css } from 'styled-components'
-import { get, getColor } from 'arc-theme'
+import { font, color } from 'arc-theme'
 
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
 export const fontSize = ({ level }) => `${0.75 + 1 * (1 / level)}rem`
 
-export const color = ({ theme, reverse, color }) =>
-  getColor([color, color === 'grayscale' ? 0 : 1], reverse, theme)
-
 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 }) => {
diff --git a/src/components/atoms/Heading/index.test.js b/src/components/atoms/Heading/index.test.js
index 12294908..d99b8cd8 100644
--- a/src/components/atoms/Heading/index.test.js
+++ b/src/components/atoms/Heading/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Heading, * as styles from '.'
+import Heading from '.'
 
 const wrap = (props = {}) => shallow(<Heading {...props} />).dive()
 
@@ -24,30 +23,3 @@ it('renders hLevel when level is passed in', () => {
   const wrapper = wrap({ level: 2 })
   expect(wrapper.find('h2')).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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 add2ea30..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'
-import { getColor } from 'arc-theme'
-
-export const borderColor = ({ theme, reverse, color }) => getColor([color, 1], !reverse, theme)
+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%;
 `
diff --git a/src/components/atoms/HorizontalRule/index.test.js b/src/components/atoms/HorizontalRule/index.test.js
index 1325780e..cccd9179 100644
--- a/src/components/atoms/HorizontalRule/index.test.js
+++ b/src/components/atoms/HorizontalRule/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import HorizontalRule, * as styles from '.'
+import HorizontalRule from '.'
 
 const wrap = (props = {}) => shallow(<HorizontalRule {...props} />)
 
@@ -9,15 +8,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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 055c2d2b..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 { getColor } from 'arc-theme'
+import { color, ifProps } from 'arc-theme'
 
 export const fontSize = ({ height }) => height ? `${height / 16}rem` : '1.25em'
 
-export const color = ({ theme, reverse, color }) =>
-  color ? getColor([color, color === 'grayscale' ? 0 : 1], reverse, theme) : '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;
diff --git a/src/components/atoms/Icon/index.test.js b/src/components/atoms/Icon/index.test.js
index be677e5b..1652e585 100644
--- a/src/components/atoms/Icon/index.test.js
+++ b/src/components/atoms/Icon/index.test.js
@@ -1,32 +1,14 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-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', () => {
-  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 8f346c8d..f5628ae6 100644
--- a/src/components/atoms/Input/index.js
+++ b/src/components/atoms/Input/index.js
@@ -1,29 +1,21 @@
 import React, { PropTypes } from 'react'
 import styled, { css } from 'styled-components'
-import { get, getColor } from 'arc-theme'
+import { font, color, reverseColor, ifProps } from 'arc-theme'
 
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
 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 }) => getColor('grayscale[0]', reverse, theme)
-export const backgroundColor = ({ theme, reverse }) => getColor('grayscale[0]', !reverse, theme)
-
-export const borderColor = ({ invalid, theme, reverse }) =>
-  getColor(invalid ? 'danger[2]' : 'grayscale[3]', reverse, theme)
 
 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};
-  background-color: ${backgroundColor};
-  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;
 
   &[type=checkbox], &[type=radio] {
diff --git a/src/components/atoms/Input/index.test.js b/src/components/atoms/Input/index.test.js
index eb7f658f..54fa078a 100644
--- a/src/components/atoms/Input/index.test.js
+++ b/src/components/atoms/Input/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Input, * as styles from '.'
+import Input from '.'
 
 const wrap = (props = {}) => shallow(<Input {...props} />).dive()
 
@@ -24,34 +23,3 @@ it('renders textarea when type is textarea', () => {
   const wrapper = wrap({ type: 'textarea' })
   expect(wrapper.find('textarea')).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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 82aa6868..4141d8f9 100644
--- a/src/components/atoms/Label/index.js
+++ b/src/components/atoms/Label/index.js
@@ -1,13 +1,10 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-import { get, getColor } from 'arc-theme'
-
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
-export const color = ({ theme, reverse }) => getColor('grayscale[1]', reverse, theme)
+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;
 `
diff --git a/src/components/atoms/Label/index.test.js b/src/components/atoms/Label/index.test.js
index e57736f1..6bf28aaa 100644
--- a/src/components/atoms/Label/index.test.js
+++ b/src/components/atoms/Label/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Label, * as styles from '.'
+import Label from '.'
 
 const wrap = (props = {}) => shallow(<Label {...props} />)
 
@@ -14,14 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ htmlFor: 'foo' })
   expect(wrapper.find({ htmlFor: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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 a576c20b..25edd655 100644
--- a/src/components/atoms/Link/index.js
+++ b/src/components/atoms/Link/index.js
@@ -1,18 +1,13 @@
 import React, { PropTypes } from 'react'
 import styled, { css } from 'styled-components'
 import { Link as RouterLink } from 'react-router'
-import { get, getColor } from 'arc-theme'
-
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
-
-export const color = ({ theme, reverse, color }) =>
-  getColor([color, color === 'grayscale' ? 0 : 1], reverse, theme)
+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;
diff --git a/src/components/atoms/Link/index.test.js b/src/components/atoms/Link/index.test.js
index 03b1c073..991b05dd 100644
--- a/src/components/atoms/Link/index.test.js
+++ b/src/components/atoms/Link/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Link, * as styles from '.'
+import Link from '.'
 
 const wrap = (props = {}) => shallow(<Link {...props} />).dive()
 
@@ -24,20 +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', () => {
-  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 3b3b81db..5caddebd 100644
--- a/src/components/atoms/List/index.js
+++ b/src/components/atoms/List/index.js
@@ -1,18 +1,13 @@
 import React, { PropTypes } from 'react'
 import styled, { css } from 'styled-components'
-import { get, getColor } from 'arc-theme'
-
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
-
-export const color = ({ theme, reverse, color }) =>
-  getColor([color, color === 'grayscale' ? 0 : 1], reverse, theme)
+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}`
diff --git a/src/components/atoms/List/index.test.js b/src/components/atoms/List/index.test.js
index e5343d3d..89bcea06 100644
--- a/src/components/atoms/List/index.test.js
+++ b/src/components/atoms/List/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import List, * as styles from '.'
+import List from '.'
 
 const wrap = (props = {}) => shallow(<List {...props} />).dive()
 
@@ -24,20 +23,3 @@ it('renders ol when ordered prop is passed in', () => {
   const wrapper = wrap({ ordered: true })
   expect(wrapper.find('ol')).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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 0c7a08f8..f33c34b1 100644
--- a/src/components/atoms/Paragraph/index.js
+++ b/src/components/atoms/Paragraph/index.js
@@ -1,13 +1,10 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-import { get, getColor } from 'arc-theme'
-
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
-export const color = ({ theme, reverse }) => getColor('grayscale[0]', reverse, theme)
+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;
diff --git a/src/components/atoms/Paragraph/index.test.js b/src/components/atoms/Paragraph/index.test.js
index cb004990..11cc958a 100644
--- a/src/components/atoms/Paragraph/index.test.js
+++ b/src/components/atoms/Paragraph/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Paragraph, * as styles from '.'
+import Paragraph from '.'
 
 const wrap = (props = {}) => shallow(<Paragraph {...props} />)
 
@@ -14,14 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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 7b81a9bd..42b0e50e 100644
--- a/src/components/atoms/Spinner/index.js
+++ b/src/components/atoms/Spinner/index.js
@@ -1,9 +1,6 @@
 import { PropTypes } from 'react'
 import styled, { keyframes } from 'styled-components'
-import { getColor } from 'arc-theme'
-
-export const backgroundColor = ({ theme, reverse }) => getColor('grayscale[1]', !reverse, theme)
-export const color = ({ theme, reverse, color }) => getColor([color, 1], reverse, theme)
+import { color, reverseColor } from 'arc-theme'
 
 const spin = keyframes`
   0% { transform: rotate(0deg); }
@@ -12,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;
diff --git a/src/components/atoms/Spinner/index.test.js b/src/components/atoms/Spinner/index.test.js
index 28ba1ae0..9b683b38 100644
--- a/src/components/atoms/Spinner/index.test.js
+++ b/src/components/atoms/Spinner/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Spinner, * as styles from '.'
+import Spinner from '.'
 
 const wrap = (props = {}) => shallow(<Spinner {...props} />)
 
@@ -9,20 +8,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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 e4df9835..d3371cdd 100644
--- a/src/components/atoms/TableRow/index.js
+++ b/src/components/atoms/TableRow/index.js
@@ -1,9 +1,8 @@
 import { PropTypes } from 'react'
 import styled from 'styled-components'
-import { getColor } from 'arc-theme'
+import { reverseColor } from 'arc-theme'
 
-export const backgroundColor = ({ theme, filled, reverse }) =>
-  getColor(['grayscale', filled ? 1 : 0], !reverse, theme)
+const backgroundColor = ({ filled }) => reverseColor('grayscale', filled ? 1 : 0)
 
 const TableRow = styled.tr`
   background-color: ${backgroundColor};
diff --git a/src/components/atoms/TableRow/index.test.js b/src/components/atoms/TableRow/index.test.js
index 518e339b..bc97e8c8 100644
--- a/src/components/atoms/TableRow/index.test.js
+++ b/src/components/atoms/TableRow/index.test.js
@@ -1,10 +1,13 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-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)
@@ -14,13 +17,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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 a5373a27..d5ea0858 100644
--- a/src/components/atoms/Tooltip/index.js
+++ b/src/components/atoms/Tooltip/index.js
@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react'
 import styled, { css } from 'styled-components'
-import { get } from 'arc-theme'
+import { font, ifProps } from 'arc-theme'
 
 const opposites = {
   top: 'bottom',
@@ -19,13 +19,7 @@ export const perpendicularOpposite = (props) => opposites[perpendicular(props)]
 export const perpendicularAxis = ({ position }) =>
   position === 'left' || position === 'right' ? 'Y' : 'X'
 
-const fontFamily = ({ theme }) => get('fonts.primary', theme)
-
-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;
@@ -54,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;
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 1566b3f8..c521490a 100644
--- a/src/components/molecules/Blockquote/index.js
+++ b/src/components/molecules/Blockquote/index.js
@@ -1,38 +1,33 @@
 import React, { PropTypes } from 'react'
 import styled from 'styled-components'
-import { get, getColor } from 'arc-theme'
-
-export const quoteFontFamily = ({ theme }) => get('fonts.quote', theme)
-export const citeFontFamily = ({ theme }) => get('fonts.primary', theme)
-export const color = ({ theme, reverse }) => getColor('grayscale[1]', reverse, theme)
-export const borderColor = ({ theme, reverse }) => getColor('grayscale[2]', !reverse, theme)
+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>
   )
 }
diff --git a/src/components/molecules/Blockquote/index.test.js b/src/components/molecules/Blockquote/index.test.js
index 34abded4..ee11fc23 100644
--- a/src/components/molecules/Blockquote/index.test.js
+++ b/src/components/molecules/Blockquote/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Blockquote, * as styles from '.'
+import Blockquote from '.'
 
 const wrap = (props = {}) => shallow(<Blockquote {...props} />).dive()
 
@@ -19,23 +18,3 @@ it('renders cite when passed in', () => {
   const wrapper = wrap({ cite: 'foo' })
   expect(wrapper.contains('foo')).toBe(true)
 })
-
-describe('styles', () => {
-  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/Modal/index.js b/src/components/molecules/Modal/index.js
index 7bc27a5f..d73912f4 100644
--- a/src/components/molecules/Modal/index.js
+++ b/src/components/molecules/Modal/index.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import styled, { css, injectGlobal } from 'styled-components'
 import ReactModal from 'react-modal'
-import { get, getColor } from 'arc-theme'
+import { font, color, reverseColor } from 'arc-theme'
 
 import { Heading, IconButton } from 'components'
 
@@ -33,11 +33,11 @@ const ModalBox = styled(ReactModal)`
   position: absolute;
   display: flex;
   flex-direction: column;
-  font-family: ${({ theme }) => get('fonts.primary', theme)};
+  font-family: ${font('primary')};
   font-size: 1rem;
-  background-color: ${({ theme }) => getColor('grayscale[0]', true, theme)};
+  background-color: ${reverseColor('grayscale', 0)};
   border-radius: 0.125em;
-  color: ${({ theme }) => getColor('grayscale[0]', false, theme)};
+  color: ${color('grayscale', 0)};
   top: calc(50% - 1rem);
   left: calc(50% - 1rem);
   right: auto;
@@ -89,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
@@ -99,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>
       }
@@ -114,6 +114,7 @@ Modal.propTypes = {
   children: PropTypes.node,
   title: PropTypes.string,
   closeable: PropTypes.bool,
+  reverse: PropTypes.bool,
   onClose: PropTypes.func.isRequired
 }
 
diff --git a/src/components/molecules/Molecule/index.js b/src/components/molecules/Molecule/index.js
index 08fe3192..f616532c 100644
--- a/src/components/molecules/Molecule/index.js
+++ b/src/components/molecules/Molecule/index.js
@@ -1,13 +1,10 @@
 import React, { PropTypes } from 'react'
 import styled from 'styled-components'
-import { get, getColor } from 'arc-theme'
-
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
-export const color = ({ theme, reverse }) => getColor('grayscale[0]', reverse, theme)
+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 }) => {
diff --git a/src/components/molecules/Molecule/index.test.js b/src/components/molecules/Molecule/index.test.js
index fc7a58ab..751e5201 100644
--- a/src/components/molecules/Molecule/index.test.js
+++ b/src/components/molecules/Molecule/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Molecule, * as styles from '.'
+import Molecule from '.'
 
 const wrap = (props = {}) => shallow(<Molecule {...props} />)
 
@@ -14,14 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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 bc513c25..85416391 100644
--- a/src/components/molecules/PrimaryNavigation/index.js
+++ b/src/components/molecules/PrimaryNavigation/index.js
@@ -1,12 +1,9 @@
 import React, { PropTypes } from 'react'
 import styled from 'styled-components'
-import { getColor } from 'arc-theme'
+import { color } from 'arc-theme'
 
 import { Link } from 'components'
 
-export const linkColor = ({ theme, reverse }) => getColor('grayscale[2]', reverse, theme)
-export const activeLinkColor = ({ theme, reverse }) => getColor('grayscale[0]', reverse, theme)
-
 const Nav = styled.nav`
   display: flex;
   list-style: none;
@@ -15,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)};
     }
   }
 `
diff --git a/src/components/molecules/PrimaryNavigation/index.test.js b/src/components/molecules/PrimaryNavigation/index.test.js
index d538b73f..a0639834 100644
--- a/src/components/molecules/PrimaryNavigation/index.test.js
+++ b/src/components/molecules/PrimaryNavigation/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import PrimaryNavigation, * as styles from '.'
+import PrimaryNavigation from '.'
 
 const wrap = (props = {}) => shallow(<PrimaryNavigation {...props} />)
 
@@ -9,15 +8,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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 d992cbf8..4efa2d8a 100644
--- a/src/components/molecules/Table/index.js
+++ b/src/components/molecules/Table/index.js
@@ -1,25 +1,21 @@
 import React, { PropTypes } from 'react'
 import styled from 'styled-components'
-import { get, getColor } from 'arc-theme'
+import { font, color, reverseColor } from 'arc-theme'
 
 import { Caption } from 'components'
 
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
-export const borderColor = ({ theme, reverse }) => getColor('grayscale[1]', !reverse, theme)
-export const color = ({ theme, reverse }) => getColor('grayscale[0]', reverse, theme)
-
 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>
diff --git a/src/components/molecules/Table/index.test.js b/src/components/molecules/Table/index.test.js
index b215425f..dc8d5032 100644
--- a/src/components/molecules/Table/index.test.js
+++ b/src/components/molecules/Table/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Table, * as styles from '.'
+import Table from '.'
 
 const wrap = (props = {}) => shallow(<Table {...props} />)
 
@@ -29,19 +28,3 @@ it('renders foot when passed in', () => {
   const wrapper = wrap({ foot: 'test foot' })
   expect(wrapper.contains('test foot')).toBe(true)
 })
-
-describe('styles', () => {
-  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 23b75528..001ee0b8 100644
--- a/src/components/organisms/Footer/index.js
+++ b/src/components/organisms/Footer/index.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import styled from 'styled-components'
-import { getColor } from 'arc-theme'
+import { reverseColor } from 'arc-theme'
 
 import { Paragraph, Link, Icon } from 'components'
 
 const Wrapper = styled.div`
-  background-color: ${({ theme }) => getColor('grayscale[1]', true, theme)};
+  background-color: ${reverseColor('grayscale', 1)};
   padding: 2rem;
 `
 
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 c69a05c4..1c57ceb4 100644
--- a/src/components/organisms/Organism/index.js
+++ b/src/components/organisms/Organism/index.js
@@ -1,13 +1,10 @@
 import React, { PropTypes } from 'react'
 import styled from 'styled-components'
-import { get, getColor } from 'arc-theme'
-
-export const fontFamily = ({ theme }) => get('fonts.primary', theme)
-export const color = ({ theme, reverse }) => getColor('grayscale[0]', reverse, theme)
+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 }) => {
diff --git a/src/components/organisms/Organism/index.test.js b/src/components/organisms/Organism/index.test.js
index 80f22603..b28759b3 100644
--- a/src/components/organisms/Organism/index.test.js
+++ b/src/components/organisms/Organism/index.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import theme from 'arc-theme'
-import Organism, * as styles from '.'
+import Organism from '.'
 
 const wrap = (props = {}) => shallow(<Organism {...props} />)
 
@@ -14,14 +13,3 @@ it('renders props when passed in', () => {
   const wrapper = wrap({ id: 'foo' })
   expect(wrapper.find({ id: 'foo' })).toHaveLength(1)
 })
-
-describe('styles', () => {
-  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/yarn.lock b/yarn.lock
index 8cffe17b..7cf43c7d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -101,9 +101,9 @@ aproba@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.0.4.tgz#2713680775e7614c8ba186c065d4e2e52d1072c0"
 
-arc-theme@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/arc-theme/-/arc-theme-0.1.1.tgz#0c751c76db06ded31c0176cfb7c6f150d1ad1357"
+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"