From df9d3e3e16e5a00ea84369691c46a6e4a6a53049 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 18 Dec 2017 09:15:12 +0100
Subject: Consolidate all custom colors and material-ui colors into a colors
 module

---
 packages/website/ts/pages/about/about.tsx          | 19 ++++----
 packages/website/ts/pages/about/profile.tsx        |  3 +-
 .../ts/pages/documentation/documentation.tsx       | 12 ++---
 .../ts/pages/documentation/event_definition.tsx    |  5 +-
 .../ts/pages/documentation/method_block.tsx        |  2 +-
 .../website/ts/pages/documentation/source_link.tsx |  2 +-
 packages/website/ts/pages/documentation/type.tsx   | 10 ++--
 .../ts/pages/documentation/type_definition.tsx     |  9 ++--
 packages/website/ts/pages/faq/faq.tsx              |  2 +-
 packages/website/ts/pages/faq/question.tsx         |  3 +-
 packages/website/ts/pages/landing/landing.tsx      | 54 ++++++++++------------
 .../ts/pages/shared/nested_sidebar_menu.tsx        |  2 +-
 packages/website/ts/pages/wiki/wiki.tsx            |  4 +-
 13 files changed, 61 insertions(+), 66 deletions(-)

(limited to 'packages/website/ts/pages')

diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 6aeb4ae2d..e0780c220 100644
--- 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
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
index 86aa788b2..cb87cc946 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.darkGray}}
                     >
                         {props.profileInfo.title.toUpperCase()}
                     </div>
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 687ba0fcc..768c6710f 100644
--- 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 {
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..df580fcd0 100644
--- 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';
diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx
index 9abf01706..9fe919c4e 100644
--- 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';
 
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx
index 74b146d91..393ee3a51 100644
--- 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:
diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx
index 4ad959631..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;
@@ -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
diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
index 630a48346..25fc9934c 100644
--- 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';
diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx
index 917863e4a..ed50f6948 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.darkerGray}}
                         actAsExpander={true}
                         showExpandableButton={true}
                     />
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index cf373bbf8..56d021b8d 100644
--- 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}
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
index 15ec44399..7a8c9abbd 100644
--- 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';
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 2447a24a2..68383ac36 100644
--- 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}
-- 
cgit v1.2.3