Fixes all lint issues, cleanup

20 files changed, 227 insertions, 278 deletions

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 2569c39c5..92c2dac28 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -5,9 +5,9 @@ import { colors } from 'ts/style/colors';
 
 interface ButtonInterface {
     children: Node | string;
-    transparent?: any;
-    hasIcon?: any;
-    inline?: any;
+    isTransparent?: boolean;
+    hasIcon?: boolean | string;
+    isInline?: boolean;
     href?: string;
     onClick?: () => void;
 }
@@ -31,9 +31,9 @@ export const ButtonWrap = styled.div`
 const StyledButton = styled.button<ButtonInterface>`
     appearance: none;
     border: 1px solid transparent;
-    display: ${props => props.inline && 'inline-block'};
-    background-color: ${props => !props.transparent && colors.brandLight};
-    border-color: ${props => props.transparent && '#6a6a6a'};
+    display: ${props => props.isInline && 'inline-block'};
+    background-color: ${props => !props.isTransparent && colors.brandLight};
+    border-color: ${props => props.isTransparent && '#6a6a6a'};
     color: ${props => props.color || props.theme.textColor};
     text-align: center;
     padding: 14px 22px;
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index 032d2e8a1..13b681572 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -1,11 +1,10 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import styled from 'styled-components';
 import { Link as ReactRouterLink } from 'react-router-dom';
+import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import { Button } from 'ts/@next/components/button';
 import { Column, Section, Wrap } from 'ts/@next/components/layout';
 import { Logo } from 'ts/@next/components/logo';
 import { NewsletterForm } from 'ts/@next/components/newsletterForm';
