Added colors

src/components/Box/box.stories.tsx

@@ -11,9 +11,9 @@ export const basic = () => <Box>Hello Button</Box>
 
 export const asH2 = () => (
   <Box as="h2" display="flex" direction="row" justify="center">
-    <div style={{ width: 100, height: 100, backgroundColor: 'black' }}></div>
-    <div style={{ width: 100, height: 100, backgroundColor: 'blue' }}></div>
-    <div style={{ width: 100, height: 100, backgroundColor: 'green' }}></div>
+    <Box bgColor="maroon" style={{ width: 100, height: 100 }}></Box>
+    <Box bgColor="fuchsia" style={{ width: 100, height: 100 }}></Box>
+    <Box bgColor="aqua" style={{ width: 100, height: 100 }}></Box>
   </Box>
 )
 

src/components/Box/index.tsx

@@ -2,14 +2,16 @@ import styled from 'styled-components'
 import display, { DisplaySystem } from '../../tokenSystem/display'
 import flex, { FlexSystem } from '../../tokenSystem/flexbox'
 import position, { PositionSystem } from '../../tokenSystem/position'
+import colors, { ColorSystem } from '../../tokenSystem/colors'
 
 const Box = styled.div<BoxProps>`
   ${flex};
   ${display};
-  ${position}
+  ${position};
+  ${colors};
   box-sizing: border-box;
 `
 
-export type BoxProps = FlexSystem & DisplaySystem & PositionSystem
+export type BoxProps = FlexSystem & DisplaySystem & PositionSystem & ColorSystem
 
 export default Box

src/tokenSystem/colors.ts

@@ -0,0 +1,36 @@
+import { createTokens } from 'styled-tokens'
+
+const draftColors = {
+  values: {
+    navy: '#001f3f',
+    blue: '#0074D9',
+    aqua: '#7FDBFF',
+    teal: '#39CCCC',
+    olive: '#39CCCC',
+    green: '#2ECC40',
+    lime: '#01FF70',
+    yellow: '#FFDC00',
+    orange: '#FF851B',
+    red: '#FF4136',
+    maroon: '#85144b',
+    fuchsia: '#F012BE',
+    purple: '#B10DC9',
+    black: '#111111',
+    gray: '#AAAAAA',
+    silver: '#DDDDDD',
+    white: '#FFFFFF',
+  },
+  propName: {
+    color: 'color',
+    backgroundColor: 'bgColor',
+    borderColor: 'bColor',
+  },
+}
+
+export type ColorSystem = Partial<{
+  color: keyof typeof draftColors.values
+  bgColor: keyof typeof draftColors.values
+  bColor: keyof typeof draftColors.values
+}>
+
+export default createTokens(draftColors)