Merge branch 'development' into feature/updateReadmes

* development: (35 commits)
  Remove etherToken from smart contract docs
  Update new WETH addresses and localStorage clearance key
  Fix merge
  Remove re-assignment
  Fix scrolling topBar on Portal
  Fix overflow issue on calculated fillAmount
  Fix faulty import
  Refactor remaining _.assign to spread operator
  Move muiTheme into it's own module
  Add WETH
  remove extra space
  Remove binding on prop passed callbacks
  Add airtable tasks to TODO's
  Refactor configs and constants, standardize on uppercase/snakecase, alphebetize, rename for logical grouping
  Sort colors into color spectrum
  remove unused style
  standarize on `grey` over `gray` spelling and other color related fixes
  Standardize colors to always be in uppercase hex and consolidate material-ui greys
  Consolidate all custom colors and material-ui colors into a colors module
  Remove unused `location` prop
  ...

14 files changed, 116 insertions, 120 deletions

diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 011bbb9d9..e9e876f45 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -1,18 +1,14 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import {Footer} from 'ts/components/footer';
 import {TopBar} from 'ts/components/top_bar';
 import {Profile} from 'ts/pages/about/profile';
 import {ProfileInfo, Styles} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';
 
-const CUSTOM_BACKGROUND_COLOR = '#F0F0F0';
-const CUSTOM_GRAY = '#4C4C4C';
-const CUSTOM_LIGHT_GRAY = '#A2A2A2';
-
 const teamRow1: ProfileInfo[] = [
     {
         name: 'Will Warren',
@@ -145,6 +141,12 @@ const styles: Styles = {
         color: 'black',
         paddingTop: 110,
     },
+    weAreHiring: {
+        fontSize: 30,
+        color: colors.darkestGrey,
+        fontFamily: 'Roboto Mono',
+        letterSpacing: 7.5,
+    },
 };
 
 export class About extends React.Component<AboutProps, AboutState> {
@@ -153,12 +155,12 @@ export class About extends React.Component<AboutProps, AboutState> {
     }
     public render() {
         return (
-            <div style={{backgroundColor: CUSTOM_BACKGROUND_COLOR}}>
+            <div style={{backgroundColor: colors.lightestGrey}}>
                 <DocumentTitle title="0x About Us"/>
                 <TopBar
                     blockchainIsLoaded={false}
                     location={this.props.location}
-                    style={{backgroundColor: CUSTOM_BACKGROUND_COLOR}}
+                    style={{backgroundColor: colors.lightestGrey}}
                 />
                 <div
                     id="about"
@@ -176,7 +178,7 @@ export class About extends React.Component<AboutProps, AboutState> {
                         </div>
                         <div
                             className="pt3"
-                            style={{fontSize: 17, color: CUSTOM_GRAY, lineHeight: 1.5}}
+                            style={{fontSize: 17, color: colors.darkestGrey, lineHeight: 1.5}}
                         >
                             Our team is a diverse and globally distributed group with backgrounds
                             in engineering, research, business and design. We are passionate about
@@ -195,7 +197,7 @@ export class About extends React.Component<AboutProps, AboutState> {
                     <div className="pt3 pb2">
                         <div
                             className="pt2 pb3 sm-center md-pl4 lg-pl0 md-ml3"
-                            style={{color: CUSTOM_LIGHT_GRAY, fontSize: 24, fontFamily: 'Roboto Mono'}}
+                            style={{color: colors.grey, fontSize: 24, fontFamily: 'Roboto Mono'}}
                         >
                             Advisors:
                         </div>
@@ -206,17 +208,17 @@ export class About extends React.Component<AboutProps, AboutState> {
                     <div className="mx-auto py4 sm-px3" style={{maxWidth: 308}}>
                         <div
                             className="pb2"
-                            style={{fontSize: 30, color: CUSTOM_GRAY, fontFamily: 'Roboto Mono', letterSpacing: 7.5}}
+                            style={styles.weAreHiring}
                         >
                             WE'RE HIRING
                         </div>
                         <div
                             className="pb4 mb4"
-                            style={{fontSize: 16, color: CUSTOM_GRAY, lineHeight: 1.5, letterSpacing: '0.5px'}}
+                            style={{fontSize: 16, color: colors.darkestGrey, lineHeight: 1.5, letterSpacing: '0.5px'}}
                         >
                             We are seeking outstanding candidates to{' '}
                             <a
-                                href={constants.ANGELLIST_URL}
+                                href={constants.URL_ANGELLIST}
                                 target="_blank"
                                 style={{color: 'black'}}
                             >
@@ -226,7 +228,7 @@ export class About extends React.Component<AboutProps, AboutState> {
                         </div>
                     </div>
                 </div>
-                <Footer location={this.props.location} />
+                <Footer />
             </div>
         );
     }
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
index 86aa788b2..ef74f268a 100644
--- a/packages/website/ts/pages/about/profile.tsx
+++ b/packages/website/ts/pages/about/profile.tsx
@@ -1,6 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import {ProfileInfo, Styles} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 
 const IMAGE_DIMENSION = 149;
 const styles: Styles = {
@@ -48,7 +49,7 @@ export function Profile(props: ProfileProps) {
                 {!_.isUndefined(props.profileInfo.title) &&
                     <div
                         className="pt1 center"
-                        style={{fontSize: 14, fontFamily: 'Roboto Mono', color: '#818181'}}
+                        style={{fontSize: 14, fontFamily: 'Roboto Mono', color: colors.darkGrey}}
                     >
                         {props.profileInfo.title.toUpperCase()}
                     </div>
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 0ca8ae9d3..aab14a52c 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -1,7 +1,6 @@
 import findVersions = require('find-versions');
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import {
@@ -34,19 +33,18 @@ import {
     TypeDefinitionByName,
     TypescriptMethod,
 } from 'ts/types';
+import {colors} from 'ts/utils/colors';
+import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 import {docUtils} from 'ts/utils/doc_utils';
 import {utils} from 'ts/utils/utils';
 
 const SCROLL_TOP_ID = 'docsScrollTop';
-const CUSTOM_PURPLE = '#690596';
-const CUSTOM_RED = '#e91751';
-const CUSTOM_TURQUOIS = '#058789';
 
 const networkNameToColor: {[network: string]: string} = {
-    [Networks.kovan]: CUSTOM_PURPLE,
-    [Networks.ropsten]: CUSTOM_RED,
-    [Networks.mainnet]: CUSTOM_TURQUOIS,
+    [Networks.kovan]: colors.purple,
+    [Networks.ropsten]: colors.red,
+    [Networks.mainnet]: colors.turquois,
 };
 
 export interface DocumentationAllProps {
@@ -273,7 +271,7 @@ export class Documentation extends
         );
     }
     private renderNetworkBadgesIfExists(sectionName: string) {
-        const networkToAddressByContractName = constants.contractAddresses[this.props.docsVersion];
+        const networkToAddressByContractName = configs.CONTRACT_ADDRESS[this.props.docsVersion];
         const badges = _.map(networkToAddressByContractName,
             (addressByContractName: AddressByContractName, networkName: string) => {
                 const contractAddress = addressByContractName[sectionName];
@@ -281,14 +279,14 @@ export class Documentation extends
                     return null;
                 }
                 const linkIfExists = utils.getEtherScanLinkIfExists(
-                    contractAddress, constants.networkIdByName[networkName], EtherscanLinkSuffixes.address,
+                    contractAddress, constants.NETWORK_ID_BY_NAME[networkName], EtherscanLinkSuffixes.Address,
                 );
                 return (
                     <a
                         key={`badge-${networkName}-${sectionName}`}
                         href={linkIfExists}
                         target="_blank"
-                        style={{color: 'white', textDecoration: 'none'}}
+                        style={{color: colors.white, textDecoration: 'none'}}
                     >
                         <Badge
                             title={networkName}
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index 3c57666e7..695debf5b 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -4,8 +4,7 @@ import {DocsInfo} from 'ts/pages/documentation/docs_info';
 import {Type} from 'ts/pages/documentation/type';
 import {AnchorTitle} from 'ts/pages/shared/anchor_title';
 import {Event, EventArg, HeaderSizes} from 'ts/types';
-
-const CUSTOM_GREEN = 'rgb(77, 162, 75)';
+import {colors} from 'ts/utils/colors';
 
 interface EventDefinitionProps {
     event: Event;
@@ -50,7 +49,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
         );
     }
     private renderEventCode() {
-        const indexed = <span style={{color: CUSTOM_GREEN}}> indexed</span>;
+        const indexed = <span style={{color: colors.green}}> indexed</span>;
         const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => {
             const type = (
                 <Type
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx
index 9505f2aa4..5163e03ac 100644
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ b/packages/website/ts/pages/documentation/method_block.tsx
@@ -1,5 +1,4 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import {Comment} from 'ts/pages/documentation/comment';
 import {DocsInfo} from 'ts/pages/documentation/docs_info';
@@ -14,6 +13,7 @@ import {
     TypeDefinitionByName,
     TypescriptMethod,
 } from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {typeDocUtils} from 'ts/utils/typedoc_utils';
 
 interface MethodBlockProps {
@@ -31,7 +31,7 @@ const styles: Styles = {
     chip: {
         fontSize: 13,
         backgroundColor: colors.lightBlueA700,
-        color: 'white',
+        color: colors.white,
         height: 11,
         borderRadius: 14,
         marginTop: 19,
@@ -150,7 +150,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
                         <div className="bold">
                             {parameter.name}
                         </div>
-                        <div className="pt1" style={{color: colors.grey500, fontSize: 14}}>
+                        <div className="pt1" style={{color: colors.grey, fontSize: 14}}>
                             {isOptional && 'optional'}
                         </div>
                     </div>
diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx
index 9abf01706..1a3b58f81 100644
--- a/packages/website/ts/pages/documentation/source_link.tsx
+++ b/packages/website/ts/pages/documentation/source_link.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import {Source} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 
 interface SourceLinkProps {
     source: Source;
@@ -29,7 +29,7 @@ export function SourceLink(props: SourceLinkProps) {
                 href={sourceCodeUrl}
                 target="_blank"
                 className="underline"
-                style={{color: colors.grey500}}
+                style={{color: colors.grey}}
             >
                 Source
             </a>
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx
index 74b146d91..0516a5c68 100644
--- a/packages/website/ts/pages/documentation/type.tsx
+++ b/packages/website/ts/pages/documentation/type.tsx
@@ -1,24 +1,21 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import {Link as ScrollLink} from 'react-scroll';
 import * as ReactTooltip from 'react-tooltip';
 import {DocsInfo} from 'ts/pages/documentation/docs_info';
 import {TypeDefinition} from 'ts/pages/documentation/type_definition';
 import {Type as TypeDef, TypeDefinitionByName, TypeDocTypes} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';
 
-const BUILT_IN_TYPE_COLOR = '#e69d00';
-const STRING_LITERAL_COLOR = '#4da24b';
-
 // Some types reference other libraries. For these types, we want to link the user to the relevant documentation.
 const typeToUrl: {[typeName: string]: string} = {
-    Web3: constants.WEB3_DOCS_URL,
-    Provider: constants.WEB3_PROVIDER_DOCS_URL,
-    BigNumber: constants.BIGNUMBERJS_GITHUB_URL,
-    DecodedLogEntryEvent: constants.WEB3_DECODED_LOG_ENTRY_EVENT_URL,
-    LogEntryEvent: constants.WEB3_LOG_ENTRY_EVENT_URL,
+    Web3: constants.URL_WEB3_DOCS,
+    Provider: constants.URL_WEB3_PROVIDER_DOCS,
+    BigNumber: constants.URL_BIGNUMBERJS_GITHUB,
+    DecodedLogEntryEvent: constants.URL_WEB3_DECODED_LOG_ENTRY_EVENT,
+    LogEntryEvent: constants.URL_WEB3_LOG_ENTRY_EVENT,
 };
 
 const typePrefix: {[typeName: string]: string} = {
@@ -56,7 +53,7 @@ export function Type(props: TypeProps): any {
         case TypeDocTypes.Intrinsic:
         case TypeDocTypes.Unknown:
             typeName = type.name;
-            typeNameColor = BUILT_IN_TYPE_COLOR;
+            typeNameColor = colors.orange;
             break;
 
         case TypeDocTypes.Reference:
@@ -90,7 +87,7 @@ export function Type(props: TypeProps): any {
 
         case TypeDocTypes.StringLiteral:
             typeName = `'${type.value}'`;
-            typeNameColor = STRING_LITERAL_COLOR;
+            typeNameColor = colors.green;
             break;
 
         case TypeDocTypes.Array:
diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx
index edcf7bf47..09413faaf 100644
--- a/packages/website/ts/pages/documentation/type_definition.tsx
+++ b/packages/website/ts/pages/documentation/type_definition.tsx
@@ -9,10 +9,9 @@ import {MethodSignature} from 'ts/pages/documentation/method_signature';
 import {Type} from 'ts/pages/documentation/type';
 import {AnchorTitle} from 'ts/pages/shared/anchor_title';
 import {CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {utils} from 'ts/utils/utils';
 
-const KEYWORD_COLOR = '#a81ca6';
-
 interface TypeDefinitionProps {
     customType: CustomType;
     shouldAddId?: boolean;
@@ -76,11 +75,15 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                 );
                 break;
 
-            case KindString['Type alias']:
+            case KindString.TypeAlias:
                 typePrefix = 'Type Alias';
                 codeSnippet = (
                     <span>
-                        <span style={{color: KEYWORD_COLOR}}>type</span> {customType.name} ={' '}
+                        <span
+                            style={{color: colors.lightPurple}}
+                        >
+                            type
+                        </span> {customType.name} ={' '}
                         {customType.type.typeDocType !== TypeDocTypes.Reflection ?
                             <Type type={customType.type} docsInfo={this.props.docsInfo} /> :
                             <MethodSignature
diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
index b3fe21da7..296e63f1d 100644
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -1,11 +1,11 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import {Footer} from 'ts/components/footer';
 import {TopBar} from 'ts/components/top_bar';
 import {Question} from 'ts/pages/faq/question';
 import {FAQQuestion, FAQSection, Styles, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 
@@ -411,7 +411,7 @@ const sections: FAQSection[] = [
                 prompt: 'How can I get involved?',
                 answer: (
                     <div>
-                        Join our <a href={constants.ZEROEX_CHAT_URL} target="_blank">Rocket.chat</a>!
+                        Join our <a href={constants.URL_ZEROEX_CHAT} target="_blank">Rocket.chat</a>!
                         As an open source project, 0x will rely on a worldwide community of passionate
                         developers to contribute proposals, ideas and code.
                     </div>
@@ -462,7 +462,7 @@ export class FAQ extends React.Component<FAQProps, FAQState> {
                         {this.renderSections()}
                     </div>
                 </div>
-                <Footer location={this.props.location} />
+                <Footer />
             </div>
         );
     }
diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx
index 917863e4a..534304cc8 100644
--- a/packages/website/ts/pages/faq/question.tsx
+++ b/packages/website/ts/pages/faq/question.tsx
@@ -1,6 +1,7 @@
 import * as _ from 'lodash';
 import {Card, CardHeader, CardText} from 'material-ui/Card';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';
 
 export interface QuestionProps {
     prompt: string;
@@ -31,7 +32,7 @@ export class Question extends React.Component<QuestionProps, QuestionState> {
                     <CardHeader
                         title={this.props.prompt}
                         style={{borderBottom: this.state.isExpanded ? '1px solid rgba(0, 0, 0, 0.19)' : 'none'}}
-                        titleStyle={{color: 'rgb(66, 66, 66)'}}
+                        titleStyle={{color: colors.darkerGrey}}
                         actAsExpander={true}
                         showExpandableButton={true}
                     />
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 7992c7a6c..3d9ebe099 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -1,12 +1,12 @@
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import {Link} from 'react-router-dom';
 import {Footer} from 'ts/components/footer';
 import {TopBar} from 'ts/components/top_bar';
 import {ScreenWidths, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';
 
@@ -35,11 +35,6 @@ interface Project {
 }
 
 const THROTTLE_TIMEOUT = 100;
-const CUSTOM_HERO_BACKGROUND_COLOR = '#404040';
-const CUSTOM_PROJECTS_BACKGROUND_COLOR = '#343333';
-const CUSTOM_WHITE_BACKGROUND = 'rgb(245, 245, 245)';
-const CUSTOM_WHITE_TEXT = '#E4E4E4';
-const CUSTOM_GRAY_TEXT = '#919191';
 
 const boxContents: BoxContent[] = [
     {
@@ -70,67 +65,67 @@ const boxContents: BoxContent[] = [
 const projects: Project[] = [
     {
         logoFileName: 'ethfinex-top.png',
-        projectUrl: constants.ETHFINEX_URL,
+        projectUrl: constants.PROJECT_URL_ETHFINEX,
     },
     {
         logoFileName: 'radar_relay_top.png',
-        projectUrl: constants.RADAR_RELAY_URL,
+        projectUrl: constants.PROJECT_URL_RADAR_RELAY,
     },
     {
         logoFileName: 'paradex_top.png',
-        projectUrl: constants.PARADEX_URL,
+        projectUrl: constants.PROJECT_URL_PARADEX,
     },
     {
         logoFileName: 'the_ocean.png',
-        projectUrl: constants.OCEAN_URL,
+        projectUrl: constants.PROJECT_URL_0CEAN,
     },
     {
         logoFileName: 'dydx.png',
-        projectUrl: constants.DYDX_URL,
+        projectUrl: constants.PROJECT_URL_DYDX,
     },
     {
         logoFileName: 'melonport.png',
-        projectUrl: constants.MELONPORT_URL,
+        projectUrl: constants.PROJECT_URL_MELONPORT,
     },
     {
         logoFileName: 'maker.png',
-        projectUrl: constants.MAKER_URL,
+        projectUrl: constants.PROJECT_URL_MAKER,
     },
     {
         logoFileName: 'dharma.png',
-        projectUrl: constants.DHARMA_URL,
+        projectUrl: constants.PROJECT_URL_DHARMA,
     },
     {
         logoFileName: 'lendroid.png',
-        projectUrl: constants.LENDROID_URL,
+        projectUrl: constants.PROJECT_URL_LENDROID,
     },
     {
         logoFileName: 'district0x.png',
-        projectUrl: constants.DISTRICT_0X_URL,
+        projectUrl: constants.PROJECT_URL_DISTRICT_0X,
     },
     {
         logoFileName: 'aragon.png',
-        projectUrl: constants.ARAGON_URL,
+        projectUrl: constants.PROJECT_URL_ARAGON,
     },
     {
         logoFileName: 'blocknet.png',
-        projectUrl: constants.BLOCKNET_URL,
+        projectUrl: constants.PROJECT_URL_BLOCKNET,
     },
     {
         logoFileName: 'status.png',
-        projectUrl: constants.STATUS_URL,
+        projectUrl: constants.PROJECT_URL_STATUS,
     },
     {
         logoFileName: 'augur.png',
-        projectUrl: constants.AUGUR_URL,
+        projectUrl: constants.PROJECT_URL_AUGUR,
     },
     {
         logoFileName: 'anx.png',
-        projectUrl: constants.OPEN_ANX_URL,
+        projectUrl: constants.PROJECT_URL_OPEN_ANX,
     },
     {
         logoFileName: 'auctus.png',
-        projectUrl: constants.AUCTUS_URL,
+        projectUrl: constants.PROJECT_URL_AUCTUS,
     },
 ];
 
@@ -160,13 +155,13 @@ export class Landing extends React.Component<LandingProps, LandingState> {
     }
     public render() {
         return (
-            <div id="landing" className="clearfix" style={{color: colors.grey800}}>
+            <div id="landing" className="clearfix" style={{color: colors.grey500}}>
                 <DocumentTitle title="0x Protocol"/>
                 <TopBar
                     blockchainIsLoaded={false}
                     location={this.props.location}
                     isNightVersion={true}
-                    style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR, position: 'relative'}}
+                    style={{backgroundColor: colors.heroGrey, position: 'relative'}}
                 />
                 {this.renderHero()}
                 {this.renderProjects()}
@@ -176,12 +171,12 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                 {this.renderBuildingBlocksSection()}
                 {this.renderUseCases()}
                 {this.renderCallToAction()}
-                <Footer location={this.props.location} />
+                <Footer />
             </div>
         );
     }
     private renderHero() {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         const buttonLabelStyle: React.CSSProperties = {
             textTransform: 'none',
             fontSize: isSmallScreen ? 12 : 14,
@@ -197,7 +192,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         return (
             <div
                 className="clearfix py4"
-                style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+                style={{backgroundColor: colors.heroGrey}}
             >
                 <div
                     className="mx-auto max-width-4 clearfix"
@@ -211,7 +206,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                         </div>
                         <div
                             className={left}
-                            style={{color: 'white'}}
+                            style={{color: colors.white}}
                         >
                             <div style={{paddingLeft: isSmallScreen ? 0 : 12}}>
                                 <div
@@ -241,7 +236,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                     </div>
                                     <div className="col col-6 sm-center">
                                         <a
-                                            href={constants.ZEROEX_CHAT_URL}
+                                            href={constants.URL_ZEROEX_CHAT}
                                             target="_blank"
                                             className="text-decoration-none"
                                         >
@@ -249,7 +244,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                                 style={{borderRadius: 6, minWidth: 150}}
                                                 buttonStyle={lightButtonStyle}
                                                 labelColor="white"
-                                                backgroundColor={CUSTOM_HERO_BACKGROUND_COLOR}
+                                                backgroundColor={colors.heroGrey}
                                                 labelStyle={buttonLabelStyle}
                                                 label="Join the community"
                                                 onClick={_.noop}
@@ -265,8 +260,8 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         );
     }
     private renderProjects() {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
-        const isMediumScreen = this.state.screenWidth === ScreenWidths.MD;
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
+        const isMediumScreen = this.state.screenWidth === ScreenWidths.Md;
         const projectList = _.map(projects, (project: Project, i: number) => {
             const colWidth = isSmallScreen ? 3 : (isMediumScreen ? 4 : 2 - (i % 2));
             return (
@@ -291,7 +286,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         });
         const titleStyle: React.CSSProperties = {
             fontFamily: 'Roboto Mono',
-            color: '#A4A4A4',
+            color: colors.grey,
             textTransform: 'uppercase',
             fontWeight: 300,
             letterSpacing: 3,
@@ -299,7 +294,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         return (
             <div
                 className="clearfix py4"
-                style={{backgroundColor: CUSTOM_PROJECTS_BACKGROUND_COLOR}}
+                style={{backgroundColor: colors.projectsGrey}}
             >
                 <div className="mx-auto max-width-4 clearfix sm-px3">
                     <div
@@ -313,13 +308,13 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                     </div>
                     <div
                         className="pt3 mx-auto center"
-                        style={{color: CUSTOM_GRAY_TEXT, fontFamily: 'Roboto Mono', maxWidth: 300, fontSize: 14}}
+                        style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono', maxWidth: 300, fontSize: 14}}
                     >
                         view the{' '}
                         <Link
                             to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
                             className="text-decoration-none underline"
-                            style={{color: CUSTOM_GRAY_TEXT}}
+                            style={{color: colors.landingLinkGrey}}
                         >
                             full list
                         </Link>
@@ -329,11 +324,11 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         );
     }
     private renderTokenizationSection() {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         return (
             <div
                 className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2"
-                style={{backgroundColor: CUSTOM_WHITE_BACKGROUND}}
+                style={{backgroundColor: colors.grey100}}
             >
                 <div className="mx-auto max-width-4 py4 clearfix">
                     {isSmallScreen &&
@@ -382,11 +377,11 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         );
     }
     private renderProtocolSection() {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         return (
             <div
                 className="clearfix lg-py4 md-py4 sm-pt4"
-                style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+                style={{backgroundColor: colors.heroGrey}}
             >
                 <div className="mx-auto max-width-4 lg-py4 md-py4 sm-pt4 clearfix">
                     <div className="col lg-col-6 md-col-6 col-12 sm-center">
@@ -397,7 +392,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                     </div>
                     <div
                         className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto"
-                        style={{color: CUSTOM_WHITE_TEXT, paddingTop: 8, maxWidth: isSmallScreen ? 'none' : 445}}
+                        style={{color: colors.beigeWhite, paddingTop: 8, maxWidth: isSmallScreen ? 'none' : 445}}
                     >
                         <div
                             className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center"
@@ -420,7 +415,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                         </div>
                         <div
                             className="pt3 sm-mx-auto sm-px3"
-                            style={{color: CUSTOM_GRAY_TEXT, maxWidth: isSmallScreen ? 412 : 'none'}}
+                            style={{color: colors.landingLinkGrey, maxWidth: isSmallScreen ? 412 : 'none'}}
                         >
                             <div className="flex" style={{fontSize: 18}}>
                                 <div
@@ -433,7 +428,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                     <Link
                                         to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
                                         className="text-decoration-none underline"
-                                        style={{color: CUSTOM_GRAY_TEXT, fontFamily: 'Roboto Mono'}}
+                                        style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono'}}
                                     >
                                         view all
                                     </Link>
@@ -468,7 +463,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         );
     }
     private renderBuildingBlocksSection() {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         const descriptionStyle: React.CSSProperties = {
             fontFamily: 'Roboto Mono',
             lineHeight: isSmallScreen ? 1.5 : 2,
@@ -485,7 +480,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         return (
             <div
                 className="clearfix lg-pt4 md-pt4"
-                style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+                style={{backgroundColor: colors.heroGrey}}
             >
                 <div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix">
                     {isSmallScreen &&
@@ -493,7 +488,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                     }
                     <div
                         className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3"
-                        style={{color: CUSTOM_WHITE_TEXT}}
+                        style={{color: colors.beigeWhite}}
                     >
                         <div
                             className="pb1 lg-pt4 md-pt4 sm-pt3 lg-h1 md-h1 sm-h2 sm-px3 sm-center"
@@ -517,7 +512,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                             <Link
                                 to={WebsitePaths.ZeroExJs}
                                 className="text-decoration-none underline"
-                                style={{color: CUSTOM_WHITE_TEXT, fontFamily: 'Roboto Mono'}}
+                                style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}}
                             >
                                 0x.js
                             </Link>
@@ -525,7 +520,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                             <Link
                                 to={WebsitePaths.SmartContracts}
                                 className="text-decoration-none underline"
-                                style={{color: CUSTOM_WHITE_TEXT, fontFamily: 'Roboto Mono'}}
+                                style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}}
                             >
                                 smart contract
                             </Link>
@@ -540,7 +535,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         );
     }
     private renderBlockChipImage() {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         return (
             <div className="col lg-col-6 md-col-6 col-12 sm-center">
                 <img
@@ -551,7 +546,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         );
     }
     private renderTokenCloud() {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         return (
             <div className="col lg-col-6 md-col-6 col-12 center">
                 <img
@@ -562,7 +557,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         );
     }
     private renderAssetTypes() {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         const assetTypes: AssetType[] = [
             {
                 title: 'Currency',
@@ -601,11 +596,11 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         return assets;
     }
     private renderInfoBoxes() {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         const boxStyle: React.CSSProperties = {
             maxWidth: 252,
             height: 386,
-            backgroundColor: '#F9F9F9',
+            backgroundColor: colors.grey50,
             borderRadius: 5,
             padding: '10px 24px 24px',
         };
@@ -642,7 +637,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         return (
             <div
                 className="clearfix"
-                style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+                style={{backgroundColor: colors.heroGrey}}
             >
                 <div
                     className="mx-auto py4 sm-mt2 clearfix"
@@ -654,7 +649,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         );
     }
     private renderUseCases() {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
 
         const useCases: UseCase[] = [
             {
@@ -709,14 +704,14 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         const cases = _.map(useCases, (useCase: UseCase) => {
             const style = _.isUndefined(useCase.style) || isSmallScreen ? {} : useCase.style;
             const useCaseBoxStyle = {
-                color: '#A2A2A2',
+                color: colors.grey,
                 border: '1px solid #565656',
                 borderRadius: 4,
                 maxWidth: isSmallScreen ? 375 : 'none',
                 ...style,
             };
             const typeStyle: React.CSSProperties = {
-                color: '#EBEBEB',
+                color: colors.lightGrey,
                 fontSize: 13,
                 textTransform: 'uppercase',
                 fontFamily: 'Roboto Mono',
@@ -753,7 +748,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         return (
             <div
                 className="clearfix pb4 lg-pt2 md-pt2 sm-pt4"
-                style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+                style={{backgroundColor: colors.heroGrey}}
             >
                 <div
                     className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix"
@@ -765,7 +760,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         );
     }
     private renderCallToAction() {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         const buttonLabelStyle: React.CSSProperties = {
             textTransform: 'none',
             fontSize: 15,
@@ -782,14 +777,14 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         return (
             <div
                 className="clearfix pb4"
-                style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+                style={{backgroundColor: colors.heroGrey}}
             >
                 <div
                     className="mx-auto max-width-4 pb4 mb3 clearfix"
                 >
                     <div
                         className={callToActionClassNames}
-                        style={{fontFamily: 'Roboto Mono', color: 'white', lineHeight: isSmallScreen ? 1.7 : 3}}
+                        style={{fontFamily: 'Roboto Mono', color: colors.white, lineHeight: isSmallScreen ? 1.7 : 3}}
                     >
                         Get started on building the decentralized future
                     </div>
@@ -799,7 +794,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                 style={{borderRadius: 6, minWidth: 150}}
                                 buttonStyle={lightButtonStyle}
                                 labelColor={colors.white}
-                                backgroundColor={CUSTOM_HERO_BACKGROUND_COLOR}
+                                backgroundColor={colors.heroGrey}
                                 labelStyle={buttonLabelStyle}
                                 label="Build on 0x"
                                 onClick={_.noop}
diff --git a/packages/website/ts/pages/not_found.tsx b/packages/website/ts/pages/not_found.tsx
index df505792d..bdf9ad688 100644
--- a/packages/website/ts/pages/not_found.tsx
+++ b/packages/website/ts/pages/not_found.tsx
@@ -38,7 +38,7 @@ export class NotFound extends React.Component<NotFoundProps, NotFoundState> {
                         </div>
                     </div>
                 </div>
-                <Footer location={this.props.location} />
+                <Footer />
             </div>
         );
     }
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
index 15ec44399..fcbfaf1cf 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -1,10 +1,10 @@
 import * as _ from 'lodash';
 import MenuItem from 'material-ui/MenuItem';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import {Link as ScrollLink} from 'react-scroll';
 import {VersionDropDown} from 'ts/pages/shared/version_drop_down';
 import {MenuSubsectionsBySection, Styles} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';
 
@@ -55,7 +55,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                             containerId={constants.DOCS_CONTAINER_ID}
                         >
                             <div
-                                style={{color: colors.grey500, cursor: 'pointer'}}
+                                style={{color: colors.grey, cursor: 'pointer'}}
                                 className="pb1"
                             >
                                 {finalSectionName.toUpperCase()}
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 2447a24a2..af5b26631 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -1,6 +1,5 @@
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import {
@@ -11,6 +10,7 @@ import {MarkdownSection} from 'ts/pages/shared/markdown_section';
 import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu';
 import {SectionHeader} from 'ts/pages/shared/section_header';
 import {Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';
@@ -112,7 +112,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                             >
                                 <div id="0xProtocolWiki" />
                                 <h1 className="md-pl2 sm-pl3">
-                                    <a href={constants.GITHUB_WIKI_URL} target="_blank">
+                                    <a href={constants.URL_GITHUB_WIKI} target="_blank">
                                         0x Protocol Wiki
                                     </a>
                                 </h1>
@@ -134,7 +134,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
     private renderSection(sectionName: string) {
         const articles = this.state.articlesBySection[sectionName];
         const renderedArticles = _.map(articles, (article: Article) => {
-            const githubLink = `${constants.GITHUB_WIKI_URL}/edit/master/${sectionName}/${article.fileName}`;
+            const githubLink = `${constants.URL_GITHUB_WIKI}/edit/master/${sectionName}/${article.fileName}`;
             return (
                 <div key={`markdown-section-${article.title}`}>
                     <MarkdownSection
@@ -143,7 +143,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                         headerSize={HeaderSizes.H2}
                         githubLink={githubLink}
                     />
-                    <div className="mb4 mt3 p3 center" style={{backgroundColor: '#f9f5ef'}}>
+                    <div className="mb4 mt3 p3 center" style={{backgroundColor: colors.lightestGrey}}>
                         See a way to make this article better?{' '}
                         <a
                             href={githubLink}