diff --git a/storybook/shared/box.js b/storybook/shared/box.js
new file mode 100644
index 000000000..01da5f4e6
--- /dev/null
+++ b/storybook/shared/box.js
@@ -0,0 +1,71 @@
+// @flow
+import * as React from 'react'
+import { Grid, Col } from 'gymnast'
+import type { Spacing } from '../../src/types'
+import {
+  axonBlack,
+  axonGold,
+  nomuraGray,
+  bolt,
+  white,
+} from '../../src/dev/colors'
+
+const typeMap = {
+  A: 1,
+  B: 2,
+  C: 3,
+  D: 4,
+  E: 5,
+}
+
+export const colors = {
+  colors1: {
+    color: axonGold,
+    backgroundColor: axonBlack,
+  },
+  colors2: {
+    color: bolt,
+    backgroundColor: nomuraGray,
+  },
+  colors3: {
+    color: axonBlack,
+    backgroundColor: axonGold,
+  },
+  colors4: {
+    color: nomuraGray,
+    backgroundColor: bolt,
+  },
+  colors5: {
+    color: axonBlack,
+    backgroundColor: white,
+  },
+}
+
+type BoxProps = {
+  type: $Keys<typeof typeMap>,
+  style?: Object,
+  children?: React.Node,
+  value?: string,
+  margin?: Spacing,
+}
+
+export function Box({
+  children,
+  style = {},
+  type,
+  value = type,
+  ...props
+}: BoxProps) {
+  return (
+    <Col {...props}>
+      <Grid
+        padding={['L', 0]}
+        align="center"
+        justify="center"
+        style={{ ...style, ...colors[`colors${String(typeMap[type])}`] }}
+      >
+        {children || value}
+      </Grid>
+    </Col>
+  )
+}
diff --git a/storybook/shared/components.js b/storybook/shared/components.js
deleted file mode 100644
index ef4c7b74c..000000000
--- a/storybook/shared/components.js
+++ /dev/null
@@ -1,112 +0,0 @@
-// @flow
-import * as React from 'react'
-import {
-  Col as GymnastCol,
-  Grid as GymnastGrid,
-  Layout as GymnastLayout,
-  Root,
-} from 'gymnast'
-import type { Spacing, Height } from '../../src/types'
-import {
-  axonBlack,
-  axonGold,
-  nomuraGray,
-  bolt,
-  white,
-} from '../../src/dev/colors'
-
-const typeMap = {
-  A: 1,
-  B: 2,
-  C: 3,
-  D: 4,
-  E: 5,
-}
-
-const colors = {
-  colors1: {
-    color: axonGold,
-    backgroundColor: axonBlack,
-  },
-  colors2: {
-    color: bolt,
-    backgroundColor: nomuraGray,
-  },
-  colors3: {
-    color: axonBlack,
-    backgroundColor: axonGold,
-  },
-  colors4: {
-    color: nomuraGray,
-    backgroundColor: bolt,
-  },
-  colors5: {
-    color: axonBlack,
-    backgroundColor: white,
-  },
-}
-
-type Dev = 1 | 2 | 3 | 4 | 5 | void
-type BoxProps = {
-  type: $Keys<typeof typeMap>,
-  style?: Object,
-  children?: React.Node,
-  value?: string,
-  margin?: Spacing,
-}
-type Props = {
-  dev?: Dev,
-  style?: Object,
-}
-
-function withDev(Component: *) {
-  return function WrappedDevMode({ dev, style = {}, ...props }: Props) {
-    return (
-      <Component
-        {...props}
-        style={{ ...style, ...colors[`colors${String(dev)}`] }}
-      />
-    )
-  }
-}
-
-export const Col = withDev(GymnastCol)
-export const Grid = withDev(GymnastGrid)
-export const Layout = withDev(GymnastLayout)
-export function Box({
-  children,
-  margin,
-  style,
-  type,
-  value = type,
-  ...props
-}: BoxProps) {
-  return (
-    <Grid
-      margin={typeof margin === 'undefined' ? [0, 'L/2', 'L'] : margin}
-      {...props}
-    >
-      <Grid
-        dev={typeMap[type]}
-        padding={['L', 0]}
-        align="center"
-        justify="center"
-        style={style}
-      >
-        {children || value}
-      </Grid>
-    </Grid>
-  )
-}
-export function RootLayout({
-  height = 'parent',
-  ...props
-}: {
-  height?: Height,
-}) {
-  return (
-    <Layout height={height}>
-      <Root {...props} />
-    </Layout>
-  )
-}
diff --git a/storybook/shared/index.js b/storybook/shared/index.js
index 9d4fdd0eb..b4282d1da 100644
--- a/storybook/shared/index.js
+++ b/storybook/shared/index.js
@@ -3,5 +3,5 @@ import loremIpsumTxt from './loremIpsum.txt'
 
 export { default as getMarginSelect } from './margin'
 export { default as getPositionSelect } from './position'
-export * from './components'
+export * from './box'
 export const loremIpsum = loremIpsumTxt
diff --git a/storybook/stories/components/card/base.js b/storybook/stories/components/card/base.js
index 4cfd8dcfc..59a592df7 100644
--- a/storybook/stories/components/card/base.js
+++ b/storybook/stories/components/card/base.js
@@ -1,66 +1,69 @@
 // @flow
 import * as React from 'react'
-import { Grid, Col, RootLayout } from '../../../shared'
+import { Root, Layout, Grid, Col } from 'gymnast'
+import { colors } from '../../../shared'
 
 export default () => (
-  <RootLayout>
-    <Grid>
-      <Col>
-        <h1>Consistent Padding</h1>
-      </Col>
+  <Layout height="parent">
+    <Root>
+      <Grid>
+        <Col>
+          <h1>Consistent Padding</h1>
+        </Col>
 
-      <Grid size={3} margin="0 L/2">
-        <Grid dev={2} padding="L L/2 0" margin="0 L/2">
-          <Col dev={4}>All around padding</Col>
+        <Grid size={3} margin="0 L/2">
+          <Grid style={colors.colors2} padding="L L/2 0" margin="0 L/2">
+            <Col style={colors.colors4}>All around padding</Col>
+          </Grid>
         </Grid>
-      </Grid>
-      <Grid size={3} margin="0 L/2">
-        <Grid>
-          <Grid dev={2}>Full Bleed</Grid>
+        <Grid size={3} margin="0 L/2">
+          <Grid>
+            <Grid style={colors.colors2}>Full Bleed</Grid>
+          </Grid>
         </Grid>
-      </Grid>
-
-      <Grid margin="L L/2">
-        <h1>Mixed Padding</h1>
-      </Grid>
 
-      <Col size={6}>
-        <Grid size={8} dev={2} padding="L L/2 0">
-          <Col>Padding</Col>
+        <Grid margin="L L/2">
+          <h1>Mixed Padding</h1>
         </Grid>
-        <Grid size={4} dev={4}>
-          <Grid>No padding</Grid>
-        </Grid>
-      </Col>
 
-      <Col size={6}>
-        <Grid size={4} dev={4}>
-          <Grid>No padding</Grid>
-        </Grid>
-        <Grid size={4} dev={2} padding="L L/2 0">
-          <Col>Padding</Col>
-        </Grid>
-        <Grid size={4} dev={4}>
-          <Grid>No padding</Grid>
-        </Grid>
-      </Col>
+        <Col size={6}>
+          <Grid size={8} style={colors.colors2} padding="L L/2 0">
+            <Col>Padding</Col>
+          </Grid>
+          <Grid size={4} style={colors.colors4}>
+            <Grid>No padding</Grid>
+          </Grid>
+        </Col>
 
-      <Col size={6}>
-        <Grid size={4} dev={4}>
-          <Grid>No padding</Grid>
-        </Grid>
-        <Grid size={8} dev={2} padding="L L/2 0">
-          <Col>Padding</Col>
-        </Grid>
-      </Col>
-      <Col size={6}>
-        <Grid dev={2} padding="L L/2 0">
-          <Col>Padding</Col>
-        </Grid>
-        <Grid dev={4}>
-          <Grid>No padding</Grid>
-        </Grid>
-      </Col>
-    </Grid>
-  </RootLayout>
+        <Col size={6}>
+          <Grid size={4} style={colors.colors4}>
+            <Grid>No padding</Grid>
+          </Grid>
+          <Grid size={4} style={colors.colors2} padding="L L/2 0">
+            <Col>Padding</Col>
+          </Grid>
+          <Grid size={4} style={colors.colors4}>
+            <Grid>No padding</Grid>
+          </Grid>
+        </Col>
+
+        <Col size={6}>
+          <Grid size={4} style={colors.colors4}>
+            <Grid>No padding</Grid>
+          </Grid>
+          <Grid size={8} style={colors.colors2} padding="L L/2 0">
+            <Col>Padding</Col>
+          </Grid>
+        </Col>
+        <Col size={6}>
+          <Grid style={colors.colors2} padding="L L/2 0">
+            <Col>Padding</Col>
+          </Grid>
+          <Grid style={colors.colors4}>
+            <Grid>No padding</Grid>
+          </Grid>
+        </Col>
+      </Grid>
+    </Root>
+  </Layout>
 )
diff --git a/storybook/stories/components/card/composite.js b/storybook/stories/components/card/composite.js
index 6d411c2e3..34beb09f8 100644
--- a/storybook/stories/components/card/composite.js
+++ b/storybook/stories/components/card/composite.js
@@ -1,118 +1,121 @@
 // @flow
 import * as React from 'react'
