Consolidate all custom colors and material-ui colors into a colors module

2017-12-18 09:15:12 +01:00
parent 98c01c2f80
commit df9d3e3e16
48 changed files with 169 additions and 226 deletions
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -1,10 +1,10 @@
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import {Blockchain} from 'ts/blockchain';
 import {BlockchainErrs} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';

--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -5,8 +5,8 @@ import * as React from 'react';
 import {EthAmountInput} from 'ts/components/inputs/eth_amount_input';
 import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
 import {Side, Token, TokenState} from 'ts/types';
-
-const DARK_BLUE = '#4D5481';
+import {colors} from 'ts/utils/colors';
+import {constants} from 'ts/utils/constants';

 interface EthWethConversionDialogProps {
    direction: Side;
@@ -75,7 +75,7 @@ export class EthWethConversionDialog extends
                        {this.renderCurrency(isWrappedVersion)}
                        <div style={{paddingTop: 68}}>
                            <i
-                                style={{fontSize: 28, color: DARK_BLUE}}
+                                style={{fontSize: 28, color: colors.darkBlue}}
                                className="zmdi zmdi-arrow-right"
                            />
                        </div>
@@ -124,7 +124,7 @@ export class EthWethConversionDialog extends
            <div className="mx-auto pt2">
                <div
                    className="center"
-                    style={{color: DARK_BLUE}}
+                    style={{color: colors.darkBlue}}
                >
                    {name}
                </div>
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -2,7 +2,6 @@ import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
 import {
    Table,
    TableBody,
@@ -17,6 +16,7 @@ import ReactTooltip = require('react-tooltip');
 import {Blockchain} from 'ts/blockchain';
 import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button';
 import {Dispatcher} from 'ts/redux/dispatcher';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';

--- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
+++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
@@ -1,7 +1,7 @@
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';

 interface PortalDisclaimerDialogProps {
    isOpen: boolean;
--- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
+++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
@@ -1,6 +1,6 @@
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {constants} from 'ts/utils/constants';

--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -7,6 +7,7 @@ import {Blockchain} from 'ts/blockchain';
 import {EthWethConversionDialog} from 'ts/components/dialogs/eth_weth_conversion_dialog';
 import {Dispatcher} from 'ts/redux/dispatcher';
 import {BlockchainCallErrs, Side, Token, TokenState} from 'ts/types';
+import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 import {errorReporter} from 'ts/utils/error_reporter';
 import {utils} from 'ts/utils/utils';
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -2,7 +2,7 @@ import {ZeroEx} from '0x.js';
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Divider from 'material-ui/Divider';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import {
    Table,
    TableBody,
@@ -29,7 +29,6 @@ import {constants} from 'ts/utils/constants';

 const PRECISION = 5;
 const DATE_FORMAT = 'D/M/YY';
-const LIGHT_GRAY = '#A5A5A5';
 const ICON_DIMENSION = 40;
 const ETHER_ICON_PATH = '/images/ether.png';
 const OUTDATED_WETH_ICON_PATH = '/images/wrapped_eth_gray.png';
@@ -93,7 +92,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
                        <a
                            target="_blank"
                            href="https://weth.io/"
-                            style={{color: LIGHT_GRAY}}
+                            style={{color: colors.gray}}
                        >
                            <div className="flex">
                                <div>About Wrapped ETH</div>
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -28,12 +28,11 @@ import {
    TokenStateByAddress,
    WebsitePaths,
 } from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 import {errorReporter} from 'ts/utils/error_reporter';
 import {utils} from 'ts/utils/utils';

-const CUSTOM_LIGHT_GRAY = '#BBBBBB';
-
 interface FillOrderProps {
    blockchain: Blockchain;
    blockchainErr: BlockchainErrs;
@@ -222,7 +221,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                <div className="clearfix pb2" style={{width: '100%'}}>
                    <div className="inline left">Order details</div>
                    <div className="inline right" style={{minWidth: 208}}>
-                        <div className="col col-4 pl2" style={{color: '#BEBEBE'}}>
+                        <div className="col col-4 pl2" style={{color: colors.gray}}>
                            Maker:
                        </div>
                        <div className="col col-2 pr1">
@@ -274,7 +273,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
                       </div>
                       <div
                           className="col col-5 pl1"
-                           style={{color: CUSTOM_LIGHT_GRAY, paddingTop: 39}}
+                           style={{color: colors.lightGray, paddingTop: 39}}
                       >
                           = {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol}
                       </div>
--- a/packages/website/ts/components/fill_warning_dialog.tsx
+++ b/packages/website/ts/components/fill_warning_dialog.tsx
@@ -1,6 +1,6 @@
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';

 interface FillWarningDialogProps {
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -4,6 +4,7 @@ import {
  Link,
 } from 'react-router-dom';
 import {WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';

 interface MenuItemsBySection {
@@ -24,9 +25,6 @@ enum Sections {
 }

 const ICON_DIMENSION = 16;
-const CUSTOM_DARK_GRAY = '#393939';
-const CUSTOM_LIGHT_GRAY = '#CACACA';
-const CUSTOM_LIGHTEST_GRAY = '#9E9E9E';
 const menuItemsBySection: MenuItemsBySection = {
    Documentation: [
        {
@@ -118,14 +116,16 @@ interface FooterState {}
 export class Footer extends React.Component<FooterProps, FooterState> {
    public render() {
        return (
-            <div className="relative pb4 pt2" style={{backgroundColor: CUSTOM_DARK_GRAY}}>
+            <div className="relative pb4 pt2" style={{backgroundColor: colors.darkerGray}}>
                <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{color: 'white'}}>
                    <div className="col lg-col-4 md-col-4 col-12 left">
                        <div className="sm-mx-auto" style={{width: 148}}>
                            <div>
                                <img src="/images/protocol_logo_white.png" height="30" />
                            </div>
-                            <div style={{fontSize: 11, color: CUSTOM_LIGHTEST_GRAY, paddingLeft: 37, paddingTop: 2}}>
+                            <div
+                                style={{fontSize: 11, color: colors.gray, paddingLeft: 37, paddingTop: 2}}
+                            >
                                © ZeroEx, Intl.
                            </div>
                        </div>
@@ -209,7 +209,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
    private renderHeader(title: string) {
        const headerStyle = {
            textTransform: 'uppercase',
-            color: CUSTOM_LIGHT_GRAY,
+            color: colors.lightGray,
            letterSpacing: 2,
            fontFamily: 'Roboto Mono',
            fontSize: 13,
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import Divider from 'material-ui/Divider';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Blockchain} from 'ts/blockchain';
 import {ExpirationInput} from 'ts/components/inputs/expiration_input';
--- a/packages/website/ts/components/generate_order/new_token_form.tsx
+++ b/packages/website/ts/components/generate_order/new_token_form.tsx
@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import {Blockchain} from 'ts/blockchain';
--- a/packages/website/ts/components/inputs/address_input.tsx
+++ b/packages/website/ts/components/inputs/address_input.tsx
@@ -1,6 +1,6 @@
 import {addressUtils} from '@0xproject/utils';
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import {RequiredLabel} from 'ts/components/ui/required_label';
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -1,7 +1,7 @@
 import {ZeroEx} from '0x.js';
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 import {BalanceBoundedInput} from 'ts/components/inputs/balance_bounded_input';
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Blockchain} from 'ts/blockchain';
 import {AssetPicker} from 'ts/components/generate_order/asset_picker';
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -1,7 +1,7 @@
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import {Route, Switch} from 'react-router-dom';
@@ -171,7 +171,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
                            <div className="mx-auto flex">
                                <div
                                    className="col col-2 pr2 pt1 sm-hide xs-hide"
-                                    style={{overflow: 'hidden', backgroundColor: 'rgb(39, 39, 39)', color: 'white'}}
+                                    style={{overflow: 'hidden', backgroundColor: colors.darkestGray, color: 'white'}}
                                >
                                    <PortalMenu menuItemStyle={{color: 'white'}} />
                                </div>
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -7,7 +7,7 @@ import Divider from 'material-ui/Divider';
 import FlatButton from 'material-ui/FlatButton';
 import FloatingActionButton from 'material-ui/FloatingActionButton';
 import RaisedButton from 'material-ui/RaisedButton';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import ContentAdd from 'material-ui/svg-icons/content/add';
 import ContentRemove from 'material-ui/svg-icons/content/remove';
 import {
@@ -333,9 +333,9 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                </Dialog>
                <Dialog
                    title="Request Dharma Loan"
-                    titleStyle={{fontWeight: 100, backgroundColor: 'rgb(250, 250, 250)'}}
-                    bodyStyle={{backgroundColor: 'rgb(37, 37, 37)'}}
-                    actionsContainerStyle={{backgroundColor: 'rgb(250, 250, 250)'}}
+                    titleStyle={{fontWeight: 100, backgroundColor: colors.white}}
+                    bodyStyle={{backgroundColor: colors.dharmaDarkGray}}
+                    actionsContainerStyle={{backgroundColor: colors.white}}
                    autoScrollBodyContent={true}
                    actions={dharmaDialogActions}
                    open={this.state.isDharmaDialogVisible}
--- a/packages/website/ts/components/top_bar.tsx
+++ b/packages/website/ts/components/top_bar.tsx
@@ -1,7 +1,6 @@
 import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
 import MenuItem from 'material-ui/MenuItem';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
 import ReactTooltip = require('react-tooltip');
@@ -12,11 +11,10 @@ import {Identicon} from 'ts/components/ui/identicon';
 import {DocsInfo} from 'ts/pages/documentation/docs_info';
 import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu';
 import {DocsMenu, MenuSubsectionsBySection, Styles, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
+import {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';

-const CUSTOM_DARK_GRAY = '#231F20';
-const SECTION_HEADER_COLOR = 'rgb(234, 234, 234)';
-
 interface TopBarProps {
    userAddress?: string;
    blockchainIsLoaded: boolean;
@@ -63,7 +61,7 @@ const styles: Styles = {
    },
    menuItem: {
        fontSize: 14,
-        color: CUSTOM_DARK_GRAY,
+        color: colors.darkestGray,
        paddingTop: 6,
        paddingBottom: 6,
        marginTop: 17,
@@ -222,7 +220,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                {this.renderPortalMenu()}
                {this.renderDocsMenu()}
                {this.renderWiki()}
-                <div className="pl1 py1 mt3" style={{backgroundColor: SECTION_HEADER_COLOR}}>Website</div>
+                <div className="pl1 py1 mt3" style={{backgroundColor: colors.lightestGray}}>Website</div>
                <Link to={WebsitePaths.Home} className="text-decoration-none">
                    <MenuItem className="py2">Home</MenuItem>
                </Link>
@@ -286,7 +284,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
        const sectionTitle = `${this.props.docsInfo.displayName} Docs`;
        return (
            <div className="lg-hide md-hide">
-                <div className="pl1 py1" style={{backgroundColor: SECTION_HEADER_COLOR}}>{sectionTitle}</div>
+                <div className="pl1 py1" style={{backgroundColor: colors.lightestGray}}>{sectionTitle}</div>
                <NestedSidebarMenu
                    topLevelMenu={this.props.menu}
                    menuSubsectionsBySection={this.props.menuSubsectionsBySection}
@@ -306,7 +304,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {

        return (
            <div className="lg-hide md-hide">
-                <div className="pl1 py1" style={{backgroundColor: SECTION_HEADER_COLOR}}>0x Protocol Wiki</div>
+                <div className="pl1 py1" style={{backgroundColor: colors.lightestGray}}>0x Protocol Wiki</div>
                <NestedSidebarMenu
                    topLevelMenu={this.props.menuSubsectionsBySection}
                    menuSubsectionsBySection={this.props.menuSubsectionsBySection}
@@ -323,7 +321,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {

        return (
            <div className="lg-hide md-hide">
-                <div className="pl1 py1" style={{backgroundColor: SECTION_HEADER_COLOR}}>Portal DApp</div>
+                <div className="pl1 py1" style={{backgroundColor: colors.lightestGray}}>Portal DApp</div>
                <PortalMenu
                    menuItemStyle={{color: 'black'}}
                    onClick={this.onMenuButtonClick.bind(this)}
--- a/packages/website/ts/components/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar_menu_item.tsx
@@ -1,10 +1,10 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
+import {colors} from 'ts/utils/colors';

-const CUSTOM_DARK_GRAY = '#231F20';
 const DEFAULT_STYLE = {
-    color: CUSTOM_DARK_GRAY,
+    color: colors.darkestGray,
 };

 interface TopBarMenuItemProps {
@@ -28,7 +28,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
    public render() {
        const primaryStyles = this.props.isPrimary ? {
            borderRadius: 4,
-            border: `1px solid ${this.props.isNightVersion ? '#979797' : 'rgb(230, 229, 229)'}`,
+            border: `1px solid ${this.props.isNightVersion ? colors.gray : colors.grayishPink}`,
            marginTop: 15,
            paddingLeft: 9,
            paddingRight: 9,
@@ -36,7 +36,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
        } : {};
        const menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color;
        const linkColor = _.isUndefined(menuItemColor) ?
-            CUSTOM_DARK_GRAY :
+            colors.darkestGray :
            menuItemColor;
        return (
            <div
--- a/packages/website/ts/components/track_token_confirmation.tsx
+++ b/packages/website/ts/components/track_token_confirmation.tsx
@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Party} from 'ts/components/ui/party';
 import {Token, TokenByAddress} from 'ts/types';
--- a/packages/website/ts/components/trade_history/trade_history_item.tsx
+++ b/packages/website/ts/components/trade_history/trade_history_item.tsx
@@ -2,7 +2,7 @@ import {ZeroEx} from '0x.js';
 import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as moment from 'moment';
 import * as React from 'react';
 import * as ReactTooltip from 'react-tooltip';
--- a/packages/website/ts/components/ui/alert.tsx
+++ b/packages/website/ts/components/ui/alert.tsx
@@ -1,8 +1,6 @@
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import {AlertTypes} from 'ts/types';
-
-const CUSTOM_GREEN = 'rgb(137, 199, 116)';
+import {colors} from 'ts/utils/colors';

 interface AlertProps {
    type: AlertTypes;
@@ -12,8 +10,8 @@ interface AlertProps {
 export function Alert(props: AlertProps) {
    const isAlert = props.type === AlertTypes.ERROR;
    const errMsgStyles = {
-        background: isAlert ? colors.red200 : CUSTOM_GREEN,
-        color: 'white',
+        background: isAlert ? colors.red200 : colors.lightestGreen,
+        color: colors.white,
        marginTop: 10,
        padding: 4,
        paddingLeft: 8,
--- a/packages/website/ts/components/ui/copy_icon.tsx
+++ b/packages/website/ts/components/ui/copy_icon.tsx
@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 import * as ReactDOM from 'react-dom';
--- a/packages/website/ts/components/ui/drop_down_menu_item.tsx
+++ b/packages/website/ts/components/ui/drop_down_menu_item.tsx
@@ -2,9 +2,9 @@ import * as _ from 'lodash';
 import Menu from 'material-ui/Menu';
 import Popover from 'material-ui/Popover';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';

 const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300;
-const CUSTOM_LIGHT_GRAY = '#848484';
 const DEFAULT_STYLE = {
    fontSize: 14,
 };
@@ -72,7 +72,7 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
                        onMouseEnter={this.onHover.bind(this)}
                        onMouseLeave={this.onHoverOff.bind(this)}
                    >
-                        <Menu style={{color: CUSTOM_LIGHT_GRAY}}>
+                        <Menu style={{color: colors.gray}}>
                            {this.props.subMenuItems}
                        </Menu>
                    </div>
--- a/packages/website/ts/components/ui/etherscan_icon.tsx
+++ b/packages/website/ts/components/ui/etherscan_icon.tsx
@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
 import {EtherscanLinkSuffixes} from 'ts/types';
--- a/packages/website/ts/components/ui/input_label.tsx
+++ b/packages/website/ts/components/ui/input_label.tsx
@@ -1,4 +1,4 @@
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';

 export interface InputLabelProps {
--- a/packages/website/ts/components/ui/labeled_switcher.tsx
+++ b/packages/website/ts/components/ui/labeled_switcher.tsx
@@ -1,73 +0,0 @@
-import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
-import * as React from 'react';
-
-const CUSTOM_BLUE = '#63A6F1';
-
-interface LabeledSwitcherProps {
-    labelLeft: string;
-    labelRight: string;
-    isLeftInitiallySelected: boolean;
-    onLeftLabelClickAsync: () => Promise<boolean>;
-    onRightLabelClickAsync: () => Promise<boolean>;
-}
-
-interface LabeledSwitcherState {
-    isLeftSelected: boolean;
-}
-
-export class LabeledSwitcher extends React.Component<LabeledSwitcherProps, LabeledSwitcherState> {
-    constructor(props: LabeledSwitcherProps) {
-        super(props);
-        this.state = {
-            isLeftSelected: props.isLeftInitiallySelected,
-        };
-    }
-    public render() {
-        const isLeft = true;
-        return (
-            <div
-                className="rounded clearfix"
-            >
-                {this.renderLabel(this.props.labelLeft, isLeft, this.state.isLeftSelected)}
-                {this.renderLabel(this.props.labelRight, !isLeft, !this.state.isLeftSelected)}
-            </div>
-        );
-    }
-    private renderLabel(title: string, isLeft: boolean, isSelected: boolean) {
-        const borderStyle = `2px solid ${isSelected ? '#4F8BCF' : '#DADADA'}`;
-        const style = {
-            cursor: 'pointer',
-            backgroundColor: isSelected ? CUSTOM_BLUE : colors.grey200,
-            color: isSelected ? 'white' : '#A5A5A5',
-            boxShadow: isSelected ? `inset 0px 0px 4px #4083CE` : 'inset 0px 0px 4px #F7F6F6',
-            borderTop: borderStyle,
-            borderBottom: borderStyle,
-            [isLeft ? 'borderLeft' : 'borderRight']: borderStyle,
-            paddingTop: 12,
-            paddingBottom: 12,
-        };
-        return (
-            <div
-                className={`col col-6 center p1 ${isLeft ? 'rounded-left' : 'rounded-right'}`}
-                style={style}
-                onClick={this.onLabelClickAsync.bind(this, isLeft)}
-            >
-                {title}
-            </div>
-        );
-    }
-    private async onLabelClickAsync(isLeft: boolean): Promise<void> {
-        this.setState({
-            isLeftSelected: isLeft,
-        });
-        const didSucceed = isLeft ?
-                           await this.props.onLeftLabelClickAsync() :
-                           await this.props.onRightLabelClickAsync();
-        if (!didSucceed) {
-            this.setState({
-                isLeftSelected: !isLeft,
-            });
-        }
-    }
-}
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -1,6 +1,7 @@
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
+import {colors} from 'ts/utils/colors';
 import {utils} from 'ts/utils/utils';

 const COMPLETE_STATE_SHOW_LENGTH_MS = 2000;
@@ -32,7 +33,7 @@ export class LifeCycleRaisedButton extends
    public static defaultProps: Partial<LifeCycleRaisedButtonProps> = {
        isDisabled: false,
        backgroundColor: 'white',
-        labelColor: 'rgb(97, 97, 97)',
+        labelColor: colors.darkGray,
    };
    private buttonTimeoutId: number;
    private didUnmount: boolean;
--- a/packages/website/ts/components/ui/party.tsx
+++ b/packages/website/ts/components/ui/party.tsx
@@ -1,15 +1,14 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
 import {EthereumAddress} from 'ts/components/ui/ethereum_address';
 import {Identicon} from 'ts/components/ui/identicon';
 import {EtherscanLinkSuffixes} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {utils} from 'ts/utils/utils';

 const IMAGE_DIMENSION = 100;
 const IDENTICON_DIAMETER = 95;
-const CHECK_MARK_GREEN = 'rgb(0, 195, 62)';

 interface PartyProps {
    label: string;
@@ -94,7 +93,7 @@ export class Party extends React.Component<PartyProps, PartyState> {
                                className="mx-auto"
                                style={{fontSize: 13, width: 127}}
                            >
-                                <span style={{color: isRegistered ? CHECK_MARK_GREEN : colors.red500}}>
+                                <span style={{color: isRegistered ? colors.brightGreen : colors.red500}}>
                                    <i
                                        className={`zmdi ${isRegistered ? 'zmdi-check-circle' : 'zmdi-alert-triangle'}`}
                                    />
--- a/packages/website/ts/components/ui/required_label.tsx
+++ b/packages/website/ts/components/ui/required_label.tsx
@@ -1,4 +1,4 @@
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';

 export interface RequiredLabelProps {
--- a/packages/website/ts/components/ui/swap_icon.tsx
+++ b/packages/website/ts/components/ui/swap_icon.tsx
@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';

 interface SwapIconProps {
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -3,7 +3,7 @@ import 'whatwg-fetch';

 import {bigNumberConfigs} from '@0xproject/utils';
 import BigNumber from 'bignumber.js';
-import {colors, getMuiTheme, MuiThemeProvider} from 'material-ui/styles';
+import {getMuiTheme, MuiThemeProvider} from 'material-ui/styles';
 import * as React from 'react';
 import {render} from 'react-dom';
 import {Provider} from 'react-redux';
@@ -20,6 +20,7 @@ import {NotFound} from 'ts/pages/not_found';
 import {Wiki} from 'ts/pages/wiki/wiki';
 import {reducer, State} from 'ts/redux/reducer';
 import {WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
 import {constants} from 'ts/utils/constants';
 injectTapEventPlugin();

@@ -29,43 +30,39 @@ bigNumberConfigs.configure();
 tradeHistoryStorage.clearIfRequired();
 trackedTokenStorage.clearIfRequired();

-const CUSTOM_GREY = 'rgb(39, 39, 39)';
-const CUSTOM_GREEN = 'rgb(102, 222, 117)';
-const CUSTOM_DARKER_GREEN = 'rgb(77, 197, 92)';
-
 import 'basscss/css/basscss.css';
 import 'less/all.less';

 const muiTheme = getMuiTheme({
    appBar: {
        height: 45,
-        color: 'white',
-        textColor: 'black',
+        color: colors.white,
+        textColor: colors.black,
    },
    palette: {
-        pickerHeaderColor: constants.CUSTOM_BLUE,
-        primary1Color: constants.CUSTOM_BLUE,
-        primary2Color: constants.CUSTOM_BLUE,
+        pickerHeaderColor: colors.lightBlue,
+        primary1Color: colors.lightBlue,
+        primary2Color: colors.lightBlue,
        textColor: colors.grey700,
    },
    datePicker: {
        color: colors.grey700,
-        textColor: 'white',
-        calendarTextColor: 'white',
-        selectColor: CUSTOM_GREY,
-        selectTextColor: 'white',
+        textColor: colors.white,
+        calendarTextColor: colors.white,
+        selectColor: colors.darkestGray,
+        selectTextColor: colors.white,
    },
    timePicker: {
        color: colors.grey700,
-        textColor: 'white',
-        accentColor: 'white',
-        headerColor: CUSTOM_GREY,
-        selectColor: CUSTOM_GREY,
-        selectTextColor: CUSTOM_GREY,
+        textColor: colors.white,
+        accentColor: colors.white,
+        headerColor: colors.darkestGray,
+        selectColor: colors.darkestGray,
+        selectTextColor: colors.darkestGray,
    },
    toggle: {
-        thumbOnColor: CUSTOM_GREEN,
-        trackOnColor: CUSTOM_DARKER_GREEN,
+        thumbOnColor: colors.limeGreen,
+        trackOnColor: colors.lightGreen,
    },
 });

--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -1,17 +1,16 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 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 {configs} from 'ts/utils/configs';
 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 DARKEST_GRAY = colors.darkestGray;

 const teamRow1: ProfileInfo[] = [
    {
@@ -153,12 +152,12 @@ export class About extends React.Component<AboutProps, AboutState> {
    }
    public render() {
        return (
-            <div style={{backgroundColor: CUSTOM_BACKGROUND_COLOR}}>
+            <div style={{backgroundColor: colors.lightestGray}}>
                <DocumentTitle title="0x About Us"/>
                <TopBar
                    blockchainIsLoaded={false}
                    location={this.props.location}
-                    style={{backgroundColor: CUSTOM_BACKGROUND_COLOR}}
+                    style={{backgroundColor: colors.lightestGray}}
                />
                <div
                    id="about"
@@ -176,7 +175,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: DARKEST_GRAY, 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 +194,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.gray, fontSize: 24, fontFamily: 'Roboto Mono'}}
                        >
                            Advisors:
                        </div>
@@ -206,13 +205,13 @@ 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={{fontSize: 30, color: DARKEST_GRAY, fontFamily: 'Roboto Mono', letterSpacing: 7.5}}
                        >
                            WE'RE HIRING
                        </div>
                        <div
                            className="pb4 mb4"
-                            style={{fontSize: 16, color: CUSTOM_GRAY, lineHeight: 1.5, letterSpacing: '0.5px'}}
+                            style={{fontSize: 16, color: DARKEST_GRAY, lineHeight: 1.5, letterSpacing: '0.5px'}}
                        >
                            We are seeking outstanding candidates to{' '}
                            <a
--- 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.darkGray}}
                    >
                        {props.profileInfo.title.toUpperCase()}
                    </div>
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -1,7 +1,7 @@
 import findVersions = require('find-versions');
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import {
@@ -34,19 +34,17 @@ import {
    TypeDefinitionByName,
    TypescriptMethod,
 } from 'ts/types';
+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 {
--- 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
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ b/packages/website/ts/pages/documentation/method_block.tsx
@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Comment} from 'ts/pages/documentation/comment';
 import {DocsInfo} from 'ts/pages/documentation/docs_info';
--- a/packages/website/ts/pages/documentation/source_link.tsx
+++ b/packages/website/ts/pages/documentation/source_link.tsx
@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Source} from 'ts/types';

--- a/packages/website/ts/pages/documentation/type.tsx
+++ b/packages/website/ts/pages/documentation/type.tsx
@@ -1,17 +1,15 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 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 {configs} from 'ts/utils/configs';
 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,
@@ -56,7 +54,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 +88,7 @@ export function Type(props: TypeProps): any {

        case TypeDocTypes.StringLiteral:
            typeName = `'${type.value}'`;
-            typeNameColor = STRING_LITERAL_COLOR;
+            typeNameColor = colors.green;
            break;

        case TypeDocTypes.Array:
--- 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;
@@ -80,7 +79,11 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                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
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import {Footer} from 'ts/components/footer';
--- 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.darkerGray}}
                        actAsExpander={true}
                        showExpandableButton={true}
                    />
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -1,12 +1,13 @@
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 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 {configs} from 'ts/utils/configs';
 import {constants} from 'ts/utils/constants';
 import {utils} from 'ts/utils/utils';

@@ -35,11 +36,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[] = [
    {
@@ -166,7 +162,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                    blockchainIsLoaded={false}
                    location={this.props.location}
                    isNightVersion={true}
-                    style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR, position: 'relative'}}
+                    style={{backgroundColor: colors.heroGray, position: 'relative'}}
                />
                {this.renderHero()}
                {this.renderProjects()}
@@ -197,7 +193,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        return (
            <div
                className="clearfix py4"
-                style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+                style={{backgroundColor: colors.heroGray}}
            >
                <div
                    className="mx-auto max-width-4 clearfix"
@@ -249,7 +245,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.heroGray}
                                                labelStyle={buttonLabelStyle}
                                                label="Join the community"
                                                onClick={_.noop}
@@ -291,7 +287,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        });
        const titleStyle: React.CSSProperties = {
            fontFamily: 'Roboto Mono',
-            color: '#A4A4A4',
+            color: colors.gray,
            textTransform: 'uppercase',
            fontWeight: 300,
            letterSpacing: 3,
@@ -299,7 +295,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        return (
            <div
                className="clearfix py4"
-                style={{backgroundColor: CUSTOM_PROJECTS_BACKGROUND_COLOR}}
+                style={{backgroundColor: colors.projectsGray}}
            >
                <div className="mx-auto max-width-4 clearfix sm-px3">
                    <div
@@ -313,13 +309,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.landingLinkGray, 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.landingLinkGray}}
                        >
                            full list
                        </Link>
@@ -333,7 +329,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        return (
            <div
                className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2"
-                style={{backgroundColor: CUSTOM_WHITE_BACKGROUND}}
+                style={{backgroundColor: colors.offWhite}}
            >
                <div className="mx-auto max-width-4 py4 clearfix">
                    {isSmallScreen &&
@@ -386,7 +382,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        return (
            <div
                className="clearfix lg-py4 md-py4 sm-pt4"
-                style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+                style={{backgroundColor: colors.heroGray}}
            >
                <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 +393,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 +416,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.landingLinkGray, maxWidth: isSmallScreen ? 412 : 'none'}}
                        >
                            <div className="flex" style={{fontSize: 18}}>
                                <div
@@ -433,7 +429,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.landingLinkGray, fontFamily: 'Roboto Mono'}}
                                    >
                                        view all
                                    </Link>
@@ -485,7 +481,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.heroGray}}
            >
                <div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix">
                    {isSmallScreen &&
@@ -493,7 +489,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 +513,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 +521,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>
@@ -605,7 +601,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        const boxStyle: React.CSSProperties = {
            maxWidth: 252,
            height: 386,
-            backgroundColor: '#F9F9F9',
+            backgroundColor: colors.lightestGray,
            borderRadius: 5,
            padding: '10px 24px 24px',
        };
@@ -642,7 +638,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        return (
            <div
                className="clearfix"
-                style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+                style={{backgroundColor: colors.heroGray}}
            >
                <div
                    className="mx-auto py4 sm-mt2 clearfix"
@@ -709,14 +705,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.gray,
                border: '1px solid #565656',
                borderRadius: 4,
                maxWidth: isSmallScreen ? 375 : 'none',
                ...style,
            };
            const typeStyle: React.CSSProperties = {
-                color: '#EBEBEB',
+                color: colors.lightestGray,
                fontSize: 13,
                textTransform: 'uppercase',
                fontFamily: 'Roboto Mono',
@@ -753,7 +749,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.heroGray}}
            >
                <div
                    className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix"
@@ -782,7 +778,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
        return (
            <div
                className="clearfix pb4"
-                style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+                style={{backgroundColor: colors.heroGray}}
            >
                <div
                    className="mx-auto max-width-4 pb4 mb3 clearfix"
@@ -799,7 +795,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.heroGray}
                                labelStyle={buttonLabelStyle}
                                label="Build on 0x"
                                onClick={_.noop}
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import MenuItem from 'material-ui/MenuItem';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import {Link as ScrollLink} from 'react-scroll';
 import {VersionDropDown} from 'ts/pages/shared/version_drop_down';
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
-import {colors} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import {
@@ -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.lightestGray}}>
                        See a way to make this article better?{' '}
                        <a
                            href={githubLink}
--- a/packages/website/ts/utils/colors.ts
+++ b/packages/website/ts/utils/colors.ts
@@ -0,0 +1,30 @@
+import {colors as materialUiColors} from 'material-ui/styles';
+
+export const colors = {
+    ...materialUiColors,
+    offWhite: 'rgb(245, 245, 245)',
+    beigeWhite: '#E4E4E4',
+    grayishPink: 'rgb(230, 229, 229)',
+    lightestGray: '#F0F0F0',
+    lightGray: '#BBBBBB',
+    gray: '#A5A5A5',
+    darkGray: '#818181',
+    darkerGray: '#393939',
+    heroGray: '#404040',
+    projectsGray: '#343333',
+    landingLinkGray: '#919191',
+    darkestGray: 'rgb(39, 39, 39)',
+    dharmaDarkGray: 'rgb(37, 37, 37)',
+    lightBlue: '#60a4f4',
+    darkBlue: '#4D5481',
+    lightPurple: '#a81ca6',
+    purple: '#690596',
+    red: '#e91751',
+    turquois: '#058789',
+    orange: '#e69d00',
+    lightestGreen: 'rgb(137, 199, 116)',
+    lightGreen: 'rgb(77, 197, 92)',
+    limeGreen: 'rgb(102, 222, 117)',
+    green: '#4da24b',
+    brightGreen: 'rgb(0, 195, 62)',
+};
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -26,7 +26,6 @@ export const constants = {
    BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208',
    BITLY_ENDPOINT: 'https://api-ssl.bitly.com',
    BLOG_URL: 'https://blog.0xproject.com/latest',
-    CUSTOM_BLUE: '#60a4f4',
    DEFAULT_DERIVATION_PATH: `44'/60'/0'`,
    ETHER_FAUCET_ENDPOINT: 'https://faucet.0xproject.com',
    FEE_RECIPIENT_ADDRESS: '0x0000000000000000000000000000000000000000',