@@ -57,33 +56,28 @@ const linkRows: LinkRows[] = [
 ];
 
 export const Footer: React.StatelessComponent<FooterInterface> = ({}) => (
-  <FooterWrap
-    bgColor="#181818"
-    noMargin>
-    <Wrap>
-      <Column colWidth="1/2" isNoPadding={true}>
-        <Logo light />
-        <NewsletterForm />
-      </Column>
-
-      <Column colWidth="1/2" isNoPadding={true}>
+    <FooterWrap bgColor="#181818" isNoMargin={true}>
         <Wrap>
-          {_.map(linkRows, (row, index) => (
-            <Column
-              key={`fc-${index}`}
-              colWidth="1/3"
-              isNoPadding={true}>
-              <RowHeading>
-                { row.heading }
-              </RowHeading>
+            <Column colWidth="1/2" isNoPadding={true}>
+                <Logo isLight={true} />
+                <NewsletterForm />
+            </Column>
+
+            <Column colWidth="1/2" isNoPadding={true}>
+                <Wrap>
+                    {_.map(linkRows, (row, index) => (
+                        <Column key={`fc-${index}`} colWidth="1/3" isNoPadding={true}>
+                            <RowHeading>
+                                {row.heading}
+                            </RowHeading>
 
-              <LinkList links={row.links} />
+                            <LinkList links={row.links} />
+                        </Column>
+                    ))}
+                </Wrap>
             </Column>
-          ))}
         </Wrap>
-      </Column>
-    </Wrap>
-  </FooterWrap>
+    </FooterWrap>
 );
 
 const LinkList = (props: LinkListProps) => (
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index c934b29ac..dfe9028c3 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -1,12 +1,12 @@
-import * as _ from 'lodash';
+import _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
 import { Link as ReactRouterLink } from 'react-router-dom';
 
-import { Section, Wrap } from './layout';
-import { Button } from './button';
-import { Logo } from './logo';
+import { Button } from 'ts/@next/components/button';
+import { Section, Wrap } from 'ts/@next/components/layout';
+import { Logo } from 'ts/@next/components/logo';
 
 interface HeaderProps {
 }
diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx
index 112d4ed68..28a8b3c60 100644
--- a/packages/website/ts/@next/components/icon.tsx
+++ b/packages/website/ts/@next/components/icon.tsx
@@ -7,8 +7,6 @@ interface Props {
 }
 
 export const IconClass: React.FunctionComponent<Props> = (props: Props) => {
-    const { icon, size } = props;
-
     return (
         <div />
     );
diff --git a/packages/website/ts/@next/components/image.tsx b/packages/website/ts/@next/components/image.tsx
index f49c8c059..34520b619 100644
--- a/packages/website/ts/@next/components/image.tsx
+++ b/packages/website/ts/@next/components/image.tsx
@@ -3,19 +3,17 @@ import styled from 'styled-components';
 
 interface Props {
     alt?: string;
-    src: any;
-    srcset: any;
-    center: any;
+    src?: any;
+    srcset?: any;
+    isCentered?: boolean;
 }
 
 const ImageClass: React.FunctionComponent<Props> = (props: Props) => {
-    const { src, srcset, alt } = props;
-
     return (
-        <img src={src} {...props} />
+        <img {...props} />
     );
 };
 
-export const Image = styled(ImageClass)`
-    margin: ${(props: Props) => props.center && `0 auto`};
+export const Image = styled(ImageClass)<Props>`
+    margin: ${props => props.isCentered && `0 auto`};
 `;
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 2067b67b0..5c5d1bbda 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -29,7 +29,7 @@ interface WrapProps {
     bgColor?: string;
     isWrapped?: boolean;
     isCentered?: boolean;
-    padding?: number | ('large' | 'default' | number)[];
+    padding?: number | Array<'large' | 'default' | number>;
 }
 
 interface ColumnProps {
@@ -52,7 +52,7 @@ const _getColumnWidth = (args: GetColWidthArgs): string => {
     return `calc(${percentWidth}% - ${gutterDiff}px)`;
 };
 
-const _getPadding = (value: number | (string | number)[]): string => {
+const _getPadding = (value: number | Array<string | number>): string => {
     if (Array.isArray(value)) {
         return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' ');
     } else {
@@ -99,7 +99,7 @@ export const Section = styled.section<SectionProps>`
     margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`};
     margin-left: ${props => props.isFullWidth && `-${GUTTER}px`};
     background-color: ${props => props.bgColor};
-    border: 1px dotted rgba(0, 255, 0, 0.3);
+    border: 1px dotted rgba(0, 255, 0, 0.15);
 
     @media (min-width: 1560px) {
         width: ${props => props.isFullWidth && '100vw'};
@@ -141,7 +141,7 @@ export const WrapGrid = styled(WrapBase)`
 
 export const Column = styled.div<ColumnProps>`
     padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')};
-    border: 1px dotted rgba(255, 0, 0, 0.3);
+    border: 1px dotted rgba(255, 0, 0, 0.15);
     background-color: ${props => props.bgColor};
     border-color: ${props => props.borderColor && `${props.borderColor}`};
 
diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx
index 5d6258f37..9f147e3fb 100644
--- a/packages/website/ts/@next/components/logo.tsx
+++ b/packages/website/ts/@next/components/logo.tsx
@@ -2,14 +2,13 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { ThemeInterface } from 'ts/@next/components/siteWrap';
-import LogoIcon from '../icons/logo-with-type.svg';
+import LogoIcon from 'ts/@next/icons/logo-with-type.svg';
 
 interface LogoInterface {
-    light?: any;
+    isLight?: boolean;
     theme?: ThemeInterface;
 }
 
-
 // Note let's refactor this
 // is it absolutely necessary to have a stateless component
 // to pass props down into the styled icon?
@@ -21,11 +20,11 @@ const Icon = styled(LogoIcon)`
     flex-shrink: 0;
 
     path {
-        fill: ${(props: LogoInterface) => props.light ? '#fff' : props.theme.textColor};
+        fill: ${(props: LogoInterface) => props.isLight ? '#fff' : props.theme.textColor};
     }
 `;
 
-export const Logo: React.StatelessComponent<LogoInterface> = (props) => (
+export const Logo: React.StatelessComponent<LogoInterface> = (props: LogoInterface) => (
     <StyledLogo>
         <Icon {...props} />
     </StyledLogo>
diff --git a/packages/website/ts/@next/components/newsletterForm.tsx b/packages/website/ts/@next/components/newsletterForm.tsx
index 422d25bec..4ff9663ba 100644
--- a/packages/website/ts/@next/components/newsletterForm.tsx
+++ b/packages/website/ts/@next/components/newsletterForm.tsx
@@ -5,8 +5,6 @@ import { colors } from 'ts/style/colors';
 
 import {Button} from 'ts/@next/components/button';
 
-import ArrowIcon from 'ts/@next/icons/form-arrow.svg';
-
 interface InputProps {
     name: string;
     label: string;
@@ -15,9 +13,9 @@ interface InputProps {
 interface Props {
 }
 
-const Input = ({ ...props }) => {
+const Input = (props: InputProps) => {
     const { name, label } = props;
-    const id = 'input-' + name;
+    const id = `input-${name}`;
 
     return (
         <>
@@ -31,7 +29,7 @@ export const NewsletterForm: React.StatelessComponent = (props: Props) => (
     <StyledForm>
         <InputWrapper>
             <Input name="email" type="email" label="Email Address" />
-            <SubmitButton hasIcon>
+            <SubmitButton hasIcon={true}>
                 Submit
             </SubmitButton>
         </InputWrapper>
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index cd99ce5a0..f7b2c4df2 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled, { ThemeProvider } from 'styled-components';
+import { ThemeProvider } from 'styled-components';
 
 import { Footer } from 'ts/@next/components/footer';
 import { Header } from 'ts/@next/components/header';
@@ -18,7 +18,7 @@ export interface ThemeInterface {
     [key: string]: {
         bgColor: string;
         textColor: string;
-    }
+    };
 }
 
 const GLOBAL_THEMES: ThemeInterface = {
@@ -34,7 +34,7 @@ const GLOBAL_THEMES: ThemeInterface = {
         bgColor: '#e0e0e0',
         textColor: '#000000',
     },
-}
+};
 
 export const SiteWrap: React.StatelessComponent<Props> = props => {
     const {
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index 22026d810..a746cb3b9 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-
 interface HeadingProps {
     asElement?: 'h1'| 'h2'| 'h3'| 'h4';
     size?: 'default' | 'medium' | 'large' | 'small';
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index 7e8f2ebdb..fd9e67cb4 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -1,13 +1,11 @@
-import { withTheme, createGlobalStyle } from 'styled-components';
+import { createGlobalStyle, withTheme } from 'styled-components';
 import {cssReset} from 'ts/@next/constants/cssReset';
-import {colors} from 'ts/style/colors';
-
 
 interface GlobalStyle {
     theme: {
         bgColor: string;
         textColor: string;
-    }
+    };
 }
 
 const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
diff --git a/packages/website/ts/@next/pages/about/jobs.tsx b/packages/website/ts/@next/pages/about/jobs.tsx
index 35d4432c5..4f85b9945 100644
--- a/packages/website/ts/@next/pages/about/jobs.tsx
+++ b/packages/website/ts/@next/pages/about/jobs.tsx
@@ -1,18 +1,10 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { Link as ReactRouterLink } from 'react-router-dom';
+import styled from 'styled-components';
 
-import { colors } from 'ts/style/colors';
-
-import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
+import { Column, Section, Wrap } from 'ts/@next/components/layout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 import { Heading, Paragraph } from 'ts/@next/components/text';
-import { Image } from 'ts/@next/components/image';
-
-import CoinIcon from 'ts/@next/icons/illustrations/coin.svg';
-import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg';
-import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg';
-import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg';
 
 export const NextAboutJobs = () => (
   <SiteWrap theme="light">
@@ -25,9 +17,12 @@ export const NextAboutJobs = () => (
             <ChapterLink to="/next/about/jobs">Jobs</ChapterLink>
         </Column>
         <Column colWidth="2/3">
-            <Heading size="medium">Join Us in Our Mission</Heading>
-            <Paragraph size="medium">To create a tokenized world where all value can flow freely.
-We are powering a growing ecosystem of decentralized applications and solving novel challenges to make our technology intuitive, flexible, and accessible to all. Read more about our mission, and join us in building financial infrastructure upon which the exchange of anything of value will take place.</Paragraph>
+            <Heading size="medium">
+                Join Us in Our Mission
+            </Heading>
+            <Paragraph size="medium">
+                To create a tokenized world where all value can flow freely.We are powering a growing ecosystem of decentralized applications and solving novel challenges to make our technology intuitive, flexible, and accessible to all. Read more about our mission, and join us in building financial infrastructure upon which the exchange of anything of value will take place.
+            </Paragraph>
         </Column>
       </Wrap>
     </Section>
@@ -35,8 +30,12 @@ We are powering a growing ecosystem of decentralized applications and solving no
     <Section bgColor="#F3F6F4">
       <Wrap>
         <Column colWidth="1/3">
-            <Heading size="medium">Powered by a Diverse Worldwide Community</Heading>
-            <Paragraph>We're a highly technical team with varied backgrounds in engineering, science, business, finance, and research. While the core team is headquartered in San Francisco, there are 30+ teams building on 0x and hundreds of thousands of participants behind our efforts globally. We're passionate about open-source software and decentralized technology's potential to act as an equalizing force in the world.</Paragraph>
+            <Heading size="medium">
+                Powered by a Diverse Worldwide Community
+            </Heading>
+            <Paragraph>
+                We're a highly technical team with varied backgrounds in engineering, science, business, finance, and research. While the core team is headquartered in San Francisco, there are 30+ teams building on 0x and hundreds of thousands of participants behind our efforts globally. We're passionate about open-source software and decentralized technology's potential to act as an equalizing force in the world.
+            </Paragraph>
         </Column>
 
         <Column colWidth="2/3">
@@ -95,7 +94,9 @@ We are powering a growing ecosystem of decentralized applications and solving no
                     <Heading size="small">Open Positition</Heading>
                 </Column>
                 <Column colWidth="1/3">
-                    <Paragraph isMuted={true}>We're always interested in talking to talented people. Send us an application if you think you're the right fit.</Paragraph>
+                    <Paragraph isMuted={true}>
+                        We're always interested in talking to talented people. Send us an application if you think you're the right fit.
+                    </Paragraph>
                 </Column>
                 <Column colWidth="1/3">
                     <Paragraph><a href="#">Apply</a></Paragraph>
@@ -118,6 +119,7 @@ const BenefitsList = styled.ul`
     }
 `;
 
+// Lets refactor these chapter links into button perhaps as a <Link type={xxx} />
 const ChapterLink = styled(ReactRouterLink)`
     font-size: 1.222222222rem;
     display: block;
diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx
index fd52d1a16..234f7254d 100644
--- a/packages/website/ts/@next/pages/about/mission.tsx
+++ b/packages/website/ts/@next/pages/about/mission.tsx
@@ -1,15 +1,12 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { Link as ReactRouterLink } from 'react-router-dom';
-
-import { colors } from 'ts/style/colors';
+import styled from 'styled-components';
 
 import { Image } from 'ts/@next/components/image';
-import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
+import { Column, Section, Wrap } from 'ts/@next/components/layout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 import { Heading, Paragraph } from 'ts/@next/components/text';
 
-import CoinIcon from 'ts/@next/icons/illustrations/coin.svg';
 import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg';
 import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg';
 import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg';
@@ -32,11 +29,9 @@ export const NextAboutMission = () => (
       </Wrap>
     </Section>
 
-    <Section
-        isFullWidth={true}
-        isNoPadding={true}>
+    <Section isFullWidth={true} isNoPadding={true}>
         <Wrap width="full">
-            <Image src="/images/@next/about/about-mission@2x.jpg" height="320" alt="" center />
+            <Image src="/images/@next/about/about-mission@2x.jpg" alt="" isCentered={true} />
         </Wrap>
     </Section>
 
diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx
index e222434b4..3a500ff39 100644
--- a/packages/website/ts/@next/pages/about/press.tsx
+++ b/packages/website/ts/@next/pages/about/press.tsx
@@ -1,18 +1,10 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { Link as ReactRouterLink } from 'react-router-dom';
+import styled from 'styled-components';
 
-import { colors } from 'ts/style/colors';
-
-import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
+import { Column, Section, Wrap } from 'ts/@next/components/layout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 import { Heading, Paragraph } from 'ts/@next/components/text';
-import { Image } from 'ts/@next/components/image';
-
-import CoinIcon from 'ts/@next/icons/illustrations/coin.svg';
-import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg';
-import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg';
-import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg';
 
 export const NextAboutPress = () => (
   <SiteWrap theme="light">
diff --git a/packages/website/ts/@next/pages/about/team.tsx b/packages/website/ts/@next/pages/about/team.tsx
index 1a88a7ff7..1c7ff319b 100644
--- a/packages/website/ts/@next/pages/about/team.tsx
+++ b/packages/website/ts/@next/pages/about/team.tsx
@@ -1,18 +1,12 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { Link as ReactRouterLink } from 'react-router-dom';
+import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-import { Column, Section, Wrap, WrapGrid, WrapCentered } from 'ts/@next/components/layout';
+import { Column, Section, Wrap } from 'ts/@next/components/layout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 import { Heading, Paragraph } from 'ts/@next/components/text';
-import { Image } from 'ts/@next/components/image';
-
-import CoinIcon from 'ts/@next/icons/illustrations/coin.svg';
-import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg';
-import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg';
-import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg';
 
 interface TeamMember {
     name: string;
diff --git a/packages/website/ts/@next/pages/ecosystem.tsx b/packages/website/ts/@next/pages/ecosystem.tsx
index 199c9038e..094d5e126 100644
--- a/packages/website/ts/@next/pages/ecosystem.tsx
+++ b/packages/website/ts/@next/pages/ecosystem.tsx
@@ -1,6 +1,4 @@
 import * as React from 'react';
-import styled from 'styled-components';
-import { Link as ReactRouterLink } from 'react-router-dom';
 
 import { colors } from 'ts/style/colors';
 
@@ -8,19 +6,19 @@ import {Button} from 'ts/@next/components/button';
 import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 import { Heading, Paragraph } from 'ts/@next/components/text';
-import { Image } from 'ts/@next/components/image';
 
-import CoinIcon from 'ts/@next/icons/illustrations/coin.svg';
-import ConsistentlyShipIcon from 'ts/@next/icons/illustrations/consistently-ship.svg';
-import LongTermImpactIcon from 'ts/@next/icons/illustrations/long-term-impact.svg';
 import RightThingIcon from 'ts/@next/icons/illustrations/right-thing.svg';
 
 export const NextEcosystem = () => (
   <SiteWrap theme="light">
     <Section>
         <WrapCentered>
-            <Heading size="medium" isCentered={true}>Jumpstart your Business on 0x</Heading>
-            <Paragraph size="medium" isCentered={true} isMuted={true}>The Ecosystem Acceleration Program gives teams access to a variety of services including funding, personalized technical support, and recruiting assistance. We created the Ecosystem Acceleration Program to bolster the expansion of both infrastructure projects and relayers building on 0x.</Paragraph>
+            <Heading size="medium" isCentered={true}>
+                Jumpstart your Business on 0x
+            </Heading>
+            <Paragraph size="medium" isCentered={true} isMuted={true}>
+                The Ecosystem Acceleration Program gives teams access to a variety of services including funding, personalized technical support, and recruiting assistance. We created the Ecosystem Acceleration Program to bolster the expansion of both infrastructure projects and relayers building on 0x.
+            </Paragraph>
             <div>
                 <a href="#">Get Started</a>
                 <a href="#">Learn More</a>
@@ -31,39 +29,68 @@ export const NextEcosystem = () => (
     <Section bgColor={colors.backgroundLight}>
         <Wrap>
             <Column>
-                <Heading size="small" color={colors.brandDark} isCentered={true}>Join a vibrant ecosystem of projects in the 0x Network.</Heading>
+                <Heading size="small" color={colors.brandDark} isCentered={true}>
+                    Join a vibrant ecosystem of projects in the 0x Network.
+                </Heading>
             </Column>
         </Wrap>
       <Wrap>
+        {/* This */}
         <Column colWidth="1/3">
             <RightThingIcon width="60" />
-            <Heading color={colors.textDarkPrimary} size="small">Milestone Grants</Heading>
-            <Paragraph isMuted={0.5}>Receive non-dilutive capital ranging from $10,000 to $100,000, with grant sizes awarded based on the quality of your team, vision, execution, and community involvement.</Paragraph>
+            <Heading color={colors.textDarkPrimary} size="small">
+                Milestone Grants
+            </Heading>
+            <Paragraph isMuted={0.5}>
+                Receive non-dilutive capital ranging from $10,000 to $100,000, with grant sizes awarded based on the quality of your team, vision, execution, and community involvement.
+            </Paragraph>
         </Column>
+
         <Column colWidth="1/3">
             <RightThingIcon width="60" />
-            <Heading color={colors.textDarkPrimary} size="small">VC Introductions</Heading>
-            <Paragraph isMuted={0.5}>Connect with leading venture capital firms that could participate in your next funding round.</Paragraph>
+            <Heading color={colors.textDarkPrimary} size="small">
+                VC Introductions
+            </Heading>
+            <Paragraph isMuted={0.5}>
+                Connect with leading venture capital firms that could participate in your next funding round.
+            </Paragraph>
         </Column>
+
         <Column colWidth="1/3">
             <RightThingIcon width="60" />
-            <Heading color={colors.textDarkPrimary} size="small">Technical Support</Heading>
-            <Paragraph isMuted={0.5}>Receive ongoing technical assistance from knowledgeable and responsive 0x developers.</Paragraph>
+            <Heading color={colors.textDarkPrimary} size="small">
+                Technical Support
+            </Heading>
+            <Paragraph isMuted={0.5}>
+                Receive ongoing technical assistance from knowledgeable and responsive 0x developers.
+            </Paragraph>
         </Column>
         <Column colWidth="1/3">
             <RightThingIcon width="60" />
-            <Heading color={colors.textDarkPrimary} size="small">Recruiting Assistance</Heading>
-            <Paragraph isMuted={0.5}>Grow your team by accessing an exclusive pool of top engineering and business operations talent.</Paragraph>
+            <Heading color={colors.textDarkPrimary} size="small">
+                Recruiting Assistance
+            </Heading>
+            <Paragraph isMuted={0.5}>
+                Grow your team by accessing an exclusive pool of top engineering and business operations talent.
+            </Paragraph>
         </Column>
         <Column colWidth="1/3">
             <RightThingIcon width="60" />
-            <Heading color={colors.textDarkPrimary} size="small">Marketing and Design Help</Heading>
-            <Paragraph isMuted={0.5}>Get strategic advice on product positioning, customer acquisition, and UI/UX design that can impact the growth of your business.</Paragraph>
+            <Heading color={colors.textDarkPrimary} size="small">
+                Marketing and Design Help
+            </Heading>
+            <Paragraph isMuted={0.5}>
+                Get strategic advice on product positioning, customer acquisition, and UI/UX design that can impact the growth of your business.
+            </Paragraph>
         </Column>
         <Column colWidth="1/3">
             <RightThingIcon width="60" />
-            <Heading color={colors.textDarkPrimary} size="small">Legal Resources</Heading>
-            <Paragraph isMuted={0.5}>Obtain important legal documents and resources that will help you navigate the regulatory landscape.</Paragraph>
+            <Heading color={colors.textDarkPrimary} size="small">
+                Legal Resources
+            </Heading>
+            <Paragraph isMuted={0.5}>
+                Obtain important legal documents and resources that will help you navigate the regulatory landscape.
+            </Paragraph>
         </Column>
       </Wrap>
     </Section>
@@ -72,8 +99,12 @@ export const NextEcosystem = () => (
         <Wrap>
             <Column colWidth="1/2" isPadLarge={true}>
                 <WrapCentered>
-                    <Heading>Apply for the program now</Heading>
-                    <Paragraph>Have questions? Please join our Discord channel</Paragraph>
+                    <Heading>
+                        Apply for the program now
+                    </Heading>
+                    <Paragraph>
+                        Have questions? Please join our Discord channel
+                    </Paragraph>
                 </WrapCentered>
             </Column>
 
@@ -81,7 +112,7 @@ export const NextEcosystem = () => (
                 <WrapCentered>
                     <div>
                         <Button href="#">Apply Now</Button>
-                        <Button href="#" transparent>Join Discord</Button>
+                        <Button href="#" isTransparent={true}>Join Discord</Button>
                     </div>
                 </WrapCentered>
             </Column>
@@ -89,29 +120,3 @@ export const NextEcosystem = () => (
     </Section>
   </SiteWrap>
 );
-
-const BenefitsList = styled.ul`
-    color: #000;
-    list-style: disc;
-    columns: auto 2;
-    column-gap: 80px;
-
-    li {
-        margin-bottom: 1em;
-    }
-`;
-
-const ChapterLink = styled(ReactRouterLink)`
-    font-size: 1.222222222rem;
-    display: block;
-    opacity: 0.8;
-    margin-bottom: 1.666666667rem;
-
-    &:first-child {
-        opacity: 1;
-    }
-
-    &:hover {
-        opacity: 1;
-    }
-`;
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index a8707cdd7..29975193d 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import styled from 'styled-components';
 
 import {colors} from 'ts/style/colors';
 
@@ -8,9 +7,9 @@ import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout';
 import {SiteWrap} from 'ts/@next/components/siteWrap';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 
-import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg';
 import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
 import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
+import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg';
 
 export const Next0xInstant = () => (
     <SiteWrap>
@@ -22,9 +21,7 @@ export const Next0xInstant = () => (
             </WrapCentered>
         </Section>
 
-        <Section
-            isFullWidth={true}
-            isNoPadding={true}>
+        <Section isFullWidth={true} isNoPadding={true}>
             <Wrap width="full">
                 <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
             </Wrap>
@@ -108,7 +105,7 @@ export const Next0xInstant = () => (
                     <WrapCentered>
                         <div>
                             <Button href="#">Explore the Docs</Button>
-                            <Button href="#" transparent>Get in Touch</Button>
+                            <Button href="#" isTransparent={true}>Get in Touch</Button>
                         </div>
                     </WrapCentered>
                 </Column>
@@ -125,18 +122,3 @@ export const Next0xInstant = () => (
         </Section>
     </SiteWrap>
 );
-
-const ChapterLink = styled.a `
-    font-size: 1.222222222rem;
-    display: block;
-    opacity: 0.8;
-    margin-bottom: 1.666666667rem;
-
-    &:first-child {
-        opacity: 1;
-    }
-
-    &:hover {
-        opacity: 1;
-    }
-`;
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 5f90ffb6e..b39ee409d 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as _ from 'lodash';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import {colors} from 'ts/style/colors';
@@ -14,17 +14,6 @@ import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
 import ReadyToBuildIcon from 'ts/@next/icons/illustrations/ready-to-build.svg';
 import SupportIcon from 'ts/@next/icons/illustrations/support.svg';
 
-/**
-    Note(ez): Maybe when we're done at least with a basic structure,
-    we can take out each section into e.g. LandingSectionIntro.tsx in
-    @next/sections/landing ? so then our routes would only look like
-
-    <SiteWrap>
-        <LandingSectionIntro />
-        <LandingSectionWhatever />
-    </SiteWrap>
-*/
-
 interface ProjectLogo {
     name: string;
     imageUrl?: string;
@@ -83,11 +72,11 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
                     </Paragraph>
 
                     <ButtonWrap>
-                        <Button inline>
+                        <Button isInline={true}>
                             Get Started
                         </Button>
 
-                        <Button transparent inline>
+                        <Button isTransparent={true} isInline={true}>
                             Learn More
                         </Button>
                     </ButtonWrap>
@@ -99,22 +88,18 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
             </Wrap>
         </Section>
 
-        <Section
-            bgColor={colors.backgroundDark}
-            isPadLarge={true}>
+        <Section bgColor={colors.backgroundDark} isPadLarge={true}>
             <WrapCentered width="narrow">
                 <ProtocolIcon/>
 
-                <Paragraph
-                    size="large"
-                    isCentered={true}>
+                <Paragraph size="large" isCentered={true}>
                     0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based
                     tokens. Anyone in the world can use 0x to service a wide variety of markets
                     ranging from gaming items to financial instruments to assets that could have
                     near existed before.
                 </Paragraph>
 
-                <Button href="#" transparent>
+                <Button href="#" isTransparent={true}>
                     Discover how developers use 0x
                 </Button>
             </WrapCentered>
@@ -122,61 +107,39 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
             {/* Note you can also pass in a string "large/default" or a number for custom margins */}
             <Wrap padding={['large', 0, 0, 0]}>
                 {/* NOTE: this probably should be withComponent as part of a <dl> */}
-                <Column
-                    colWidth="1/3"
-                    isNoPadding={true}>
-                    <Heading
-                        size="medium"
-                        isCentered={true}>
+                <Column colWidth="1/3" isNoPadding={true}>
+                    <Heading size="medium" isCentered={true}>
                         873,435
                     </Heading>
 
-                    <Paragraph
-                        isMuted={0.4}
-                        isCentered={true}
-                        isNoMargin={true}>
+                    <Paragraph isMuted={0.4} isCentered={true} isNoMargin={true}>
                         Number of transactions
                     </Paragraph>
                 </Column>
 
-                <Column
-                    colWidth="1/3"
-                    isNoPadding={true}>
-                    <Heading
-                        size="medium"
-                        isCentered={true}>
+                <Column colWidth="1/3" isNoPadding={true}>
+                    <Heading size="medium" isCentered={true}>
                         $203M
                     </Heading>
 
-                    <Paragraph
-                        isMuted={0.4}
-                        isCentered={true}
-                        isNoMargin={true}>
+                    <Paragraph isMuted={0.4} isCentered={true} isNoMargin={true}>
                         Total volume
                     </Paragraph>
                 </Column>
 
-                <Column
-                    colWidth="1/3"
-                    isNoPadding={true}>
-                    <Heading
-                        size="medium"
-                        isCentered={true}>
+                <Column colWidth="1/3" isNoPadding={true}>
+                    <Heading size="medium" isCentered={true}>
                         227,372
                     </Heading>
 
-                    <Paragraph
-                        isMuted={0.4}
-                        isCentered={true}
-                        isNoMargin={true}>
+                    <Paragraph isMuted={0.4} isCentered={true} isNoMargin={true}>
                         Number of relayers
                     </Paragraph>
                 </Column>
             </Wrap>
         </Section>
 
-        <Section
-            isPadLarge={true}>
+        <Section isPadLarge={true}>
             <WrapCentered>
                 <Heading size="small">You're in good company</Heading>
             </WrapCentered>
diff --git a/packages/website/ts/@next/pages/launchKit.tsx b/packages/website/ts/@next/pages/launchKit.tsx
index dd0ff0758..cd86f66c9 100644
--- a/packages/website/ts/@next/pages/launchKit.tsx
+++ b/packages/website/ts/@next/pages/launchKit.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import styled from 'styled-components';
 
 import {colors} from 'ts/style/colors';
 
@@ -8,17 +7,22 @@ import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout';
 import {SiteWrap} from 'ts/@next/components/siteWrap';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 
-import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg';
-import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
 import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
+import TokensIcon from 'ts/@next/icons/illustrations/tokens.svg';
 
 export const NextLaunchKit = () => (
     <SiteWrap>
         <Section>
             <WrapCentered>
-                <Heading size="medium" isCentered={true}>0x Launch Kit</Heading>
-                <Paragraph size="medium" isCentered={true} isMuted={true}>The definitive starting point for building a business on top of the 0x protocol.</Paragraph>
-                <Button href="#">Get Started</Button>
+                <Heading size="medium" isCentered={true}>
+                    0x Launch Kit
+                </Heading>
+                <Paragraph size="medium" isCentered={true} isMuted={true}>
+                    The definitive starting point for building a business on top of the 0x protocol.
+                </Paragraph>
+                <Button href="#">
+                    Get Started
+                </Button>
             </WrapCentered>
         </Section>
 
@@ -31,7 +35,9 @@ export const NextLaunchKit = () => (
                 >
                     <WrapCentered>
                         <ProtocolIcon width="140" />
-                        <Paragraph isCentered={true}>Tap into and share liquidity with other relayers</Paragraph>
+                        <Paragraph isCentered={true}>
+                            Tap into and share liquidity with other relayers
+                        </Paragraph>
                     </WrapCentered>
                 </Column>
                 <Column
@@ -41,7 +47,9 @@ export const NextLaunchKit = () => (
                 >
                     <WrapCentered>
                         <ProtocolIcon width="140" />
-                        <Paragraph isCentered={true}>Tap into and share liquidity with other relayers</Paragraph>
+                        <Paragraph isCentered={true}>
+                            Tap into and share liquidity with other relayers
+                        </Paragraph>
                     </WrapCentered>
                 </Column>
                 <Column
@@ -51,7 +59,9 @@ export const NextLaunchKit = () => (
                 >
                     <WrapCentered>
                         <ProtocolIcon width="140" />
-                        <Paragraph isCentered={true}>Tap into and share liquidity with other relayers</Paragraph>
+                        <Paragraph isCentered={true}>
+                            Tap into and share liquidity with other relayer
+                        </Paragraph>
                     </WrapCentered>
                 </Column>
             </Wrap>
@@ -64,8 +74,12 @@ export const NextLaunchKit = () => (
                 </Column>
 
                 <Column colWidth="2/3">
-                    <Heading size="small">Working on a new token?</Heading>
-                    <Paragraph isMuted={true}>Easily create a secondary market for your asset/asset class</Paragraph>
+                    <Heading size="small">
+                        Working on a new token?
+                    </Heading>
+                    <Paragraph isMuted={true}>
+                        Easily create a secondary market for your asset/asset clas
+                    </Paragraph>
                 </Column>
             </Wrap>
         </Section>
@@ -76,8 +90,12 @@ export const NextLaunchKit = () => (
                 </Column>
 
                 <Column colWidth="2/3">
-                    <Heading size="small">Working on a new game?</Heading>
-                    <Paragraph isMuted={true}>Easily create an in-app marketplace</Paragraph>
+                    <Heading size="small">
+                        Working on a new game?
+                    </Heading>
+                    <Paragraph isMuted={true}>
+                        Easily create an in-app marketplace
+                    </Paragraph>
                 </Column>
             </Wrap>
         </Section>
@@ -88,8 +106,12 @@ export const NextLaunchKit = () => (
                 </Column>
 
                 <Column colWidth="2/3">
-                    <Heading size="small">No exchange in your location?</Heading>
-                    <Paragraph isMuted={true}>Build a 0x relayer for your contry’s market</Paragraph>
+                    <Heading size="small">
+                        No exchange in your location?
+                    </Heading>
+                    <Paragraph isMuted={true}>
+                        Build a 0x relayer for your contry’s market
+                    </Paragraph>
                 </Column>
             </Wrap>
         </Section>
@@ -97,17 +119,31 @@ export const NextLaunchKit = () => (
         <Section bgColor={colors.backgroundDark}>
             <Wrap>
                 <Column colWidth="1/2">
-                    <Heading>0x Instant Configurator</Heading>
-                    <Paragraph>Liquidity Source</Paragraph>
-                    <Paragraph>What tokens can users buy? (select all)</Paragraph>
-                    <Paragraph>Transaction fee ETH address</Paragraph>
-                    <Paragraph>Fee Percentage</Paragraph>
+                    <Heading>
+                        0x Instant Configurator
+                    </Heading>
+                    <Paragraph>
+                        Liquidity Source
+                    </Paragraph>
+                    <Paragraph>
+                        What tokens can users buy? (select all)
+                    </Paragraph>
+                    <Paragraph>
+                        Transaction fee ETH address
+                    </Paragraph>
+                    <Paragraph>
+                        Fee Percentage
+                    </Paragraph>
                 </Column>
 
                 <Column colWidth="1/2">
-                    <Paragraph>Code Snippet</Paragraph>
+                    <Paragraph>
+                        Code Snippet
+                    </Paragraph>
                     <a href="#">Explore the Docs</a>
-                    <Paragraph>&lt;code snippet&gt;</Paragraph>
+                    <Paragraph>
+                        &lt;code snippet&gt;
+                    </Paragraph>
                 </Column>
             </Wrap>
         </Section>
@@ -116,16 +152,24 @@ export const NextLaunchKit = () => (
             <Wrap>
                 <Column colWidth="1/2" isPadLarge={true}>
                     <WrapCentered>
-                        <Heading>Need more flexibility?</Heading>
-                        <Paragraph>Dive into our docs, or contact us if needed</Paragraph>
+                        <Heading>
+                            Need more flexibility?
+                        </Heading>
+                        <Paragraph>
+                            Dive into our docs, or contact us if needed
+                        </Paragraph>
                     </WrapCentered>
                 </Column>
 
                 <Column colWidth="1/2" isPadLarge={true}>
                     <WrapCentered>
                         <div>
-                            <Button href="#">Explore the Docs</Button>
-                            <Button href="#" transparent>Get in Touch</Button>
+                            <Button href="#">
+                                Explore the Docs
+                            </Button>
+                            <Button href="#" isTransparent={true}>
+                                Get in Touch
+                            </Button>
                         </div>
                     </WrapCentered>
                 </Column>
@@ -135,25 +179,14 @@ export const NextLaunchKit = () => (
         <Section>
             <Wrap width="full">
                 <Column>
-                    <Paragraph size="small" isMuted={0.5}>Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations.</Paragraph>
-                    <Paragraph size="small" isMuted={0.5}>See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations.</Paragraph>
+                    <Paragraph size="small" isMuted={0.5}>
+                        Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations.
+                    </Paragraph>
+                    <Paragraph size="small" isMuted={0.5}>
+                        See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations.
+                    </Paragraph>
                 </Column>
             </Wrap>
         </Section>
     </SiteWrap>
 );
-
-const ChapterLink = styled.a `
-    font-size: 1.222222222rem;
-    display: block;
-    opacity: 0.8;
-    margin-bottom: 1.666666667rem;
-
-    &:first-child {
-        opacity: 1;
-    }
-
-    &:hover {
-        opacity: 1;
-    }
-`;
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index 52268bd26..d922aac9e 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -9,7 +9,6 @@ import { Heading, Paragraph } from 'ts/@next/components/text';
 
 import CoinIcon from 'ts/@next/icons/illustrations/coin.svg';
 import CustomizeIcon from 'ts/@next/icons/illustrations/customize.svg';
-import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
 import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
 
 export const NextWhy = () => (