-import { RootLayout, Box, Grid, Col } from '../../../shared'
+import { Root, Layout, Grid, Col } from 'gymnast'
+import { Box, colors } from '../../../shared'
 
 export default () => (
-  <RootLayout>
-    <Grid>
-      <Col>
-        <h1>Composite Card</h1>
-      </Col>
+  <Layout height="parent">
+    <Root>
+      <Grid>
+        <Col>
+          <h1>Composite Card</h1>
+        </Col>
 
-      <Col>
-        <Grid dev={2}>
-          <Grid padding="L 0 0 L" margin="0 L/2 L 0" dev={1}>
-            <h2>Card Title</h2>
-          </Grid>
-
-          <Grid size={7} margin="0 L/2" paddingTop="L">
-            <Col>
-              <h2>Section 1</h2>
-            </Col>
-            <Grid>
-              <Box size={4} type="D">
-                Box 1
-              </Box>
-              <Box size={4} type="D">
-                Box 2
-              </Box>
-              <Box size={4} type="D">
-                Box 3
-              </Box>
-              <Box size={4} type="D">
-                Box 4
-              </Box>
-              <Box size={4} type="D">
-                Box 5
-              </Box>
-              <Box size={4} type="D">
-                Box 6
-              </Box>
-            </Grid>
-            <Col>
-              <h2>Section 2</h2>
-            </Col>
-            <Grid>
-              <Box size={6} type="D">
-                Box 1
-              </Box>
-              <Box size={6} type="D">
-                Box 2
-              </Box>
-              <Box type="D">Box 3</Box>
+        <Col>
+          <Grid style={colors.colors2}>
+            <Grid padding="L 0 0 L" margin="0 L/2 L 0" style={colors.colors1}>
+              <h2>Card Title</h2>
             </Grid>
-          </Grid>
-          <Grid size={5} dev={4} padding="L" align="top">
-            <Grid marginBottom="L">
-              <h3>Subtitle here</h3>
+
+            <Grid size={7} margin="0 L/2" paddingTop="L">
+              <Col>
+                <h2>Section 1</h2>
+              </Col>
+              <Grid>
+                <Box size={4} type="D">
+                  Box 1
+                </Box>
+                <Box size={4} type="D">
+                  Box 2
+                </Box>
+                <Box size={4} type="D">
+                  Box 3
+                </Box>
+                <Box size={4} type="D">
+                  Box 4
+                </Box>
+                <Box size={4} type="D">
+                  Box 5
+                </Box>
+                <Box size={4} type="D">
+                  Box 6
+                </Box>
+              </Grid>
+              <Col>
+                <h2>Section 2</h2>
+              </Col>
+              <Grid>
+                <Box size={6} type="D">
+                  Box 1
+                </Box>
+                <Box size={6} type="D">
+                  Box 2
+                </Box>
+                <Box type="D">Box 3</Box>
+              </Grid>
             </Grid>
-            <Grid>
-              <Grid dev={2}>
-                <Grid dev={1} padding="L L/2 0">
-                  <Col size={6}>
-                    <h3>Title</h3>
-                  </Col>
-                  <Col size={6} justify="right">
-                    test
-                  </Col>
-                </Grid>
-                <Grid padding="L L/2 0">
-                  <Col size={4}>
-                    <Grid dev={4} justify="center">
-                      Box 1
-                    </Grid>
-                  </Col>
-                  <Col size={4}>
-                    <Grid dev={4} justify="center">
-                      Box 2
-                    </Grid>
-                  </Col>
-                  <Col size={4}>
-                    <Grid dev={4} justify="center">
-                      Box 3
-                    </Grid>
-                  </Col>
-                  <Col size={4}>
-                    <Grid dev={4} justify="center">
-                      Box 4
-                    </Grid>
-                  </Col>
-                  <Col size={4}>
-                    <Grid dev={4} justify="center">
-                      Box 5
-                    </Grid>
-                  </Col>
-                  <Col size={4}>
-                    <Grid dev={4} justify="center">
-                      Box 6
-                    </Grid>
-                  </Col>
-                  <Col>
-                    <Grid dev={4} justify="center">
-                      Box 7
-                    </Grid>
-                  </Col>
-                  <Col>
-                    <Grid dev={4} justify="center">
-                      Box 8
-                    </Grid>
-                  </Col>
+            <Grid size={5} style={colors.colors4} padding="L" align="top">
+              <Grid marginBottom="L">
+                <h3>Subtitle here</h3>
+              </Grid>
+              <Grid>
+                <Grid style={colors.colors2}>
+                  <Grid style={colors.colors1} padding="L L/2 0">
+                    <Col size={6}>
+                      <h3>Title</h3>
+                    </Col>
+                    <Col size={6} justify="right">
+                      test
+                    </Col>
+                  </Grid>
+                  <Grid padding="L L/2 0">
+                    <Col size={4}>
+                      <Grid style={colors.colors4} justify="center">
+                        Box 1
+                      </Grid>
+                    </Col>
+                    <Col size={4}>
+                      <Grid style={colors.colors4} justify="center">
+                        Box 2
+                      </Grid>
+                    </Col>
+                    <Col size={4}>
+                      <Grid style={colors.colors4} justify="center">
+                        Box 3
+                      </Grid>
+                    </Col>
+                    <Col size={4}>
+                      <Grid style={colors.colors4} justify="center">
+                        Box 4
+                      </Grid>
+                    </Col>
+                    <Col size={4}>
+                      <Grid style={colors.colors4} justify="center">
+                        Box 5
+                      </Grid>
+                    </Col>
+                    <Col size={4}>
+                      <Grid style={colors.colors4} justify="center">
+                        Box 6
+                      </Grid>
+                    </Col>
+                    <Col>
+                      <Grid style={colors.colors4} justify="center">
+                        Box 7
+                      </Grid>
+                    </Col>
+                    <Col>
+                      <Grid style={colors.colors4} justify="center">
+                        Box 8
+                      </Grid>
+                    </Col>
+                  </Grid>
                 </Grid>
               </Grid>
             </Grid>
           </Grid>
-        </Grid>
-      </Col>
-    </Grid>
-  </RootLayout>
+        </Col>
+      </Grid>
+    </Root>
+  </Layout>
 )
diff --git a/storybook/stories/components/card/filter.js b/storybook/stories/components/card/filter.js
index 4c597816a..579843816 100644
--- a/storybook/stories/components/card/filter.js
+++ b/storybook/stories/components/card/filter.js
@@ -1,12 +1,13 @@
 // @flow
 import * as React from 'react'
-import { RootLayout, loremIpsum, Grid, Col } from '../../../shared'
+import { Root, Layout, Grid, Col } from 'gymnast'
+import { loremIpsum, colors } from '../../../shared'
 
 export default () => {
   function ListItem({ index }: { index: number }) {
     return (
       <Grid
-        dev={index % 2 ? 1 : 4}
+        style={index % 2 ? colors.colors1 : colors.colors4}
         paddingBottom="L/2"
         paddingTop={index === 0 ? 0 : 'L/2'}
       >
@@ -24,51 +25,53 @@ export default () => {
   }
 
   return (
-    <RootLayout>
-      <Grid>
-        <Col>
-          <h1>Filter List</h1>
-        </Col>
-        <Grid justify="center">
-          <Col size={6}>
-            <Grid marginBottom="L">
-              <Grid dev={1} padding="L L 0">
-                <Grid margin="0 L/2 L 0" size={9}>
-                  <h2>Title</h2>
-                </Grid>
-                <Grid size={3} justify="right">
-                  X
+    <Layout height="parent">
+      <Root>
+        <Grid>
+          <Col>
+            <h1>Filter List</h1>
+          </Col>
+          <Grid justify="center">
+            <Col size={6}>
+              <Grid marginBottom="L">
+                <Grid style={colors.colors1} padding="L L 0">
+                  <Grid margin="0 L/2 L 0" size={9}>
+                    <h2>Title</h2>
+                  </Grid>
+                  <Grid size={3} justify="right">
+                    X
+                  </Grid>
                 </Grid>
-              </Grid>
-              <Grid dev={4} paddingTop="L" margin="0 L/2">
-                <Grid margin="0 L/2" paddingBottom="L/2">
-                  Filter by...
+                <Grid style={colors.colors4} paddingTop="L" margin="0 L/2">
+                  <Grid margin="0 L/2" paddingBottom="L/2">
+                    Filter by...
+                  </Grid>
+                  <Col size={6}>
+                    <input type="text" />
+                  </Col>
                 </Grid>
-                <Col size={6}>
-                  <input type="text" />
-                </Col>
-              </Grid>
-              <Grid dev={2} paddingTop="L" margin="0 L">
-                <ListItem index={0} />
-                <ListItem index={1} />
-                <ListItem index={2} />
-                <ListItem index={3} />
-                <ListItem index={4} />
+                <Grid style={colors.colors2} paddingTop="L" margin="0 L">
+                  <ListItem index={0} />
+                  <ListItem index={1} />
+                  <ListItem index={2} />
+                  <ListItem index={3} />
+                  <ListItem index={4} />
 
-                <Grid>
-                  <p>{loremIpsum.substr(0, 100)}</p>
-                </Grid>
-                <Grid size={4} margin="0 L/2 L 0">
-                  <button>Cancel</button>
-                </Grid>
-                <Grid size={4} margin="0 0 L L/2">
-                  <button>Filter</button>
+                  <Grid>
+                    <p>{loremIpsum.substr(0, 100)}</p>
+                  </Grid>
+                  <Grid size={4} margin="0 L/2 L 0">
+                    <button>Cancel</button>
+                  </Grid>
+                  <Grid size={4} margin="0 0 L L/2">
+                    <button>Filter</button>
+                  </Grid>
                 </Grid>
               </Grid>
-            </Grid>
-          </Col>
+            </Col>
+          </Grid>
         </Grid>
-      </Grid>
-    </RootLayout>
+      </Root>
+    </Layout>
   )
 }
diff --git a/storybook/stories/components/card/profile.js b/storybook/stories/components/card/profile.js
index 8979fbda8..59d27a68e 100644
--- a/storybook/stories/components/card/profile.js
+++ b/storybook/stories/components/card/profile.js
@@ -1,75 +1,78 @@
 // @flow
 import * as React from 'react'
-import { RootLayout, Grid, Col } from '../../../shared'
+import { Root, Layout, Grid, Col } from 'gymnast'
+import { colors } from '../../../shared'
 
 export default () => (
-  <RootLayout>
-    <Grid>
-      <Col>
-        <h1>User Profile</h1>
-      </Col>
-
+  <Layout height="parent">
+    <Root>
       <Grid>
-        <Col size={4}>
-          <Grid dev={2}>Full Bleed</Grid>
+        <Col>
+          <h1>User Profile</h1>
         </Col>
 
-        <Col size={8}>
-          <Grid marginBottom="L">
-            <Grid dev={2} padding="L L 0">
-              <Col marginLeft={0} size={9}>
-                <h2>Title</h2>
-              </Col>
-              <Col marginLeft={0} size={3}>
-                Note
-              </Col>
+        <Grid>
+          <Col size={4}>
+            <Grid style={colors.colors2}>Full Bleed</Grid>
+          </Col>
+
+          <Col size={8}>
+            <Grid marginBottom="L">
+              <Grid style={colors.colors2} padding="L L 0">
+                <Col marginLeft={0} size={9}>
+                  <h2>Title</h2>
+                </Col>
+                <Col marginLeft={0} size={3}>
+                  Note
+                </Col>
 
-              <Col marginLeft={0} size={2}>
+                <Col marginLeft={0} size={2}>
+                  Text1
+                </Col>
+                <Col marginLeft={0} size={2}>
+                  Text2
+                </Col>
+                <Col marginLeft={0} size={2}>
+                  Text3
+                </Col>
+                <Col marginLeft={0} size={3}>
+                  Text4
+                </Col>
+                <Col marginLeft={0} size={3}>
+                  Text5
+                </Col>
+
+                <Col marginLeft={0} size={2}>
+                  Text6
+                </Col>
+                <Col marginLeft={0} size={2}>
+                  Text7
+                </Col>
+                <Col marginLeft={0} size={2}>
+                  Text8
+                </Col>
+                <Col marginLeft={0} size={3}>
+                  Text9
+                </Col>
+              </Grid>
+            </Grid>
+            <Grid style={colors.colors2} padding="L L 0">
+              <Col marginLeft={0} size={6}>
                 Text1
               </Col>
-              <Col marginLeft={0} size={2}>
+              <Col marginLeft={0} size={6}>
                 Text2
               </Col>
-              <Col marginLeft={0} size={2}>
+              <Col marginLeft={0} size={6}>
                 Text3
               </Col>
-              <Col marginLeft={0} size={3}>
+              <Col marginLeft={0} size={6}>
                 Text4
               </Col>
-              <Col marginLeft={0} size={3}>
-                Text5
-              </Col>
-
-              <Col marginLeft={0} size={2}>
-                Text6
-              </Col>
-              <Col marginLeft={0} size={2}>
-                Text7
-              </Col>
-              <Col marginLeft={0} size={2}>
-                Text8
-              </Col>
-              <Col marginLeft={0} size={3}>
-                Text9
-              </Col>
             </Grid>
-          </Grid>
-          <Grid dev={2} padding="L L 0">
-            <Col marginLeft={0} size={6}>
-              Text1
-            </Col>
-            <Col marginLeft={0} size={6}>
-              Text2
-            </Col>
-            <Col marginLeft={0} size={6}>
-              Text3
-            </Col>
-            <Col marginLeft={0} size={6}>
-              Text4
-            </Col>
-          </Grid>
-        </Col>
+          </Col>
+        </Grid>
       </Grid>
-    </Grid>
-  </RootLayout>
+    </Root>
+  </Layout>
 )
diff --git a/storybook/stories/components/header/app.js b/storybook/stories/components/header/app.js
index e7a749c3b..004062eb2 100644
--- a/storybook/stories/components/header/app.js
+++ b/storybook/stories/components/header/app.js
@@ -1,31 +1,31 @@
 // @flow
 import * as React from 'react'
-import { Offset, Root } from 'gymnast'
-import { Grid, Col, Layout } from '../../../shared'
+import { Offset, Root, Grid, Col, Layout } from 'gymnast'
+import { colors } from '../../../shared'
 import styles from '../../../shared/stories.css'
 
 export default () => (
-  <Layout fixed="top" dev={1}>
+  <Layout fixed="top" style={colors.colors1}>
     <Root align="center">
       <Col align="center" size="auto" marginBottom={0}>
-        <Col marginLeft={0} marginBottom={0} size="auto" dev={2}>
+        <Col marginLeft={0} marginBottom={0} size="auto" style={colors.colors2}>
           Lorem
         </Col>
-        <Col size="auto" marginLeft={0} marginBottom={0} dev={4}>
+        <Col size="auto" marginLeft={0} marginBottom={0} style={colors.colors4}>
           ipsum
         </Col>
-        <Col size="auto" marginLeft={0} marginBottom={0} dev={2}>
+        <Col size="auto" marginLeft={0} marginBottom={0} style={colors.colors2}>
           dolor
         </Col>
-        <Col size="auto" marginLeft={0} marginBottom={0} dev={4}>
+        <Col size="auto" marginLeft={0} marginBottom={0} style={colors.colors4}>
           sit amet
         </Col>
-        <Col size="auto" marginLeft={0} marginBottom={0} dev={2}>
+        <Col size="auto" marginLeft={0} marginBottom={0} style={colors.colors2}>
           consectetur
         </Col>
       </Col>
       <Offset size={1} />
-      <Col marginBottom={0} justify="right" size={3} dev={4}>
+      <Col marginBottom={0} justify="right" size={3} style={colors.colors4}>
         <input placeholder="Search for anything..." />
       </Col>
       <Col align="center" marginBottom={0} size="fit">
diff --git a/storybook/stories/components/header/basic.js b/storybook/stories/components/header/basic.js
index ff029c094..a7d945ed2 100644
--- a/storybook/stories/components/header/basic.js
+++ b/storybook/stories/components/header/basic.js
@@ -1,30 +1,33 @@
 // @flow
 import * as React from 'react'
 import { times } from 'lodash'
+import { Root, Layout, Grid } from 'gymnast'
 import { number } from '@storybook/addon-knobs'
-import { Box, Grid, RootLayout } from '../../../shared'
+import { Box } from '../../../shared'
 
 export default () => {
   const items = number('Items', 6, { range: true, min: 1, max: 6 })
 
   return (
-    <RootLayout>
-      <Grid>
-        <Box size={2} type="A" value="Go Back" />
-        <Box size={6} type="A">
-          <h2>Page Title</h2>
-        </Box>
-        <Box size={2} type="C" value="Action 1" />
-        <Box size={2} type="D" value="Action 2" />
-      </Grid>
-      <Grid size={6}>
-        {times(items, i => (
-          <Box size={2} type="A" key={i} value={`${i + 1}`} />
-        ))}
-      </Grid>
-      <Grid size={6}>
-        <Box type="A" />
-      </Grid>
-    </RootLayout>
+    <Layout height="parent">
+      <Root>
+        <Grid>
+          <Box size={2} type="A" value="Go Back" />
+          <Box size={6} type="A">
+            <h2>Page Title</h2>
+          </Box>
+          <Box size={2} type="C" value="Action 1" />
+          <Box size={2} type="D" value="Action 2" />
+        </Grid>
+        <Grid size={6}>
+          {times(items, i => (
+            <Box size={2} type="A" key={i} value={`${i + 1}`} />
+          ))}
+        </Grid>
+        <Grid size={6}>
+          <Box type="A" />
+        </Grid>
+      </Root>
+    </Layout>
   )
 }
diff --git a/storybook/stories/components/pagination/pagination.js b/storybook/stories/components/pagination/pagination.js
index d6e639dc0..f0a8229da 100644
--- a/storybook/stories/components/pagination/pagination.js
+++ b/storybook/stories/components/pagination/pagination.js
@@ -1,31 +1,34 @@
 // @flow
 import * as React from 'react'
 import { number } from '@storybook/addon-knobs'
-import { RootLayout, Box, Grid } from '../../../shared'
+import { Root, Layout, Grid } from 'gymnast'
+import { Box } from '../../../shared'
 
 export default () => {
   const size = number('Size', 12, { range: true, min: 7, max: 12 })
 
   return (
-    <RootLayout>
-      <Grid size={size} align="top">
-        <Box size={1} type="B" value="<" />
-        <Box size={1} type="B" value="1" />
-        <Box size={1} type="A">
-          ...
-        </Box>
-        <Box size={1} type="B" value="5" />
-        <Box size={1} type="B" value="6" />
-        <Box size={1} type="B" value="7" />
-        <Box size={1} type="B" value="8" />
-        <Box size={1} type="B" value="9" />
-        <Box size={1} type="B" value="10" />
-        <Box size={1} type="A">
-          ...
-        </Box>
-        <Box size={1} type="B" value="20" />
-        <Box size={1} type="B" value=">" />
-      </Grid>
-    </RootLayout>
+    <Layout height="parent">
+      <Root>
+        <Grid size={size} align="top">
+          <Box size={1} type="B" value="<" />
+          <Box size={1} type="B" value="1" />
+          <Box size={1} type="A">
+            ...
+          </Box>
+          <Box size={1} type="B" value="5" />
+          <Box size={1} type="B" value="6" />
+          <Box size={1} type="B" value="7" />
+          <Box size={1} type="B" value="8" />
+          <Box size={1} type="B" value="9" />
+          <Box size={1} type="B" value="10" />
+          <Box size={1} type="A">
+            ...
+          </Box>
+          <Box size={1} type="B" value="20" />
+          <Box size={1} type="B" value=">" />
+        </Grid>
+      </Root>
+    </Layout>
   )
 }
diff --git a/storybook/stories/components/search/filters.js b/storybook/stories/components/search/filters.js
index f04ac248d..e8586a97a 100644
--- a/storybook/stories/components/search/filters.js
+++ b/storybook/stories/components/search/filters.js
@@ -1,25 +1,26 @@
 // @flow
 import * as React from 'react'
-import { Grid, Col } from '../../../shared'
+import { Col, Grid } from 'gymnast'
+import { colors } from '../../../shared'
 import type { Size } from '../../../../src/types'
 
 export default function SearchFilters(props: { size?: Size }) {
   return (
-    <Col {...props} dev={4} align="top">
+    <Col {...props} style={colors.colors4} align="top">
       <Col marginLeft={0}>Filter by</Col>
-      <Grid margin="0 0 L 0" dev={2}>
+      <Grid margin="0 0 L 0" style={colors.colors2}>
         <Grid size="auto">Type 1</Grid>
         <Grid size="fit">+</Grid>
       </Grid>
-      <Grid margin="0 0 L 0" dev={1}>
+      <Grid margin="0 0 L 0" style={colors.colors1}>
         <Grid size="auto">Type 2</Grid>
         <Grid size="fit">+</Grid>
       </Grid>
-      <Grid margin="0 0 L 0" dev={2}>
+      <Grid margin="0 0 L 0" style={colors.colors2}>
         <Grid size="auto">Type 3</Grid>
         <Grid size="fit">+</Grid>
       </Grid>
-      <Grid margin="0 0 L 0" dev={1}>
+      <Grid margin="0 0 L 0" style={colors.colors1}>
         <Grid size="auto">Type 4</Grid>
         <Grid size="fit">+</Grid>
       </Grid>
diff --git a/storybook/stories/components/search/nav.js b/storybook/stories/components/search/nav.js
index ced2f514c..8b2a639c0 100644
--- a/storybook/stories/components/search/nav.js
+++ b/storybook/stories/components/search/nav.js
@@ -1,11 +1,11 @@
 // @flow
 import * as React from 'react'
-import { Root } from 'gymnast'
-import { Grid, Col, Layout } from '../../../shared'
+import { Root, Grid, Col, Layout } from 'gymnast'
+import { colors } from '../../../shared'
 
 export default function SearchNav() {
   return (
-    <Layout dev={4} margin="L 0 0 0">
+    <Layout style={colors.colors4} margin="L 0 0 0">
       <Root>
         <Grid>
           <Col size={7}>
@@ -17,8 +17,7 @@ export default function SearchNav() {
                 marginLeft={0}
                 marginBottom={0}
                 size="auto"
-                style={{ whiteSpace: 'nowrap' }}
-                dev={1}
+                style={{ whiteSpace: 'nowrap', ...colors.colors1 }}
               >
                 Lorem
               </Col>
@@ -26,31 +25,28 @@ export default function SearchNav() {
                 size="auto"
                 marginLeft={0}
                 marginBottom={0}
-                dev={2}
-                style={{ whiteSpace: 'nowrap' }}
+                style={{ whiteSpace: 'nowrap', ...colors.colors2 }}
               >
                 ipsum
               </Col>
               <Col
-                style={{ whiteSpace: 'nowrap' }}
+                style={{ whiteSpace: 'nowrap', ...colors.colors1 }}
                 size="auto"
                 marginBottom={0}
                 marginLeft={0}
-                dev={1}
               >
                 dolor
               </Col>
               <Col
                 size="auto"
-                style={{ whiteSpace: 'nowrap' }}
+                style={{ whiteSpace: 'nowrap', ...colors.colors2 }}
                 marginBottom={0}
                 marginLeft={0}
-                dev={2}
               >
                 sit amet
               </Col>
             </Grid>
-            <Grid size="auto" justify="right" dev={1}>
+            <Grid size="auto" justify="right" style={colors.colors1}>
               <Grid size="fit">First View &nbsp;| </Grid>
               <Grid size="fit">&nbsp; Second View</Grid>
             </Grid>
diff --git a/storybook/stories/components/search/results.js b/storybook/stories/components/search/results.js
index 4d92dd807..30158a3ed 100644
--- a/storybook/stories/components/search/results.js
+++ b/storybook/stories/components/search/results.js
@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react'
-import { type Size } from 'gymnast'
+import { type Size, Grid, Col } from 'gymnast'
 import { times } from 'lodash'
-import { Grid, Col } from '../../../shared'
+import { colors } from '../../../shared'
 import styles from '../../../shared/stories.css'
 
 export default function SearchResults({
@@ -15,20 +15,20 @@ export default function SearchResults({
   size?: Size,
 } = {}) {
   return (
-    <Grid size={size} dev={5} align="top">
+    <Grid size={size} style={colors.colors5} align="top">
       <Grid>
         <Col size={4}>
           <input placeholder="Sort by..." />
         </Col>
         <Col size={5} />
         <Col size={3} align="center" justify="right">
-          <Grid dev={4} size={2}>
+          <Grid style={colors.colors4} size={2}>
             <Grid justify="center">&lt;</Grid>
           </Grid>
           <Grid size={7}>
             <Grid justify="center">Page 1 of 12</Grid>
           </Grid>
-          <Grid dev={4} size={2}>
+          <Grid style={colors.colors4} size={2}>
             <Grid justify="center">&gt;</Grid>
           </Grid>
         </Col>
@@ -39,10 +39,10 @@ export default function SearchResults({
            * Explicitly setting height to work around cross browser font height differences
            */}
           <Col size={5}>
-            <Grid marginBottom="L/2" dev={1}>
+            <Grid marginBottom="L/2" style={colors.colors1}>
               Orci tempus venenatis
             </Grid>
-            <Grid marginBottom="L/2" dev={1}>
+            <Grid marginBottom="L/2" style={colors.colors1}>
               1/6/2017 at 14:50 - 1700 Minor Ave
             </Grid>
             <Grid>
@@ -52,10 +52,10 @@ export default function SearchResults({
             </Grid>
           </Col>
           <Col size={4} align="top">
-            <Grid marginBottom="L/2" dev={4}>
+            <Grid marginBottom="L/2" style={colors.colors4}>
               status text ipsum
             </Grid>
-            <Grid dev={2}>status sub lorem</Grid>
+            <Grid style={colors.colors2}>status sub lorem</Grid>
           </Col>
           <Col size="auto">
             <Grid justify="center" align="center" className={styles.image}>
diff --git a/storybook/stories/configProvider/columns.js b/storybook/stories/configProvider/columns.js
index 4141150e9..4f69917c1 100644
--- a/storybook/stories/configProvider/columns.js
+++ b/storybook/stories/configProvider/columns.js
@@ -2,8 +2,8 @@
 import * as React from 'react'
 import { times } from 'lodash'
 import { number } from '@storybook/addon-knobs'
-import { ConfigProvider } from 'gymnast'
-import { Grid } from '../../shared'
+import { ConfigProvider, Grid } from 'gymnast'
+import { colors } from '../../shared'
 
 export default function() {
   const columns = number('Columns', 10, { range: true, min: 1, max: 24 })
@@ -14,7 +14,12 @@ export default function() {
       <Grid padding="0 L/2">
         {times(items, key => (
           <Grid key={key} padding="0 L/2 L" size={1}>
-            <Grid dev={1} padding="L/2" align="center" justify="center">
+            <Grid
+              style={colors.colors1}
+              padding="L/2"
+              align="center"
+              justify="center"
+            >
               {key + 1}
             </Grid>
           </Grid>
diff --git a/storybook/stories/configProvider/gutter.js b/storybook/stories/configProvider/gutter.js
index 51d091796..78d615669 100644
--- a/storybook/stories/configProvider/gutter.js
+++ b/storybook/stories/configProvider/gutter.js
@@ -2,8 +2,8 @@
 import * as React from 'react'
 import { times } from 'lodash'
 import { number } from '@storybook/addon-knobs'
-import { ConfigProvider } from 'gymnast'
-import { Grid, Col } from '../../shared'
+import { ConfigProvider, Grid, Col } from 'gymnast'
+import { colors } from '../../shared'
 
 export default function() {
   const gutter = number('Gutter', 2, { range: true, min: 1, max: 24 })
@@ -25,7 +25,7 @@ export default function() {
         {times(6, key => (
           <Col key={key} size={4}>
             <Grid
-              dev={1}
+              style={colors.colors1}
               padding={innerPadding}
               align="center"
               justify="center"
diff --git a/storybook/stories/configProvider/pageWidth.js b/storybook/stories/configProvider/pageWidth.js
index 93a154e28..3ae8e47b5 100644
--- a/storybook/stories/configProvider/pageWidth.js
+++ b/storybook/stories/configProvider/pageWidth.js
@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react'
 import { number } from '@storybook/addon-knobs'
-import { ConfigProvider, Root, Layout } from 'gymnast'
-import { Col } from '../../shared'
+import { ConfigProvider, Col, Root, Layout } from 'gymnast'
+import { colors } from '../../shared'
 
 export default function() {
   const max = number('Max Page Width', 100, { range: true, min: 50, max: 200 })
@@ -19,7 +19,7 @@ export default function() {
     >
       <Layout height="parent">
         <Root>
-          <Col dev={1}>Full Width</Col>
+          <Col style={colors.colors1}>Full Width</Col>
         </Root>
       </Layout>
     </ConfigProvider>
diff --git a/storybook/stories/configProvider/spacingAliases.js b/storybook/stories/configProvider/spacingAliases.js
index 718baae21..2208aa9f7 100644
--- a/storybook/stories/configProvider/spacingAliases.js
+++ b/storybook/stories/configProvider/spacingAliases.js
@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react'
 import { number } from '@storybook/addon-knobs'
-import { ConfigProvider } from 'gymnast'
-import { Grid } from '../../shared'
+import { ConfigProvider, Grid } from 'gymnast'
+import { colors } from '../../shared'
 
 export default function() {
   const base = number('base', 24, { range: true, min: 8, max: 24, step: 8 })
@@ -22,17 +22,17 @@ export default function() {
   return (
     <ConfigProvider spacingAliases={spacingAliases} base={base}>
       <Grid>
-        <Grid dev={1} margin="L" size={6}>
-          <Grid dev={2}>My margins are set using aliases!</Grid>
+        <Grid style={colors.colors1} margin="L" size={6}>
+          <Grid style={colors.colors2}>My margins are set using aliases!</Grid>
         </Grid>
-        <Grid dev={2} padding="L/2,L" size={6}>
-          <Grid dev={1}>My paddings are set using aliases!</Grid>
+        <Grid style={colors.colors2} padding="L/2,L" size={6}>
+          <Grid style={colors.colors1}>My paddings are set using aliases!</Grid>
         </Grid>
-        <Grid dev={2} margin={['M', 'S/2']} size={6}>
-          <Grid dev={1}>My margins are set using aliases!</Grid>
+        <Grid style={colors.colors2} margin={['M', 'S/2']} size={6}>
+          <Grid style={colors.colors1}>My margins are set using aliases!</Grid>
         </Grid>
-        <Grid dev={1} padding={['M', 'S/2']} size={6}>
-          <Grid dev={2}>My paddings are set using aliases!</Grid>
+        <Grid style={colors.colors1} padding={['M', 'S/2']} size={6}>
+          <Grid style={colors.colors2}>My paddings are set using aliases!</Grid>
         </Grid>
       </Grid>
     </ConfigProvider>
diff --git a/storybook/stories/examples/cards.js b/storybook/stories/examples/cards.js
index efc88c6e2..0bc162b2f 100644
--- a/storybook/stories/examples/cards.js
+++ b/storybook/stories/examples/cards.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
-import { Root } from 'gymnast'
-import { Box, Grid, Layout } from '../../shared'
+import { Root, Grid, Layout } from 'gymnast'
+import { Box, colors } from '../../shared'
 import styles from './layout.css'
 
 const SIZE = {
@@ -13,14 +13,14 @@ const SIZE = {
 export default () => (
   <Layout height="parent" className={`${styles.page} ${styles.hasSubheader}`}>
     <Layout fixed="top">
-      <Layout dev={1}>
+      <Layout style={colors.colors1}>
         <Root>
           <Grid padding="L/2">
             <h1>Header</h1>
           </Grid>
         </Root>
       </Layout>
-      <Layout className={styles.subheader} marginTop="L" dev={2}>
+      <Layout className={styles.subheader} marginTop="L" style={colors.colors2}>
         <Root>
           <Box size={2} type="D" />
           <Box size={2} type="D" />
@@ -49,7 +49,7 @@ export default () => (
           </Grid>
         </Root>
       </Layout>
-      <Layout dev={1}>
+      <Layout style={colors.colors1}>
         <Root>
           <Grid padding="L/2">
             <h1>Footer</h1>
diff --git a/storybook/stories/examples/holyGrail.js b/storybook/stories/examples/holyGrail.js
index e1827eed6..2dacc2f65 100644
--- a/storybook/stories/examples/holyGrail.js
+++ b/storybook/stories/examples/holyGrail.js
@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react'
 import { boolean } from '@storybook/addon-knobs'
-import { Root } from 'gymnast'
-import { loremIpsum, Grid, Layout } from '../../shared'
+import { Root, Grid, Layout } from 'gymnast'
+import { loremIpsum, colors } from '../../shared'
 import styles from './layout.css'
 
 export default () => {
@@ -10,7 +10,7 @@ export default () => {
 
   return (
     <Layout height="parent" className={styles.page}>
-      <Layout dev={1} fixed="top">
+      <Layout style={colors.colors1} fixed="top">
         <Root>
           <Grid padding="L/2">
             <h1>Header</h1>
@@ -20,7 +20,7 @@ export default () => {
       <Layout height="auto" className={styles.main}>
         <Root>
           <Grid margin="0 L/2">
-            <Grid size={2} dev={4} paddingTop="L" margin="0 L">
+            <Grid size={2} style={colors.colors4} paddingTop="L" margin="0 L">
               <Grid>
                 <h2>Nav</h2>
               </Grid>
@@ -37,7 +37,7 @@ export default () => {
               </Grid>
               <Grid>{includeText && <p>{loremIpsum}</p>}</Grid>
             </Grid>
-            <Grid size={2} dev={3} paddingTop="L" margin="0 L">
+            <Grid size={2} style={colors.colors3} paddingTop="L" margin="0 L">
               <Grid>
                 <h2>Ads</h2>
               </Grid>
@@ -45,7 +45,7 @@ export default () => {
           </Grid>
         </Root>
       </Layout>
-      <Layout dev={1}>
+      <Layout style={colors.colors1}>
         <Root>
           <Grid padding="L/2">
             <h1>Footer</h1>
diff --git a/storybook/stories/examples/report.js b/storybook/stories/examples/report.js
index 6c0fa544d..4c7456497 100644
--- a/storybook/stories/examples/report.js
+++ b/storybook/stories/examples/report.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
-import { Root } from 'gymnast'
-import { loremIpsum, Grid, Layout, Col } from '../../shared'
+import { Root, Grid, Layout, Col } from 'gymnast'
+import { loremIpsum, colors } from '../../shared'
 import styles from './report.css'
 import { page } from './layout.css'
 
@@ -16,7 +16,12 @@ function P(props) {
 function Li({ index }: { index: number }) {
   return (
     <li>
-      <Grid size="fit" dev={index % 2 ? 5 : 1} padding="L/2 0" justify="center">
+      <Grid
+        size="fit"
+        style={colors[`colors${index % 2 ? 5 : 1}`]}
+        padding="L/2 0"
+        justify="center"
+      >
         Item {index}
       </Grid>
     </li>
@@ -32,7 +37,7 @@ function Card({
 }): React.Element<any> {
   return (
     <Col style={{ minHeight: height }}>
-      <Grid padding="L" dev={5}>
+      <Grid padding="L" style={colors.colors5}>
         {children}
       </Grid>
     </Col>
@@ -43,42 +48,42 @@ export default function() {
   return (
     <Layout height="parent" className={page}>
       <Layout fixed="top">
-        <Layout dev={1}>
+        <Layout style={colors.colors1}>
           <Root>
             <Grid margin="L/2">
               <h1>Header</h1>
             </Grid>
           </Root>
         </Layout>
-        <Layout dev={4}>
+        <Layout style={colors.colors4}>
           <Root>
             <Grid margin="L/2">
               <h2>Subheader</h2>
             </Grid>
             <Grid size={10} margin="0 L/2">
               <Grid marginRight="2XL" size="fit">
-                <Grid paddingTop="L" dev={3}>
+                <Grid paddingTop="L" style={colors.colors3}>
                   Lorem
                 </Grid>
               </Grid>
               <Grid marginRight="2XL" size="fit">
-                <Grid paddingTop="L" dev={3}>
+                <Grid paddingTop="L" style={colors.colors3}>
                   ipsum
                 </Grid>
               </Grid>
               <Grid marginRight="2XL" size="fit">
-                <Grid paddingTop="L" dev={3}>
+                <Grid paddingTop="L" style={colors.colors3}>
                   dolor
                 </Grid>
               </Grid>
               <Grid marginRight="2XL" size="fit">
-                <Grid paddingTop="L" dev={3}>
+                <Grid paddingTop="L" style={colors.colors3}>
                   sit amet, consectetur
                 </Grid>
               </Grid>
             </Grid>
             <Grid margin="0 L/2" size={2}>
-              <Grid paddingTop="L" dev={3}>
+              <Grid paddingTop="L" style={colors.colors3}>
                 sit amet
               </Grid>
             </Grid>
@@ -86,7 +91,7 @@ export default function() {
         </Layout>
       </Layout>
       <Layout height="parent" className={styles.reportMain}>
-        <Layout height="auto" dev={2}>
+        <Layout height="auto" style={colors.colors2}>
           <Root>
             <Grid>
               <Grid size={1} align="top" paddingTop="L" margin="0 L/2">
@@ -124,14 +129,19 @@ export default function() {
                 <P>{loremIpsum.substr(0, 250)}...</P>
               </Grid>
               <Grid size={4} className={styles.clippy} padding="0 L/2">
-                <Grid align="top" dev={1} paddingTop="L" margin="0 L">
+                <Grid
+                  align="top"
+                  style={colors.colors1}
+                  paddingTop="L"
+                  margin="0 L"
+                >
                   <Grid marginBottom="L">Side bar</Grid>
                 </Grid>
               </Grid>
             </Grid>
           </Root>
         </Layout>
-        <Layout dev={1}>
+        <Layout style={colors.colors1}>
           <Root>
             <Grid margin="L/2">
               <h1>Footer</h1>
diff --git a/storybook/stories/examples/search.js b/storybook/stories/examples/search.js
index bd12d78c4..03543240c 100644
--- a/storybook/stories/examples/search.js
+++ b/storybook/stories/examples/search.js
@@ -1,10 +1,10 @@
 // @flow
 
 import * as React from 'react'
-import { Root } from 'gymnast'
+import { Root, Grid, Layout } from 'gymnast'
 import { number } from '@storybook/addon-knobs'
 import styles from './layout.css'
-import { Grid, Layout } from '../../shared'
+import { colors } from '../../shared'
 import Header from '../components/header/app'
 import SearchFilters from '../components/search/filters'
 import SearchNav from '../components/search/nav'
@@ -22,7 +22,7 @@ export default () => {
         style={{ marginTop: 40 }}
       >
         <SearchNav />
-        <Layout height="auto" dev={2}>
+        <Layout height="auto" style={colors.colors2}>
           <Root>
             <Grid margin="L 0 0 0">
               <SearchFilters size={3} />
@@ -30,7 +30,7 @@ export default () => {
             </Grid>
           </Root>
         </Layout>
-        <Layout dev={1}>
+        <Layout style={colors.colors1}>
           <Root>
             <Grid margin="L/2">
               <h1>Footer</h1>
diff --git a/storybook/stories/examples/twoSections.js b/storybook/stories/examples/twoSections.js
index 92d9cfb93..d35b08b44 100644
--- a/storybook/stories/examples/twoSections.js
+++ b/storybook/stories/examples/twoSections.js
@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react'
 import { boolean } from '@storybook/addon-knobs'
-import { Root } from 'gymnast'
-import { loremIpsum, Grid, Layout, Col } from '../../shared'
+import { Root, Grid, Layout, Col } from 'gymnast'
+import { loremIpsum, colors } from '../../shared'
 import styles from './layout.css'
 
 export default () => {
@@ -10,7 +10,7 @@ export default () => {
 
   return (
     <Layout height="parent" className={styles.page}>
-      <Layout dev={1} fixed="top">
+      <Layout style={colors.colors1} fixed="top">
         <Root>
           <Grid margin="L/2">
             <h1>Header</h1>
@@ -18,7 +18,7 @@ export default () => {
         </Root>
       </Layout>
       <Layout height="parent" className={styles.main}>
-        <Layout className={styles.top} dev={4}>
+        <Layout className={styles.top} style={colors.colors4}>
           <Root>
             <Grid justify="center" padding="2XL 0">
               <Grid margin="0 L/2" size={6}>
@@ -40,7 +40,7 @@ export default () => {
             </Grid>
           </Root>
         </Layout>
-        <Layout dev={1}>
+        <Layout style={colors.colors1}>
           <Root>
             <Grid margin="L/2">
               <h1>Footer</h1>
diff --git a/storybook/stories/grid/align.js b/storybook/stories/grid/align.js
index c05a69794..2f25552b7 100644
--- a/storybook/stories/grid/align.js
+++ b/storybook/stories/grid/align.js
@@ -2,7 +2,8 @@
 import * as React from 'react'
 import { times } from 'lodash'
 import { boolean, number } from '@storybook/addon-knobs'
-import { RootLayout, Box, Grid, Col } from '../../shared'
+import { Root, Layout, Grid, Col } from 'gymnast'
+import { Box } from '../../shared'
 
 function ReferenceColumn({ height }: { height: number }) {
   return (
@@ -28,39 +29,45 @@ export default () => {
   })
 
   return (
-    <RootLayout>
-      <Col>
-        <h1>Item Align</h1>
-      </Col>
-      <Grid>
-        <ReferenceColumn height={height} />
-        <Box size="auto" type="A" value="TOP" align="top" />
-        <Box size="auto" type="A" value="CENTER" align="center" />
-        <Box size="auto" type="A" value="BOTTOM" align="bottom" />
-        <Box size="auto" type="A" value="DEFAULT" />
-      </Grid>
-      <Col>
-        <h1>Grid Align</h1>
-      </Col>
-      <Grid>
-        <Grid size={4} align={!stretch ? 'top' : undefined} style={{ height }}>
-          {times(items, i => <Box key={i} type="C" value="TOP" />)}
+    <Layout height="parent">
+      <Root>
+        <Col>
+          <h1>Item Align</h1>
+        </Col>
+        <Grid>
+          <ReferenceColumn height={height} />
+          <Box size="auto" type="A" value="TOP" align="top" />
+          <Box size="auto" type="A" value="CENTER" align="center" />
+          <Box size="auto" type="A" value="BOTTOM" align="bottom" />
+          <Box size="auto" type="A" value="DEFAULT" />
         </Grid>
-        <Grid
-          size={4}
-          align={!stretch ? 'center' : undefined}
-          style={{ height }}
-        >
-          {times(items, i => <Box key={i} type="C" value="CENTER" />)}
+        <Col>
+          <h1>Grid Align</h1>
+        </Col>
+        <Grid>
+          <Grid
+            size={4}
+            align={!stretch ? 'top' : undefined}
+            style={{ height }}
+          >
+            {times(items, i => <Box key={i} type="C" value="TOP" />)}
+          </Grid>
+          <Grid
+            size={4}
+            align={!stretch ? 'center' : undefined}
+            style={{ height }}
+          >
+            {times(items, i => <Box key={i} type="C" value="CENTER" />)}
+          </Grid>
+          <Grid
+            size={4}
+            align={!stretch ? 'bottom' : undefined}
+            style={{ height }}
+          >
+            {times(items, i => <Box key={i} type="C" value="BOTTOM" />)}
+          </Grid>
         </Grid>
-        <Grid
-          size={4}
-          align={!stretch ? 'bottom' : undefined}
-          style={{ height }}
-        >
-          {times(items, i => <Box key={i} type="C" value="BOTTOM" />)}
-        </Grid>
-      </Grid>
-    </RootLayout>
+      </Root>
+    </Layout>
   )
 }
diff --git a/storybook/stories/grid/autoflow.js b/storybook/stories/grid/autoflow.js
index ddca1e1bc..b767b9f09 100644
--- a/storybook/stories/grid/autoflow.js
+++ b/storybook/stories/grid/autoflow.js
@@ -2,7 +2,8 @@
 import * as React from 'react'
 import { times } from 'lodash'
 import { number, boolean } from '@storybook/addon-knobs'
-import { Box, RootLayout, Grid, getMarginSelect } from '../../shared'
+import { Grid, Root, Layout } from 'gymnast'
+import { Box, getMarginSelect } from '../../shared'
 
 export default () => {
   const items = number('Items', 5, { range: true, min: 0, max: 100 })
@@ -12,31 +13,33 @@ export default () => {
   const margin = getMarginSelect()
 
   return (
-    <RootLayout>
-      <Grid {...props}>
-        <Box margin={margin} size={1} type="A" value="1" />
-        <Box margin={margin} size={2} type="A" value="2" />
-        <Box margin={margin} size={4} type="A" value="3" />
-        <Box margin={margin} size={3} type="A" value="4" />
-        <Box
-          margin={margin}
-          size={2}
-          type="C"
-          value="5"
-          style={{
-            height: 100,
-          }}
-        />
-        {times(items, index => (
+    <Layout height="parent">
+      <Root>
+        <Grid {...props}>
+          <Box margin={margin} size={1} type="A" value="1" />
+          <Box margin={margin} size={2} type="A" value="2" />
+          <Box margin={margin} size={4} type="A" value="3" />
+          <Box margin={margin} size={3} type="A" value="4" />
           <Box
-            size={2}
             margin={margin}
-            key={index}
-            type="A"
-            value={`${index + 6}`}
+            size={2}
+            type="C"
+            value="5"
+            style={{
+              height: 100,
+            }}
           />
-        ))}
-      </Grid>
-    </RootLayout>
+          {times(items, index => (
+            <Box
+              size={2}
+              margin={margin}
+              key={index}
+              type="A"
+              value={`${index + 6}`}
+            />
+          ))}
+        </Grid>
+      </Root>
+    </Layout>
   )
 }
diff --git a/storybook/stories/grid/fit.js b/storybook/stories/grid/fit.js
index e24c24252..34ec90f12 100644
--- a/storybook/stories/grid/fit.js
+++ b/storybook/stories/grid/fit.js
@@ -2,7 +2,8 @@
 import * as React from 'react'
 import { times } from 'lodash'
 import { number } from '@storybook/addon-knobs'
-import { RootLayout, Grid, Col } from '../../shared'
+import { Root, Layout, Grid, Col } from 'gymnast'
+import { colors } from '../../shared'
 
 type ItemProps = {
   text: string,
@@ -10,7 +11,7 @@ type ItemProps = {
 
 const Item = ({ text, ...props }: ItemProps) => (
   <Col margin="L/2" {...props}>
-    <Grid padding="L/2" dev={1}>
+    <Grid padding="L/2" style={colors.colors1}>
       {text}
     </Grid>
   </Col>
@@ -21,15 +22,17 @@ export default () => {
   const fitItems = number('Fit Items', 1, { range: true, min: 0, max: 5 })
 
   return (
-    <RootLayout>
-      <Grid size="fit" justify="center" dev={2}>
-        {times(autoItems, i => (
-          <Item key={i} size="auto" text={`Auto ${i + 1}`} />
-        ))}
-        {times(fitItems, i => (
-          <Item key={i} size="fit" text={`Fit ${i + 1}`} />
-        ))}
-      </Grid>
-    </RootLayout>
+    <Layout height="parent">
+      <Root>
+        <Grid size="fit" justify="center" style={colors.colors2}>
+          {times(autoItems, i => (
+            <Item key={i} size="auto" text={`Auto ${i + 1}`} />
+          ))}
+          {times(fitItems, i => (
+            <Item key={i} size="fit" text={`Fit ${i + 1}`} />
+          ))}
+        </Grid>
+      </Root>
+    </Layout>
   )
 }
diff --git a/storybook/stories/grid/format.js b/storybook/stories/grid/format.js
index 8fd9fcfb7..ff7253834 100644
--- a/storybook/stories/grid/format.js
+++ b/storybook/stories/grid/format.js
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react'
-import { RootLayout, Box, Grid, Col } from '../../shared'
+import { Root, Layout, Grid, Col } from 'gymnast'
+import { Box } from '../../shared'
 
 const marginFormats = [
   {
@@ -36,20 +37,22 @@ const marginFormats = [
 ]
 
 export default () => (
-  <RootLayout>
-    {marginFormats.map(({ margin, title, key }) => (
-      <Grid key={key}>
-        <Col marginBottom="L/2">
-          <h1>{title}</h1>
-        </Col>
-        <Col marginBottom={0}>
-          <code>{JSON.stringify(margin)}</code>
-        </Col>
-        <Grid marginBottom="L">
-          <Box size="auto" margin={margin} type="A" />
-          <Box size="auto" margin={margin} type="A" />
+  <Layout height="parent">
+    <Root>
+      {marginFormats.map(({ margin, title, key }) => (
+        <Grid key={key}>
+          <Col marginBottom="L/2">
+            <h1>{title}</h1>
+          </Col>
+          <Col marginBottom={0}>
+            <code>{JSON.stringify(margin)}</code>
+          </Col>
+          <Grid marginBottom="L">
+            <Box size="auto" margin={margin} type="A" />
+            <Box size="auto" margin={margin} type="A" />
+          </Grid>
         </Grid>
-      </Grid>
-    ))}
-  </RootLayout>
+      ))}
+    </Root>
+  </Layout>
 )
diff --git a/storybook/stories/grid/fraction.js b/storybook/stories/grid/fraction.js
index eb566b737..9e5e4daa4 100644
--- a/storybook/stories/grid/fraction.js
+++ b/storybook/stories/grid/fraction.js
@@ -2,74 +2,77 @@
 import * as React from 'react'
 import { times } from 'lodash'
 import { number } from '@storybook/addon-knobs'
-import { RootLayout, Box, getMarginSelect, Grid, Col } from '../../shared'
+import { Root, Layout, Grid, Col } from 'gymnast'
+import { Box, getMarginSelect } from '../../shared'
 
 export default () => {
   const items = number('Items', 0, { range: true, min: 0, max: 5 })
   const margin = getMarginSelect(undefined, 'Item')
 
   return (
-    <RootLayout>
-      <Col>
-        <h1>Auto Size</h1>
-      </Col>
-      {times(9, size => (
-        <Grid key={size}>
-          {times(size + items, i => (
+    <Layout height="parent">
+      <Root>
+        <Col>
+          <h1>Auto Size</h1>
+        </Col>
+        {times(9, size => (
+          <Grid key={size}>
+            {times(size + items, i => (
+              <Box
+                size="auto"
+                margin={margin}
+                key={i}
+                type="A"
+                value={`1 / ${size + items}`}
+              />
+            ))}
+          </Grid>
+        ))}
+
+        <Col>
+          <h1>8 - auto</h1>
+        </Col>
+        <Grid>
+          <Box margin={margin} size={8} type="A" value="8" />
+          <Box margin={margin} size="auto" type="A" value="12 - 8 = 4" />
+        </Grid>
+
+        <Col>
+          <h1>6 - 1/2 - 1/2</h1>
+        </Col>
+        <Grid>
+          <Box margin={margin} size={6} type="A" value="6" />
+          <Box margin={margin} size="auto" type="A" value="(12 - 6) / 2 = 3" />
+          <Box margin={margin} size="auto" type="A" value="(12 - 6) / 2 = 3" />
+        </Grid>
+
+        <Col>
+          <h1>Custom</h1>
+        </Col>
+        <Grid>
+          {times(items, index => (
             <Box
+              margin={margin}
               size="auto"
+              key={index}
+              type="A"
+              value={`${index + 1}`}
+            />
+          ))}
+        </Grid>
+        <Grid>
+          <Box margin={margin} size={6} type="A" value="6 (fixed)" />
+          {times(items, index => (
+            <Box
               margin={margin}
-              key={i}
+              size="auto"
+              key={index}
               type="A"
-              value={`1 / ${size + items}`}
+              value={`${index + 2}`}
             />
           ))}
         </Grid>
-      ))}
-
-      <Col>
-        <h1>8 - auto</h1>
-      </Col>
-      <Grid>
-        <Box margin={margin} size={8} type="A" value="8" />
-        <Box margin={margin} size="auto" type="A" value="12 - 8 = 4" />
-      </Grid>
-
-      <Col>
-        <h1>6 - 1/2 - 1/2</h1>
-      </Col>
-      <Grid>
-        <Box margin={margin} size={6} type="A" value="6" />
-        <Box margin={margin} size="auto" type="A" value="(12 - 6) / 2 = 3" />
-        <Box margin={margin} size="auto" type="A" value="(12 - 6) / 2 = 3" />
-      </Grid>
-
-      <Col>
-        <h1>Custom</h1>
-      </Col>
-      <Grid>
-        {times(items, index => (
-          <Box
-            margin={margin}
-            size="auto"
-            key={index}
-            type="A"
-            value={`${index + 1}`}
-          />
-        ))}
-      </Grid>
-      <Grid>
-        <Box margin={margin} size={6} type="A" value="6 (fixed)" />
-        {times(items, index => (
-          <Box
-            margin={margin}
-            size="auto"
-            key={index}
-            type="A"
-            value={`${index + 2}`}
-          />
-        ))}
-      </Grid>
-    </RootLayout>
+      </Root>
+    </Layout>
   )
 }
diff --git a/storybook/stories/grid/justify.js b/storybook/stories/grid/justify.js
index 7ab5ea287..b4ce7c90d 100644
--- a/storybook/stories/grid/justify.js
+++ b/storybook/stories/grid/justify.js
@@ -1,7 +1,8 @@
 // @flow
 import * as React from 'react'
 import { number, select } from '@storybook/addon-knobs'
-import { RootLayout, Box, Grid } from '../../shared'
+import { Root, Layout, Grid } from 'gymnast'
+import { Box } from '../../shared'
 
 const justifyType = {
   Default: undefined,
@@ -24,22 +25,24 @@ export default () => {
   })
 
   return (
-    <RootLayout>
-      <Grid size={size} justify={justifyType[justify]}>
-        <Box size={2} type="C" value={justify.toUpperCase()} />
-      </Grid>
-      <Grid size={size} justify="left">
-        <Box size={2} type="A" value="LEFT" />
-      </Grid>
-      <Grid size={size} justify="center">
-        <Box size={2} type="A" value="CENTER" />
-      </Grid>
-      <Grid size={size} justify="right">
-        <Box size={2} type="A" value="RIGHT" />
-      </Grid>
-      <Grid size={size}>
-        <Box size={2} type="A" value="DEFAULT" />
-      </Grid>
-    </RootLayout>
+    <Layout height="parent">
+      <Root>
+        <Grid size={size} justify={justifyType[justify]}>
+          <Box size={2} type="C" value={justify.toUpperCase()} />
+        </Grid>
+        <Grid size={size} justify="left">
+          <Box size={2} type="A" value="LEFT" />
+        </Grid>
+        <Grid size={size} justify="center">
+          <Box size={2} type="A" value="CENTER" />
+        </Grid>
+        <Grid size={size} justify="right">
+          <Box size={2} type="A" value="RIGHT" />
+        </Grid>
+        <Grid size={size}>
+          <Box size={2} type="A" value="DEFAULT" />
+        </Grid>
+      </Root>
+    </Layout>
   )
 }
diff --git a/storybook/stories/grid/margin.js b/storybook/stories/grid/margin.js
index 32cad8b11..cb1d8f45a 100644
--- a/storybook/stories/grid/margin.js
+++ b/storybook/stories/grid/margin.js
@@ -2,7 +2,8 @@
 import * as React from 'react'
 import { times } from 'lodash'
 import { boolean } from '@storybook/addon-knobs'
-import { Box, RootLayout, getMarginSelect, Grid } from '../../shared'
+import { Root, Layout, Grid } from 'gymnast'
+import { Box, getMarginSelect } from '../../shared'
 
 export default () => {
   const itemMargin = getMarginSelect(
@@ -24,16 +25,24 @@ export default () => {
   )
 
   return (
-    <RootLayout>
-      <Grid>
-        {times(6, getBox)}
+    <Layout height="parent">
+      <Root>
+        <Grid>
+          {times(6, getBox)}
 
-        {times(2, getBox)}
-        <Box size={4} type="C" align={align} value="Item" margin={itemMargin} />
-        {times(2, getBox)}
+          {times(2, getBox)}
+          <Box
+            size={4}
+            type="C"
+            align={align}
+            value="Item"
+            margin={itemMargin}
+          />
+          {times(2, getBox)}
 
-        {times(6, getBox)}
-      </Grid>
-    </RootLayout>
+          {times(6, getBox)}
+        </Grid>
+      </Root>
+    </Layout>
   )
 }
diff --git a/storybook/stories/grid/nested.js b/storybook/stories/grid/nested.js
index 3ec92937a..38c985a92 100644
--- a/storybook/stories/grid/nested.js
+++ b/storybook/stories/grid/nested.js
@@ -2,14 +2,8 @@
 import * as React from 'react'
 import { number, select } from '@storybook/addon-knobs'
 import { times } from 'lodash'
-import {
-  Box,
-  Col,
-  getMarginSelect,
-  getPositionSelect,
-  Grid,
-  RootLayout,
-} from '../../shared'
+import { Root, Layout, Col, Grid } from 'gymnast'
+import { Box, colors, getMarginSelect, getPositionSelect } from '../../shared'
 
 export default function() {
   const paddingMap = {
@@ -27,40 +21,49 @@ export default function() {
     padding: paddingMap[select('Padding', paddingOptions)],
     ...getPositionSelect(),
   }
-  const height = {
-    height: 150,
-  }
 
   return (
-    <RootLayout>
-      <Col>
-        <h1>Nested Example</h1>
-      </Col>
-      <Col>
-        <Grid {...params} dev={2}>
-          <Grid size={6} {...params} margin={margin} dev={1} style={height}>
-            <Grid size={6} {...params} margin={margin} dev={3}>
-              <Grid size={6} margin={margin} dev={4} align="center">
-                A
+    <Layout height="parent">
+      <Root>
+        <Col>
+          <h1>Nested Example</h1>
+        </Col>
+        <Col>
+          <Grid {...params} style={colors.colors2}>
+            <Grid
+              size={6}
+              {...params}
+              margin={margin}
+              style={{ ...colors.colors1, height: 150 }}
+            >
+              <Grid size={6} {...params} margin={margin} style={colors.colors3}>
+                <Grid
+                  size={6}
+                  margin={margin}
+                  style={colors.colors4}
+                  align="center"
+                >
+                  A
+                </Grid>
               </Grid>
             </Grid>
           </Grid>
-        </Grid>
-      </Col>
-      <Col>
-        <h1>With Overflow</h1>
-      </Col>
-      <Grid>
-        <Col size={6}>
-          <Grid {...params} dev={2}>
-            {times(items, index => (
-              <Box size={2} margin={margin} key={index} type="A">
-                {`${(index * 2) % 12 + 2}`}
-              </Box>
-            ))}
-          </Grid>
         </Col>
-      </Grid>
-    </RootLayout>
+        <Col>
+          <h1>With Overflow</h1>
+        </Col>
+        <Grid>
+          <Col size={6}>
+            <Grid {...params} style={colors.colors2}>
+              {times(items, index => (
+                <Box size={2} margin={margin} key={index} type="A">
+                  {`${(index * 2) % 12 + 2}`}
+                </Box>
+              ))}
+            </Grid>
+          </Col>
+        </Grid>
+      </Root>
+    </Layout>
   )
 }
diff --git a/storybook/stories/grid/offset.js b/storybook/stories/grid/offset.js
index eff676586..0252fe2b1 100644
--- a/storybook/stories/grid/offset.js
+++ b/storybook/stories/grid/offset.js
@@ -1,50 +1,52 @@
 // @flow
 import * as React from 'react'
 import { number } from '@storybook/addon-knobs'
-import { Offset } from 'gymnast'
-import { Grid, RootLayout, Box } from '../../shared'
+import { Root, Layout, Grid, Offset } from 'gymnast'
+import { Box } from '../../shared'
 
 export default () => {
   const offset = number('Offset', 0, { range: true, min: 0, max: 11 })
 
   return (
-    <RootLayout>
-      <Grid>
-        <Box size={1} type="A" value="+0" />
-        <Offset size={7} />
-        <Box size={1} type="A" value="+7" />
-      </Grid>
-      <Grid>
-        <Offset size={1} />
-        <Box size={1} type="A" value="+1" />
-        <Offset size={5} />
-        <Box size={1} type="A" value="+5" />
-        <Offset size={1} />
-        <Box size={1} type="A" value="+1" />
-      </Grid>
-      <Grid>
-        <Offset size={2} />
-        <Box size={1} type="A" value="+2" />
-        <Offset size={3} />
-        <Box size={1} type="A" value="+3" />
-        <Offset size={3} />
-        <Box size={1} type="A" value="+3" />
-      </Grid>
-      <Grid>
-        <Offset size={3} />
-        <Box size={1} type="A" value="+3" />
-        <Offset size={1} />
-        <Box size={1} type="A" value="+1" />
-        <Offset size={5} />
-        <Box size={1} type="A" value="+5" />
-      </Grid>
-      <Grid>
-        <Offset size={4} />
-        <Box size={1} type="A" value="+4" />
-      </Grid>
+    <Layout height="parent">
+      <Root>
+        <Grid>
+          <Box size={1} type="A" value="+0" />
+          <Offset size={7} />
+          <Box size={1} type="A" value="+7" />
+        </Grid>
+        <Grid>
+          <Offset size={1} />
+          <Box size={1} type="A" value="+1" />
+          <Offset size={5} />
+          <Box size={1} type="A" value="+5" />
+          <Offset size={1} />
+          <Box size={1} type="A" value="+1" />
+        </Grid>
+        <Grid>
+          <Offset size={2} />
+          <Box size={1} type="A" value="+2" />
+          <Offset size={3} />
+          <Box size={1} type="A" value="+3" />
+          <Offset size={3} />
+          <Box size={1} type="A" value="+3" />
+        </Grid>
+        <Grid>
+          <Offset size={3} />
+          <Box size={1} type="A" value="+3" />
+          <Offset size={1} />
+          <Box size={1} type="A" value="+1" />
+          <Offset size={5} />
+          <Box size={1} type="A" value="+5" />
+        </Grid>
+        <Grid>
+          <Offset size={4} />
+          <Box size={1} type="A" value="+4" />
+        </Grid>
 
-      <Offset size={offset} />
-      <Box size={1} type="C" value={`+${offset}`} />
-    </RootLayout>
+        <Offset size={offset} />
+        <Box size={1} type="C" value={`+${offset}`} />
+      </Root>
+    </Layout>
   )
 }
diff --git a/storybook/stories/grid/padding.js b/storybook/stories/grid/padding.js
index fa380623d..9edb6048e 100644
--- a/storybook/stories/grid/padding.js
+++ b/storybook/stories/grid/padding.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
-import type { Size } from '../../../src/types'
-import { RootLayout, getMarginSelect, Grid, Col } from '../../shared'
+import { type Size, Root, Layout, Grid, Col } from 'gymnast'
+import { getMarginSelect, colors } from '../../shared'
 import { axonBlack, axonGold } from '../../../src/dev/colors'
 
 type HeadingProps = {
@@ -34,109 +34,108 @@ export default () => {
   )
 
   return (
-    <RootLayout>
-      <Col>
-        <Heading>Default (No Padding)</Heading>
-        <Grid size={6} dev={2}>
-          <Grid margin={margin} dev={3}>
-            {text}
+    <Layout height="parent">
+      <Root>
+        <Col>
+          <Heading>Default (No Padding)</Heading>
+          <Grid size={6} style={colors.colors2}>
+            <Grid margin={margin} style={colors.colors3}>
+              {text}
+            </Grid>
           </Grid>
-        </Grid>
-      </Col>
-      <Col>
-        <Heading size={6}>Top Right Padding</Heading>
-        <Heading size={6}>Item Top Right Padding</Heading>
-        <Grid size={6} dev={2} padding="L L 0 0">
-          <Grid margin={margin} dev={3}>
-            {text}
+        </Col>
+        <Col>
+          <Heading size={6}>Top Right Padding</Heading>
+          <Heading size={6}>Item Top Right Padding</Heading>
+          <Grid size={6} style={colors.colors2} padding="L L 0 0">
+            <Grid margin={margin} style={colors.colors3}>
+              {text}
+            </Grid>
           </Grid>
-        </Grid>
-        <Grid size={6} dev={2}>
-          <Grid margin={margin} dev={3} padding="L L 0 0">
-            {text}
+          <Grid size={6} style={colors.colors2}>
+            <Grid margin={margin} style={colors.colors3} padding="L L 0 0">
+              {text}
+            </Grid>
           </Grid>
-        </Grid>
-      </Col>
-      <Col>
-        <Heading size={6}>All-sides Padding</Heading>
-        <Heading size={6}>Item All-sides Padding</Heading>
-        <Grid size={6} dev={2} padding="L L/2">
-          <Grid margin={margin} dev={3}>
-            {text}
+        </Col>
+        <Col>
+          <Heading size={6}>All-sides Padding</Heading>
+          <Heading size={6}>Item All-sides Padding</Heading>
+          <Grid size={6} style={colors.colors2} padding="L L/2">
+            <Grid margin={margin} style={colors.colors3}>
+              {text}
+            </Grid>
           </Grid>
-        </Grid>
-        <Grid size={6} dev={2}>
-          <Grid margin={margin} dev={3} padding="L L/2">
-            {text}
+          <Grid size={6} style={colors.colors2}>
+            <Grid margin={margin} style={colors.colors3} padding="L L/2">
+              {text}
+            </Grid>
           </Grid>
-        </Grid>
-      </Col>
-      <Col>
-        <Heading size={6}>Bottom Padding</Heading>
-        <Heading size={6}>Item Bottom Padding</Heading>
-        <Grid size={6} dev={2} paddingBottom="L">
-          <Grid margin={margin} dev={3}>
-            {text}
+        </Col>
+        <Col>
+          <Heading size={6}>Bottom Padding</Heading>
+          <Heading size={6}>Item Bottom Padding</Heading>
+          <Grid size={6} style={colors.colors2} paddingBottom="L">
+            <Grid margin={margin} style={colors.colors3}>
+              {text}
+            </Grid>
           </Grid>
-        </Grid>
-        <Grid size={6} dev={2}>
-          <Grid margin={margin} dev={3} paddingBottom="L">
-            {text}
+          <Grid size={6} style={colors.colors2}>
+            <Grid margin={margin} style={colors.colors3} paddingBottom="L">
+              {text}
+            </Grid>
           </Grid>
-        </Grid>
-      </Col>
-      <Col>
-        <Heading size={6}>Top-Right-Left Padding</Heading>
-        <Heading size={6}>Item Top-Right-Left Padding</Heading>
-        <Grid size={6} dev={2} padding="L L 0">
-          <Grid margin={margin} dev={3}>
-            {text}
+        </Col>
+        <Col>
+          <Heading size={6}>Top-Right-Left Padding</Heading>
+          <Heading size={6}>Item Top-Right-Left Padding</Heading>
+          <Grid size={6} style={colors.colors2} padding="L L 0">
+            <Grid margin={margin} style={colors.colors3}>
+              {text}
+            </Grid>
           </Grid>
-        </Grid>
-        <Grid size={6} dev={2}>
-          <Grid margin={margin} dev={3} padding="L L 0">
-            {text}
+          <Grid size={6} style={colors.colors2}>
+            <Grid margin={margin} style={colors.colors3} padding="L L 0">
+              {text}
+            </Grid>
           </Grid>
-        </Grid>
-      </Col>
+        </Col>
 
-      <Col>
-        <Heading>With Justify / Alignment</Heading>
-        <Grid size={6} marginBottom="L">
-          <h2>Container Padding</h2>
-        </Grid>
-        <Grid size={6} marginBottom="L">
-          <h2>Item Padding</h2>
-        </Grid>
-        <Grid
-          size={6}
-          dev={2}
-          paddingTop="L"
-          justify="center"
-          align="center"
-          style={{ height: 300 }}
-        >
-          <Grid margin={margin} dev={3} style={{ maxWidth: 200 }}>
-            {text}
+        <Col>
+          <Heading>With Justify / Alignment</Heading>
+          <Grid size={6} marginBottom="L">
+            <h2>Container Padding</h2>
+          </Grid>
+          <Grid size={6} marginBottom="L">
+            <h2>Item Padding</h2>
           </Grid>
-        </Grid>
-        <Grid
-          size={6}
-          dev={2}
-          justify="center"
-          align="center"
-          style={{ height: 300 }}
-        >
           <Grid
-            margin={margin}
-            dev={3}
+            size={6}
             paddingTop="L"
-            style={{ maxWidth: 200 }}
+            justify="center"
+            align="center"
+            style={{ height: 300, ...colors.colors2 }}
+          >
+            <Grid margin={margin} style={{ maxWidth: 200, ...colors.colors3 }}>
+              {text}
+            </Grid>
+          </Grid>
+          <Grid
+            size={6}
+            justify="center"
+            align="center"
+            style={{ height: 300, ...colors.colors2 }}
           >
-            {text}
+            <Grid
+              margin={margin}
+              paddingTop="L"
+              style={{ maxWidth: 200, ...colors.colors3 }}
+            >
+              {text}
+            </Grid>
           </Grid>
-        </Grid>
-      </Col>
-    </RootLayout>
+        </Col>
+      </Root>
+    </Layout>
   )
 }
diff --git a/storybook/stories/grid/resolution.js b/storybook/stories/grid/resolution.js
index cd6df64a9..279c764d4 100644
--- a/storybook/stories/grid/resolution.js
+++ b/storybook/stories/grid/resolution.js
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react'
-import { Grid } from '../../shared'
+import { Grid } from 'gymnast'
+import { colors } from '../../shared'
 
 class Button extends React.Component<*, { counter: number }> {
   state = { counter: 0 }
@@ -18,22 +19,22 @@ class Button extends React.Component<*, { counter: number }> {
 
 export default () => (
   <Grid>
-    <Grid dev={1} padding="XL" margin={['L', 0]} show="small">
+    <Grid style={colors.colors1} padding="XL" margin={['L', 0]} show="small">
       <Grid size="auto">Only visible on small screens (&lt; 600px)</Grid>
       <Button />
     </Grid>
-    <Grid dev={2} padding="XL" margin={['L', 0]} show="medium">
+    <Grid style={colors.colors2} padding="XL" margin={['L', 0]} show="medium">
       <Grid size="auto">
         Only visible on medium screens (&gt; 600px &amp;&amp; &lt; 900px)
       </Grid>
       <Button />
     </Grid>
-    <Grid dev={3} padding="XL" margin={['L', 0]} show="large">
+    <Grid style={colors.colors3} padding="XL" margin={['L', 0]} show="large">
       <Grid size="auto">Only visible on large screens (&gt; 900px)</Grid>
       <Button />
     </Grid>
     <Grid
-      dev={4}
+      style={colors.colors4}
       padding="XL"
       margin={['L', 0]}
       show={['small', 'medium']}
@@ -43,7 +44,7 @@ export default () => (
       <Button />
     </Grid>
     <Grid
-      dev={2}
+      style={colors.colors2}
       padding="XL"
       margin={['L', 0]}
       show={['small', 'large']}
@@ -55,7 +56,7 @@ export default () => (
       <Button />
     </Grid>
     <Grid
-      dev={1}
+      style={colors.colors1}
       padding="XL"
       margin={['L', 0]}
       show={['medium', 'large']}
@@ -65,7 +66,7 @@ export default () => (
       <Button />
     </Grid>
     <Grid
-      dev={3}
+      style={colors.colors3}
       padding="XL"
       margin={['L', 0]}
       size={{ small: 12, medium: 9, large: 6 }}
diff --git a/storybook/stories/grid/sizing.js b/storybook/stories/grid/sizing.js
index b3087613f..4a7d64a7c 100644
--- a/storybook/stories/grid/sizing.js
+++ b/storybook/stories/grid/sizing.js
@@ -2,24 +2,37 @@
 import * as React from 'react'
 import { times } from 'lodash'
 import { number } from '@storybook/addon-knobs'
-import { RootLayout, Box, Grid } from '../../shared'
+import { Root, Layout, Grid } from 'gymnast'
+import { Box } from '../../shared'
 
 export default () => {
   const size = number('Size', 12, { range: true, min: 1, max: 12 })
 
   return (
-    <RootLayout>
-      <Grid>{times(12, i => <Box key={i} size={1} type="A" value="1" />)}</Grid>
-      <Grid>{times(6, i => <Box key={i} size={2} type="A" value="2" />)}</Grid>
-      <Grid>{times(4, i => <Box key={i} size={3} type="A" value="3" />)}</Grid>
-      <Grid>{times(3, i => <Box key={i} size={4} type="A" value="4" />)}</Grid>
-      <Grid>{times(2, i => <Box key={i} size={6} type="A" value="6" />)}</Grid>
-      <Grid>
-        <Box type="A" value="Auto" />
-      </Grid>
-      <Grid>
-        <Box size={size} type="C" value={`${size}`} />
-      </Grid>
-    </RootLayout>
+    <Layout height="parent">
+      <Root>
+        <Grid>
+          {times(12, i => <Box key={i} size={1} type="A" value="1" />)}
+        </Grid>
+        <Grid>
+          {times(6, i => <Box key={i} size={2} type="A" value="2" />)}
+        </Grid>
+        <Grid>
+          {times(4, i => <Box key={i} size={3} type="A" value="3" />)}
+        </Grid>
+        <Grid>
+          {times(3, i => <Box key={i} size={4} type="A" value="4" />)}
+        </Grid>
+        <Grid>
+          {times(2, i => <Box key={i} size={6} type="A" value="6" />)}
+        </Grid>
+        <Grid>
+          <Box type="A" value="Auto" />
+        </Grid>
+        <Grid>
+          <Box size={size} type="C" value={`${size}`} />
+        </Grid>
+      </Root>
+    </Layout>
   )
 }
diff --git a/storybook/stories/grid/stretch.js b/storybook/stories/grid/stretch.js
index 8728bec50..e9ce42015 100644
--- a/storybook/stories/grid/stretch.js
+++ b/storybook/stories/grid/stretch.js
@@ -1,8 +1,9 @@
 // @flow
 import * as React from 'react'
 import { times } from 'lodash'
+import { Root, Layout, Grid } from 'gymnast'
 import { number, boolean } from '@storybook/addon-knobs'
-import { Box, Grid, RootLayout, getMarginSelect } from '../../shared'
+import { Box, getMarginSelect, colors } from '../../shared'
 
 export default () => {
   const items = number('Items', 5, { range: true, min: 0, max: 24 })
@@ -18,18 +19,20 @@ export default () => {
   const margin = getMarginSelect()
 
   return (
-    <RootLayout style={{ height }} align={alignContainer}>
-      <Grid align={align} dev={2}>
-        {times(items, index => (
-          <Box
-            size={2}
-            margin={margin}
-            key={index}
-            type="A"
-            value={`${index + 1}`}
-          />
-        ))}
-      </Grid>
-    </RootLayout>
+    <Layout height="parent">
+      <Root style={{ height }} align={alignContainer}>
+        <Grid align={align} style={colors.colors2}>
+          {times(items, index => (
+            <Box
+              size={2}
+              margin={margin}
+              key={index}
+              type="A"
+              value={`${index + 1}`}
+            />
+          ))}
+        </Grid>
+      </Root>
+    </Layout>
   )
 }
diff --git a/storybook/stories/layout/auto.js b/storybook/stories/layout/auto.js
index 2c358740e..e74752013 100644
--- a/storybook/stories/layout/auto.js
+++ b/storybook/stories/layout/auto.js
@@ -1,16 +1,16 @@
 // @flow
 import * as React from 'react'
 import { boolean } from '@storybook/addon-knobs'
-import { Root } from 'gymnast'
-import { Grid, Layout } from '../../shared'
+import { Root, Grid, Layout } from 'gymnast'
+import { colors } from '../../shared'
 import styles from '../../shared/layout.css'
 
 export default () => {
   const height = boolean('Height Auto', true) ? 'auto' : undefined
 
   return (
-    <Layout height="parent" className={styles.page} dev={4}>
-      <Layout height={height} dev={2}>
+    <Layout height="parent" className={styles.page} style={colors.colors4}>
+      <Layout height={height} style={colors.colors2}>
         <Root>
           <Grid margin="0 L/2">
             <Grid padding="L">
diff --git a/storybook/stories/layout/default.js b/storybook/stories/layout/default.js
index bd827e643..cd00d5587 100644
--- a/storybook/stories/layout/default.js
+++ b/storybook/stories/layout/default.js
@@ -2,20 +2,23 @@
 import * as React from 'react'
 import { times } from 'lodash'
 import { number } from '@storybook/addon-knobs'
-import { Root } from 'gymnast'
-import { loremIpsum, Grid, Layout } from '../../shared'
+import { Root, Grid, Layout } from 'gymnast'
+import { loremIpsum, colors } from '../../shared'
 import styles from '../../shared/layout.css'
 
 export default () => {
   const repeats = number('Add text', 4, { range: true, min: 1, max: 10 })
 
   return (
-    <Layout height="parent" className={styles.page} dev={5}>
+    <Layout height="parent" className={styles.page} style={colors.colors5}>
       {times(repeats, key => (
         <Layout key={key}>
           <Root>
             <Grid margin="0 L/2">
-              <Grid dev={key % 2 === 0 ? 2 : 4} padding="L">
+              <Grid
+                style={colors[`colors${key % 2 === 0 ? 2 : 4}`]}
+                padding="L"
+              >
                 {loremIpsum.slice(0, 150 * (key % 3 + 1))}...
               </Grid>
             </Grid>
diff --git a/storybook/stories/layout/fixed.js b/storybook/stories/layout/fixed.js
index 8942a0de0..e2e057553 100644
--- a/storybook/stories/layout/fixed.js
+++ b/storybook/stories/layout/fixed.js
@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react'
 import { select } from '@storybook/addon-knobs'
-import { Root } from 'gymnast'
-import { Grid, Layout } from '../../shared'
+import { Root, Grid, Layout } from 'gymnast'
+import { colors } from '../../shared'
 import styles from '../../shared/layout.css'
 
 export default () => {
@@ -14,7 +14,7 @@ export default () => {
 
   return (
     <Layout height="parent" className={styles.page}>
-      <Layout fixed={options[fixed]} dev={2}>
+      <Layout fixed={options[fixed]} style={colors.colors2}>
         <Root>
           <Grid margin="0 L/2">
             <h1>Fixed to the {fixed}</h1>
diff --git a/storybook/stories/layout/margin.js b/storybook/stories/layout/margin.js
index f439a6c3b..4e6a28d00 100644
--- a/storybook/stories/layout/margin.js
+++ b/storybook/stories/layout/margin.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
-import { Root } from 'gymnast'
-import { Layout, getMarginSelect, Grid } from '../../shared'
+import { Root, Layout, Grid } from 'gymnast'
+import { getMarginSelect, colors } from '../../shared'
 
 export default () => {
   const layoutMargin = getMarginSelect('Layout Margin', 'None')
@@ -9,8 +9,8 @@ export default () => {
 
   return (
     <Root>
-      <Layout margin={layoutMargin} dev={2}>
-        <Grid margin={gridMargin} dev={3}>
+      <Layout margin={layoutMargin} style={colors.colors2}>
+        <Grid margin={gridMargin} style={colors.colors3}>
           TEST
         </Grid>
       </Layout>
diff --git a/storybook/stories/layout/padding.js b/storybook/stories/layout/padding.js
index 809648ebd..45a0ef852 100644
--- a/storybook/stories/layout/padding.js
+++ b/storybook/stories/layout/padding.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
-import type { Size } from '../../../src/types'
-import { RootLayout, getMarginSelect, Grid, Layout } from '../../shared'
+import { type Size, Root, Grid, Layout } from 'gymnast'
+import { getMarginSelect, colors } from '../../shared'
 import { axonBlack, axonGold } from '../../../src/dev/colors'
 
 type HeadingProps = {
@@ -34,23 +34,25 @@ export default () => {
   )
 
   return (
-    <RootLayout>
-      <Heading>Default (No Padding)</Heading>
-      <Layout dev={2} margin={margin}>
-        <Grid dev={3}>{text}</Grid>
-      </Layout>
-      <Heading size={6}>Top Right Padding</Heading>
-      <Layout dev={2} padding="L L 0 0" margin={margin}>
-        <Grid dev={3}>{text}</Grid>
-      </Layout>
-      <Heading size={6}>All-sides Padding</Heading>
-      <Layout dev={2} padding="L L/2" margin={margin}>
-        <Grid dev={3}>{text}</Grid>
-      </Layout>
-      <Heading size={6}>Bottom Padding</Heading>
-      <Layout dev={2} paddingBottom="L" margin={margin}>
-        <Grid dev={3}>{text}</Grid>
-      </Layout>
-    </RootLayout>
+    <Layout height="parent">
+      <Root>
+        <Heading>Default (No Padding)</Heading>
+        <Layout style={colors.colors2} margin={margin}>
+          <Grid style={colors.colors3}>{text}</Grid>
+        </Layout>
+        <Heading size={6}>Top Right Padding</Heading>
+        <Layout style={colors.colors2} padding="L L 0 0" margin={margin}>
+          <Grid style={colors.colors3}>{text}</Grid>
+        </Layout>
+        <Heading size={6}>All-sides Padding</Heading>
+        <Layout style={colors.colors2} padding="L L/2" margin={margin}>
+          <Grid style={colors.colors3}>{text}</Grid>
+        </Layout>
+        <Heading size={6}>Bottom Padding</Heading>
+        <Layout style={colors.colors2} paddingBottom="L" margin={margin}>
+          <Grid style={colors.colors3}>{text}</Grid>
+        </Layout>
+      </Root>
+    </Layout>
   )
 }
diff --git a/storybook/stories/layout/parent.js b/storybook/stories/layout/parent.js
index 77dd5fbdd..bbcbdd2d8 100644
--- a/storybook/stories/layout/parent.js
+++ b/storybook/stories/layout/parent.js
@@ -1,18 +1,18 @@
 // @flow
 import * as React from 'react'
 import { number } from '@storybook/addon-knobs'
-import { Root } from 'gymnast'
-import { Grid, Layout } from '../../shared'
+import { Root, Grid, Layout } from 'gymnast'
+import { colors } from '../../shared'
 import styles from '../../shared/layout.css'
 
 export default () => {
   const height = number('Add height', 0, { range: true, min: 0, max: 5000 })
 
   return (
-    <Layout height="parent" className={styles.page} dev={2}>
+    <Layout height="parent" className={styles.page} style={colors.colors2}>
       <Root>
         <Grid margin="0 L/2">
-          <Grid padding="L" style={{ height }} dev={1} />
+          <Grid padding="L" style={{ height, ...colors.colors1 }} />
         </Grid>
       </Root>
     </Layout>
diff --git a/storybook/stories/layout/stack.js b/storybook/stories/layout/stack.js
index 67e59551f..e9f9c68bc 100644
--- a/storybook/stories/layout/stack.js
+++ b/storybook/stories/layout/stack.js
@@ -1,16 +1,16 @@
 // @flow
 import * as React from 'react'
-import { Root } from 'gymnast'
+import { Root, Grid, Layout } from 'gymnast'
 import { times } from 'lodash'
 import { number } from '@storybook/addon-knobs'
-import { Grid, Layout } from '../../shared'
+import { colors } from '../../shared'
 import styles from '../../shared/layout.css'
 
 function getStaticSection(index) {
   return (
     <Layout key={index}>
       <Root>
-        <Grid dev={3} margin="L/2 0">
+        <Grid style={colors.colors3} margin="L/2 0">
           <h1>{`Section ${index + 1}`}</h1>
         </Grid>
       </Root>