diff --git a/_config.yml b/_config.yml
index 5dac9c7..2cff818 100644
--- a/_config.yml
+++ b/_config.yml
@@ -27,6 +27,8 @@ navigation:
 footer-navigation:
  - label: "Documentation"
    url: "/docs"
+ - label: "Community"
+   url: "https://browsersync.herokuapp.com/"
  - label: "Brand Assets"
    url: "/brand-assets"
 
diff --git a/_src/_includes/footer.hbs b/_src/_includes/footer.hbs
index 0cc4ccb..80f8bec 100644
--- a/_src/_includes/footer.hbs
+++ b/_src/_includes/footer.hbs
@@ -21,7 +21,7 @@
     <div class="container">
         <nav>
             <ul class="site-nav">
-                {{#each site.navigation}}
+                {{#each site.footer-navigation}}
                 <li class="nav__item {{#current this.url}}active{{/current}}"><a href="{{this.url}}" class="nav-link">{{ this.label }}</a></li>
                 {{/each}}
                 <li class="nav__item credit__thumb">
diff --git a/_src/_includes/header.hbs b/_src/_includes/header.hbs
index 5a418e5..79ff9d9 100644
--- a/_src/_includes/header.hbs
+++ b/_src/_includes/header.hbs
@@ -3,7 +3,7 @@
         <nav>
             <ul class="site-nav">
                 <li class="nav__item logo">
-                    <a href="/" class="nav-link">{{inc src="icon.hbs" icon="logo" class=""}} Browser<span>sync</span></a>
+                    <a href="/" class="nav-link">{{inc src="icon.hbs" icon="wordmark" class=""}}</a>
                 </li>
                 {{#each site.navigation}}
                 <li class="nav__item {{#current this.url}}active{{/current}}"><a href="{{this.url}}" class="nav-link">{{this.label}}</a></li>
diff --git a/_src/brand-assets.html b/_src/brand-assets.html
index 16052eb..4cc86de 100644
--- a/_src/brand-assets.html
+++ b/_src/brand-assets.html
@@ -1,9 +1,138 @@
 ---
-layout: "documentation.hbs"
+layout: "default.hbs"
 page-label: "Branding"
 title: "Browsersync - Brand Assets"
-sidebar: "branding-sidebar.hbs"
 ---
 
-<p><b>Large Logo</b> (png)</p>
-<img src="/img/logo-inline.png" alt=""/>
+<section class="sub-header">
+    <div class="container">
+        <div class="sub-header__intro">
+            <h1 class="sub-header__title">Browsersync Brand Assets</h1>
+            <p class="sub-header__desc">Thank you for you interest in Browsersync, these brand assets and guidlines will show you how to best use our logo, take the time to familiarize yourself with them and please use responsibly. You can download all of our assets by using the button bellow.  </p>
+            <p class="sub-header__cta"><a class="button button--primary" href="../brand-assets/brand-assets.zip" title="download">Download all assets<span class="zip"> Zip 113 KB</span></a></p>
+        </div>
+    </div>
+</section>
+
+<div class="container">
+    <section class="brand-asset-wrapper">
+        <div class="three-quarters">
+            <h2 class="brand-rule">Logo Evolution</h2>
+            <p class="brand-desc">The foundation and concept of the Browsersync logo (fig 1) was to demonstrate Browsersyncs awesome testing ability across different devices, screen sizes and web browsers. It was the a case of refining this concept into something simple, legible and memorable (fig 2-4). </p>
+        </div>
+        <div class="brand-asset brand--evolution">
+            <div class="evolution__item"><figure class="evolution__image">{{inc src="icon.hbs" icon="evo-1" class="evo-img evo-1"}}<figcaption class="evolution__fig">Fig 1</figcaption></figure></div>
+            <div class="evolution__item"><figure class="evolution__image">{{inc src="icon.hbs" icon="evo-2" class="evo-img evo-2"}}<figcaption class="evolution__fig">Fig 2</figcaption></figure></div>
+            <div class="evolution__item"><figure class="evolution__image">{{inc src="icon.hbs" icon="evo-3" class="evo-img evo-3"}}<figcaption class="evolution__fig">Fig 3</figcaption></figure></div>
+            <div class="evolution__item"><figure class="evolution__image">{{inc src="icon.hbs" icon="logo" class="evo-img evo-4"}}<figcaption class="evolution__fig">Fig 4</figcaption></figure></div>
+        </div>
+
+        <div class="three-quarters">
+            <h2 class="brand-rule">Brand Colours</h2>
+        </div>
+        <div class="brand-asset brand--colours">
+            <div class="colour__item" style="background-color: #F24747;">
+                <p class="colour__desc">Red <span class="colour__hex">#F24747</span></p>
+            </div>
+            <div class="colour__item" style="background-color: #FFFFFF;">
+                <p class="colour__desc">White <span class="colour__hex">#FFFFF</span></p>
+            </div>
+            <div class="colour__item" style="background-color: #0F2634;">
+                <p class="colour__desc">Blue <span class="colour__hex">#0F2634</span></p>
+            </div>
+            <div class="colour__item" style="background-color: #6D6D6D;">
+                <p class="colour__desc">Grey <span class="colour__hex">#6D6D6D</span></p>
+            </div>
+        </div>
+
+        <div class="three-quarters">
+            <h2 class="brand-rule">Browsersync name</h2>
+            <p class="brand-desc">Browsersync (previously BrowserSync) is now 1 word, capital B, and nothing else.</p>
+        </div>
+        <div class="brand-asset brand--name">
+            <div class="name__item"><img src="../img/bs-name.svg"/></div>
+            <div class="name__item"><img src="../img/bs-name-camelcase.svg"/></div>
+            <div class="name__item"><img src="../img/bs-name-space.svg"/></div>
+        </div>
+
+        <div class="three-quarters">
+            <h2 class="brand-rule">Typeface</h2>
+            <p class="brand-desc">Titillium has been selected for its modern, technical appearance and is used for the logo type and heading.
+                Open sans was selected for its friendly appearance and is used for body text.
+                The characteristics of both fonts represent Browsersync's technical but friendly nature.</p>
+        </div>
+        <div class="brand-asset brand--typeface">
+            <div class="typeface__item">{{inc src="icon.hbs" icon="typeface-reg" class="typeface__img"}}<p>Regular</p></div>
+            <div class="typeface__item">{{inc src="icon.hbs" icon="typeface-bold" class="typeface__img"}}<p>Semi bold</p></div>
+            <div class="typeface__item">{{inc src="icon.hbs" icon="typeface-thin" class="typeface__img"}}<p>Thin</p></div>
+        </div>
+
+        <div class="three-quarters">
+            <h2 class="brand-rule">Logo Usage</h2>
+            <p>To increase legibility it is important to have a strong contrast between the logo and the background on which it sits -
+                for light backgrounds use the primary red and for darker backgrounds, use white.</p>
+        </div>
+        <div class="brand-asset brand--usage">
+            <div class="usage__item">
+                <figure class="usage__image usage--light">{{inc src="icon.hbs" icon="logo" class=""}}</figure>
+                <p class="usage__desc">Logo on light background<br>Download as <a href="../brand-assets/logo-red.svg">svg</a>, <a href="../brand-assets/logo-red.eps">eps</a>, <a href="../brand-assets/logo-red.png">png</a> or <a href="../brand-assets/logo-red.jpg">jpg</a></p>
+            </div>
+            <div class="usage__item">
+                <figure class="usage__image usage--dark">{{inc src="icon.hbs" icon="logo" class=""}}</figure>
+                <p class="usage__desc">Logo on dark background<br><a href="../brand-assets/logo-white.svg">svg</a>, <a href="../brand-assets/logo-white.eps">eps</a> or <a href="../brand-assets/logo-white.png">png</a></p>
+            </div>
+            <div class="usage__item">
+                <figure class="usage__image usage--light">{{inc src="icon.hbs" icon="wordmark" class=""}}</figure>
+                <p class="usage__desc">Wordmark on light background<br><a href="../brand-assets/wordmark-red.svg">svg</a>, <a href="../brand-assets/wordmark-red.eps">eps</a>, <a href="../brand-assets/wordmark-red.png">png</a> or <a href="../brand-assets/wordmark-red.jpg">jpg</a></p>
+            </div>
+            <div class="usage__item">
+                <figure class="usage__image usage--dark">{{inc src="icon.hbs" icon="wordmark" class=""}}</figure>
+                <p class="usage__desc">Wordmark on dark background<br><a href="../brand-assets/wordmark-white.svg">svg</a>, <a href="../brand-assets/wordmark-white.eps">eps</a> or <a href="../brand-assets/wordmark-white.png">png</a></p>
+            </div>
+        </div>
+
+        <div class="three-quarters">
+            <h2 class="brand-rule">Minimum Logo Spacing</h2>
+            <p class="brand-desc">As shown in the images below, X equals half of the logos total width. This width is the minimum amount of space used to surround the logo.</p>
+        </div>
+        <div class="brand-asset brand--spacing">
+            <div class="spacing__item">
+                <img src="../img/logo-grid.svg"/>
+            </div>
+            <div class="spacing__item">
+                <img src="../img/wordmark-grid.svg"/>
+            </div>
+        </div>
+
+        <div class="three-quarters">
+            <h2 class="brand-rule">Restrictions</h2>
+            <p class="brand-desc">Our brand is important to us and we are happy for you to use it respectively and responsively for projects that relate to or use Browsersync. However if you do use it, please do not do any of the following:</p>
+        </div>
+        <div class="brand-asset brand--restrictions">
+            <div class="restriction__item">
+                <figure class="restriction__image">{{inc src="icon.hbs" icon="logo-rotate" class="restriction-1"}}</figure>
+                <p>{{inc src="icon.hbs" icon="cross" class="restriction-cross"}} Rotate</p>
+            </div>
+            <div class="restriction__item">
+                <figure class="restriction__image">{{inc src="icon.hbs" icon="logo-recolour" class="restriction-2"}}</figure>
+                <p>{{inc src="icon.hbs" icon="cross" class="restriction-cross"}} Recolour</p>
+            </div>
+            <div class="restriction__item">
+                <figure class="restriction__image">{{inc src="icon.hbs" icon="logo-distort" class="restriction-3"}}</figure>
+                <p>{{inc src="icon.hbs" icon="cross" class="restriction-cross"}} Distort</p>
+            </div>
+            <div class="restriction__item">
+                <figure class="restriction__image">{{inc src="icon.hbs" icon="logo-alter" class="restriction-4"}}</figure>
+                <p>{{inc src="icon.hbs" icon="cross" class="restriction-cross"}} Alter</p>
+            </div>
+            <div class="restriction__item">
+                <figure class="restriction__image">{{inc src="icon.hbs" icon="logo-multiply" class="restriction-5"}}</figure>
+                <p>{{inc src="icon.hbs" icon="cross" class="restriction-cross"}} Multiply</p>
+            </div>
+            <div class="restriction__item">
+                <figure class="restriction__image">{{inc src="icon.hbs" icon="logo-outline" class="restriction-6"}}</figure>
+                <p>{{inc src="icon.hbs" icon="cross" class="restriction-cross"}} Outline</p>
+            </div>
+        </div>
+</section>
+</div>
diff --git a/brand-assets/brand-assets.zip b/brand-assets/brand-assets.zip
new file mode 100644
index 0000000..7ba4743
Binary files /dev/null and b/brand-assets/brand-assets.zip differ
diff --git a/brand-assets/index.html b/brand-assets/index.html
index 3ac00fc..0fbf726 100644
--- a/brand-assets/index.html
+++ b/brand-assets/index.html
@@ -32,8 +32,8 @@
             <nav>
                 <ul class="site-nav">
                     <li class="nav__item logo">
-                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo"></use></svg>
-     Browser<span>sync</span></a>
+                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-wordmark"></use></svg>
+    </a>
                     </li>
                     <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                     <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
@@ -55,55 +55,163 @@
 </div>
 
 <div class="site-body" role="main">
-    <div class="wrapper docs-nav">
+    
+
+    <section class="sub-header">
         <div class="container">
-            <ul class="fixed-nav">
-                <li class="fixed-nav__item "><a class="nav-link" href="/docs/gulp">+ Gulp</a></li>
-                <li class="fixed-nav__item "><a class="nav-link" href="/docs/grunt">+ Grunt</a></li>
-                <li class="fixed-nav__item "><a class="nav-link" href="/docs/api">API</a></li>
-                <li class="fixed-nav__item "><a class="nav-link" href="/docs/command-line">Command line</a></li>
-                <li class="fixed-nav__item "><a class="nav-link" href="/docs/options">Options</a></li>
-                <li class="fixed-nav__item "><a class="nav-link" href="/docs/recipes">Recipes</a></li>
-                <li class="fixed-nav__item "><a class="nav-link" href="/docs/http-protocol">HTTP Protocol</a></li>
-            </ul>
+            <div class="sub-header__intro">
+                <h1 class="sub-header__title">Browsersync Brand Assets</h1>
+                <p class="sub-header__desc">Thank you for you interest in Browsersync, these brand assets and guidlines will show you how to best use our logo, take the time to familiarize yourself with them and please use responsibly. You can download all of our assets by using the button bellow.  </p>
+                <p class="sub-header__cta"><a class="button button--primary" href="../brand-assets/brand-assets.zip" title="download">Download all assets<span class="zip"> Zip 113 KB</span></a></p>
+            </div>
         </div>
-    </div>
-    <section id="top" class="wrapper code-example">
+    </section>
+
     <div class="container">
-        <article class="doc-wrapper">
+        <section class="brand-asset-wrapper">
             <div class="three-quarters">
-                <h1 class="page-title">Browsersync - Brand Assets</h1>
-                
-
-                <p><b>Large Logo</b> (png)</p>
-                <img src="/img/logo-inline.png" alt=""/>
+                <h2 class="brand-rule">Logo Evolution</h2>
+                <p class="brand-desc">The foundation and concept of the Browsersync logo (fig 1) was to demonstrate Browsersyncs awesome testing ability across different devices, screen sizes and web browsers. It was the a case of refining this concept into something simple, legible and memorable (fig 2-4). </p>
+            </div>
+            <div class="brand-asset brand--evolution">
+                <div class="evolution__item"><figure class="evolution__image"><svg class="svg-icon evo-img evo-1"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-evo-1"></use></svg>
+    <figcaption class="evolution__fig">Fig 1</figcaption></figure></div>
+                <div class="evolution__item"><figure class="evolution__image"><svg class="svg-icon evo-img evo-2"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-evo-2"></use></svg>
+    <figcaption class="evolution__fig">Fig 2</figcaption></figure></div>
+                <div class="evolution__item"><figure class="evolution__image"><svg class="svg-icon evo-img evo-3"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-evo-3"></use></svg>
+    <figcaption class="evolution__fig">Fig 3</figcaption></figure></div>
+                <div class="evolution__item"><figure class="evolution__image"><svg class="svg-icon evo-img evo-4"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo"></use></svg>
+    <figcaption class="evolution__fig">Fig 4</figcaption></figure></div>
+            </div>
 
+            <div class="three-quarters">
+                <h2 class="brand-rule">Brand Colours</h2>
+            </div>
+            <div class="brand-asset brand--colours">
+                <div class="colour__item" style="background-color: #F24747;">
+                    <p class="colour__desc">Red <span class="colour__hex">#F24747</span></p>
+                </div>
+                <div class="colour__item" style="background-color: #FFFFFF;">
+                    <p class="colour__desc">White <span class="colour__hex">#FFFFF</span></p>
+                </div>
+                <div class="colour__item" style="background-color: #0F2634;">
+                    <p class="colour__desc">Blue <span class="colour__hex">#0F2634</span></p>
+                </div>
+                <div class="colour__item" style="background-color: #6D6D6D;">
+                    <p class="colour__desc">Grey <span class="colour__hex">#6D6D6D</span></p>
+                </div>
             </div>
-            <div class="one-quarter">
 
-                <div class="doc-nav">
-                    <span class="nav-expand">
-                        <svg class="svg-icon open"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-menu"></use></svg>
+            <div class="three-quarters">
+                <h2 class="brand-rule">Browsersync name</h2>
+                <p class="brand-desc">Browsersync (previously BrowserSync) is now 1 word, capital B, and nothing else.</p>
+            </div>
+            <div class="brand-asset brand--name">
+                <div class="name__item"><img src="../img/bs-name.svg"/></div>
+                <div class="name__item"><img src="../img/bs-name-camelcase.svg"/></div>
+                <div class="name__item"><img src="../img/bs-name-space.svg"/></div>
+            </div>
 
-                        <svg class="svg-icon close"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-cross"></use></svg>
+            <div class="three-quarters">
+                <h2 class="brand-rule">Typeface</h2>
+                <p class="brand-desc">Titillium has been selected for its modern, technical appearance and is used for the logo type and heading.
+                    Open sans was selected for its friendly appearance and is used for body text.
+                    The characteristics of both fonts represent Browsersync's technical but friendly nature.</p>
+            </div>
+            <div class="brand-asset brand--typeface">
+                <div class="typeface__item"><svg class="svg-icon typeface__img"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-typeface-reg"></use></svg>
+    <p>Regular</p></div>
+                <div class="typeface__item"><svg class="svg-icon typeface__img"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-typeface-bold"></use></svg>
+    <p>Semi bold</p></div>
+                <div class="typeface__item"><svg class="svg-icon typeface__img"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-typeface-thin"></use></svg>
+    <p>Thin</p></div>
+            </div>
 
-                    </span>
-                    <div class="sticky-nav">
-                        <p class="lede">Jump to...</p>
-                        <ul class="sticky-nav__items" id="sticky-nav">
-                            <li class="sticky-nav__item"><a class="nav-link" href="#grunt-install">Install</a></li>
-                            <li class="sticky-nav__item"><a class="nav-link" href="#grunt-server">Static File Server</a></li>
-                            <li class="sticky-nav__item"><a class="nav-link" href="#grunt-proxy">Proxy</a></li>
-                            <li class="sticky-nav__item"><a class="nav-link" href="#grunt-watch">+ other watch tasks</a></li>
-                        </ul>
-                    </div>
+            <div class="three-quarters">
+                <h2 class="brand-rule">Logo Usage</h2>
+                <p>To increase legibility it is important to have a strong contrast between the logo and the background on which it sits -
+                    for light backgrounds use the primary red and for darker backgrounds, use white.</p>
+            </div>
+            <div class="brand-asset brand--usage">
+                <div class="usage__item">
+                    <figure class="usage__image usage--light"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo"></use></svg>
+    </figure>
+                    <p class="usage__desc">Logo on light background<br>Download as <a href="../brand-assets/logo-red.svg">svg</a>, <a href="../brand-assets/logo-red.eps">eps</a>, <a href="../brand-assets/logo-red.png">png</a> or <a href="../brand-assets/logo-red.jpg">jpg</a></p>
+                </div>
+                <div class="usage__item">
+                    <figure class="usage__image usage--dark"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo"></use></svg>
+    </figure>
+                    <p class="usage__desc">Logo on dark background<br><a href="../brand-assets/logo-white.svg">svg</a>, <a href="../brand-assets/logo-white.eps">eps</a> or <a href="../brand-assets/logo-white.png">png</a></p>
                 </div>
+                <div class="usage__item">
+                    <figure class="usage__image usage--light"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-wordmark"></use></svg>
+    </figure>
+                    <p class="usage__desc">Wordmark on light background<br><a href="../brand-assets/wordmark-red.svg">svg</a>, <a href="../brand-assets/wordmark-red.eps">eps</a>, <a href="../brand-assets/wordmark-red.png">png</a> or <a href="../brand-assets/wordmark-red.jpg">jpg</a></p>
+                </div>
+                <div class="usage__item">
+                    <figure class="usage__image usage--dark"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-wordmark"></use></svg>
+    </figure>
+                    <p class="usage__desc">Wordmark on dark background<br><a href="../brand-assets/wordmark-white.svg">svg</a>, <a href="../brand-assets/wordmark-white.eps">eps</a> or <a href="../brand-assets/wordmark-white.png">png</a></p>
+                </div>
+            </div>
 
+            <div class="three-quarters">
+                <h2 class="brand-rule">Minimum Logo Spacing</h2>
+                <p class="brand-desc">As shown in the images below, X equals half of the logos total width. This width is the minimum amount of space used to surround the logo.</p>
+            </div>
+            <div class="brand-asset brand--spacing">
+                <div class="spacing__item">
+                    <img src="../img/logo-grid.svg"/>
+                </div>
+                <div class="spacing__item">
+                    <img src="../img/wordmark-grid.svg"/>
+                </div>
             </div>
-        </article>
-    </div>
 
+            <div class="three-quarters">
+                <h2 class="brand-rule">Restrictions</h2>
+                <p class="brand-desc">Our brand is important to us and we are happy for you to use it respectively and responsively for projects that relate to or use Browsersync. However if you do use it, please do not do any of the following:</p>
+            </div>
+            <div class="brand-asset brand--restrictions">
+                <div class="restriction__item">
+                    <figure class="restriction__image"><svg class="svg-icon restriction-1"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo-rotate"></use></svg>
+    </figure>
+                    <p><svg class="svg-icon restriction-cross"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-cross"></use></svg>
+     Rotate</p>
+                </div>
+                <div class="restriction__item">
+                    <figure class="restriction__image"><svg class="svg-icon restriction-2"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo-recolour"></use></svg>
+    </figure>
+                    <p><svg class="svg-icon restriction-cross"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-cross"></use></svg>
+     Recolour</p>
+                </div>
+                <div class="restriction__item">
+                    <figure class="restriction__image"><svg class="svg-icon restriction-3"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo-distort"></use></svg>
+    </figure>
+                    <p><svg class="svg-icon restriction-cross"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-cross"></use></svg>
+     Distort</p>
+                </div>
+                <div class="restriction__item">
+                    <figure class="restriction__image"><svg class="svg-icon restriction-4"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo-alter"></use></svg>
+    </figure>
+                    <p><svg class="svg-icon restriction-cross"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-cross"></use></svg>
+     Alter</p>
+                </div>
+                <div class="restriction__item">
+                    <figure class="restriction__image"><svg class="svg-icon restriction-5"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo-multiply"></use></svg>
+    </figure>
+                    <p><svg class="svg-icon restriction-cross"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-cross"></use></svg>
+     Multiply</p>
+                </div>
+                <div class="restriction__item">
+                    <figure class="restriction__image"><svg class="svg-icon restriction-6"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo-outline"></use></svg>
+    </figure>
+                    <p><svg class="svg-icon restriction-cross"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-cross"></use></svg>
+     Outline</p>
+                </div>
+            </div>
     </section>
+    </div>
 
 </div>
 
@@ -135,6 +243,7 @@ <h1 class="page-title">Browsersync - Brand Assets</h1>
             <ul class="site-nav">
                 <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                 <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
+                <li class="nav__item active"><a href="/brand-assets" class="nav-link">Brand Assets</a></li>
                 <li class="nav__item credit__thumb">
                     <span>An open source project by</span>
                     <a href="http://www.wearejh.com/" class="nav-link"><img src="/img/jh-logo-white.png" alt="JH"/></a>
diff --git a/brand-assets/logo-red.eps b/brand-assets/logo-red.eps
new file mode 100644
index 0000000..3cf1eb5
Binary files /dev/null and b/brand-assets/logo-red.eps differ
diff --git a/brand-assets/logo-red.jpg b/brand-assets/logo-red.jpg
new file mode 100644
index 0000000..1275e99
Binary files /dev/null and b/brand-assets/logo-red.jpg differ
diff --git a/brand-assets/logo-red.png b/brand-assets/logo-red.png
new file mode 100644
index 0000000..f8ef9ae
Binary files /dev/null and b/brand-assets/logo-red.png differ
diff --git a/brand-assets/logo-red.svg b/brand-assets/logo-red.svg
new file mode 100644
index 0000000..2961318
--- /dev/null
+++ b/brand-assets/logo-red.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
+<g>
+	<path fill="#F24747" d="M189.4,35.6l-99.9,50c-1.6,0.8-2.7,2.5-2.7,4.3v220.3c0,1.8,1,3.5,2.7,4.3l99.9,50c3.2,1.6,7-0.7,7-4.3
+		V39.9C196.5,36.3,192.7,33.9,189.4,35.6z"/>
+	<path fill="#F24747" d="M210.6,364.4l99.9-50c1.6-0.8,2.7-2.5,2.7-4.3V203c0-1.8-1-3.5-2.7-4.3l-99.9-50c-3.2-1.6-7,0.7-7,4.3
+		v207.1C203.5,363.7,207.3,366.1,210.6,364.4z"/>
+</g>
+</svg>
diff --git a/brand-assets/logo-white.eps b/brand-assets/logo-white.eps
new file mode 100644
index 0000000..251fdb0
Binary files /dev/null and b/brand-assets/logo-white.eps differ
diff --git a/brand-assets/logo-white.png b/brand-assets/logo-white.png
new file mode 100644
index 0000000..95c68c9
Binary files /dev/null and b/brand-assets/logo-white.png differ
diff --git a/brand-assets/logo-white.svg b/brand-assets/logo-white.svg
new file mode 100644
index 0000000..874d03d
--- /dev/null
+++ b/brand-assets/logo-white.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M189.4,35.6l-99.9,50c-1.6,0.8-2.7,2.5-2.7,4.3v220.3c0,1.8,1,3.5,2.7,4.3l99.9,50c3.2,1.6,7-0.7,7-4.3
+		V39.9C196.5,36.3,192.7,33.9,189.4,35.6z"/>
+	<path fill="#FFFFFF" d="M210.6,364.4l99.9-50c1.6-0.8,2.7-2.5,2.7-4.3V203c0-1.8-1-3.5-2.7-4.3l-99.9-50c-3.2-1.6-7,0.7-7,4.3
+		v207.1C203.5,363.7,207.3,366.1,210.6,364.4z"/>
+</g>
+</svg>
diff --git a/brand-assets/wordmark-red.eps b/brand-assets/wordmark-red.eps
new file mode 100644
index 0000000..118a28f
Binary files /dev/null and b/brand-assets/wordmark-red.eps differ
diff --git a/brand-assets/wordmark-red.jpg b/brand-assets/wordmark-red.jpg
new file mode 100644
index 0000000..d699dbe
Binary files /dev/null and b/brand-assets/wordmark-red.jpg differ
diff --git a/brand-assets/wordmark-red.png b/brand-assets/wordmark-red.png
new file mode 100644
index 0000000..6798e22
Binary files /dev/null and b/brand-assets/wordmark-red.png differ
diff --git a/brand-assets/wordmark-red.svg b/brand-assets/wordmark-red.svg
new file mode 100644
index 0000000..b44f353
--- /dev/null
+++ b/brand-assets/wordmark-red.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
+<g>
+	<path fill="#F24747" d="M27.3,150.9L3.7,162.7c-0.4,0.2-0.6,0.6-0.6,1v52c0,0.4,0.2,0.8,0.6,1l23.6,11.8c0.8,0.4,1.7-0.2,1.7-1
+		v-75.5C29,151.1,28.1,150.5,27.3,150.9z"/>
+	<path fill="#F24747" d="M32.3,228.5l23.6-11.8c0.4-0.2,0.6-0.6,0.6-1v-25.3c0-0.4-0.2-0.8-0.6-1l-23.6-11.8c-0.8-0.4-1.7,0.2-1.7,1
+		v48.8C30.6,228.3,31.5,228.9,32.3,228.5z"/>
+	<g>
+		<path fill="#F24747" d="M98.3,176.3c7.9,0,12.2,3,12.2,10.4c0,4.8-1.5,7.2-4.7,9c3.4,1.3,5.7,3.8,5.7,9.3c0,8.2-5,11.3-12.7,11.3
+			H83.2v-39.9H98.3z M89.6,181.9v11.4h8.6c4,0,5.7-2,5.7-5.9c0-3.8-2-5.5-5.9-5.5H89.6z M89.6,198.8v11.8h8.8c4,0,6.4-1.3,6.4-6.1
+			c0-4.5-3.4-5.8-6.5-5.8H89.6z"/>
+		<path fill="#F24747" d="M118.1,187.1h6.3v3.5c0,0,5-3.2,9.9-4.1v6.4c-5.3,1-9.8,4.6-9.8,4.6v18.8h-6.4V187.1z"/>
+		<path fill="#F24747" d="M271.4,187.1h6.3v3.5c0,0,5-3.2,9.9-4.1v6.4c-5.3,1-9.8,4.6-9.8,4.6v18.8h-6.4V187.1z"/>
+		<path fill="#F24747" d="M163.5,201.5c0,9.7-3,15.4-13,15.4c-10,0-13-5.7-13-15.4c0-9.4,3.3-15,13-15
+			C160.2,186.5,163.5,192.1,163.5,201.5z M157,201.5c0-6.8-1.5-9.7-6.6-9.7c-5.1,0-6.6,2.9-6.6,9.7c0,6.8,1.2,10,6.6,10
+			C155.9,211.5,157,208.3,157,201.5z"/>
+		<path fill="#F24747" d="M173.7,187.1l4.6,23.7h1.2l5.5-23.1h6.5l5.5,23.1h1.2l4.5-23.7h6.3l-6.2,29.1h-10.1l-4.5-20l-4.5,20h-10.1
+			l-6.2-29.1H173.7z"/>
+		<path fill="#F24747" d="M234.7,193.1c0,0-6.9-0.9-10.4-0.9c-3.5,0-5.1,0.8-5.1,3.2c0,1.9,1.2,2.4,6.9,3.4c7,1.2,9.5,3,9.5,8.8
+			c0,6.8-4.3,9.3-11.5,9.3c-4,0-10.8-1.3-10.8-1.3l0.2-5.3c0,0,7,0.9,10,0.9c4.2,0,5.8-0.9,5.8-3.4c0-2-1-2.7-6.8-3.6
+			c-6.4-1-9.7-2.4-9.7-8.6c0-6.6,5.1-9,10.9-9c4.3,0,11,1.3,11,1.3L234.7,193.1z"/>
+		<path fill="#F24747" d="M264.2,210.8l0.1,4.7c0,0-6.6,1.3-11.8,1.3c-8.7,0-12.1-4.7-12.1-14.9c0-10.7,4.6-15.5,12.6-15.5
+			c8.2,0,12.2,4.3,12.2,13.3l-0.4,4.5h-18.1c0.1,4.7,1.8,7,6.6,7C258.1,211.4,264.2,210.8,264.2,210.8z M259.1,199.5
+			c0-5.8-1.7-7.7-6-7.7c-4.3,0-6.2,2.2-6.3,7.7H259.1z"/>
+		<path fill="#F24747" d="M311.8,190.7c0,0-6.2-0.9-10.1-0.9c-3.6,0-6.9,1-6.9,5c0,3,1.5,3.9,7.8,5c7.5,1.2,10.3,2.6,10.3,8.2
+			c0,6.8-4.3,9-11.2,9c-3.6,0-10-1-10-1l0.2-3.1c0,0,6.5,1,9.5,1c5,0,7.9-1.2,7.9-5.7c0-3.5-1.7-4.3-8.3-5.2c-6.7-1-9.8-2.3-9.8-7.9
+			c0-6.4,5.2-8.2,10.3-8.2c4.4,0,10.3,1,10.3,1L311.8,190.7z"/>
+		<path fill="#F24747" d="M320.3,187.1l7.7,26.1h2.1l7.8-26.1h3.6l-12.4,42.1h-3.5l3.8-13h-4l-8.6-29.1H320.3z"/>
+		<path fill="#F24747" d="M347.4,216.3v-29.1h3.4v2.2c0,0,4.9-2.7,9.5-2.7c8,0,9.7,3.7,9.7,14.4v15.3h-3.5v-15.1
+			c0-8.6-0.9-11.4-6.8-11.4c-4.5,0-9,2.4-9,2.4v24.1H347.4z"/>
+		<path fill="#F24747" d="M396.8,187.3l-0.2,3c0,0-4.6-0.6-6.8-0.6c-7,0-9,3.1-9,11.5c0,9.1,1.4,12.5,9,12.5c2.2,0,6.9-0.5,6.9-0.5
+			l0.1,3c0,0-5.2,0.7-7.7,0.7c-9.4,0-12-4.2-12-15.7c0-10.7,3.4-14.6,12.1-14.6C391.8,186.5,396.8,187.3,396.8,187.3z"/>
+	</g>
+</g>
+</svg>
diff --git a/brand-assets/wordmark-white.eps b/brand-assets/wordmark-white.eps
new file mode 100644
index 0000000..b150205
Binary files /dev/null and b/brand-assets/wordmark-white.eps differ
diff --git a/brand-assets/wordmark-white.png b/brand-assets/wordmark-white.png
new file mode 100644
index 0000000..f666687
Binary files /dev/null and b/brand-assets/wordmark-white.png differ
diff --git a/brand-assets/wordmark-white.svg b/brand-assets/wordmark-white.svg
new file mode 100644
index 0000000..c28a9d9
--- /dev/null
+++ b/brand-assets/wordmark-white.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M27.3,150.9L3.7,162.7c-0.4,0.2-0.6,0.6-0.6,1v52c0,0.4,0.2,0.8,0.6,1l23.6,11.8c0.8,0.4,1.7-0.2,1.7-1
+		v-75.5C29,151.1,28.1,150.5,27.3,150.9z"/>
+	<path fill="#FFFFFF" d="M32.3,228.5l23.6-11.8c0.4-0.2,0.6-0.6,0.6-1v-25.3c0-0.4-0.2-0.8-0.6-1l-23.6-11.8c-0.8-0.4-1.7,0.2-1.7,1
+		v48.8C30.6,228.3,31.5,228.9,32.3,228.5z"/>
+	<g>
+		<path fill="#FFFFFF" d="M98.3,176.3c7.9,0,12.2,3,12.2,10.4c0,4.8-1.5,7.2-4.7,9c3.4,1.3,5.7,3.8,5.7,9.3c0,8.2-5,11.3-12.7,11.3
+			H83.2v-39.9H98.3z M89.6,181.9v11.4h8.6c4,0,5.7-2,5.7-5.9c0-3.8-2-5.5-5.9-5.5H89.6z M89.6,198.8v11.8h8.8c4,0,6.4-1.3,6.4-6.1
+			c0-4.5-3.4-5.8-6.5-5.8H89.6z"/>
+		<path fill="#FFFFFF" d="M118.1,187.1h6.3v3.5c0,0,5-3.2,9.9-4.1v6.4c-5.3,1-9.8,4.6-9.8,4.6v18.8h-6.4V187.1z"/>
+		<path fill="#FFFFFF" d="M271.4,187.1h6.3v3.5c0,0,5-3.2,9.9-4.1v6.4c-5.3,1-9.8,4.6-9.8,4.6v18.8h-6.4V187.1z"/>
+		<path fill="#FFFFFF" d="M163.5,201.5c0,9.7-3,15.4-13,15.4c-10,0-13-5.7-13-15.4c0-9.4,3.3-15,13-15
+			C160.2,186.5,163.5,192.1,163.5,201.5z M157,201.5c0-6.8-1.5-9.7-6.6-9.7c-5.1,0-6.6,2.9-6.6,9.7c0,6.8,1.2,10,6.6,10
+			C155.9,211.5,157,208.3,157,201.5z"/>
+		<path fill="#FFFFFF" d="M173.7,187.1l4.6,23.7h1.2l5.5-23.1h6.5l5.5,23.1h1.2l4.5-23.7h6.3l-6.2,29.1h-10.1l-4.5-20l-4.5,20h-10.1
+			l-6.2-29.1H173.7z"/>
+		<path fill="#FFFFFF" d="M234.7,193.1c0,0-6.9-0.9-10.4-0.9c-3.5,0-5.1,0.8-5.1,3.2c0,1.9,1.2,2.4,6.9,3.4c7,1.2,9.5,3,9.5,8.8
+			c0,6.8-4.3,9.3-11.5,9.3c-4,0-10.8-1.3-10.8-1.3l0.2-5.3c0,0,7,0.9,10,0.9c4.2,0,5.8-0.9,5.8-3.4c0-2-1-2.7-6.8-3.6
+			c-6.4-1-9.7-2.4-9.7-8.6c0-6.6,5.1-9,10.9-9c4.3,0,11,1.3,11,1.3L234.7,193.1z"/>
+		<path fill="#FFFFFF" d="M264.2,210.8l0.1,4.7c0,0-6.6,1.3-11.8,1.3c-8.7,0-12.1-4.7-12.1-14.9c0-10.7,4.6-15.5,12.6-15.5
+			c8.2,0,12.2,4.3,12.2,13.3l-0.4,4.5h-18.1c0.1,4.7,1.8,7,6.6,7C258.1,211.4,264.2,210.8,264.2,210.8z M259.1,199.5
+			c0-5.8-1.7-7.7-6-7.7c-4.3,0-6.2,2.2-6.3,7.7H259.1z"/>
+		<path fill="#FFFFFF" d="M311.8,190.7c0,0-6.2-0.9-10.1-0.9c-3.6,0-6.9,1-6.9,5c0,3,1.5,3.9,7.8,5c7.5,1.2,10.3,2.6,10.3,8.2
+			c0,6.8-4.3,9-11.2,9c-3.6,0-10-1-10-1l0.2-3.1c0,0,6.5,1,9.5,1c5,0,7.9-1.2,7.9-5.7c0-3.5-1.7-4.3-8.3-5.2c-6.7-1-9.8-2.3-9.8-7.9
+			c0-6.4,5.2-8.2,10.3-8.2c4.4,0,10.3,1,10.3,1L311.8,190.7z"/>
+		<path fill="#FFFFFF" d="M320.3,187.1l7.7,26.1h2.1l7.8-26.1h3.6l-12.4,42.1h-3.5l3.8-13h-4l-8.6-29.1H320.3z"/>
+		<path fill="#FFFFFF" d="M347.4,216.3v-29.1h3.4v2.2c0,0,4.9-2.7,9.5-2.7c8,0,9.7,3.7,9.7,14.4v15.3h-3.5v-15.1
+			c0-8.6-0.9-11.4-6.8-11.4c-4.5,0-9,2.4-9,2.4v24.1H347.4z"/>
+		<path fill="#FFFFFF" d="M396.8,187.3l-0.2,3c0,0-4.6-0.6-6.8-0.6c-7,0-9,3.1-9,11.5c0,9.1,1.4,12.5,9,12.5c2.2,0,6.9-0.5,6.9-0.5
+			l0.1,3c0,0-5.2,0.7-7.7,0.7c-9.4,0-12-4.2-12-15.7c0-10.7,3.4-14.6,12.1-14.6C391.8,186.5,396.8,187.3,396.8,187.3z"/>
+	</g>
+</g>
+</svg>
diff --git a/css/core.min.css b/css/core.min.css
index c2b648a..595f637 100644
--- a/css/core.min.css
+++ b/css/core.min.css
@@ -1 +1 @@
-/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */dfn,img{font-style:italic}img,legend{border:0}.input,a:active,a:hover{outline:0}.nav__item .nav-link,sub,sup{position:relative}.commands-list tr td:first-child,.fixed-nav{white-space:nowrap}.button,.integrations,.intro{text-align:center}.feature:after,.feature:before,.support:before,.usp:after,.usp:before{content:""}.clearfix,.container,.feature,.usp{zoom:1}.clearfix:after,.container:after,.feature:after,.site-nav:after,.usp:after,.wrapper,hr{clear:both}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}.hljs,img{display:block}a{background-color:transparent}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}.button,.svg-icon{vertical-align:middle}sup{top:-.5em}sub{bottom:-.25em}img{max-width:100%}svg:not(:root){overflow:hidden}figure{margin:1em 40px}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver}table{border-collapse:collapse;border-spacing:0}*,:after,:before{box-sizing:border-box}blockquote,caption,dd,dl,fieldset,form,h1,h2,h3,h4,h5,h6,hr,legend,ol,p,pre,table,td,th,ul{margin:0;padding:0}abbr[title],dfn[title]{cursor:help}a,ins,u{text-decoration:none}ins{border-bottom:1px solid}button,input,label,option,select,textarea{cursor:pointer}.text-input:active,.text-input:focus,textarea:active,textarea:focus{cursor:text;outline:0}.button,.nav-expand:hover,.overlay__close:hover{cursor:pointer}.hljs{overflow-x:auto;padding:.5em;background:#fdf6e3;color:#657b83;-webkit-text-size-adjust:none}body,html{max-width:100%;overflow-x:hidden}.diff .hljs-header,.hljs-comment,.hljs-doctype,.hljs-javadoc,.hljs-pi,.hljs-template_comment,.lisp .hljs-string{color:#93a1a1}.css .hljs-tag,.hljs-addition,.hljs-keyword,.hljs-request,.hljs-status,.hljs-winutils,.method,.nginx .hljs-title{color:#859900}.hljs-command,.hljs-dartdoc,.hljs-hexcolor,.hljs-link_url,.hljs-number,.hljs-phpdoc,.hljs-regexp,.hljs-rules .hljs-value,.hljs-string,.hljs-tag .hljs-value,.tex .hljs-formula{color:#2aa198}.css .hljs-function,.hljs-built_in,.hljs-chunk,.hljs-decorator,.hljs-id,.hljs-identifier,.hljs-localvars,.hljs-title,.vhdl .hljs-literal{color:#268bd2}.hljs-attribute,.hljs-class .hljs-title,.hljs-constant,.hljs-link_reference,.hljs-parent,.hljs-type,.hljs-variable,.lisp .hljs-body,.smalltalk .hljs-number{color:#b58900}.clojure .hljs-title,.css .hljs-pseudo,.diff .hljs-change,.hljs-attr_selector,.hljs-cdata,.hljs-header,.hljs-pragma,.hljs-preprocessor,.hljs-preprocessor .hljs-keyword,.hljs-shebang,.hljs-special,.hljs-subst,.hljs-symbol,.hljs-symbol .hljs-string{color:#cb4b16}.hljs-deletion,.hljs-important{color:#dc322f}.hljs-link_label,.hljs-params{color:#6c71c4}.tex .hljs-formula{background:#eee8d5}html{overflow-y:scroll;min-height:100%;font:100%/1.5 "Titillium Web","Lucida Grande","Lucida Sans",sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased}.input--text,.nav__item{line-height:40px}.button,.commands-list tr td:first-child,.fixed-nav__item.active .nav-link,.nav__item.active .nav-link{font-weight:700}body{margin:0;background:#fff;color:#333;text-rendering:optimizeLegibility}.warning.lede{font-size:14px;font-size:.875rem;color:red}hr{box-sizing:content-box;margin-bottom:24px;border:none;border-bottom:1px solid #ccc;padding-bottom:12px;height:1px}.svg-icon{display:inline-block;fill:currentColor!important;height:1em;width:1em}.doc-wrapper,.grid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.doc-wrapper{background:#fff;padding:12px;border-radius:0;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}@media (min-width:700px){.doc-wrapper{border-radius:5px;padding:36px 36px 0}}.input--text,.nav-link{padding:0 12px;height:40px}.one-quarter{width:100%;-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}@media only screen and (min-width:700px){.one-quarter{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2;width:28%}}.three-quarters{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2;width:100%}@media only screen and (min-width:700px){.three-quarters{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1;width:65%}}.grid{display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.nav-link,.nav__item{display:inline-block}.one-half{width:100%}.input{border:0;border-radius:3px;color:#0F2634}a{color:#F24747;-webkit-transition:border .3s ease,background .3s ease,color .3s ease;transition:border .3s ease,background .3s ease,color .3s ease}a:focus,a:hover{color:#000;text-decoration:underline}.back-to-top:hover,.button:focus,.button:hover,.fixed-nav .nav-link:focus,.fixed-nav .nav-link:hover,.page-anchor:hover,.wrapper--dark a:hover,a [class*=" icon-"],a [class^=icon-]{text-decoration:none}.nav-link{color:#fff;-webkit-transition:background .3s;transition:background .3s}.nav-link:active{-webkit-transform:scale(.98);-ms-transform:scale(.98);transform:scale(.98)}.nav-link.mono{font-family:monospace}.nav__item{margin:0 6px 0 0;padding:0;border-bottom:rgba(255,255,255,0)}.fixed-nav,.sticky-nav__items{list-style:none;margin-bottom:0}.nav__item .nav-link:focus,.nav__item .nav-link:hover{color:#fff;background:rgba(255,255,255,.1);text-decoration:none}.nav__item--right{position:absolute;top:0;right:0;margin-right:0}.nav__item--right a{height:70px;line-height:70px}.nav__item--right a:last-child{display:none}@media only screen and (min-width:700px){.one-half{width:50%}.nav__item{margin-right:0}.nav__item .nav-link{height:70px;line-height:70px}.nav__item--right{position:relative;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.nav__item--right a:last-child{display:block}}.nav__item--right .svg-icon{width:24px;height:24px}.docs-nav{background:#0F2634}.fixed-nav{border-top:1px solid #1a435c;overflow-x:auto;-webkit-overflow-scrolling:touch}@media only screen and (min-width:700px){.fixed-nav{border-top:0}}.fixed-nav .nav-link{height:50px;line-height:50px}.fixed-nav .nav-link:focus,.fixed-nav .nav-link:hover{color:#fff;background:rgba(255,255,255,.1)}.fixed-nav__item{display:inline-block}.fixed-nav__item a{color:#fff}.sticky-nav{border-radius:3px;padding:12px;background:rgba(255,255,255,.99);border:1px solid #ECECEC;border-top:3px solid #F24747;position:absolute;width:100%;-webkit-transition:opacity .3s;transition:opacity .3s;height:0;opacity:0;overflow:hidden}.doc-nav,.doc-wrapper,.open .sticky-nav{position:relative}.open .sticky-nav{height:auto;opacity:1}.sticky-nav__items .sticky-nav__item:last-child .nav-link{border-bottom:0}.sticky-nav__item{list-style:none}.sticky-nav__item .nav-link{color:#0F2634;width:100%;height:auto;padding:12px 0;border-bottom:1px solid #f9f9f9;position:relative}@media only screen and (min-width:700px){.sticky-nav{position:relative;opacity:1;height:auto}.sticky-nav__item .nav-link{padding:4px 0}}.doc-nav{height:0}.doc-nav.open{height:auto}.nav-expand{width:40px;height:40px;display:block;border:3px solid #0F2634;border-radius:50%;position:absolute;right:12px;top:12px;background:rgba(255,255,255,.9);z-index:1}.nav-expand .svg-icon{-webkit-transition:all .2s;transition:all .2s;position:absolute;top:2px;left:2px;font-size:30px}.nav-expand .svg-icon.close{left:2px;transform:scale(.5)}.nav-expand .svg-icon.close,.open .nav-expand .svg-icon.open{opacity:0;-webkit-transform:scale(.5);-ms-transform:scale(.5)}@media only screen and (min-width:700px){.nav-expand{display:none}}.button,.how-to__command,.video__link{display:inline-block}.open .nav-expand{border-color:#F24747}.open .nav-expand .svg-icon.open{transform:scale(.5)}.open .nav-expand .svg-icon.close{color:#F24747;opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.commands-list tr{border-bottom:1px solid #f2f2f2}.commands-list td{padding:6px}.button{border:0;padding:12px 24px;width:auto;background:#ccc;color:#F24747;font-size:16px;font-size:1rem;line-height:1;border-radius:3px}.button:focus,.button:hover{background:#ccc;color:#000}.button:active{background:#000;color:#fff}.button+.button,.button+a{margin-left:12px}.button--primary{background:#F24747;color:#fff}.button--primary:focus,.button--primary:hover{background:#f45f5f;color:#fff}.button--primary:active{background:#f02f2f;color:#fff}address,blockquote,details,dl,fieldset,figcaption,figure,h1,h2,h3,h4,h5,h6,hgroup,ol,p,pre,table,ul{margin-bottom:12px}.h1,.h2,h1,h2{margin-bottom:24px;padding-top:24px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1;font-family:"Titillium Web","Lucida Grande","Lucida Sans",sans-serif;-webkit-font-smoothing:antialiased}.how-to,.how-to__command,code,samp{font-family:monospace}.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-size:inherit;font-weight:400}.h1,h1{font-size:36px;font-size:2.25rem}.h2,h2{font-size:24px;font-size:1.5rem}.h3,h3{padding-top:12px;font-size:18px;font-size:1.125rem}.lede{font-size:24px;font-size:1.5rem}.header-wrap{background:#0F2634;position:relative}.header-wrap.home{background:url(../img/bg.jpg) no-repeat #0F2634;background-size:cover}.intro{color:#fff;padding-top:35px;padding-bottom:24px;position:relative}@media only screen and (min-width:700px){.intro{padding-top:70px;padding-bottom:72px;margin-bottom:72px}}.hook{margin:0 auto 12px;padding-top:0}@media only screen and (min-width:700px){.hook{padding-top:24px}}@media only screen and (min-width:900px){.hook{padding-top:24px;font-size:48px;font-size:3rem}}.ronseal{margin:0 auto 24px;font-style:italic;font-weight:700;font-size:20px;font-size:1.25rem}.how-to,.video{margin-bottom:24px}.video__link,.video__link:focus,.video__link:hover{color:#fff}.video__link:hover .svg-icon{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.video__link:active{color:#fff}.video__link:active .svg-icon{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.video__link .svg-icon{-webkit-transition:all .3s;transition:all .3s;width:40px;height:40px}.overlay,.overlay__video iframe{width:100%}.how-to__command{background:rgba(255,255,255,.5);padding:15px 24px;border-radius:5px;color:#000;line-height:.8}.player{display:none}.overlay{position:absolute;top:0;bottom:0;left:0;right:0;height:100%;background:rgba(0,0,0,.9);z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;opacity:0;visibility:hidden;-webkit-transition:all .3s;transition:all .3s}.overlay.open{opacity:1;visibility:visible}.overlay__close{position:absolute;top:12px;right:12px;color:#fff}.overlay__close .svg-icon{font-size:40px}.overlay__content{width:100%;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.overlay__video{max-width:500px;margin:auto}.integrations{margin-top:24px;padding:24px 0;background:#0F2634;color:#fff;font-size:18px;font-size:1.125rem}.integrations a{color:#fff;font-weight:700}@media only screen and (min-width:700px){.overlay__video{max-width:800px}.integrations{padding:0;text-align:left;height:83px;line-height:83px;margin-top:72px}}.credit .site-nav,.jh,.signup{text-align:center}.integrations .container{position:relative}.integrations__text{margin-bottom:0}.integrations__thumb{width:100px;margin:0 auto}.usp,.usp__platforms{margin-top:24px}.feature,.feature__content,.usp{margin-bottom:24px}@media only screen and (min-width:700px){.integrations__thumb{width:198px;position:absolute;right:12px;top:-48px}}.usp{position:relative}.usp:after,.usp:before{display:table}.usp__thumb{display:none}@media only screen and (min-width:700px){.usp{min-height:500px}.usp__thumb{position:absolute;left:50%;top:0;display:block;width:704px;height:524px}.usp__content{width:46%}}.usp__title{color:#0F2634}@media only screen and (min-width:900px){.usp__title{padding-top:72px;font-weight:400;font-size:40px;font-size:2.5rem}}.usp__platforms img{width:110px}.features{padding-top:48px;padding-bottom:48px}.feature__list{list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.feature__item{width:100%}@media only screen and (min-width:700px){.features{padding-top:72px;padding-bottom:72px}.feature__item{width:31%}}.feature:after,.feature:before{display:table}.feature__title{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0;margin-bottom:12px}.feature__title h3{padding:0;margin:0;line-height:1.1}.feature__title .svg-icon{color:#F24747;width:20px;height:20px;margin-right:6px}.jh,.jh a:hover,.jh__links a,.jh__links a:hover,.signup,.signup__links a{color:#fff}@media only screen and (min-width:700px){.feature__title h3{line-height:1.5}.feature__title .svg-icon{width:30px;height:30px;margin-right:12px}}.jh{padding:48px 0;background:url(../img/jh-bg.jpg) top center no-repeat;background-size:cover}.jh__logo{width:82px;display:block;margin:0 auto}.jh__logo img{width:100%}.jh__title{margin-top:12px}.jh__links{font-size:0;padding-top:24px}.jh__links a{margin:0 12px}.jh__links .svg-icon{height:30px;width:30px}.users{padding-top:48px;padding-bottom:48px}@media only screen and (min-width:700px){.users{padding-top:72px;padding-bottom:72px}}.user__list{width:100%;padding-top:24px}.user__list+.user__list{margin-top:48px}.user__logo{margin-bottom:24px}@media only screen and (min-width:700px){.user__list{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-top:0}.user__list .google{position:relative;top:-5px}.user__list .adobe{position:relative;top:-2px}.user__logo{margin:0 36px}}.user__logo img{margin:0 auto;max-width:150px}.user__person{padding-left:70px;position:relative}.user__person img{max-width:50px;border-radius:50%;position:absolute;top:0;left:0}.person__name{font-size:18px;font-size:1.125rem;font-weight:700}.install{padding-top:48px;padding-bottom:48px}.signup{background:url(../img/bg.jpg) no-repeat;background-size:cover;padding-top:72px;padding-bottom:72px}.signup__title{font-size:24px;font-size:1.5rem;margin-bottom:24px}.signup__form{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}@media only screen and (min-width:700px){.user__person{padding-left:90px;width:100%}.user__person img{max-width:70px}.install{padding-top:72px;padding-bottom:72px}.signup{padding-top:96px;padding-bottom:72px}.signup__title{font-size:36px;font-size:2.25rem}.signup__form{width:auto;margin:0 auto}}.signup__form .form__email{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:2%;background:0 0;color:#fff;border:2px solid #fff}.signup__links{font-size:0;margin-top:12px}.signup__links a{display:inline-block;font-size:30px;margin:0 4px;padding:12px;border-radius:3px}.signup__links a:hover{color:#F24747}.credit{background:#0F2634}.credit .nav__item.logo{position:relative;top:2px}.credit .site-nav{margin-bottom:0}.credit__thumb{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;line-height:70px}.credit__thumb span{color:#fff;display:inline-block}.credit__thumb a{height:100%;padding:6px 6px 4px;margin-left:12px}.credit__thumb a:hover{border-bottom:0}.credit__thumb img{height:60px}@media only screen and (min-width:700px){.signup__form .form__email{max-width:200px}.credit__thumb{width:auto;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.credit__content{overflow:hidden}}.wrapper{width:100%}.wrapper--alt{background:#FBFBFB;border-bottom:1px solid #EBEBEB}.wrapper--dark{background-size:cover;color:#fff}.wrapper--dark a{border-bottom:1px solid rgba(255,255,255,.25);color:#fff}.wrapper--dark a:hover{border-color:#fff}.container{margin:0 auto;padding-right:12px;padding-left:12px;width:auto;max-width:1020px;list-style:none}.container--skinny{max-width:800px}.text--center{text-align:center!important}.section-title,.site-header,.support{text-align:center}.section-title{padding-top:12px;font-size:24px;font-size:1.5rem}@media only screen and (min-width:900px){.section-title{margin-bottom:48px;padding-top:24px;font-weight:400;font-size:26px;font-size:1.625rem}}.support{position:relative;margin-bottom:24px;padding-top:24px;font-size:12px;font-size:.75rem}.support:before{position:absolute;top:0;left:50%;width:50%;margin-left:-25%;height:1px;background:#e6e6e6}code,pre,samp{background:#FCFCFC}.code-example h3,.logo .nav-link,.logo .svg-icon,.page-anchor,.site-nav{position:relative}.support li{display:inline;margin:0 12px 0 0}.quote{margin-bottom:24px}.quote>:last-child{margin-bottom:0}@media only screen and (min-width:900px){.support{margin-top:24px;padding-top:48px}.quote{font-size:18px;font-size:1.125rem}}.quote__source{font-size:12px;font-size:.75rem}.quote__source:before{content:"\2014";margin-right:.5em}.code-example.docs ul:before,.page-anchor:after,.site-nav:after,.site-nav:before,.step+.step:before{content:""}.site-header.alt{padding-top:0;padding-bottom:0}.site-header.alt a{border-bottom:0}.logo{border:0!important;font-weight:700;font-size:24px;font-size:1.5rem;width:100%;text-align:left}.banner,.code-example.docs{text-align:center}.logo span{font-weight:400}.logo .nav-link{height:70px;line-height:66px}.logo .svg-icon{top:-2px;margin-right:6px}.logo--large{display:none}@media only screen and (min-width:700px){.container{padding-right:24px;padding-left:24px}.site-header{height:70px}.logo{width:auto}.logo--large{display:inline-block;width:120px;height:120px}}.site-nav{list-style:none;zoom:1}.site-nav:after,.site-nav:before{display:table}code,samp{font-size:16px;font-size:1rem;padding:2px 4px;margin:0 2px;border:1px solid #efefef;border-radius:3px}pre{padding:24px;line-height:1.4;margin-bottom:24px;border:1px solid #E8E8E8;border-radius:0 0 3px 3px}pre code{border:0;padding:0;margin:0}@media only screen and (min-width:700px){.site-nav{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}pre{margin-left:0;margin-right:0}}.section-link{padding-bottom:12px;border-bottom:1px dashed #e6e6e6}.code-example{padding-top:0}.code-example h2{font-size:32px;font-size:2rem;color:#0F2634}.code-example h2,.code-example h3,.code-example p{margin-bottom:24px}@media (min-width:700px){.code-example h2,.code-example h2.flush,.code-example h3,.code-example h3.flush,.code-example p,.code-example p.flush{margin-bottom:24px}}.code-example h2.flush,.code-example h3,.code-example h3.flush,.code-example p.flush{margin-bottom:12px}.code-example .container{padding-top:0;padding-left:0;padding-right:0}.code-example h3{font-size:22px;font-size:1.375rem;padding-top:12px}.code-example h3 a{color:#0F2634}@media (min-width:700px){.code-example h3{font-size:30px;font-size:1.875rem;padding-top:36px;margin-bottom:24px;border-top:0}}.code-example h3 .icon{font-size:20px;font-size:1.25rem;margin-left:6px}.code-example.docs ul{margin-bottom:48px}.code-example.docs ul li{display:inline-block}.code-example.docs ul li p{margin-bottom:0}.code-example.docs ul li a{display:block;padding:12px}.code-example.docs ul:before{display:none}.param-list{list-style:none;margin-bottom:24px}.param-list li{color:#000}.param-list li.name,.param-list li.type{line-height:30px}.param-list li.name .icon,.param-list li.type .icon{font-size:14px;font-size:.875rem;margin-left:4px}.param-list li.name{font-size:20px;font-size:1.25rem;color:#000;font-weight:700}.param-list li.desc{padding-top:12px}.param-list li .recede{color:#9e9e9e}.page-anchor{color:#0F2634;font-weight:400}.page-anchor:after{-webkit-transition:all .3s;transition:all .3s;width:0;height:1px;background:#0F2634;position:absolute;bottom:-5px;left:0}.page-anchor:hover:after{width:100%}.page-title{font-size:20px;font-size:1.25rem;font-weight:400}@media (min-width:700px){.page-title{font-size:34px;font-size:2.125rem;margin-bottom:24px;padding-bottom:12px;border-bottom:1px dashed #ccc}}.subprops{margin-top:12px;padding-left:12px}.back-to-top{font-weight:400;font-size:14px;font-size:.875rem;position:absolute;top:19px;right:0}@media only screen and (min-width:700px){.back-to-top{top:48px}}.highlight-header{border-top-right-radius:3px;border-top-left-radius:3px;height:28px;background:#E7E7E7;padding-left:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.highlight-header .circle{margin:auto 8px auto 0;width:12px;height:12px;background:#fff;border-radius:50%}.highlight-header .svg-icon{color:#a4a4a4;position:absolute;right:12px;top:6px}.step-list{margin-left:0;list-style:none}.step{position:relative;margin-bottom:24px;border:1px solid #ccc;padding:12px 24px;background:#fff;border-radius:5px}.step+.step:before{position:absolute;top:-25px;left:50%;width:1px;height:24px;background:#ccc}.clearfix:after,.clearfix:before,.container:after,.container:before{content:"";display:table}hr{border-color:#ccc}.fl{float:left;margin-right:24px}.ct{display:block;margin-right:auto;margin-left:auto}.banner__logo{display:inline-block}.banner__logo img{width:100px}@media only screen and (min-width:900px){.banner__logo{position:absolute;top:12px;left:0}}.banner{max-width:1000px;padding:12px;margin:0 auto;position:relative}@media only screen and (min-width:900px){.banner{text-align:left;padding-left:112px}}.banner__content{padding-top:12px}[hl]{border:1px solid red}.nav{margin-left:0;list-style:none}
\ No newline at end of file
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */img,legend{border:0}.input,a:active,a:hover{outline:0}.nav__item .nav-link,sub,sup{position:relative}.commands-list tr td:first-child,.fixed-nav{white-space:nowrap}.button,.integrations,.intro{text-align:center}.feature:after,.feature:before,.support:before,.usp:after,.usp:before{content:""}.clearfix,.container,.feature,.usp{zoom:1}.clearfix:after,.container:after,.feature:after,.site-nav:after,.usp:after,.wrapper,hr{clear:both}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}.hljs,img{display:block}a{background-color:transparent}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}.button,.svg-icon{vertical-align:middle}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver}table{border-collapse:collapse;border-spacing:0}*,:after,:before{box-sizing:border-box}blockquote,caption,dd,dl,fieldset,form,h1,h2,h3,h4,h5,h6,hr,legend,ol,p,pre,table,td,th,ul{margin:0;padding:0}abbr[title],dfn[title]{cursor:help}a,ins,u{text-decoration:none}ins{border-bottom:1px solid}img{font-style:italic;max-width:100%}button,input,label,option,select,textarea{cursor:pointer}.text-input:active,.text-input:focus,textarea:active,textarea:focus{cursor:text;outline:0}.button,.nav-expand:hover,.overlay__close:hover{cursor:pointer}.hljs{overflow-x:auto;padding:.5em;background:#fdf6e3;color:#657b83;-webkit-text-size-adjust:none}body,html{max-width:100%;overflow-x:hidden}.diff .hljs-header,.hljs-comment,.hljs-doctype,.hljs-javadoc,.hljs-pi,.hljs-template_comment,.lisp .hljs-string{color:#93a1a1}.css .hljs-tag,.hljs-addition,.hljs-keyword,.hljs-request,.hljs-status,.hljs-winutils,.method,.nginx .hljs-title{color:#859900}.hljs-command,.hljs-dartdoc,.hljs-hexcolor,.hljs-link_url,.hljs-number,.hljs-phpdoc,.hljs-regexp,.hljs-rules .hljs-value,.hljs-string,.hljs-tag .hljs-value,.tex .hljs-formula{color:#2aa198}.css .hljs-function,.hljs-built_in,.hljs-chunk,.hljs-decorator,.hljs-id,.hljs-identifier,.hljs-localvars,.hljs-title,.vhdl .hljs-literal{color:#268bd2}.hljs-attribute,.hljs-class .hljs-title,.hljs-constant,.hljs-link_reference,.hljs-parent,.hljs-type,.hljs-variable,.lisp .hljs-body,.smalltalk .hljs-number{color:#b58900}.clojure .hljs-title,.css .hljs-pseudo,.diff .hljs-change,.hljs-attr_selector,.hljs-cdata,.hljs-header,.hljs-pragma,.hljs-preprocessor,.hljs-preprocessor .hljs-keyword,.hljs-shebang,.hljs-special,.hljs-subst,.hljs-symbol,.hljs-symbol .hljs-string{color:#cb4b16}.hljs-deletion,.hljs-important{color:#dc322f}.hljs-link_label,.hljs-params{color:#6c71c4}.tex .hljs-formula{background:#eee8d5}html{overflow-y:scroll;min-height:100%;font:100%/1.5 "Titillium Web","Lucida Grande","Lucida Sans",sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased}.input--text,.nav__item{line-height:40px}.button,.commands-list tr td:first-child,.fixed-nav__item.active .nav-link,.nav__item.active .nav-link{font-weight:700}body{margin:0;background:#fff;color:#333;text-rendering:optimizeLegibility}.warning.lede{font-size:14px;font-size:.875rem;color:red}hr{box-sizing:content-box;margin-bottom:24px;border:none;border-bottom:1px solid #ccc;padding-bottom:12px;height:1px}.svg-icon{display:inline-block;fill:currentColor!important;height:1em;width:1em}.doc-wrapper{background:#fff;padding:12px;border-radius:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}@media (min-width:700px){.doc-wrapper{border-radius:5px;padding:36px 36px 0}}.input--text,.nav-link{padding:0 12px;height:40px}.one-quarter{width:100%;-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}@media only screen and (min-width:700px){.one-quarter{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2;width:28%}}.three-quarters{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2;width:100%}@media only screen and (min-width:700px){.three-quarters{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1;width:65%}}.grid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.nav-link,.nav__item{display:inline-block}.one-half{width:100%}.input{border:0;border-radius:3px;color:#0F2634}a{color:#F24747;-webkit-transition:border .3s ease,background .3s ease,color .3s ease;transition:border .3s ease,background .3s ease,color .3s ease}a:focus,a:hover{color:#000;text-decoration:underline}.back-to-top:hover,.button:focus,.button:hover,.fixed-nav .nav-link:focus,.fixed-nav .nav-link:hover,.page-anchor:hover,.wrapper--dark a:hover,a [class*=" icon-"],a [class^=icon-]{text-decoration:none}.nav-link{color:#fff;-webkit-transition:background .3s;transition:background .3s}.nav-link:active{-webkit-transform:scale(.98);-ms-transform:scale(.98);transform:scale(.98)}.nav-link.mono{font-family:monospace}.nav__item{margin:0 6px 0 0;padding:0;border-bottom:rgba(255,255,255,0)}.fixed-nav,.sticky-nav__items{margin-bottom:0;list-style:none}.nav__item .nav-link:focus,.nav__item .nav-link:hover{color:#fff;background:rgba(255,255,255,.1);text-decoration:none}.nav__item--right{position:absolute;top:0;right:0;margin-right:0}.nav__item--right a{height:70px;line-height:70px}.nav__item--right a:last-child{display:none}@media only screen and (min-width:700px){.one-half{width:50%}.nav__item{margin-right:0}.nav__item .nav-link{height:70px;line-height:70px}.nav__item--right{position:relative;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.nav__item--right a:last-child{display:block}}.nav__item--right .svg-icon{width:24px;height:24px}.docs-nav{background:#0F2634}.fixed-nav{border-top:1px solid #1a435c;overflow-x:auto;-webkit-overflow-scrolling:touch}@media only screen and (min-width:700px){.fixed-nav{border-top:0}}.fixed-nav .nav-link{height:50px;line-height:50px}.fixed-nav .nav-link:focus,.fixed-nav .nav-link:hover{color:#fff;background:rgba(255,255,255,.1)}.fixed-nav__item{display:inline-block}.fixed-nav__item a{color:#fff}.sticky-nav{border-radius:3px;padding:12px;background:rgba(255,255,255,.99);border:1px solid #ECECEC;border-top:3px solid #F24747;position:absolute;width:100%;-webkit-transition:opacity .3s;transition:opacity .3s;height:0;opacity:0;overflow:hidden}.doc-nav,.doc-wrapper,.open .sticky-nav{position:relative}.open .sticky-nav{height:auto;opacity:1}.sticky-nav__items .sticky-nav__item:last-child .nav-link{border-bottom:0}.sticky-nav__item{list-style:none}.sticky-nav__item .nav-link{color:#0F2634;width:100%;height:auto;padding:12px 0;border-bottom:1px solid #f9f9f9;position:relative}@media only screen and (min-width:700px){.sticky-nav{position:relative;opacity:1;height:auto}.sticky-nav__item .nav-link{padding:4px 0}}.doc-nav{height:0}.doc-nav.open{height:auto}.nav-expand{width:40px;height:40px;display:block;border:3px solid #0F2634;border-radius:50%;position:absolute;right:12px;top:12px;background:rgba(255,255,255,.9);z-index:1}.nav-expand .svg-icon{-webkit-transition:all .2s;transition:all .2s;position:absolute;top:2px;left:2px;font-size:30px}.nav-expand .svg-icon.close{left:2px;opacity:0;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5)}@media only screen and (min-width:700px){.nav-expand{display:none}}.button,.how-to__command,.video__link{display:inline-block}.open .nav-expand{border-color:#F24747}.open .nav-expand .svg-icon.open{opacity:0;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5)}.open .nav-expand .svg-icon.close{color:#F24747;opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.commands-list tr{border-bottom:1px solid #f2f2f2}.commands-list td{padding:6px}.button{border:0;padding:12px 24px;width:auto;background:#ccc;color:#F24747;font-size:16px;font-size:1rem;line-height:1;border-radius:3px}.button:focus,.button:hover{background:#ccc;color:#000}.button:active{background:#000;color:#fff}.button+.button,.button+a{margin-left:12px}.button--primary{background:#F24747;color:#fff}.button--primary:focus,.button--primary:hover{background:#f45f5f;color:#fff}.button--primary:active{background:#f02f2f;color:#fff}address,blockquote,details,dl,fieldset,figcaption,figure,h1,h2,h3,h4,h5,h6,hgroup,ol,p,pre,table,ul{margin-bottom:12px}.h1,.h2,h1,h2{margin-bottom:24px;padding-top:24px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1;font-family:"Titillium Web","Lucida Grande","Lucida Sans",sans-serif;-webkit-font-smoothing:antialiased}.how-to,.how-to__command,code,samp{font-family:monospace}.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-size:inherit;font-weight:400}.h1,h1{font-size:36px;font-size:2.25rem}.h2,h2{font-size:24px;font-size:1.5rem}.h3,h3{padding-top:12px;font-size:18px;font-size:1.125rem}.lede{font-size:24px;font-size:1.5rem}.header-wrap{background:#0F2634;position:relative}.header-wrap.home{background:url(../img/bg.jpg) no-repeat #0F2634;background-size:cover}.intro{color:#fff;padding-top:35px;padding-bottom:24px;position:relative}@media only screen and (min-width:700px){.intro{padding-top:70px;padding-bottom:72px;margin-bottom:72px}}.hook{margin:0 auto 12px;padding-top:0}@media only screen and (min-width:700px){.hook{padding-top:24px}}@media only screen and (min-width:900px){.hook{padding-top:24px;font-size:48px;font-size:3rem}}.ronseal{margin:0 auto 24px;font-style:italic;font-weight:700;font-size:20px;font-size:1.25rem}.how-to,.video{margin-bottom:24px}.video__link,.video__link:focus,.video__link:hover{color:#fff}.video__link:hover .svg-icon{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.video__link:active{color:#fff}.video__link:active .svg-icon{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.evo-img,.usage__image .svg-icon{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%)}.video__link .svg-icon{-webkit-transition:all .3s;transition:all .3s;width:40px;height:40px}.overlay,.overlay__video iframe{width:100%}.how-to__command{background:rgba(255,255,255,.5);padding:15px 24px;border-radius:5px;color:#000;line-height:.8}.player{display:none}.overlay{position:absolute;top:0;bottom:0;left:0;right:0;height:100%;background:rgba(0,0,0,.9);z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;opacity:0;visibility:hidden;-webkit-transition:all .3s;transition:all .3s}.overlay.open{opacity:1;visibility:visible}.overlay__close{position:absolute;top:12px;right:12px;color:#fff}.overlay__close .svg-icon{font-size:40px}.overlay__content{width:100%;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.overlay__video{max-width:500px;margin:auto}.integrations{margin-top:24px;padding:24px 0;background:#0F2634;color:#fff;font-size:18px;font-size:1.125rem}.integrations a{color:#fff;font-weight:700}@media only screen and (min-width:700px){.overlay__video{max-width:800px}.integrations{padding:0;text-align:left;height:83px;line-height:83px;margin-top:72px}}.credit .site-nav,.jh,.signup{text-align:center}.integrations .container{position:relative}.integrations__text{margin-bottom:0}.integrations__thumb{width:100px;margin:0 auto}.usp,.usp__platforms{margin-top:24px}.feature,.feature__content,.usp{margin-bottom:24px}@media only screen and (min-width:700px){.integrations__thumb{width:198px;position:absolute;right:12px;top:-48px}.usp{min-height:500px}}.usp{position:relative}.usp:after,.usp:before{display:table}.usp__thumb{display:none}@media only screen and (min-width:700px){.usp__thumb{position:absolute;left:50%;top:0;display:block;width:704px;height:524px}.usp__content{width:46%}}.usp__title{color:#0F2634}@media only screen and (min-width:900px){.usp__title{padding-top:72px;font-weight:400;font-size:40px;font-size:2.5rem}}.usp__platforms img{width:110px}.features{padding-top:48px;padding-bottom:48px}.feature__list{list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.feature__item{width:100%}@media only screen and (min-width:700px){.features{padding-top:72px;padding-bottom:72px}.feature__item{width:31%}}.feature:after,.feature:before{display:table}.feature__title{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0;margin-bottom:12px}.feature__title h3{padding:0;margin:0;line-height:1.1}.feature__title .svg-icon{color:#F24747;width:20px;height:20px;margin-right:6px}.jh,.jh a:hover,.jh__links a,.jh__links a:hover,.signup,.signup__links a{color:#fff}@media only screen and (min-width:700px){.feature__title h3{line-height:1.5}.feature__title .svg-icon{width:30px;height:30px;margin-right:12px}}.jh{padding:48px 0;background:url(../img/jh-bg.jpg) top center no-repeat;background-size:cover}.jh__logo{width:82px;display:block;margin:0 auto}.jh__logo img{width:100%}.jh__title{margin-top:12px}.jh__links{font-size:0;padding-top:24px}.jh__links a{margin:0 12px}.jh__links .svg-icon{height:30px;width:30px}.users{padding-top:48px;padding-bottom:48px}@media only screen and (min-width:700px){.users{padding-top:72px;padding-bottom:72px}}.user__list{width:100%;padding-top:24px}.user__list+.user__list{margin-top:48px}.user__logo{margin-bottom:24px}@media only screen and (min-width:700px){.user__list{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-top:0}.user__list .google{position:relative;top:-5px}.user__list .adobe{position:relative;top:-2px}.user__logo{margin:0 36px}}.user__logo img{margin:0 auto;max-width:150px}.user__person{padding-left:70px;position:relative}.user__person img{max-width:50px;border-radius:50%;position:absolute;top:0;left:0}.person__name{font-size:18px;font-size:1.125rem;font-weight:700}.install{padding-top:48px;padding-bottom:48px}.signup{background:url(../img/bg.jpg) no-repeat;background-size:cover;padding-top:72px;padding-bottom:72px}.signup__title{font-size:24px;font-size:1.5rem;margin-bottom:24px}.signup__form{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}@media only screen and (min-width:700px){.user__person{padding-left:90px;width:100%}.user__person img{max-width:70px}.install{padding-top:72px;padding-bottom:72px}.signup{padding-top:96px;padding-bottom:72px}.signup__title{font-size:36px;font-size:2.25rem}.signup__form{width:auto;margin:0 auto}.signup__form .form__email{max-width:200px}}.signup__form .form__email{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:2%;background:0 0;color:#fff;border:2px solid #fff}.signup__links{font-size:0;margin-top:12px}.signup__links a{display:inline-block;font-size:30px;margin:0 4px;padding:12px;border-radius:3px}.signup__links a:hover{color:#F24747}.credit{background:#0F2634}.credit .nav__item.logo{position:relative;top:2px}.credit .site-nav{margin-bottom:0}.credit__thumb{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;line-height:70px}.credit__thumb span{color:#fff;display:inline-block}.credit__thumb a{height:100%;padding:6px 6px 4px;margin-left:12px}.credit__thumb a:hover{border-bottom:0}.credit__thumb img{height:60px}@media only screen and (min-width:700px){.credit__thumb{width:auto;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.credit__content{overflow:hidden}}.wrapper{width:100%}.wrapper--alt{background:#FBFBFB;border-bottom:1px solid #EBEBEB}.wrapper--dark{background-size:cover;color:#fff}.wrapper--dark a{border-bottom:1px solid rgba(255,255,255,.25);color:#fff}.wrapper--dark a:hover{border-color:#fff}.container{margin:0 auto;padding-right:12px;padding-left:12px;width:auto;max-width:1020px;list-style:none}@media only screen and (min-width:700px){.container{padding-right:24px;padding-left:24px}}.container--skinny{max-width:800px}.text--center{text-align:center!important}.evolution__item,.section-title,.site-header,.support,.typeface__item{text-align:center}.section-title{padding-top:12px;font-size:24px;font-size:1.5rem}@media only screen and (min-width:900px){.section-title{margin-bottom:48px;padding-top:24px;font-weight:400;font-size:26px;font-size:1.625rem}}.support{position:relative;margin-bottom:24px;padding-top:24px;font-size:12px;font-size:.75rem}.support:before{position:absolute;top:0;left:50%;width:50%;margin-left:-25%;height:1px;background:#e6e6e6}.sub-header,.usage--dark{background:#0F2634}.support li{display:inline;margin:0 12px 0 0}.brand--evolution,.brand--usage{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;-webkit-flex-wrap:wrap}.quote{margin-bottom:24px}.quote>:last-child{margin-bottom:0}@media only screen and (min-width:900px){.support{margin-top:24px;padding-top:48px}.quote{font-size:18px;font-size:1.125rem}}.quote__source{font-size:12px;font-size:.75rem}.quote__source:before{content:"\2014";margin-right:.5em}.code-example.docs ul:before,.page-anchor:after,.site-nav:after,.site-nav:before,.step+.step:before{content:""}.brand-asset-wrapper{padding:0 12px}.brand-rule{font-weight:400;padding:0}.brand-asset{border-bottom:1px dashed #ccc;padding:70px 0;margin-bottom:70px}.brand-asset:last-child{border:none;margin-bottom:0}.brand--evolution{display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-24px}.evolution__item{width:50%;margin-bottom:24px;padding-left:24px}@media only screen and (min-width:700px){.evolution__item{width:25%}.brand--colours{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}.evolution__image{margin:0;width:100%;padding-bottom:100%;border:1px solid #e6e6e6;position:relative}.evo-img,.evolution__fig{position:absolute;left:0}.evo-img{right:0;top:50%;transform:translateY(-50%);margin:0 auto;width:100%;height:5em;color:#ccc}.evo-img.evo-4{color:#F24747}.evo-img.evo-1{width:40%}.evolution__fig{bottom:0;padding:12px;margin:0;color:#ccc}.brand--colours{margin-left:-24px}.colour__item{padding:24px;position:relative;color:#fff;margin-left:24px}.colour__item:nth-child(2){color:#6D6D6D;border:1px solid #CCC}.colour__desc{margin:0}.colour__hex{float:right}@media only screen and (min-width:700px){.colour__item{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;height:160px;padding:12px}.colour__hex{position:absolute;bottom:0;left:0;padding:12px}.brand--name{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}}.name__item,.usage__item{padding-left:24px}.restriction__image,.usage__image{padding-bottom:100%;border:1px solid #e6e6e6}.brand--name{margin-left:-24px}.name__item img{width:80%;margin:0 auto}.typeface__item{margin-bottom:24px}.typeface__item:last-child{margin:0}@media only screen and (min-width:700px){.name__item{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.brand--typeface{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.typeface__item{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;margin:0}}.typeface__img{width:100%;height:8em;color:#6D6D6D;margin:0 auto 24px}.brand--usage{margin-left:-24px;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.usage__item{width:50%;margin-bottom:24px}@media only screen and (min-width:700px){.usage__item{width:25%}}.usage__item .svg-icon{width:100%;height:5em}.usage__image{margin:0 0 24px;width:100%;position:relative}.usage__image .svg-icon{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0 auto;width:80%;height:5em}.usage--light .svg-icon{color:#F24747}.usage--dark .svg-icon{color:#fff}.usage__desc{font-size:12px}.spacing__item:nth-child(2){margin-top:96px}.spacing__item img{margin:0 auto}.brand--restrictions{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-24px}.restriction__item{width:50%;margin-bottom:24px;padding-left:24px;position:relative}@media only screen and (min-width:700px){.restriction__item{width:33.33%}}@media only screen and (min-width:900px){.restriction__item{width:16.66%}}.restriction__image{margin:0 0 24px;width:100%;position:relative}.restriction__image .svg-icon{position:absolute;left:0;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:100%;height:5em;margin:0 auto;color:#F24747}.code-example h3,.logo .nav-link,.logo .svg-icon,.page-anchor,.site-nav{position:relative}.restriction__image .svg-icon.restriction-2{color:#e9ac00}.restriction-cross{color:#c00;width:1.5em;height:1.5em}@media only screen and (min-width:700px){.site-header{height:70px}}.site-header.alt{padding-top:0;padding-bottom:0}.site-header.alt a{border-bottom:0}.logo{border:0!important;font-weight:700;font-size:24px;font-size:1.5rem;width:100%;text-align:left}.banner,.code-example.docs{text-align:center}.logo span{font-weight:400}.logo .nav-link{height:70px;line-height:66px}.logo .svg-icon{top:-4px;margin-right:6px;height:30px;width:140px}.logo--large{display:none}@media only screen and (min-width:700px){.logo{width:auto}.logo--large{display:inline-block;width:120px;height:120px}}.site-nav{list-style:none;zoom:1}.site-nav:after,.site-nav:before{display:table}.sub-header{border-top:1px solid rgba(255,255,255,.1);color:#fff;margin-bottom:70px}code,pre,samp{background:#FCFCFC}.sub-header__intro{padding:24px 12px 48px}@media only screen and (min-width:700px){.site-nav{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.sub-header__intro{width:65%;padding:70px 12px}}.sub-header__title{font-weight:400;padding:0}.sub-header__desc{margin-bottom:24px;opacity:.7}.sub-header__cta{margin:0}.zip{margin-left:5px;font-weight:100;font-size:12px}code,samp{font-size:16px;font-size:1rem;padding:2px 4px;margin:0 2px;border:1px solid #efefef;border-radius:3px}pre{padding:24px;line-height:1.4;margin-bottom:24px;border:1px solid #E8E8E8;border-radius:0 0 3px 3px}pre code{border:0;padding:0;margin:0}@media only screen and (min-width:700px){pre{margin-left:0;margin-right:0}}.section-link{padding-bottom:12px;border-bottom:1px dashed #e6e6e6}.code-example{padding-top:0}.code-example h2{font-size:32px;font-size:2rem;color:#0F2634}.code-example h2,.code-example h3,.code-example p{margin-bottom:24px}@media (min-width:700px){.code-example h2,.code-example h2.flush,.code-example h3,.code-example h3.flush,.code-example p,.code-example p.flush{margin-bottom:24px}}.code-example h2.flush,.code-example h3,.code-example h3.flush,.code-example p.flush{margin-bottom:12px}.code-example .container{padding-top:0;padding-left:0;padding-right:0}.code-example h3{font-size:22px;font-size:1.375rem;padding-top:12px}.code-example h3 a{color:#0F2634}@media (min-width:700px){.code-example h3{font-size:30px;font-size:1.875rem;padding-top:36px;margin-bottom:24px;border-top:0}}.code-example h3 .icon{font-size:20px;font-size:1.25rem;margin-left:6px}.code-example.docs ul{margin-bottom:48px}.code-example.docs ul li{display:inline-block}.code-example.docs ul li p{margin-bottom:0}.code-example.docs ul li a{display:block;padding:12px}.code-example.docs ul:before{display:none}.param-list{list-style:none;margin-bottom:24px}.param-list li{color:#000}.param-list li.name,.param-list li.type{line-height:30px}.param-list li.name .icon,.param-list li.type .icon{font-size:14px;font-size:.875rem;margin-left:4px}.param-list li.name{font-size:20px;font-size:1.25rem;color:#000;font-weight:700}.param-list li.desc{padding-top:12px}.param-list li .recede{color:#9e9e9e}.page-anchor{color:#0F2634;font-weight:400}.page-anchor:after{-webkit-transition:all .3s;transition:all .3s;width:0;height:1px;background:#0F2634;position:absolute;bottom:-5px;left:0}.page-anchor:hover:after{width:100%}.page-title{font-size:20px;font-size:1.25rem;font-weight:400}@media (min-width:700px){.page-title{font-size:34px;font-size:2.125rem;margin-bottom:24px;padding-bottom:12px;border-bottom:1px dashed #ccc}}.subprops{margin-top:12px;padding-left:12px}.back-to-top{font-weight:400;font-size:14px;font-size:.875rem;position:absolute;top:19px;right:0}@media only screen and (min-width:700px){.back-to-top{top:48px}}.highlight-header{border-top-right-radius:3px;border-top-left-radius:3px;height:28px;background:#E7E7E7;padding-left:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.highlight-header .circle{margin:auto 8px auto 0;width:12px;height:12px;background:#fff;border-radius:50%}.highlight-header .svg-icon{color:#a4a4a4;position:absolute;right:12px;top:6px}.step-list{margin-left:0;list-style:none}.step{position:relative;margin-bottom:24px;border:1px solid #ccc;padding:12px 24px;background:#fff;border-radius:5px}.step+.step:before{position:absolute;top:-25px;left:50%;width:1px;height:24px;background:#ccc}.clearfix:after,.clearfix:before,.container:after,.container:before{content:"";display:table}hr{border-color:#ccc}.fl{float:left;margin-right:24px}.ct{display:block;margin-right:auto;margin-left:auto}.banner__logo{display:inline-block}.banner__logo img{width:100px}@media only screen and (min-width:900px){.banner__logo{position:absolute;top:12px;left:0}}.banner{max-width:1000px;padding:12px;margin:0 auto;position:relative}@media only screen and (min-width:900px){.banner{text-align:left;padding-left:112px}}.banner__content{padding-top:12px}[hl]{border:1px solid red}.nav{margin-left:0;list-style:none}
\ No newline at end of file
diff --git a/docs/api/index.html b/docs/api/index.html
index de9a5e7..8b16208 100644
--- a/docs/api/index.html
+++ b/docs/api/index.html
@@ -32,8 +32,8 @@
             <nav>
                 <ul class="site-nav">
                     <li class="nav__item logo">
-                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo"></use></svg>
-     Browser<span>sync</span></a>
+                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-wordmark"></use></svg>
+    </a>
                     </li>
                     <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                     <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
@@ -572,6 +572,7 @@ <h3 id="api-sockets" class="section-link">
             <ul class="site-nav">
                 <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                 <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
+                <li class="nav__item "><a href="/brand-assets" class="nav-link">Brand Assets</a></li>
                 <li class="nav__item credit__thumb">
                     <span>An open source project by</span>
                     <a href="http://www.wearejh.com/" class="nav-link"><img src="/img/jh-logo-white.png" alt="JH"/></a>
diff --git a/docs/command-line/index.html b/docs/command-line/index.html
index cf1da9d..e0b6ca5 100644
--- a/docs/command-line/index.html
+++ b/docs/command-line/index.html
@@ -32,8 +32,8 @@
             <nav>
                 <ul class="site-nav">
                     <li class="nav__item logo">
-                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo"></use></svg>
-     Browser<span>sync</span></a>
+                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-wordmark"></use></svg>
+    </a>
                     </li>
                     <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                     <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
@@ -370,6 +370,7 @@ <h3 id="command-line-options" class="section-link">
             <ul class="site-nav">
                 <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                 <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
+                <li class="nav__item "><a href="/brand-assets" class="nav-link">Brand Assets</a></li>
                 <li class="nav__item credit__thumb">
                     <span>An open source project by</span>
                     <a href="http://www.wearejh.com/" class="nav-link"><img src="/img/jh-logo-white.png" alt="JH"/></a>
diff --git a/docs/grunt/index.html b/docs/grunt/index.html
index dd81de0..ddbc8ff 100644
--- a/docs/grunt/index.html
+++ b/docs/grunt/index.html
@@ -32,8 +32,8 @@
             <nav>
                 <ul class="site-nav">
                     <li class="nav__item logo">
-                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo"></use></svg>
-     Browser<span>sync</span></a>
+                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-wordmark"></use></svg>
+    </a>
                     </li>
                     <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                     <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
@@ -243,6 +243,7 @@ <h3 id="grunt-watch" class="section-link">
             <ul class="site-nav">
                 <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                 <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
+                <li class="nav__item "><a href="/brand-assets" class="nav-link">Brand Assets</a></li>
                 <li class="nav__item credit__thumb">
                     <span>An open source project by</span>
                     <a href="http://www.wearejh.com/" class="nav-link"><img src="/img/jh-logo-white.png" alt="JH"/></a>
diff --git a/docs/gulp/index.html b/docs/gulp/index.html
index a315b81..2793744 100644
--- a/docs/gulp/index.html
+++ b/docs/gulp/index.html
@@ -32,8 +32,8 @@
             <nav>
                 <ul class="site-nav">
                     <li class="nav__item logo">
-                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo"></use></svg>
-     Browser<span>sync</span></a>
+                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-wordmark"></use></svg>
+    </a>
                     </li>
                     <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                     <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
@@ -319,6 +319,7 @@ <h3 id="gulp-manual-reload" class="section-link">
             <ul class="site-nav">
                 <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                 <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
+                <li class="nav__item "><a href="/brand-assets" class="nav-link">Brand Assets</a></li>
                 <li class="nav__item credit__thumb">
                     <span>An open source project by</span>
                     <a href="http://www.wearejh.com/" class="nav-link"><img src="/img/jh-logo-white.png" alt="JH"/></a>
diff --git a/docs/http-protocol/index.html b/docs/http-protocol/index.html
index 46fed27..8fb49ae 100644
--- a/docs/http-protocol/index.html
+++ b/docs/http-protocol/index.html
@@ -32,8 +32,8 @@
             <nav>
                 <ul class="site-nav">
                     <li class="nav__item logo">
-                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo"></use></svg>
-     Browser<span>sync</span></a>
+                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-wordmark"></use></svg>
+    </a>
                     </li>
                     <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                     <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
@@ -152,6 +152,7 @@ <h1 class="page-title">HTTP Protocol</h1>
             <ul class="site-nav">
                 <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                 <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
+                <li class="nav__item "><a href="/brand-assets" class="nav-link">Brand Assets</a></li>
                 <li class="nav__item credit__thumb">
                     <span>An open source project by</span>
                     <a href="http://www.wearejh.com/" class="nav-link"><img src="/img/jh-logo-white.png" alt="JH"/></a>
diff --git a/docs/index.html b/docs/index.html
index 7bce285..5690081 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -32,8 +32,8 @@
             <nav>
                 <ul class="site-nav">
                     <li class="nav__item logo">
-                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo"></use></svg>
-     Browser<span>sync</span></a>
+                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-wordmark"></use></svg>
+    </a>
                     </li>
                     <li class="nav__item active"><a href="/docs" class="nav-link">Documentation</a></li>
                     <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
@@ -200,6 +200,7 @@ <h3 id="external-url" class="section-link">
             <ul class="site-nav">
                 <li class="nav__item active"><a href="/docs" class="nav-link">Documentation</a></li>
                 <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
+                <li class="nav__item "><a href="/brand-assets" class="nav-link">Brand Assets</a></li>
                 <li class="nav__item credit__thumb">
                     <span>An open source project by</span>
                     <a href="http://www.wearejh.com/" class="nav-link"><img src="/img/jh-logo-white.png" alt="JH"/></a>
diff --git a/docs/options/index.html b/docs/options/index.html
index df86e99..70519a8 100644
--- a/docs/options/index.html
+++ b/docs/options/index.html
@@ -32,8 +32,8 @@
             <nav>
                 <ul class="site-nav">
                     <li class="nav__item logo">
-                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo"></use></svg>
-     Browser<span>sync</span></a>
+                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-wordmark"></use></svg>
+    </a>
                     </li>
                     <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                     <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
@@ -1287,6 +1287,7 @@ <h3 id="option-socket" class="section-link">
             <ul class="site-nav">
                 <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                 <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
+                <li class="nav__item "><a href="/brand-assets" class="nav-link">Brand Assets</a></li>
                 <li class="nav__item credit__thumb">
                     <span>An open source project by</span>
                     <a href="http://www.wearejh.com/" class="nav-link"><img src="/img/jh-logo-white.png" alt="JH"/></a>
diff --git a/docs/recipes/index.html b/docs/recipes/index.html
index 23a0723..446152d 100644
--- a/docs/recipes/index.html
+++ b/docs/recipes/index.html
@@ -32,8 +32,8 @@
             <nav>
                 <ul class="site-nav">
                     <li class="nav__item logo">
-                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo"></use></svg>
-     Browser<span>sync</span></a>
+                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-wordmark"></use></svg>
+    </a>
                     </li>
                     <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                     <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
@@ -165,6 +165,7 @@ <h3 id="contribute">Contribute</h3>
             <ul class="site-nav">
                 <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                 <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
+                <li class="nav__item "><a href="/brand-assets" class="nav-link">Brand Assets</a></li>
                 <li class="nav__item credit__thumb">
                     <span>An open source project by</span>
                     <a href="http://www.wearejh.com/" class="nav-link"><img src="/img/jh-logo-white.png" alt="JH"/></a>
diff --git a/favicon.ico b/favicon.ico
index 0af4d9a..07845e0 100644
Binary files a/favicon.ico and b/favicon.ico differ
diff --git a/img/bs-name-camelcase.svg b/img/bs-name-camelcase.svg
new file mode 100644
index 0000000..cd6344b
--- /dev/null
+++ b/img/bs-name-camelcase.svg
@@ -0,0 +1,37 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="162.8px" height="37.1px" viewBox="0 0 162.8 37.1" enable-background="new 0 0 162.8 37.1"
+	 xml:space="preserve">
+<defs>
+</defs>
+<g>
+	<path fill="#CCCCCC" d="M7.7,7.7c4,0,6.2,1.6,6.2,5.3c0,2.7-1,4-2.7,4.8c1.8,0.6,3.3,1.9,3.3,4.9c0,4.4-2.5,5.8-6.4,5.8H0.2V7.7
+		H7.7z M2.5,9.8v7.2h5.3c2.6,0,3.7-1.2,3.7-3.7c0-2.4-1.3-3.4-3.9-3.4H2.5z M2.5,18.9v7.5H8c2.5,0,4.2-0.8,4.2-3.9
+		c0-3.2-2.7-3.6-4.3-3.6H2.5z"/>
+	<path fill="#CCCCCC" d="M18.3,13.5h2.2v2c0,0,2.6-1.8,5.5-2.4v2.3c-2.8,0.6-5.5,2-5.5,2v11h-2.2V13.5z"/>
+	<path fill="#CCCCCC" d="M40.6,20.8c0,5.5-1.4,8-6.4,8c-5,0-6.4-2.5-6.4-8c0-5.2,1.7-7.6,6.4-7.6C38.9,13.2,40.6,15.6,40.6,20.8z
+		 M38.3,20.8c0-4.2-0.9-5.7-4.1-5.7c-3.2,0-4.1,1.5-4.1,5.7c0,4.3,0.6,6,4.1,6C37.7,26.8,38.3,25.1,38.3,20.8z"/>
+	<path fill="#CCCCCC" d="M45.1,13.5l3,13h0.5l3.6-12.7h2.3l3.6,12.7h0.5l3-13h2.2l-3.6,15h-3.8l-3.2-11.7l-3.2,11.7h-3.7l-3.6-15
+		H45.1z"/>
+	<path fill="#CCCCCC" d="M76.8,15.7c0,0-3.3-0.5-5.2-0.5c-1.9,0-3.3,0.5-3.3,2.3c0,1.4,0.7,1.8,3.9,2.3c3.8,0.6,5.2,1.4,5.2,4.3
+		c0,3.5-2.2,4.7-5.8,4.7c-1.9,0-5.3-0.6-5.3-0.6l0.1-1.9c0,0,3.4,0.5,4.9,0.5c2.5,0,3.8-0.5,3.8-2.6c0-1.6-0.8-1.9-4-2.5
+		c-3.4-0.5-5-1.2-5-4.2c0-3.3,2.7-4.4,5.4-4.4c2.2,0,5.4,0.6,5.4,0.6L76.8,15.7z"/>
+	<path fill="#CCCCCC" d="M91.8,26.5l0.1,1.8c0,0-3.4,0.5-5.8,0.5c-4.5,0-5.9-2.6-5.9-7.7c0-5.7,2.5-7.9,6.3-7.9c4,0,6,2.1,6,7
+		l-0.1,1.7h-9.9c0,3.2,1,4.9,3.9,4.9C88.6,26.8,91.8,26.5,91.8,26.5z M90.2,20.1c0-3.7-1.1-5-3.8-5c-2.5,0-4,1.4-4,5H90.2z"/>
+	<path fill="#CCCCCC" d="M95.9,13.5h2.2v2c0,0,2.6-1.8,5.5-2.4v2.3c-2.8,0.6-5.5,2-5.5,2v11h-2.2V13.5z"/>
+	<path fill="#CCCCCC" d="M118.3,9.9c0,0-4.2-0.5-5.9-0.5c-2.9,0-4.5,1-4.5,3.4c0,2.7,1.4,3.1,5.1,4c4.1,0.9,6,2,6,5.6
+		c0,4.6-2.5,6.4-6.6,6.4c-2.5,0-6.6-0.7-6.6-0.7l0.2-1.9c0,0,4.1,0.5,6.2,0.5c2.9,0,4.4-1.3,4.4-4.2c0-2.3-1.2-3-4.6-3.7
+		c-4.3-0.9-6.5-1.9-6.5-5.9c0-4,2.6-5.6,6.7-5.6c2.5,0,6.3,0.6,6.3,0.6L118.3,9.9z"/>
+	<path fill="#CCCCCC" d="M123.1,13.5l3.8,13h1l3.8-13h2.2l-6.2,21.7h-2.2l1.9-6.7h-2.2l-4.3-15H123.1z"/>
+	<path fill="#CCCCCC" d="M136.7,28.5v-15h2.2v1.1c0,0,2.4-1.4,4.6-1.4c4.1,0,5.1,2,5.1,7.4v7.9h-2.2v-7.9c0-4-0.5-5.4-3.2-5.4
+		c-2.2,0-4.2,1.1-4.2,1.1v12.2H136.7z"/>
+	<path fill="#CCCCCC" d="M162.5,13.6l-0.1,1.8c0,0-2.4-0.3-3.5-0.3c-3.5,0-4.4,1.5-4.4,5.5c0,4.4,0.7,6.1,4.4,6.1
+		c1.1,0,3.5-0.3,3.5-0.3l0.1,1.9c0,0-2.8,0.4-4.2,0.4c-4.8,0-6.2-2.2-6.2-8.1c0-5.4,1.8-7.5,6.2-7.5
+		C159.8,13.2,162.5,13.6,162.5,13.6z"/>
+</g>
+<g>
+
+		<rect x="80.4" y="-64.5" transform="matrix(0.2114 0.9774 -0.9774 0.2114 82.3235 -64.9156)" fill="#F24747" width="2" height="166.1"/>
+</g>
+</svg>
diff --git a/img/bs-name-space.svg b/img/bs-name-space.svg
new file mode 100644
index 0000000..d1ca94e
--- /dev/null
+++ b/img/bs-name-space.svg
@@ -0,0 +1,37 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="173px" height="39.4px" viewBox="0 0 173 39.4" enable-background="new 0 0 173 39.4" xml:space="preserve"
+	>
+<defs>
+</defs>
+<g>
+	<path fill="#CCCCCC" d="M7.7,8.9c4,0,6.2,1.6,6.2,5.3c0,2.7-1,4-2.7,4.8c1.8,0.6,3.3,1.9,3.3,4.9c0,4.4-2.5,5.8-6.4,5.8H0.2V8.9
+		H7.7z M2.5,10.9v7.2h5.3c2.6,0,3.7-1.2,3.7-3.7c0-2.4-1.3-3.4-3.9-3.4H2.5z M2.5,20.1v7.5H8c2.5,0,4.2-0.8,4.2-3.9
+		c0-3.2-2.7-3.6-4.3-3.6H2.5z"/>
+	<path fill="#CCCCCC" d="M18.3,14.7h2.2v2c0,0,2.6-1.8,5.5-2.4v2.3c-2.8,0.6-5.5,2-5.5,2v11h-2.2V14.7z"/>
+	<path fill="#CCCCCC" d="M40.6,22c0,5.5-1.4,8-6.4,8c-5,0-6.4-2.5-6.4-8c0-5.2,1.7-7.6,6.4-7.6C38.9,14.4,40.6,16.8,40.6,22z
+		 M38.3,22c0-4.2-0.9-5.7-4.1-5.7C31,16.3,30,17.8,30,22c0,4.3,0.6,6,4.1,6C37.7,28,38.3,26.2,38.3,22z"/>
+	<path fill="#CCCCCC" d="M45.1,14.7l3,13h0.5L52.2,15h2.3l3.6,12.7h0.5l3-13h2.2l-3.6,15h-3.8l-3.2-11.7l-3.2,11.7h-3.7l-3.6-15
+		H45.1z"/>
+	<path fill="#CCCCCC" d="M76.8,16.8c0,0-3.3-0.5-5.2-0.5c-1.9,0-3.3,0.5-3.3,2.3c0,1.4,0.7,1.8,3.9,2.3c3.8,0.6,5.2,1.4,5.2,4.3
+		c0,3.5-2.2,4.7-5.8,4.7c-1.9,0-5.3-0.6-5.3-0.6l0.1-1.9c0,0,3.4,0.5,4.9,0.5c2.5,0,3.8-0.5,3.8-2.6c0-1.6-0.8-1.9-4-2.5
+		c-3.4-0.5-5-1.2-5-4.2c0-3.3,2.7-4.4,5.4-4.4c2.2,0,5.4,0.6,5.4,0.6L76.8,16.8z"/>
+	<path fill="#CCCCCC" d="M91.8,27.7l0.1,1.8c0,0-3.4,0.5-5.8,0.5c-4.5,0-5.9-2.6-5.9-7.7c0-5.7,2.5-7.9,6.3-7.9c4,0,6,2.1,6,7
+		l-0.1,1.7h-9.9c0,3.2,1,4.9,3.9,4.9C88.6,28,91.8,27.7,91.8,27.7z M90.2,21.3c0-3.7-1.1-5-3.8-5c-2.5,0-4,1.4-4,5H90.2z"/>
+	<path fill="#CCCCCC" d="M95.9,14.7h2.2v2c0,0,2.6-1.8,5.5-2.4v2.3c-2.8,0.6-5.5,2-5.5,2v11h-2.2V14.7z"/>
+	<path fill="#CCCCCC" d="M128.3,11.1c0,0-4.2-0.5-5.9-0.5c-2.9,0-4.5,1-4.5,3.4c0,2.7,1.4,3.1,5.1,4c4.1,0.9,6,2,6,5.6
+		c0,4.6-2.5,6.4-6.6,6.4c-2.5,0-6.6-0.7-6.6-0.7l0.2-1.9c0,0,4.1,0.5,6.2,0.5c2.9,0,4.4-1.3,4.4-4.2c0-2.3-1.2-3-4.6-3.7
+		c-4.3-0.9-6.5-1.9-6.5-5.9c0-4,2.6-5.6,6.7-5.6c2.5,0,6.3,0.6,6.3,0.6L128.3,11.1z"/>
+	<path fill="#CCCCCC" d="M133.1,14.7l3.8,13h1l3.8-13h2.2l-6.2,21.7h-2.2l1.9-6.7h-2.2l-4.3-15H133.1z"/>
+	<path fill="#CCCCCC" d="M146.7,29.7v-15h2.2v1.1c0,0,2.4-1.4,4.6-1.4c4.1,0,5.1,2,5.1,7.4v7.9h-2.2v-7.9c0-4-0.5-5.4-3.2-5.4
+		c-2.2,0-4.2,1.1-4.2,1.1v12.2H146.7z"/>
+	<path fill="#CCCCCC" d="M172.5,14.8l-0.1,1.8c0,0-2.4-0.3-3.5-0.3c-3.5,0-4.4,1.5-4.4,5.5c0,4.4,0.7,6.1,4.4,6.1
+		c1.1,0,3.5-0.3,3.5-0.3l0.1,1.9c0,0-2.8,0.4-4.2,0.4c-4.8,0-6.2-2.2-6.2-8.1c0-5.4,1.8-7.5,6.2-7.5
+		C169.8,14.4,172.5,14.8,172.5,14.8z"/>
+</g>
+<g>
+	
+		<rect x="85.4" y="-68.6" transform="matrix(0.2114 0.9774 -0.9774 0.2114 87.4954 -68.9938)" fill="#F24747" width="2.1" height="176.6"/>
+</g>
+</svg>
diff --git a/img/bs-name.svg b/img/bs-name.svg
new file mode 100644
index 0000000..77ff893
--- /dev/null
+++ b/img/bs-name.svg
@@ -0,0 +1,32 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="160.1px" height="27.4px" viewBox="0 0 160.1 27.4" enable-background="new 0 0 160.1 27.4"
+	 xml:space="preserve">
+<defs>
+</defs>
+<g>
+	<path fill="#6D6D6D" d="M7.5,0c4,0,6.2,1.6,6.2,5.3c0,2.7-1,4-2.7,4.8c1.8,0.6,3.3,1.9,3.3,4.9c0,4.4-2.5,5.8-6.4,5.8H0V0H7.5z
+		 M2.3,2v7.2h5.3c2.6,0,3.7-1.2,3.7-3.7c0-2.4-1.3-3.4-3.9-3.4H2.3z M2.3,11.2v7.5h5.5c2.5,0,4.2-0.8,4.2-3.9c0-3.2-2.7-3.6-4.3-3.6
+		H2.3z"/>
+	<path fill="#6D6D6D" d="M18.1,5.8h2.2v2c0,0,2.6-1.8,5.5-2.4v2.3c-2.8,0.6-5.5,2-5.5,2v11h-2.2V5.8z"/>
+	<path fill="#6D6D6D" d="M40.3,13.1c0,5.5-1.4,8-6.4,8c-5,0-6.4-2.5-6.4-8c0-5.2,1.7-7.6,6.4-7.6C38.7,5.5,40.3,7.9,40.3,13.1z
+		 M38,13.1c0-4.2-0.9-5.7-4.1-5.7c-3.2,0-4.1,1.5-4.1,5.7c0,4.3,0.6,6,4.1,6C37.5,19.1,38,17.3,38,13.1z"/>
+	<path fill="#6D6D6D" d="M44.9,5.8l3,13h0.5L52,6.1h2.3l3.6,12.7h0.5l3-13h2.2l-3.6,15h-3.8L53.1,9l-3.2,11.7h-3.7l-3.6-15H44.9z"/>
+	<path fill="#6D6D6D" d="M76.6,7.9c0,0-3.3-0.5-5.2-0.5C69.5,7.5,68,8,68,9.7c0,1.4,0.7,1.8,3.9,2.3c3.8,0.6,5.2,1.4,5.2,4.3
+		c0,3.5-2.2,4.7-5.8,4.7c-1.9,0-5.3-0.6-5.3-0.6l0.1-1.9c0,0,3.4,0.5,4.9,0.5c2.5,0,3.8-0.5,3.8-2.6c0-1.6-0.8-1.9-4-2.5
+		c-3.4-0.5-5-1.2-5-4.2c0-3.3,2.7-4.4,5.4-4.4c2.2,0,5.4,0.6,5.4,0.6L76.6,7.9z"/>
+	<path fill="#6D6D6D" d="M91.6,18.8l0.1,1.8c0,0-3.4,0.5-5.8,0.5c-4.5,0-5.9-2.6-5.9-7.7c0-5.7,2.5-7.9,6.3-7.9c4,0,6,2.1,6,7
+		l-0.1,1.7h-9.9c0,3.2,1,4.9,3.9,4.9C88.4,19.1,91.6,18.8,91.6,18.8z M89.9,12.4c0-3.7-1.1-5-3.8-5c-2.5,0-4,1.4-4,5H89.9z"/>
+	<path fill="#6D6D6D" d="M95.7,5.8h2.2v2c0,0,2.6-1.8,5.5-2.4v2.3c-2.8,0.6-5.5,2-5.5,2v11h-2.2V5.8z"/>
+	<path fill="#6D6D6D" d="M116,7.9c0,0-3.3-0.5-5.2-0.5c-1.9,0-3.3,0.5-3.3,2.3c0,1.4,0.7,1.8,3.9,2.3c3.8,0.6,5.2,1.4,5.2,4.3
+		c0,3.5-2.2,4.7-5.8,4.7c-1.9,0-5.3-0.6-5.3-0.6l0.1-1.9c0,0,3.4,0.5,5,0.5c2.5,0,3.8-0.5,3.8-2.6c0-1.6-0.8-1.9-4-2.5
+		c-3.4-0.5-5-1.2-5-4.2c0-3.3,2.7-4.4,5.4-4.4c2.2,0,5.4,0.6,5.4,0.6L116,7.9z"/>
+	<path fill="#6D6D6D" d="M120.6,5.8l3.8,13h1l3.8-13h2.2l-6.2,21.7h-2.2l1.9-6.7h-2.2l-4.3-15H120.6z"/>
+	<path fill="#6D6D6D" d="M134.3,20.8v-15h2.2v1.1c0,0,2.4-1.4,4.6-1.4c4.1,0,5.1,2,5.1,7.4v7.9H144v-7.9c0-4-0.5-5.4-3.2-5.4
+		c-2.2,0-4.2,1.1-4.2,1.1v12.2H134.3z"/>
+	<path fill="#6D6D6D" d="M160.1,5.9L160,7.7c0,0-2.4-0.3-3.5-0.3c-3.5,0-4.4,1.5-4.4,5.5c0,4.4,0.7,6.1,4.4,6.1
+		c1.1,0,3.5-0.3,3.5-0.3l0.1,1.9c0,0-2.8,0.4-4.2,0.4c-4.8,0-6.2-2.2-6.2-8.1c0-5.4,1.8-7.5,6.2-7.5C157.4,5.5,160.1,5.9,160.1,5.9z
+		"/>
+</g>
+</svg>
diff --git a/img/icons/icons.svg b/img/icons/icons.svg
index 4bf78f5..475ba71 100644
--- a/img/icons/icons.svg
+++ b/img/icons/icons.svg
@@ -28,8 +28,11 @@
 <symbol id="svg-list" viewBox="0 0 20 20">
   <path d="M14.4 9H8.6c-.552 0-.6.447-.6 1s.048 1 .6 1h5.8c.552 0 .6-.447.6-1s-.048-1-.6-1zm2 5H8.6c-.552 0-.6.447-.6 1s.048 1 .6 1h7.8c.552 0 .6-.447.6-1s-.048-1-.6-1zM8.6 6h7.8c.552 0 .6-.447.6-1s-.048-1-.6-1H8.6c-.552 0-.6.447-.6 1s.048 1 .6 1zM5.4 9H3.6c-.552 0-.6.447-.6 1s.048 1 .6 1h1.8c.552 0 .6-.447.6-1s-.048-1-.6-1zm0 5H3.6c-.552 0-.6.447-.6 1s.048 1 .6 1h1.8c.552 0 .6-.447.6-1s-.048-1-.6-1zm0-10H3.6c-.552 0-.6.447-.6 1s.048 1 .6 1h1.8c.552 0 .6-.447.6-1s-.048-1-.6-1z"/>
 </symbol>
-<symbol id="svg-logo" viewBox="0 0 72.3 109">
-  <path d="M41.3 32.4v75.3c0 .8.8 1.3 1.5.9l28.9-15.7c.3-.2.5-.5.5-.9V49.3c0-.4-.2-.7-.5-.9L42.9 31.5c-.7-.4-1.6.1-1.6.9zM37.2 108V1c0-.7-.7-1.2-1.4-1L.7 13c-.4.2-.7.5-.7 1v81.4c0 .4.3.8.7 1L35.8 109c.7.2 1.4-.3 1.4-1z"/>
+<symbol id="svg-logo" viewBox="0 0 140 204.1">
+  <path d="M63.5.3L1.7 31.2c-1 .5-1.7 1.5-1.7 2.7v136.3c0 1.1.6 2.2 1.7 2.7l61.8 30.9c2 1 4.3-.5 4.3-2.7V3c0-2.2-2.3-3.7-4.3-2.7zM76.5 203.8l61.8-30.9c1-.5 1.7-1.5 1.7-2.7v-66.3c0-1.1-.6-2.2-1.7-2.7L76.5 70.3c-2-1-4.3.5-4.3 2.7v128.1c0 2.2 2.3 3.7 4.3 2.7z"/>
+</symbol>
+<symbol id="svg-wordmark" viewBox="0 0 536.3 106.8">
+  <path d="M33 .2L.9 16.2c-.6.3-.9.8-.9 1.4v70.8c0 .6.3 1.1.9 1.4l32.1 16c1 .5 2.3-.2 2.3-1.4V1.6C35.2.4 34-.4 33 .2zM39.7 105.8l32.1-16c.5-.3.9-.8.9-1.4V54c0-.6-.3-1.1-.9-1.4l-32.1-16c-1-.5-2.3.2-2.3 1.4v66.5c.1 1.1 1.3 1.8 2.3 1.3zM129.7 34.8c10.8 0 16.6 4 16.6 14.1 0 6.6-2.1 9.8-6.4 12.2 4.7 1.8 7.8 5.2 7.8 12.6 0 11.1-6.7 15.4-17.3 15.4H109V34.8h20.7zm-11.8 7.6V58h11.7c5.4 0 7.8-2.7 7.8-8 0-5.2-2.7-7.5-8.1-7.5h-11.4zm0 23v16.1h12c5.5 0 8.7-1.7 8.7-8.3 0-6.2-4.6-7.9-8.9-7.9h-11.8zM156.6 49.5h8.6v4.8s6.7-4.4 13.5-5.6v8.6c-7.2 1.4-13.4 6.3-13.4 6.3v25.6h-8.6V49.5zM365.4 49.5h8.6v4.8s6.7-4.4 13.5-5.6v8.6c-7.2 1.4-13.4 6.3-13.4 6.3v25.6h-8.6V49.5zM218.4 69.1c0 13.2-4 20.9-17.7 20.9-13.6 0-17.7-7.8-17.7-20.9 0-12.9 4.4-20.5 17.7-20.5s17.7 7.6 17.7 20.5zm-8.7 0c0-9.2-2-13.2-9-13.2s-9 4-9 13.2 1.6 13.6 9 13.6 9-4.4 9-13.6zM232.3 49.5l6.3 32.3h1.6l7.5-31.5h8.9l7.5 31.5h1.6l6.2-32.3h8.6l-8.4 39.7h-13.7L252.2 62 246 89.2h-13.7l-8.4-39.7h8.4zM315.4 57.7s-9.4-1.3-14.1-1.3c-4.8 0-6.9 1.1-6.9 4.4 0 2.6 1.7 3.3 9.4 4.7 9.5 1.7 12.9 4 12.9 12 0 9.3-5.9 12.6-15.7 12.6-5.5 0-14.7-1.7-14.7-1.7l.3-7.2s9.5 1.3 13.6 1.3c5.7 0 7.9-1.2 7.9-4.7 0-2.8-1.3-3.6-9.2-4.9-8.7-1.4-13.2-3.3-13.2-11.7 0-9 7-12.3 14.8-12.3 5.8 0 14.9 1.7 14.9 1.7v7.1zM355.6 81.8l.2 6.4s-9 1.8-16 1.8c-11.9 0-16.5-6.3-16.5-20.3 0-14.5 6.3-21.1 17.2-21.1 11.1 0 16.7 5.8 16.7 18.2l-.6 6.2H332c.1 6.3 2.5 9.5 9 9.5 6.2 0 14.6-.7 14.6-.7zm-7-15.5c0-7.9-2.4-10.6-8.2-10.6-5.9 0-8.5 2.9-8.6 10.6h16.8zM420.5 54.3S412 53 406.8 53c-4.9 0-9.4 1.3-9.4 6.7 0 4.1 2 5.3 10.6 6.7 10.2 1.7 14 3.5 14 11.1 0 9.3-5.8 12.3-15.3 12.3-4.8 0-13.6-1.4-13.6-1.4l.3-4.2s8.9 1.3 12.9 1.3c6.8 0 10.8-1.6 10.8-7.8 0-4.8-2.4-5.8-11.3-7.1-9.1-1.4-13.3-3.1-13.3-10.8 0-8.6 7.1-11.2 14-11.2 6 0 14 1.3 14 1.3v4.4zM432 49.5L442.5 85h2.9L456 49.5h4.8l-16.9 57.3h-4.8l5.1-17.7h-5.5L427 49.4h5zM468.9 89.2V49.5h4.7v2.9s6.7-3.7 12.9-3.7c10.9 0 13.3 5.1 13.3 19.6v20.9H495V68.5c0-11.7-1.3-15.6-9.2-15.6-6.2 0-12.2 3.3-12.2 3.3V89h-4.7zM536.2 49.7l-.2 4s-6.3-.8-9.3-.8c-9.5 0-12.3 4.2-12.3 15.6 0 12.5 1.9 17.1 12.3 17.1 3 0 9.4-.7 9.4-.7l.2 4s-7.1 1-10.5 1c-12.9 0-16.3-5.7-16.3-21.3 0-14.5 4.6-19.9 16.4-19.9 3.4 0 10.3 1 10.3 1z"/>
 </symbol>
 <symbol id="svg-github" viewBox="0 0 32 32">
   <path clip-rule="evenodd" d="M16.003 0C7.17 0 .008 7.162.008 15.997c0 7.067 4.582 13.063 10.94 15.18.8.145 1.052-.33 1.052-.753 0-.38.008-1.442 0-2.777-4.45.967-5.37-2.107-5.37-2.107-.728-1.848-1.776-2.34-1.776-2.34-1.452-.992.11-.973.11-.973 1.604.113 2.45 1.65 2.45 1.65 1.427 2.442 3.743 1.736 4.654 1.328.146-1.034.56-1.74 1.017-2.14C9.533 22.663 5.8 21.29 5.8 15.16c0-1.747.622-3.174 1.645-4.292-.165-.404-.715-2.03.157-4.234 0 0 1.343-.43 4.398 1.64 1.276-.354 2.645-.53 4.005-.537 1.36.006 2.727.183 4.005.538 3.055-2.07 4.396-1.64 4.396-1.64.872 2.202.323 3.83.16 4.233 1.022 1.118 1.643 2.545 1.643 4.292 0 6.146-3.74 7.498-7.305 7.893C19.48 23.548 20 24.508 20 26v4.428c0 .428.258.9 1.07.746C27.422 29.054 32 23.062 32 15.997 32 7.162 24.838 0 16.003 0z" fill-rule="evenodd"/>
@@ -56,5 +59,47 @@
   <path class="st0" d="M56.863 73.412l-5.4-16.12 16.69-5.59 5.398 16.12z"/>
   <path class="st0" d="M119.8 45.3c-12.9-43-31.5-53-74.5-40.1-43 12.9-53 31.5-40.1 74.5 12.9 43 31.5 53 74.5 40.1 43-12.9 53-31.5 40.1-74.5zM98.1 73.2L90 75.9l2.8 8.4c1.1 3.4-.7 7.1-4.1 8.2-.7.2-1.5.4-2.2.3-2.6-.1-5.1-1.8-6-4.4L77.7 80 61 85.7l2.8 8.4c1.1 3.4-.7 7.1-4.1 8.2-.7.2-1.5.4-2.2.3-2.6-.1-5.1-1.8-6-4.4l-2.8-8.4-8.1 2.7c-.7.2-1.5.4-2.2.3-2.6-.1-5.1-1.8-6-4.4-1.1-3.4.7-7.1 4.1-8.2l8.1-2.7-5.4-16.1-8.1 2.7c-.7.2-1.5.4-2.2.3-2.6-.1-5.1-1.8-6-4.4-1.1-3.4.7-7.1 4.1-8.2l8.1-2.7-2.8-8.4c-1.1-3.4.7-7.1 4.1-8.2 3.4-1.1 7.1.7 8.2 4.1l2.8 8.4 16.7-5.6-2.8-8.4c-1.1-3.4.7-7.1 4.1-8.2 3.4-1.1 7.1.7 8.2 4.1l2.8 8.4 8.1-2.7c3.4-1.1 7.1.7 8.2 4.1 1.1 3.4-.7 7.1-4.1 8.2l-8.1 2.7 5.4 16.1L94 61c3.4-1.1 7.1.7 8.2 4.1 1.1 3.3-.7 7-4.1 8.1z"/>
 </symbol>
+<symbol id="svg-evo-1" viewBox="0 0 187 129.3">
+  <path d="M137.3 113.3H187V0H18v33.6h119.3"/>
+  <path d="M10 49.7V38.6h121.8v81.7H65V50.5H10"/>
+  <path d="M30.7 126.3h30.6V54.7H4v29.9h26.8"/>
+  <path d="M0 88.5h27.1v40.8H0z"/>
+</symbol>
+<symbol id="svg-evo-2" viewBox="0 0 126 192.3">
+  <path d="M0 0v177.5l30.7-6.1.3-136.1 76 33.5V46.4"/>
+  <path d="M63.5 176L37 181.6V45.4L120 81v33.5L64.2 90.3"/>
+  <path d="M70 100.2v92.1l56-11v-57.1"/>
+</symbol>
+<symbol id="svg-evo-3" viewBox="0 0 115 173.4">
+  <path d="M75 47.9v125.5l10.9-8.4-.1-94.6L111 89.1V74.3M70 173.4V0L6 33.1v17.8l46-18 .8 131.9"/>
+  <path d="M89 77.9v90.5l26-19.8V96.9M48 169.4V39.5L0 57.8v88"/>
+</symbol>
+<symbol id="svg-typeface-reg" viewBox="0 0 113.8 77.2">
+  <path d="M20.9 0h18.5l20.9 76.1h-8.4l-5.5-19.6H13.9L8.4 76.1H0L20.9 0zm-5.2 49h28.8L33 7.3h-5.7L15.7 49zM107.5 65.9c.2 3.2 2.9 4.4 6.4 4.8l-.3 6.5c-5.8 0-9.8-1.1-13.1-4.4 0 0-9.9 4.4-19.8 4.4-10 0-15.5-5.7-15.5-16.8 0-10.6 5.5-15.2 16.8-16.3l17.3-1.6v-4.7c0-7.7-3.3-10.5-9.9-10.5-7.7 0-20.8 1.4-20.8 1.4l-.3-6.3S80.4 20 89.9 20c12.4 0 17.7 5.7 17.7 17.7v28.2zM82.9 50.3c-6.7.7-9.4 3.9-9.4 9.9 0 6.4 2.8 10.1 8.4 10.1 8.1 0 17.3-3.4 17.3-3.4V48.7l-16.3 1.6z"/>
+</symbol>
+<symbol id="svg-typeface-bold" viewBox="0 0 114.3 76.6">
+  <path d="M18.6 0h24.3l18.7 75.4H49.3l-4.1-16.2H16.3l-4.1 16.2H0L18.6 0zm.1 48.4h24.1l-9.2-38.2H28l-9.3 38.2zM109.5 62.4c.2 3.3 1.7 4.6 4.8 5.1l-.3 9.1c-6.7 0-10.6-.9-14.6-4.1 0 0-8.8 4.1-17.7 4.1-10.9 0-16.4-6-16.4-17.5 0-11.7 6.4-15.6 18.1-16.6l14.2-1.2v-4c0-6.1-2.6-7.9-8-7.9-7.4 0-20.7 1.1-20.7 1.1l-.5-8.5s12-2.9 22.1-2.9c13.4 0 18.9 5.6 18.9 18.2v25.1zM84.8 50.9c-5.1.4-7.6 2.9-7.6 7.8s2.1 8 6.7 8c6.3 0 13.6-2.4 13.6-2.4V49.7l-12.7 1.2z"/>
+</symbol>
+<symbol id="svg-typeface-thin" viewBox="0 0 113.3 78">
+  <path d="M23.6 0h11.7L59 77h-4l-7.2-23.6H11.1L4 77H0L23.6 0zM12.3 49.6h34.3l-14-45.9h-6.2L12.3 49.6zM105 69.9c.3 3.2 4.4 4.3 8.2 4.6l-.2 3.4c-4.7 0-8.9-1.2-11.3-4.6 0 0-11.2 4.7-22.2 4.7-9 0-14.4-5.4-14.4-16.1 0-9.3 4.4-14.7 15.2-15.8l20.9-2.2v-5.7c0-9.6-4.2-13.4-12.2-13.4s-20.8 1.9-20.8 1.9l-.3-3.7s12.3-2 21.1-2c11.1 0 16.1 5.8 16.1 17.2v31.7zM80.7 49.5c-8.6.9-11.5 4.8-11.5 12.4 0 8 3.7 12.5 10.5 12.5 10.3 0 21.6-4.5 21.6-4.5V47.4l-20.6 2.1z"/>
+</symbol>
+<symbol id="svg-logo-rotate" viewBox="0 0 140 204.1">
+  <path d="M76.5 203.8l61.8-30.9c1-.5 1.7-1.5 1.7-2.7V33.9c0-1.1-.6-2.2-1.7-2.7L76.5.3c-2-1-4.3.5-4.3 2.7v198.1c0 2.2 2.3 3.7 4.3 2.7zM63.5.3L1.7 31.2c-1 .5-1.7 1.5-1.7 2.7v66.3c0 1.1.6 2.2 1.7 2.7l61.8 30.9c2 1 4.3-.5 4.3-2.7V3c0-2.2-2.3-3.7-4.3-2.7z"/>
+</symbol>
+<symbol id="svg-logo-recolour" viewBox="0 0 140 204.1">
+  <path d="M63.5.3L1.7 31.2c-1 .5-1.7 1.5-1.7 2.7v136.3c0 1.1.6 2.2 1.7 2.7l61.8 30.9c2 1 4.3-.5 4.3-2.7V3c0-2.2-2.3-3.7-4.3-2.7zM76.5 203.8l61.8-30.9c1-.5 1.7-1.5 1.7-2.7v-66.3c0-1.1-.6-2.2-1.7-2.7L76.5 70.3c-2-1-4.3.5-4.3 2.7v128.1c0 2.2 2.3 3.7 4.3 2.7z"/>
+</symbol>
+<symbol id="svg-logo-distort" viewBox="0 0 216.4 204.1">
+  <path d="M98.1.3L2.6 31.2C1 31.7 0 32.8 0 33.9v136.3c0 1.1 1 2.2 2.6 2.7l95.5 30.9c3.1 1 6.7-.5 6.7-2.7V3c0-2.2-3.6-3.7-6.7-2.7zM118.3 203.8l95.5-30.9c1.6-.5 2.6-1.5 2.6-2.7v-66.3c0-1.1-1-2.2-2.6-2.7l-95.5-30.9c-3.1-1-6.7.5-6.7 2.7v128.1c0 2.2 3.6 3.7 6.7 2.7z"/>
+</symbol>
+<symbol id="svg-logo-alter" viewBox="0 0 140 210">
+  <path d="M70 0L0 35v140l70 35M140 105v70l-70 35V70"/>
+</symbol>
+<symbol id="svg-logo-multiply" viewBox="0 0 140 204.1">
+  <path d="M63.5.3L1.7 31.2c-1 .5-1.7 1.5-1.7 2.7v136.3c0 1.1.6 2.2 1.7 2.7l61.8 30.9c2 1 4.3-.5 4.3-2.7V3c0-2.2-2.3-3.7-4.3-2.7zM76.5 203.8l61.8-30.9c1-.5 1.7-1.5 1.7-2.7v-66.3c0-1.1-.6-2.2-1.7-2.7L76.5 70.3c-2-1-4.3.5-4.3 2.7v128.1c0 2.2 2.3 3.7 4.3 2.7zM110.9.1L90.1 10.5c-.3.2-.6.5-.6.9v45.9c0 .4.2.7.6.9l20.8 10.4c.7.3 1.5-.2 1.5-.9V1c0-.7-.8-1.2-1.5-.9zM115.3 68.6l20.8-10.4c.3-.2.6-.5.6-.9V35c0-.4-.2-.7-.6-.9l-20.8-10.4c-.7-.3-1.5.2-1.5.9v43.1c0 .7.8 1.2 1.5.9z"/>
+</symbol>
+<symbol id="svg-logo-outline" viewBox="0 0 145 214.1">
+  <path stroke="#0F2634" stroke-width="5" stroke-miterlimit="10" d="M70.3 2.2L2.5 36.1v140L70.3 210V2.2M74.7 210l67.8-33.9v-70L74.7 72.2z"/>
+</symbol>
 
 </svg>
\ No newline at end of file
diff --git a/img/icons/preview.html b/img/icons/preview.html
index ad52f97..267be87 100644
--- a/img/icons/preview.html
+++ b/img/icons/preview.html
@@ -220,6 +220,13 @@ <h1>Symbols</h1>
     <div class="icon-snippet">
         <pre><code>svg-logo</code></pre>
     </div>
+</div><div class="icon-wrapper">
+    <div class="icon-box">
+        <svg><use xlink:href="icons.svg#svg-wordmark"></use></svg>
+    </div>
+    <div class="icon-snippet">
+        <pre><code>svg-wordmark</code></pre>
+    </div>
 </div><div class="icon-wrapper">
     <div class="icon-box">
         <svg><use xlink:href="icons.svg#svg-github"></use></svg>
@@ -269,6 +276,90 @@ <h1>Symbols</h1>
     <div class="icon-snippet">
         <pre><code>svg-slack</code></pre>
     </div>
+</div><div class="icon-wrapper">
+    <div class="icon-box">
+        <svg><use xlink:href="icons.svg#svg-evo-1"></use></svg>
+    </div>
+    <div class="icon-snippet">
+        <pre><code>svg-evo-1</code></pre>
+    </div>
+</div><div class="icon-wrapper">
+    <div class="icon-box">
+        <svg><use xlink:href="icons.svg#svg-evo-2"></use></svg>
+    </div>
+    <div class="icon-snippet">
+        <pre><code>svg-evo-2</code></pre>
+    </div>
+</div><div class="icon-wrapper">
+    <div class="icon-box">
+        <svg><use xlink:href="icons.svg#svg-evo-3"></use></svg>
+    </div>
+    <div class="icon-snippet">
+        <pre><code>svg-evo-3</code></pre>
+    </div>
+</div><div class="icon-wrapper">
+    <div class="icon-box">
+        <svg><use xlink:href="icons.svg#svg-typeface-reg"></use></svg>
+    </div>
+    <div class="icon-snippet">
+        <pre><code>svg-typeface-reg</code></pre>
+    </div>
+</div><div class="icon-wrapper">
+    <div class="icon-box">
+        <svg><use xlink:href="icons.svg#svg-typeface-bold"></use></svg>
+    </div>
+    <div class="icon-snippet">
+        <pre><code>svg-typeface-bold</code></pre>
+    </div>
+</div><div class="icon-wrapper">
+    <div class="icon-box">
+        <svg><use xlink:href="icons.svg#svg-typeface-thin"></use></svg>
+    </div>
+    <div class="icon-snippet">
+        <pre><code>svg-typeface-thin</code></pre>
+    </div>
+</div><div class="icon-wrapper">
+    <div class="icon-box">
+        <svg><use xlink:href="icons.svg#svg-logo-rotate"></use></svg>
+    </div>
+    <div class="icon-snippet">
+        <pre><code>svg-logo-rotate</code></pre>
+    </div>
+</div><div class="icon-wrapper">
+    <div class="icon-box">
+        <svg><use xlink:href="icons.svg#svg-logo-recolour"></use></svg>
+    </div>
+    <div class="icon-snippet">
+        <pre><code>svg-logo-recolour</code></pre>
+    </div>
+</div><div class="icon-wrapper">
+    <div class="icon-box">
+        <svg><use xlink:href="icons.svg#svg-logo-distort"></use></svg>
+    </div>
+    <div class="icon-snippet">
+        <pre><code>svg-logo-distort</code></pre>
+    </div>
+</div><div class="icon-wrapper">
+    <div class="icon-box">
+        <svg><use xlink:href="icons.svg#svg-logo-alter"></use></svg>
+    </div>
+    <div class="icon-snippet">
+        <pre><code>svg-logo-alter</code></pre>
+    </div>
+</div><div class="icon-wrapper">
+    <div class="icon-box">
+        <svg><use xlink:href="icons.svg#svg-logo-multiply"></use></svg>
+    </div>
+    <div class="icon-snippet">
+        <pre><code>svg-logo-multiply</code></pre>
+    </div>
+</div><div class="icon-wrapper">
+    <div class="icon-box">
+        <svg><use xlink:href="icons.svg#svg-logo-outline"></use></svg>
+    </div>
+    <div class="icon-snippet">
+        <pre><code>svg-logo-outline</code></pre>
+    </div>
 </div>
 </main>
 </body>
diff --git a/img/logo-grid.svg b/img/logo-grid.svg
new file mode 100644
index 0000000..6e63271
--- /dev/null
+++ b/img/logo-grid.svg
@@ -0,0 +1,144 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="302.7px" height="374px" viewBox="0 0 302.7 374" enable-background="new 0 0 302.7 374"
+	 xml:space="preserve">
+<defs>
+</defs>
+<g>
+	<g>
+		<path fill="#DDDDDD" d="M280.1,374L140.2,304L0.4,374l-0.2-0.4l139.6-69.8L0.1,234v-0.4l139.6-69.8L0.1,94v-0.4l140-70h0.2l140,70
+			V94l-139.6,69.8l139.6,69.8v0.4l-139.6,69.8l139.6,69.8L280.1,374z M0.8,233.8l139.4,69.7l139.4-69.7L140.2,164L0.8,233.8z
+			 M0.8,93.8l139.4,69.7l139.4-69.7L140.2,24L0.8,93.8z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M140.4,374h-0.2l-140-70v-0.4l139.6-69.8L0.1,164v-0.4l139.6-69.8L0.1,24l0.2-0.4l139.9,69.9l139.9-69.9
+			l0.2,0.4L140.8,93.8l139.6,69.8v0.4l-139.6,69.8l139.6,69.8v0.4L140.4,374z M0.8,303.8l139.4,69.7l139.4-69.7L140.2,234L0.8,303.8
+			z M0.8,163.8l139.4,69.7l139.4-69.7L140.2,94L0.8,163.8z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M70.5,94H0V23.5h70.5V94z M0.5,93.5H70V24H0.5V93.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M35.5,59H0V23.5h35.5V59z M0.5,58.5H35V24H0.5V58.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M70.5,59H35V23.5h35.5V59z M35.5,58.5H70V24H35.5V58.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M35.5,94H0V58.5h35.5V94z M0.5,93.5H35V59H0.5V93.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M70.5,94H35V58.5h35.5V94z M35.5,93.5H70V59H35.5V93.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M35.5,59H0V23.5h35.5V59z M0.5,58.5H35V24H0.5V58.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M70.5,59H35V23.5h35.5V59z M35.5,58.5H70V24H35.5V58.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M35.5,94H0V58.5h35.5V94z M0.5,93.5H35V59H0.5V93.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M70.5,94H35V58.5h35.5V94z M35.5,93.5H70V59H35.5V93.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M18,41.5H0v-18h18V41.5z M0.5,41h17V24h-17V41z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M35.5,41.5h-18v-18h18V41.5z M18,41h17V24H18V41z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M53,41.5H35v-18h18V41.5z M35.5,41h17V24h-17V41z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M70.5,41.5h-18v-18h18V41.5z M53,41h17V24H53V41z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M70.5,59h-18V41h18V59z M53,58.5h17v-17H53V58.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M18,59H0V41h18V59z M0.5,58.5h17v-17h-17V58.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M35.5,59h-18V41h18V59z M18,58.5h17v-17H18V58.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M53,59H35V41h18V59z M35.5,58.5h17v-17h-17V58.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M18,76.5H0v-18h18V76.5z M0.5,76h17V59h-17V76z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M35.5,76.5h-18v-18h18V76.5z M18,76h17V59H18V76z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M53,76.5H35v-18h18V76.5z M35.5,76h17V59h-17V76z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M53,76.5H35v-18h18V76.5z M35.5,76h17V59h-17V76z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M70.5,76.5h-18v-18h18V76.5z M53,76h17V59H53V76z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M18,94H0V76h18V94z M0.5,93.5h17v-17h-17V93.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M35.5,94h-18V76h18V94z M18,93.5h17v-17H18V93.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M53,94H35V76h18V94z M35.5,93.5h17v-17h-17V93.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M70.5,94H0V23.5h70.5V94z M0.5,93.5H70V24H0.5V93.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M140.5,374H70V23.5h70.5V374z M70.5,373.5H140V24H70.5V373.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M280.5,94H210V23.5h70.5V94z M210.5,93.5H280V24h-69.5V93.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M280.5,164H0V93.5h280.5V164z M0.5,163.5H280V94H0.5V163.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M280.5,304H0v-70.5h280.5V304z M0.5,303.5H280V234H0.5V303.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M280.5,374H210v-70.5h70.5V374z M210.5,373.5H280V304h-69.5V373.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M210.5,304H70V93.5h140.5V304z M70.5,303.5H210V94H70.5V303.5z"/>
+	</g>
+	<path fill="#F24747" d="M133.7,97l-61.8,30.9c-1,0.5-1.7,1.5-1.7,2.7v136.3c0,1.1,0.6,2.2,1.7,2.7l61.8,30.9c2,1,4.3-0.5,4.3-2.7
+		V99.7C138.1,97.5,135.7,96,133.7,97z"/>
+	<path fill="#F24747" d="M146.8,300.5l61.8-30.9c1-0.5,1.7-1.5,1.7-2.7v-66.3c0-1.1-0.6-2.2-1.7-2.7L146.8,167c-2-1-4.3,0.5-4.3,2.7
+		v128.1C142.4,300,144.8,301.5,146.8,300.5z"/>
+	<g>
+		<path fill="#DDDDDD" d="M70.5,374H0v-70.5h70.5V374z M0.5,373.5H70V304H0.5V373.5z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M280.5,374H0V23.5h280.5V374z M0.5,373.5H280V24H0.5V373.5z"/>
+	</g>
+	<g>
+		<polygon fill="#0F2634" points="280.5,20.8 280,20.8 280,14 210.5,14 210.5,20.8 210,20.8 210,13.5 280.5,13.5 		"/>
+	</g>
+	<g>
+		<polygon fill="#0F2634" points="290.5,94 283.2,94 283.2,93.5 290,93.5 290,24 283.2,24 283.2,23.5 290.5,23.5 		"/>
+	</g>
+	<g>
+		<path fill="#0F2634" d="M297,54.5l1.8,3.1l1.8-3.1h2.1l-2.7,4.4l2.7,4.6h-2.1l-1.8-3.1l-1.8,3.1h-2.1l2.6-4.5l-2.6-4.5H297z"/>
+	</g>
+	<g>
+		<path fill="#0F2634" d="M243.5,0l1.8,3.1L247,0h2.1l-2.7,4.4l2.7,4.6H247l-1.8-3.1L243.5,9h-2.1l2.6-4.5L241.4,0H243.5z"/>
+	</g>
+	<g>
+		<polygon fill="#0F2634" points="140.5,100.8 140,100.8 140,94 70.5,94 70.5,100.8 70,100.8 70,93.5 140.5,93.5 		"/>
+	</g>
+	<g>
+		<path fill="#0F2634" d="M103.5,80.3l1.8,3.1l1.8-3.1h2.1l-2.7,4.4l2.7,4.6H107l-1.8-3.1l-1.8,3.1h-2.1l2.6-4.5l-2.6-4.5H103.5z"/>
+	</g>
+</g>
+</svg>
diff --git a/img/svg/evo-1.svg b/img/svg/evo-1.svg
new file mode 100644
index 0000000..45d6ac2
--- /dev/null
+++ b/img/svg/evo-1.svg
@@ -0,0 +1,12 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="187px" height="129.3px" viewBox="0 0 187 129.3" enable-background="new 0 0 187 129.3"
+	 xml:space="preserve">
+<defs>
+</defs>
+<polygon fill="#CCCCCC" points="137.3,113.3 187,113.3 187,0 18,0 18,33.6 137.3,33.6 "/>
+<polygon fill="#CCCCCC" points="10,49.7 10,38.6 131.8,38.6 131.8,120.3 65,120.3 65,50.5 10,50.5 "/>
+<polygon fill="#CCCCCC" points="30.7,126.3 61.3,126.3 61.3,54.7 4,54.7 4,84.6 30.8,84.6 "/>
+<rect x="0" y="88.5" fill="#CCCCCC" width="27.1" height="40.8"/>
+</svg>
diff --git a/img/svg/evo-2.svg b/img/svg/evo-2.svg
new file mode 100644
index 0000000..ef6a9e8
--- /dev/null
+++ b/img/svg/evo-2.svg
@@ -0,0 +1,11 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="126px" height="192.3px" viewBox="0 0 126 192.3" enable-background="new 0 0 126 192.3"
+	 xml:space="preserve">
+<defs>
+</defs>
+<polygon fill="#CCCCCC" points="0,0 0,177.5 30.7,171.4 31,35.3 107,68.8 107,46.4 "/>
+<polygon fill="#CCCCCC" points="63.5,176 37,181.6 37,45.4 120,81 120,114.5 64.2,90.3 "/>
+<polygon fill="#CCCCCC" points="70,100.2 70,192.3 126,181.3 126,124.2 "/>
+</svg>
diff --git a/img/svg/evo-3.svg b/img/svg/evo-3.svg
new file mode 100644
index 0000000..2cb000b
--- /dev/null
+++ b/img/svg/evo-3.svg
@@ -0,0 +1,12 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="115px" height="173.4px" viewBox="0 0 115 173.4" enable-background="new 0 0 115 173.4"
+	 xml:space="preserve">
+<defs>
+</defs>
+<polygon fill="#CCCCCC" points="75,47.9 75,173.4 85.9,165 85.8,70.4 111,89.1 111,74.3 "/>
+<polygon fill="#CCCCCC" points="70,173.4 70,0 6,33.1 6,50.9 52,32.9 52.8,164.8 "/>
+<polygon fill="#CCCCCC" points="89,77.9 89,168.4 115,148.6 115,96.9 "/>
+<polygon fill="#CCCCCC" points="48,169.4 48,39.5 0,57.8 0,145.8 "/>
+</svg>
diff --git a/img/svg/evo-4.svg b/img/svg/evo-4.svg
new file mode 100644
index 0000000..ee8ca44
--- /dev/null
+++ b/img/svg/evo-4.svg
@@ -0,0 +1,12 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="140px" height="204.1px" viewBox="0 0 140 204.1" enable-background="new 0 0 140 204.1"
+	 xml:space="preserve">
+<defs>
+</defs>
+<path fill="#F24747" d="M63.5,0.3L1.7,31.2c-1,0.5-1.7,1.5-1.7,2.7v136.3c0,1.1,0.6,2.2,1.7,2.7l61.8,30.9c2,1,4.3-0.5,4.3-2.7V3
+	C67.8,0.8,65.5-0.7,63.5,0.3z"/>
+<path fill="#F24747" d="M76.5,203.8l61.8-30.9c1-0.5,1.7-1.5,1.7-2.7v-66.3c0-1.1-0.6-2.2-1.7-2.7L76.5,70.3c-2-1-4.3,0.5-4.3,2.7
+	v128.1C72.2,203.3,74.5,204.8,76.5,203.8z"/>
+</svg>
diff --git a/img/svg/logo-alter.svg b/img/svg/logo-alter.svg
new file mode 100644
index 0000000..ddebac3
--- /dev/null
+++ b/img/svg/logo-alter.svg
@@ -0,0 +1,9 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="140px" height="210px" viewBox="0 0 140 210" enable-background="new 0 0 140 210" xml:space="preserve">
+<defs>
+</defs>
+<polygon fill="#F24747" points="70,0 0,35 0,175 70,210 "/>
+<polygon fill="#F24747" points="140,105 140,175 70,210 70,70 "/>
+</svg>
diff --git a/img/svg/logo-distort.svg b/img/svg/logo-distort.svg
new file mode 100644
index 0000000..09cf602
--- /dev/null
+++ b/img/svg/logo-distort.svg
@@ -0,0 +1,12 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="216.4px" height="204.1px" viewBox="0 0 216.4 204.1" enable-background="new 0 0 216.4 204.1"
+	 xml:space="preserve">
+<defs>
+</defs>
+<path fill="#F24747" d="M98.1,0.3L2.6,31.2C1,31.7,0,32.8,0,33.9l0,136.3c0,1.1,1,2.2,2.6,2.7l95.5,30.9c3.1,1,6.7-0.5,6.7-2.7V3
+	C104.8,0.8,101.2-0.7,98.1,0.3z"/>
+<path fill="#F24747" d="M118.3,203.8l95.5-30.9c1.6-0.5,2.6-1.5,2.6-2.7v-66.3c0-1.1-1-2.2-2.6-2.7l-95.5-30.9
+	c-3.1-1-6.7,0.5-6.7,2.7v128.1C111.6,203.3,115.2,204.8,118.3,203.8z"/>
+</svg>
diff --git a/img/svg/logo-multiply.svg b/img/svg/logo-multiply.svg
new file mode 100644
index 0000000..cd32709
--- /dev/null
+++ b/img/svg/logo-multiply.svg
@@ -0,0 +1,16 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="140px" height="204.1px" viewBox="0 0 140 204.1" enable-background="new 0 0 140 204.1"
+	 xml:space="preserve">
+<defs>
+</defs>
+<path fill="#F24747" d="M63.5,0.3L1.7,31.2c-1,0.5-1.7,1.5-1.7,2.7v136.3c0,1.1,0.6,2.2,1.7,2.7l61.8,30.9c2,1,4.3-0.5,4.3-2.7V3
+	C67.8,0.8,65.5-0.7,63.5,0.3z"/>
+<path fill="#F24747" d="M76.5,203.8l61.8-30.9c1-0.5,1.7-1.5,1.7-2.7v-66.3c0-1.1-0.6-2.2-1.7-2.7L76.5,70.3c-2-1-4.3,0.5-4.3,2.7
+	v128.1C72.2,203.3,74.5,204.8,76.5,203.8z"/>
+<path fill="#F24747" d="M110.9,0.1L90.1,10.5c-0.3,0.2-0.6,0.5-0.6,0.9v45.9c0,0.4,0.2,0.7,0.6,0.9l20.8,10.4
+	c0.7,0.3,1.5-0.2,1.5-0.9V1C112.4,0.3,111.6-0.2,110.9,0.1z"/>
+<path fill="#F24747" d="M115.3,68.6l20.8-10.4c0.3-0.2,0.6-0.5,0.6-0.9V35c0-0.4-0.2-0.7-0.6-0.9l-20.8-10.4
+	c-0.7-0.3-1.5,0.2-1.5,0.9v43.1C113.8,68.4,114.6,68.9,115.3,68.6z"/>
+</svg>
diff --git a/img/svg/logo-outline.svg b/img/svg/logo-outline.svg
new file mode 100644
index 0000000..cfad036
--- /dev/null
+++ b/img/svg/logo-outline.svg
@@ -0,0 +1,12 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="145px" height="214.1px" viewBox="0 0 145 214.1" enable-background="new 0 0 145 214.1"
+	 xml:space="preserve">
+<defs>
+</defs>
+<polyline fill="#F24747" stroke="#0F2634" stroke-width="5" stroke-miterlimit="10" points="70.3,2.2 2.5,36.1 2.5,176.1 70.3,210
+	70.3,2.2 "/>
+<polygon fill="#F24747" stroke="#0F2634" stroke-width="5" stroke-miterlimit="10" points="74.7,210 142.5,176.1 142.5,106.1
+	74.7,72.2 "/>
+</svg>
diff --git a/img/svg/logo-recolour.svg b/img/svg/logo-recolour.svg
new file mode 100644
index 0000000..a2f06d3
--- /dev/null
+++ b/img/svg/logo-recolour.svg
@@ -0,0 +1,12 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="140px" height="204.1px" viewBox="0 0 140 204.1" enable-background="new 0 0 140 204.1"
+	 xml:space="preserve">
+<defs>
+</defs>
+<path fill="#00B236" d="M63.5,0.3L1.7,31.2c-1,0.5-1.7,1.5-1.7,2.7l0,136.3c0,1.1,0.6,2.2,1.7,2.7l61.8,30.9c2,1,4.3-0.5,4.3-2.7V3
+	C67.8,0.8,65.5-0.7,63.5,0.3z"/>
+<path fill="#00B236" d="M76.5,203.8l61.8-30.9c1-0.5,1.7-1.5,1.7-2.7v-66.3c0-1.1-0.6-2.2-1.7-2.7L76.5,70.3c-2-1-4.3,0.5-4.3,2.7
+	v128.1C72.2,203.3,74.5,204.8,76.5,203.8z"/>
+</svg>
diff --git a/img/svg/logo-rotate.svg b/img/svg/logo-rotate.svg
new file mode 100644
index 0000000..bb2cedc
--- /dev/null
+++ b/img/svg/logo-rotate.svg
@@ -0,0 +1,12 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="140px" height="204.1px" viewBox="0 0 140 204.1" enable-background="new 0 0 140 204.1"
+	 xml:space="preserve">
+<defs>
+</defs>
+<path fill="#F24747" d="M76.5,203.8l61.8-30.9c1-0.5,1.7-1.5,1.7-2.7V33.9c0-1.1-0.6-2.2-1.7-2.7L76.5,0.3c-2-1-4.3,0.5-4.3,2.7
+	v198.1C72.2,203.3,74.5,204.8,76.5,203.8z"/>
+<path fill="#F24747" d="M63.5,0.3L1.7,31.2c-1,0.5-1.7,1.5-1.7,2.7l0,66.3c0,1.1,0.6,2.2,1.7,2.7l61.8,30.9c2,1,4.3-0.5,4.3-2.7V3
+	C67.8,0.8,65.5-0.7,63.5,0.3z"/>
+</svg>
diff --git a/img/svg/logo.svg b/img/svg/logo.svg
index 3c355a1..ee8ca44 100644
--- a/img/svg/logo.svg
+++ b/img/svg/logo.svg
@@ -1,11 +1,12 @@
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In  -->
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
 <svg version="1.1"
 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
-	 x="0px" y="0px" width="72.3px" height="109px" viewBox="0 0 72.3 109" enable-background="new 0 0 72.3 109" xml:space="preserve">
-<g>
-	<path fill="#FFFFFF" d="M41.3,32.4v75.3c0,0.8,0.8,1.3,1.5,0.9l28.9-15.7c0.3-0.2,0.5-0.5,0.5-0.9V49.3c0-0.4-0.2-0.7-0.5-0.9
-		L42.9,31.5C42.2,31.1,41.3,31.6,41.3,32.4z"/>
-	<path fill="#FFFFFF" d="M37.2,108V1c0-0.7-0.7-1.2-1.4-1l-35.1,13c-0.4,0.2-0.7,0.5-0.7,1v81.4c0,0.4,0.3,0.8,0.7,1L35.8,109
-		C36.5,109.2,37.2,108.7,37.2,108z"/>
-</g>
+	 x="0px" y="0px" width="140px" height="204.1px" viewBox="0 0 140 204.1" enable-background="new 0 0 140 204.1"
+	 xml:space="preserve">
+<defs>
+</defs>
+<path fill="#F24747" d="M63.5,0.3L1.7,31.2c-1,0.5-1.7,1.5-1.7,2.7v136.3c0,1.1,0.6,2.2,1.7,2.7l61.8,30.9c2,1,4.3-0.5,4.3-2.7V3
+	C67.8,0.8,65.5-0.7,63.5,0.3z"/>
+<path fill="#F24747" d="M76.5,203.8l61.8-30.9c1-0.5,1.7-1.5,1.7-2.7v-66.3c0-1.1-0.6-2.2-1.7-2.7L76.5,70.3c-2-1-4.3,0.5-4.3,2.7
+	v128.1C72.2,203.3,74.5,204.8,76.5,203.8z"/>
 </svg>
diff --git a/img/svg/typeface-bold.svg b/img/svg/typeface-bold.svg
new file mode 100644
index 0000000..c7cd1af
--- /dev/null
+++ b/img/svg/typeface-bold.svg
@@ -0,0 +1,14 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="114.3px" height="76.6px" viewBox="0 0 114.3 76.6" enable-background="new 0 0 114.3 76.6"
+	 xml:space="preserve">
+<defs>
+</defs>
+<g>
+	<path d="M18.6,0h24.3l18.7,75.4H49.3l-4.1-16.2H16.3l-4.1,16.2H0L18.6,0z M18.7,48.4h24.1l-9.2-38.2H28L18.7,48.4z"/>
+	<path d="M109.5,62.4c0.2,3.3,1.7,4.6,4.8,5.1l-0.3,9.1c-6.7,0-10.6-0.9-14.6-4.1c0,0-8.8,4.1-17.7,4.1c-10.9,0-16.4-6-16.4-17.5
+		c0-11.7,6.4-15.6,18.1-16.6l14.2-1.2v-4c0-6.1-2.6-7.9-8-7.9c-7.4,0-20.7,1.1-20.7,1.1L68.4,22c0,0,12-2.9,22.1-2.9
+		c13.4,0,18.9,5.6,18.9,18.2V62.4z M84.8,50.9c-5.1,0.4-7.6,2.9-7.6,7.8s2.1,8,6.7,8c6.3,0,13.6-2.4,13.6-2.4V49.7L84.8,50.9z"/>
+</g>
+</svg>
diff --git a/img/svg/typeface-reg.svg b/img/svg/typeface-reg.svg
new file mode 100644
index 0000000..3b95a6a
--- /dev/null
+++ b/img/svg/typeface-reg.svg
@@ -0,0 +1,15 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="113.8px" height="77.2px" viewBox="0 0 113.8 77.2" enable-background="new 0 0 113.8 77.2"
+	 xml:space="preserve">
+<defs>
+</defs>
+<g>
+	<path d="M20.9,0h18.5l20.9,76.1h-8.4l-5.5-19.6H13.9L8.4,76.1H0L20.9,0z M15.7,49h28.8L33,7.3h-5.7L15.7,49z"/>
+	<path d="M107.5,65.9c0.2,3.2,2.9,4.4,6.4,4.8l-0.3,6.5c-5.8,0-9.8-1.1-13.1-4.4c0,0-9.9,4.4-19.8,4.4c-10,0-15.5-5.7-15.5-16.8
+		c0-10.6,5.5-15.2,16.8-16.3l17.3-1.6v-4.7c0-7.7-3.3-10.5-9.9-10.5c-7.7,0-20.8,1.4-20.8,1.4l-0.3-6.3c0,0,12.1-2.4,21.6-2.4
+		c12.4,0,17.7,5.7,17.7,17.7V65.9z M82.9,50.3c-6.7,0.7-9.4,3.9-9.4,9.9c0,6.4,2.8,10.1,8.4,10.1c8.1,0,17.3-3.4,17.3-3.4V48.7
+		L82.9,50.3z"/>
+</g>
+</svg>
diff --git a/img/svg/typeface-thin.svg b/img/svg/typeface-thin.svg
new file mode 100644
index 0000000..0c03868
--- /dev/null
+++ b/img/svg/typeface-thin.svg
@@ -0,0 +1,15 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="113.3px" height="78px" viewBox="0 0 113.3 78" enable-background="new 0 0 113.3 78" xml:space="preserve"
+	>
+<defs>
+</defs>
+<g>
+	<path d="M23.6,0h11.7L59,77h-4l-7.2-23.6H11.1L4,77H0L23.6,0z M12.3,49.6h34.3L32.6,3.7h-6.2L12.3,49.6z"/>
+	<path d="M105,69.9c0.3,3.2,4.4,4.3,8.2,4.6l-0.2,3.4c-4.7,0-8.9-1.2-11.3-4.6c0,0-11.2,4.7-22.2,4.7c-9,0-14.4-5.4-14.4-16.1
+		c0-9.3,4.4-14.7,15.2-15.8l20.9-2.2v-5.7c0-9.6-4.2-13.4-12.2-13.4s-20.8,1.9-20.8,1.9L67.9,23c0,0,12.3-2,21.1-2
+		c11.1,0,16.1,5.8,16.1,17.2V69.9z M80.7,49.5c-8.6,0.9-11.5,4.8-11.5,12.4c0,8,3.7,12.5,10.5,12.5c10.3,0,21.6-4.5,21.6-4.5V47.4
+		L80.7,49.5z"/>
+</g>
+</svg>
diff --git a/img/svg/wordmark.svg b/img/svg/wordmark.svg
new file mode 100644
index 0000000..b47d110
--- /dev/null
+++ b/img/svg/wordmark.svg
@@ -0,0 +1,38 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="536.3px" height="106.8px" viewBox="0 0 536.3 106.8" enable-background="new 0 0 536.3 106.8"
+	 xml:space="preserve">
+<defs>
+</defs>
+<path fill="#F24747" d="M33,0.2l-32.1,16C0.3,16.5,0,17,0,17.6v70.8c0,0.6,0.3,1.1,0.9,1.4l32.1,16c1,0.5,2.3-0.2,2.3-1.4V1.6
+	C35.2,0.4,34-0.4,33,0.2z"/>
+<path fill="#F24747" d="M39.7,105.8l32.1-16c0.5-0.3,0.9-0.8,0.9-1.4V54c0-0.6-0.3-1.1-0.9-1.4l-32.1-16c-1-0.5-2.3,0.2-2.3,1.4
+	v66.5C37.5,105.6,38.7,106.3,39.7,105.8z"/>
+<g>
+	<path fill="#F24747" d="M129.7,34.8c10.8,0,16.6,4,16.6,14.1c0,6.6-2.1,9.8-6.4,12.2c4.7,1.8,7.8,5.2,7.8,12.6
+		c0,11.1-6.7,15.4-17.3,15.4H109V34.8H129.7z M117.9,42.4V58h11.7c5.4,0,7.8-2.7,7.8-8c0-5.2-2.7-7.5-8.1-7.5H117.9z M117.9,65.4
+		v16.1h12c5.5,0,8.7-1.7,8.7-8.3c0-6.2-4.6-7.9-8.9-7.9H117.9z"/>
+	<path fill="#F24747" d="M156.6,49.5h8.6v4.8c0,0,6.7-4.4,13.5-5.6v8.6c-7.2,1.4-13.4,6.3-13.4,6.3v25.6h-8.6V49.5z"/>
+	<path fill="#F24747" d="M365.4,49.5h8.6v4.8c0,0,6.7-4.4,13.5-5.6v8.6c-7.2,1.4-13.4,6.3-13.4,6.3v25.6h-8.6V49.5z"/>
+	<path fill="#F24747" d="M218.4,69.1c0,13.2-4,20.9-17.7,20.9c-13.6,0-17.7-7.8-17.7-20.9c0-12.9,4.4-20.5,17.7-20.5
+		S218.4,56.2,218.4,69.1z M209.7,69.1c0-9.2-2-13.2-9-13.2c-7,0-9,4-9,13.2s1.6,13.6,9,13.6C208.1,82.7,209.7,78.3,209.7,69.1z"/>
+	<path fill="#F24747" d="M232.3,49.5l6.3,32.3h1.6l7.5-31.5h8.9l7.5,31.5h1.6l6.2-32.3h8.6l-8.4,39.7h-13.7L252.2,62L246,89.2h-13.7
+		l-8.4-39.7H232.3z"/>
+	<path fill="#F24747" d="M315.4,57.7c0,0-9.4-1.3-14.1-1.3c-4.8,0-6.9,1.1-6.9,4.4c0,2.6,1.7,3.3,9.4,4.7c9.5,1.7,12.9,4,12.9,12
+		c0,9.3-5.9,12.6-15.7,12.6c-5.5,0-14.7-1.7-14.7-1.7l0.3-7.2c0,0,9.5,1.3,13.6,1.3c5.7,0,7.9-1.2,7.9-4.7c0-2.8-1.3-3.6-9.2-4.9
+		c-8.7-1.4-13.2-3.3-13.2-11.7c0-9,7-12.3,14.8-12.3c5.8,0,14.9,1.7,14.9,1.7L315.4,57.7z"/>
+	<path fill="#F24747" d="M355.6,81.8l0.2,6.4c0,0-9,1.8-16,1.8c-11.9,0-16.5-6.3-16.5-20.3c0-14.5,6.3-21.1,17.2-21.1
+		c11.1,0,16.7,5.8,16.7,18.2l-0.6,6.2h-24.6c0.1,6.3,2.5,9.5,9,9.5C347.2,82.5,355.6,81.8,355.6,81.8z M348.6,66.3
+		c0-7.9-2.4-10.6-8.2-10.6c-5.9,0-8.5,2.9-8.6,10.6H348.6z"/>
+	<path fill="#F24747" d="M420.5,54.3c0,0-8.5-1.3-13.7-1.3c-4.9,0-9.4,1.3-9.4,6.7c0,4.1,2,5.3,10.6,6.7c10.2,1.7,14,3.5,14,11.1
+		c0,9.3-5.8,12.3-15.3,12.3c-4.8,0-13.6-1.4-13.6-1.4l0.3-4.2c0,0,8.9,1.3,12.9,1.3c6.8,0,10.8-1.6,10.8-7.8c0-4.8-2.4-5.8-11.3-7.1
+		c-9.1-1.4-13.3-3.1-13.3-10.8c0-8.6,7.1-11.2,14-11.2c6,0,14,1.3,14,1.3L420.5,54.3z"/>
+	<path fill="#F24747" d="M432,49.5L442.5,85h2.9L456,49.5h4.8l-16.9,57.3h-4.8l5.1-17.7h-5.5l-11.7-39.7H432z"/>
+	<path fill="#F24747" d="M468.9,89.2V49.5h4.7v2.9c0,0,6.7-3.7,12.9-3.7c10.9,0,13.3,5.1,13.3,19.6v20.9H495V68.5
+		c0-11.7-1.3-15.6-9.2-15.6c-6.2,0-12.2,3.3-12.2,3.3v32.8H468.9z"/>
+	<path fill="#F24747" d="M536.2,49.7l-0.2,4c0,0-6.3-0.8-9.3-0.8c-9.5,0-12.3,4.2-12.3,15.6c0,12.5,1.9,17.1,12.3,17.1
+		c3,0,9.4-0.7,9.4-0.7l0.2,4c0,0-7.1,1-10.5,1c-12.9,0-16.3-5.7-16.3-21.3c0-14.5,4.6-19.9,16.4-19.9
+		C529.3,48.7,536.2,49.7,536.2,49.7z"/>
+</g>
+</svg>
diff --git a/img/wordmark-grid.svg b/img/wordmark-grid.svg
new file mode 100644
index 0000000..0b6aee8
--- /dev/null
+++ b/img/wordmark-grid.svg
@@ -0,0 +1,118 @@
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="663.5px" height="207.5px" viewBox="0 0 663.5 207.5" enable-background="new 0 0 663.5 207.5"
+	 xml:space="preserve">
+<defs>
+</defs>
+<g>
+	<g>
+		<path fill="#0F2634" d="M2.1,14.3l1.8,3.1l1.8-3.1h2.1L5,18.7l2.7,4.6H5.6l-1.8-3.1l-1.8,3.1H0l2.6-4.5L0,14.3H2.1z"/>
+	</g>
+	<g>
+		<path fill="#0F2634" d="M38.3,198.4l1.8,3.1l1.8-3.1h2.1l-2.7,4.4l2.7,4.6h-2.1l-1.8-3.1l-1.8,3.1h-2.1l2.6-4.5l-2.6-4.5H38.3z"/>
+	</g>
+	<g>
+		<path fill="#0F2634" d="M647.8,159.7l1.8,3.1l1.8-3.1h2.1l-2.7,4.4l2.7,4.6h-2.1l-1.8-3.1l-1.8,3.1h-2.1l2.6-4.5l-2.6-4.5H647.8z"
+			/>
+	</g>
+	<g>
+		<path fill="#0F2634" d="M657.8,32.7l1.8,3.1l1.8-3.1h2.1l-2.7,4.4l2.7,4.6h-2.1l-1.8-3.1l-1.8,3.1h-2.1l2.6-4.5l-2.6-4.5H657.8z"
+			/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M94.8,182.6H58V0.4h36.8V182.6z M58.5,182.1h35.8V0.9H58.5V182.1z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M167.5,37.2h-36.8V0.4h36.8V37.2z M131.2,36.7H167V0.9h-35.8V36.7z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M631.1,37.2h-36.8V0.4h36.8V37.2z M594.8,36.7h35.8V0.9h-35.8V36.7z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M631.1,182.6h-36.8v-36.8h36.8V182.6z M594.8,182.1h35.8v-35.8h-35.8V182.1z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M631.1,182.6h-36.8V0.4h36.8V182.6z M594.8,182.1h35.8V0.9h-35.8V182.1z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M594.8,37.2H167V0.4h427.8V37.2z M167.5,36.7h426.8V0.9H167.5V36.7z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M631.1,73.6H167V36.7h464.1V73.6z M167.5,73.1h463.1V37.2H167.5V73.1z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M594.8,182.6H167v-36.8h427.8V182.6z M167.5,182.1h426.8v-35.8H167.5V182.1z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M167.5,73.6H21.6V36.7h145.9V73.6z M22.1,73.1H167V37.2H22.1V73.1z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M167.5,146.3H21.6v-36.8h145.9V146.3z M22.1,145.8H167v-35.8H22.1V145.8z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M167.5,182.6h-36.8v-36.8h36.8V182.6z M131.2,182.1H167v-35.8h-35.8V182.1z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M131.2,146.3H58V36.7h73.2V146.3z M58.5,145.8h72.2V37.2H58.5V145.8z"/>
+	</g>
+	<path fill="#F24747" d="M91.2,38.7l-32.1,16c-0.5,0.3-0.9,0.8-0.9,1.4v70.8c0,0.6,0.3,1.1,0.9,1.4l32.1,16c1,0.5,2.3-0.2,2.3-1.4
+		V40.1C93.4,38.9,92.2,38.2,91.2,38.7z"/>
+	<path fill="#F24747" d="M98,144.3l32.1-16c0.5-0.3,0.9-0.8,0.9-1.4V92.5c0-0.6-0.3-1.1-0.9-1.4L98,75c-1-0.5-2.3,0.2-2.3,1.4v66.5
+		C95.7,144.1,96.9,144.8,98,144.3z"/>
+	<g>
+		<path fill="#DDDDDD" d="M58.5,182.6H21.6v-36.8h36.8V182.6z M22.1,182.1H58v-35.8H22.1V182.1z"/>
+	</g>
+	<g>
+		<path fill="#DDDDDD" d="M594.8,182.6H21.6V0.4h573.2V182.6z M22.1,182.1h572.2V0.9H22.1V182.1z"/>
+	</g>
+	<g>
+		<polygon fill="#0F2634" points="641.1,73.2 634.8,73.2 634.8,72.7 640.6,72.7 640.6,0.5 634.8,0.5 634.8,0 641.1,0 		"/>
+	</g>
+	<g>
+		<polygon fill="#0F2634" points="641.1,182.6 634.8,182.6 634.8,182.1 640.6,182.1 640.6,146.2 634.8,146.2 634.8,145.7
+			641.1,145.7 		"/>
+	</g>
+	<g>
+		<polygon fill="#0F2634" points="167.5,192.6 130.7,192.6 130.7,186.3 131.2,186.3 131.2,192.1 167,192.1 167,186.3 167.5,186.3
+			"/>
+	</g>
+	<g>
+		<polygon fill="#0F2634" points="58.5,192.6 21.6,192.6 21.6,186.3 22.1,186.3 22.1,192.1 58,192.1 58,186.3 58.5,186.3 		"/>
+	</g>
+	<g>
+		<polygon fill="#0F2634" points="18,37.2 11.6,37.2 11.6,0.4 18,0.4 18,0.9 12.1,0.9 12.1,36.7 18,36.7 		"/>
+	</g>
+	<g>
+		<path d="M647.4,41.7v-1.4l2.4-2.4c1.2-1.3,1.9-2,1.9-3c0-1.1-0.6-1.4-1.8-1.4c-1,0-2.3,0.3-2.3,0.3l-0.1-1.3c0,0,1.4-0.4,2.8-0.4
+			c2.1,0,3.1,0.9,3.1,2.7c0,1.4-0.6,2.3-2.1,3.7l-2,2h4.3v1.4H647.4z"/>
+	</g>
+	<g>
+		<path fill="#F24747" d="M187.9,73.3c10.8,0,16.6,4,16.6,14.1c0,6.6-2.1,9.8-6.4,12.2c4.7,1.8,7.8,5.2,7.8,12.6
+			c0,11.1-6.7,15.4-17.3,15.4h-21.3V73.3H187.9z M176.1,80.9v15.6h11.7c5.4,0,7.8-2.7,7.8-8c0-5.2-2.7-7.5-8.1-7.5H176.1z
+			 M176.1,104v16.1h12c5.5,0,8.7-1.7,8.7-8.3c0-6.2-4.6-7.9-8.9-7.9H176.1z"/>
+		<path fill="#F24747" d="M214.8,88h8.6v4.8c0,0,6.7-4.4,13.5-5.6v8.6c-7.2,1.4-13.4,6.3-13.4,6.3v25.6h-8.6V88z"/>
+		<path fill="#F24747" d="M423.6,88h8.6v4.8c0,0,6.7-4.4,13.5-5.6v8.6c-7.2,1.4-13.4,6.3-13.4,6.3v25.6h-8.6V88z"/>
+		<path fill="#F24747" d="M276.6,107.6c0,13.2-4,20.9-17.7,20.9c-13.6,0-17.7-7.8-17.7-20.9c0-12.9,4.4-20.5,17.7-20.5
+			C272.2,87.1,276.6,94.7,276.6,107.6z M267.9,107.6c0-9.2-2-13.2-9-13.2c-7,0-9,4-9,13.2s1.6,13.6,9,13.6
+			C266.3,121.2,267.9,116.8,267.9,107.6z"/>
+		<path fill="#F24747" d="M290.6,88l6.3,32.3h1.6l7.5-31.5h8.9l7.5,31.5h1.6l6.2-32.3h8.6l-8.4,39.7h-13.7l-6.2-27.2l-6.2,27.2
+			h-13.7L282.1,88H290.6z"/>
+		<path fill="#F24747" d="M373.6,96.2c0,0-9.4-1.3-14.1-1.3c-4.8,0-6.9,1.1-6.9,4.4c0,2.6,1.7,3.3,9.4,4.7c9.5,1.7,12.9,4,12.9,12
+			c0,9.3-5.9,12.6-15.7,12.6c-5.5,0-14.7-1.7-14.7-1.7l0.3-7.2c0,0,9.5,1.3,13.6,1.3c5.7,0,7.9-1.2,7.9-4.7c0-2.8-1.3-3.6-9.2-4.9
+			c-8.7-1.4-13.2-3.3-13.2-11.7c0-9,7-12.3,14.8-12.3c5.8,0,14.9,1.7,14.9,1.7L373.6,96.2z"/>
+		<path fill="#F24747" d="M413.8,120.3l0.2,6.4c0,0-9,1.8-16,1.8c-11.9,0-16.5-6.3-16.5-20.3c0-14.5,6.3-21.1,17.2-21.1
+			c11.1,0,16.7,5.8,16.7,18.2l-0.6,6.2h-24.6c0.1,6.3,2.5,9.5,9,9.5C405.4,121,413.8,120.3,413.8,120.3z M406.8,104.8
+			c0-7.9-2.4-10.6-8.2-10.6c-5.9,0-8.5,2.9-8.6,10.6H406.8z"/>
+		<path fill="#F24747" d="M478.7,92.8c0,0-8.5-1.3-13.7-1.3c-4.9,0-9.4,1.3-9.4,6.7c0,4.1,2,5.3,10.6,6.7c10.2,1.7,14,3.5,14,11.1
+			c0,9.3-5.8,12.3-15.3,12.3c-4.8,0-13.6-1.4-13.6-1.4l0.3-4.2c0,0,8.9,1.3,12.9,1.3c6.8,0,10.8-1.6,10.8-7.8
+			c0-4.8-2.4-5.8-11.3-7.1c-9.1-1.4-13.3-3.1-13.3-10.8c0-8.6,7.1-11.2,14-11.2c6,0,14,1.3,14,1.3L478.7,92.8z"/>
+		<path fill="#F24747" d="M490.2,88l10.6,35.5h2.9L514.2,88h4.8l-16.9,57.3h-4.8l5.1-17.7H497L485.3,88H490.2z"/>
+		<path fill="#F24747" d="M527.1,127.7V88h4.7v2.9c0,0,6.7-3.7,12.9-3.7c10.9,0,13.3,5.1,13.3,19.6v20.9h-4.8V107
+			c0-11.7-1.3-15.6-9.2-15.6c-6.2,0-12.2,3.3-12.2,3.3v32.8H527.1z"/>
+		<path fill="#F24747" d="M594.4,88.2l-0.2,4c0,0-6.3-0.8-9.3-0.8c-9.5,0-12.3,4.2-12.3,15.6c0,12.5,1.9,17.1,12.3,17.1
+			c3,0,9.4-0.7,9.4-0.7l0.2,4c0,0-7.1,1-10.5,1c-12.9,0-16.3-5.7-16.3-21.3c0-14.5,4.6-19.9,16.4-19.9
+			C587.5,87.2,594.4,88.2,594.4,88.2z"/>
+	</g>
+</g>
+</svg>
diff --git a/index.html b/index.html
index f8c48ca..fae5bea 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><!--[if lt IE 7]><html class="no-js ie ie6 lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]--><!--[if IE 7]><html class="no-js ie ie7 lt-ie10 lt-ie9 lt-ie8" lang="en"><![endif]--><!--[if IE 8]><html class="no-js ie ie8 lt-ie10 lt-ie9" lang="en"><![endif]--><!--[if IE 9]><html class="no-js ie ie9 lt-ie10" lang="en"><![endif]--><!--[if gt IE 9]><!--><html class="no-js ffly" lang=en><!--<![endif]--><head><meta charset="utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=description content="Browsersync makes your browser testing workflow faster by synchronising URLs, interactions and code changes across multiple devices. It&amp;rsquo;s wicked-fast and totally free."><meta name=viewport content="width=device-width,initial-scale=1"><title>Browsersync - Time-saving synchronised browser testing</title><link href=/favicon.ico rel="shortcut icon" type=image/ico><link rel=stylesheet href="//fonts.googleapis.com/css?family=Titillium+Web:400,400italic,700"><link rel=stylesheet href="/css/core.min.css"><!--[if gt IE 9]><script src="/img/icons/svg4everybody.min.js"></script><![endif]--></head><body id=page-top><div class="header-wrap home"><header class="wrapper site-header" role=banner><div class=container><nav><ul class=site-nav><li class="nav__item logo"><a href="/" class=nav-link><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-logo></use></svg> Browser<span>sync</span></a></li><li class=nav__item><a href=/docs class=nav-link>Documentation</a></li><li class=nav__item><a href="https://browsersync.herokuapp.com/" class=nav-link>Community</a></li><li class="nav__item nav__item--right"><a href=https://github.com/Browsersync/browser-sync class=nav-link title="Browsersync on Github"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-github></use></svg></a> <a href=https://twitter.com/browsersync class=nav-link title="@Browsersync on Twitter"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-twitter></use></svg></a> <a href=https://browsersync.herokuapp.com class=nav-link title="Browsersync Slack Team"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-slack></use></svg></a></li></ul></nav></div></header><section class="wrapper intro"><div class=container><svg class="svg-icon logo logo--large"><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-logo></use></svg><h1 class=hook>Time-saving synchronised browser testing.</h1><p class=ronseal>It&rsquo;s wicked-fast and totally free.</p><p class=video><a class=video__link href=#><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-circle-play></use></svg></a></p><p class=how-to></p><p class=how-to__command>npm install -g browser-sync</p><p class=cta><a class="button button--primary" href=#install title="Get Started">Get Started</a></p><div class=player><p>'bonjour</p></div></div></section><div class=overlay><div class=overlay__close><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-cross></use></svg></div><div class=overlay__content><div class=overlay__video></div></div></div></div><div class=site-body role=main><section class="wrapper overview"><div class=container><div class=usp><div class=usp__content><h2 class=usp__title>Your indispensable test assistant.</h2><p>With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks. It’s like an extra pair of hands.Customise an array of sync settings from the UI or command line to create a personalised test environment. Need more control? Browsersync is easily integrated with your web platform, build tools and other Node.js projects.</p></div><div class=usp__thumb><img src=img/ezgif.com-optimize.gif alt=""></div><div class=usp__platforms><img src=/img/platforms.png alt=""></div></div></div></section><section class="wrapper integrations"><div class=container><p class=integrations__text>Integrates with your current build tools like <a href=/docs/gulp>Gulp</a> & <a href=/docs/grunt>Grunt</a></p><img src=/img/build-tools.png class=integrations__thumb alt=""></div></section><section class="wrapper features"><div class=container><h2 class=section-title>Awesome Features</h2><div class=feature__list><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-check></use></svg><h3>Install and run anywhere</h3></div><p>Built on Node.js to support Windows, MacOS and Linux. Setup in less than 5 minutes.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-creative-commons-noncommercial-us></use></svg><h3>Free to run and reuse</h3></div><p>Browsersync is an open source project available to use under the Apache 2.0 License.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-back-in-time></use></svg><h3>Build-tool compatible</h3></div><p>Easily integrated with task runners like Grunt and Gulp, or included in other Node projects.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-time-slot></use></svg><h3>Network Throttle</h3></div><p>Test your website against a slower connection. Even when devices are connected to wifi.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-merge></use></svg><h3>Interaction sync</h3></div><p>Your scroll, click, refresh and form actions are mirrored between browsers while you test.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-text></use></svg><h3>File sync</h3></div><p>Browsers are automatically updated as you change HTML, CSS, images and other project files.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-tv></use></svg><h3>UI or CLI control</h3></div><p>Run the new browser-based UI for quick control, or stick with the original command line usage.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-block></use></svg><h3>Sync customisation</h3></div><p>Toggle individual sync settings to create your preferred test environment.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-list></use></svg><h3>URL history</h3></div><p>Records your test URLs so you can push them back out to all devices with a single click.</p></div></div></div></div></section><section class="wrapper jh"><div class=container><a href="http://www.wearejh.com/" class=jh__logo><img src=/img/jh-logo.png alt=""></a><h3 class=jh__title>An open source project by JH</h3><p class=jh__text>BrowserSync is an open-source project created and maintained by the front-end designers/developers at <a href="http://www.wearejh.com/" title="visit http://wearejh.com">JH</a>. Together with contributors from all over the world, we aim to make modern, multi-device web development faster & easier.</p><p class=jh__links><a href=https://github.com/Browsersync/browser-sync title="Browsersync on Github"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-github></use></svg></a> <a href=https://twitter.com/browsersync title="@Browsersync on Twitter"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-twitter></use></svg></a> <a href=https://browsersync.herokuapp.com title="Browsersync Slack Team"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-slack></use></svg></a></p></div></section><section class="wrapper wrapper--alt users"><div class=container><h2 class=section-title>Tried and trusted.</h2><div class=user__list><div class=user__logo><img src=/img/user-paravel.png alt="Paravel uses Browsersync"></div><div class="user__logo google"><img src=/img/user-google.png alt="Google uses Browsersync"></div><div class="user__logo adobe"><img src=/img/user-adobe.png alt="Adobe uses Browsersync"></div></div><div class=user__list><div class=user__person><img src=/img/user-rupert-sm.jpg alt=""><div class=person__quote><p class=person__name>Dave Rupert</p><blockquote><p>Want to feel like a modern day demigod? Fire up Browsersync and control an entire device lab with your phone.</p></blockquote><p><a href="http://paravelinc.com/">Paravel</a> and <a href="http://shoptalkshow.com/">Shop Talk Show</a></p></div></div><div class=user__person><img src=/img/user-addy-sm.jpg alt=""><div class=person__quote><p class=person__name>Addy Osmani</p><blockquote><p>It has a fantastic feature-set and at least 5 developers I’ve spoken to this week alone swear by it for their own synchronized cross-device testing.</p></blockquote><p>Google and <a href="https://addyosmani.com/">addyosmani.com</a></p></div></div></div></div></section><section id=install class="wrapper install"><div class="container container--skinny"><h2 class=section-title>Get started in 5 minutes.</h2><p class=lede></p><ol class=step-list><li class=step><h3>1. Install Node.js</h3><p>Browsersync is a module for Node.js, a platform for fast network applications. There are convenient <a href="http://nodejs.org/download/">installers for MacOS, Windows and Linux</a>.</p></li><li class=step><h3>2. Install Browsersync</h3><p>The Node.js package manager (npm) is used to install Browsersync from <a href=https://npmjs.org/package/browser-sync>a repository</a>. Open a terminal window and run the following command:</p><pre><code>npm install -g browser-sync</code></pre><p>You&rsquo;re telling the package manager to download the Browsersync files and install them globally so they&rsquo;re available to all your projects.</p></li><li class=step><h3>3. Start Browsersync</h3><p>A basic use is to watch all CSS files in the <code>css</code> directory and update connected browsers if a change occurs. Navigate your terminal window to a project and run the appropriate command:</p><h4>Static sites</h4><p>If you&rsquo;re only using <code>.html</code> files, you&rsquo;ll need to use the <em>server mode</em>. Browsersync will start a mini-server and provide a URL to view your site.</p><pre><code>browser-sync start --server --files "css/*.css"</code></pre><h4>Dynamic sites</h4><p>If you&rsquo;re already running a local server with PHP or similar, you&rsquo;ll need to use the <em>proxy mode</em>. Browsersync will wrap your vhost with a proxy URL to view your site.</p><pre><code>browser-sync start --proxy "myproject.dev" --files "css/*.css"</code></pre></li></ol><div class=grid><div class="one-half text--center"><h3>User Guides</h3><ul class=nav><li><a href=/docs>Documentation</a></li><li><a href=/docs/command-line>Command line usage</a></li><li><a href=http://stackoverflow.com/questions/tagged/browser-sync>Get help on Stack Overflow</a></li><li><a href=https://github.com/Browsersync/browser-sync/issues>Report issues on Github</a></li></ul></div><div class="one-half text--center"><h3>Integration Guides</h3><ul class=nav><li><a href=/docs/grunt>Grunt plugin</a></li><li><a href=/docs/gulp>Gulp integration</a></li><li><a href=/docs/api>API documentation</a></li><li><a href=/docs/options>Options documentation</a></li></ul></div></div></div></section></div><footer class="wrapper signup" role=contentinfo><div class=container><p class=signup__title>Stay up to date with the latest features</p><form action=http://browsersync.us11.list-manage.com/subscribe method=GET><div class=signup__form><input type=hidden name=u value="fe62ed4e9f3fa1d6efb09da31"> <input type=hidden name=id value="22216352ac"> <input type=text placeholder=Email... name=MERGE0 class="input input--text form__email"> <input type=submit value=Signup class="button button--primary form__submit"></div></form><div class=signup__links><a href=https://github.com/Browsersync/browser-sync title="Browsersync on Github"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-github></use></svg></a> <a href=https://twitter.com/browsersync title="@Browsersync on Twitter"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-twitter></use></svg></a> <a href=https://browsersync.herokuapp.com title="Browsersync Slack Team"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-slack></use></svg></a></div></div></footer><div class=credit><div class=container><nav><ul class=site-nav><li class=nav__item><a href=/docs class=nav-link>Documentation</a></li><li class=nav__item><a href="https://browsersync.herokuapp.com/" class=nav-link>Community</a></li><li class="nav__item credit__thumb"><span>An open source project by</span> <a href="http://www.wearejh.com/" class=nav-link><img src=/img/jh-logo-white.png alt="JH"></a></li></ul></nav></div></div><script src=/js/dist/app.min.js></script><script>!function(s,y,n,c,I,t){s.GoogleAnalyticsObject=c,s[c]||(s[c]=function(){
+<!DOCTYPE html><!--[if lt IE 7]><html class="no-js ie ie6 lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]--><!--[if IE 7]><html class="no-js ie ie7 lt-ie10 lt-ie9 lt-ie8" lang="en"><![endif]--><!--[if IE 8]><html class="no-js ie ie8 lt-ie10 lt-ie9" lang="en"><![endif]--><!--[if IE 9]><html class="no-js ie ie9 lt-ie10" lang="en"><![endif]--><!--[if gt IE 9]><!--><html class="no-js ffly" lang=en><!--<![endif]--><head><meta charset="utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta name=description content="Browsersync makes your browser testing workflow faster by synchronising URLs, interactions and code changes across multiple devices. It&amp;rsquo;s wicked-fast and totally free."><meta name=viewport content="width=device-width,initial-scale=1"><title>Browsersync - Time-saving synchronised browser testing</title><link href=/favicon.ico rel="shortcut icon" type=image/ico><link rel=stylesheet href="//fonts.googleapis.com/css?family=Titillium+Web:400,400italic,700"><link rel=stylesheet href="/css/core.min.css"><!--[if gt IE 9]><script src="/img/icons/svg4everybody.min.js"></script><![endif]--></head><body id=page-top><div class="header-wrap home"><header class="wrapper site-header" role=banner><div class=container><nav><ul class=site-nav><li class="nav__item logo"><a href="/" class=nav-link><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-wordmark></use></svg></a></li><li class=nav__item><a href=/docs class=nav-link>Documentation</a></li><li class=nav__item><a href="https://browsersync.herokuapp.com/" class=nav-link>Community</a></li><li class="nav__item nav__item--right"><a href=https://github.com/Browsersync/browser-sync class=nav-link title="Browsersync on Github"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-github></use></svg></a> <a href=https://twitter.com/browsersync class=nav-link title="@Browsersync on Twitter"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-twitter></use></svg></a> <a href=https://browsersync.herokuapp.com class=nav-link title="Browsersync Slack Team"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-slack></use></svg></a></li></ul></nav></div></header><section class="wrapper intro"><div class=container><svg class="svg-icon logo logo--large"><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-logo></use></svg><h1 class=hook>Time-saving synchronised browser testing.</h1><p class=ronseal>It&rsquo;s wicked-fast and totally free.</p><p class=video><a class=video__link href=#><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-circle-play></use></svg></a></p><p class=how-to></p><p class=how-to__command>npm install -g browser-sync</p><p class=cta><a class="button button--primary" href=#install title="Get Started">Get Started</a></p><div class=player><p>'bonjour</p></div></div></section><div class=overlay><div class=overlay__close><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-cross></use></svg></div><div class=overlay__content><div class=overlay__video></div></div></div></div><div class=site-body role=main><section class="wrapper overview"><div class=container><div class=usp><div class=usp__content><h2 class=usp__title>Your indispensable test assistant.</h2><p>With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks. It’s like an extra pair of hands.Customise an array of sync settings from the UI or command line to create a personalised test environment. Need more control? Browsersync is easily integrated with your web platform, build tools and other Node.js projects.</p></div><div class=usp__thumb><img src=img/ezgif.com-optimize.gif alt=""></div><div class=usp__platforms><img src=/img/platforms.png alt=""></div></div></div></section><section class="wrapper integrations"><div class=container><p class=integrations__text>Integrates with your current build tools like <a href=/docs/gulp>Gulp</a> & <a href=/docs/grunt>Grunt</a></p><img src=/img/build-tools.png class=integrations__thumb alt=""></div></section><section class="wrapper features"><div class=container><h2 class=section-title>Awesome Features</h2><div class=feature__list><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-check></use></svg><h3>Install and run anywhere</h3></div><p>Built on Node.js to support Windows, MacOS and Linux. Setup in less than 5 minutes.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-creative-commons-noncommercial-us></use></svg><h3>Free to run and reuse</h3></div><p>Browsersync is an open source project available to use under the Apache 2.0 License.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-back-in-time></use></svg><h3>Build-tool compatible</h3></div><p>Easily integrated with task runners like Grunt and Gulp, or included in other Node projects.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-time-slot></use></svg><h3>Network Throttle</h3></div><p>Test your website against a slower connection. Even when devices are connected to wifi.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-merge></use></svg><h3>Interaction sync</h3></div><p>Your scroll, click, refresh and form actions are mirrored between browsers while you test.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-text></use></svg><h3>File sync</h3></div><p>Browsers are automatically updated as you change HTML, CSS, images and other project files.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-tv></use></svg><h3>UI or CLI control</h3></div><p>Run the new browser-based UI for quick control, or stick with the original command line usage.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-block></use></svg><h3>Sync customisation</h3></div><p>Toggle individual sync settings to create your preferred test environment.</p></div></div><div class=feature__item><div class=feature__content><div class=feature__title><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-list></use></svg><h3>URL history</h3></div><p>Records your test URLs so you can push them back out to all devices with a single click.</p></div></div></div></div></section><section class="wrapper jh"><div class=container><a href="http://www.wearejh.com/" class=jh__logo><img src=/img/jh-logo.png alt=""></a><h3 class=jh__title>An open source project by JH</h3><p class=jh__text>BrowserSync is an open-source project created and maintained by the front-end designers/developers at <a href="http://www.wearejh.com/" title="visit http://wearejh.com">JH</a>. Together with contributors from all over the world, we aim to make modern, multi-device web development faster & easier.</p><p class=jh__links><a href=https://github.com/Browsersync/browser-sync title="Browsersync on Github"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-github></use></svg></a> <a href=https://twitter.com/browsersync title="@Browsersync on Twitter"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-twitter></use></svg></a> <a href=https://browsersync.herokuapp.com title="Browsersync Slack Team"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-slack></use></svg></a></p></div></section><section class="wrapper wrapper--alt users"><div class=container><h2 class=section-title>Tried and trusted.</h2><div class=user__list><div class=user__logo><img src=/img/user-paravel.png alt="Paravel uses Browsersync"></div><div class="user__logo google"><img src=/img/user-google.png alt="Google uses Browsersync"></div><div class="user__logo adobe"><img src=/img/user-adobe.png alt="Adobe uses Browsersync"></div></div><div class=user__list><div class=user__person><img src=/img/user-rupert-sm.jpg alt=""><div class=person__quote><p class=person__name>Dave Rupert</p><blockquote><p>Want to feel like a modern day demigod? Fire up Browsersync and control an entire device lab with your phone.</p></blockquote><p><a href="http://paravelinc.com/">Paravel</a> and <a href="http://shoptalkshow.com/">Shop Talk Show</a></p></div></div><div class=user__person><img src=/img/user-addy-sm.jpg alt=""><div class=person__quote><p class=person__name>Addy Osmani</p><blockquote><p>It has a fantastic feature-set and at least 5 developers I’ve spoken to this week alone swear by it for their own synchronized cross-device testing.</p></blockquote><p>Google and <a href="https://addyosmani.com/">addyosmani.com</a></p></div></div></div></div></section><section id=install class="wrapper install"><div class="container container--skinny"><h2 class=section-title>Get started in 5 minutes.</h2><p class=lede></p><ol class=step-list><li class=step><h3>1. Install Node.js</h3><p>Browsersync is a module for Node.js, a platform for fast network applications. There are convenient <a href="http://nodejs.org/download/">installers for MacOS, Windows and Linux</a>.</p></li><li class=step><h3>2. Install Browsersync</h3><p>The Node.js package manager (npm) is used to install Browsersync from <a href=https://npmjs.org/package/browser-sync>a repository</a>. Open a terminal window and run the following command:</p><pre><code>npm install -g browser-sync</code></pre><p>You&rsquo;re telling the package manager to download the Browsersync files and install them globally so they&rsquo;re available to all your projects.</p></li><li class=step><h3>3. Start Browsersync</h3><p>A basic use is to watch all CSS files in the <code>css</code> directory and update connected browsers if a change occurs. Navigate your terminal window to a project and run the appropriate command:</p><h4>Static sites</h4><p>If you&rsquo;re only using <code>.html</code> files, you&rsquo;ll need to use the <em>server mode</em>. Browsersync will start a mini-server and provide a URL to view your site.</p><pre><code>browser-sync start --server --files "css/*.css"</code></pre><h4>Dynamic sites</h4><p>If you&rsquo;re already running a local server with PHP or similar, you&rsquo;ll need to use the <em>proxy mode</em>. Browsersync will wrap your vhost with a proxy URL to view your site.</p><pre><code>browser-sync start --proxy "myproject.dev" --files "css/*.css"</code></pre></li></ol><div class=grid><div class="one-half text--center"><h3>User Guides</h3><ul class=nav><li><a href=/docs>Documentation</a></li><li><a href=/docs/command-line>Command line usage</a></li><li><a href=http://stackoverflow.com/questions/tagged/browser-sync>Get help on Stack Overflow</a></li><li><a href=https://github.com/Browsersync/browser-sync/issues>Report issues on Github</a></li></ul></div><div class="one-half text--center"><h3>Integration Guides</h3><ul class=nav><li><a href=/docs/grunt>Grunt plugin</a></li><li><a href=/docs/gulp>Gulp integration</a></li><li><a href=/docs/api>API documentation</a></li><li><a href=/docs/options>Options documentation</a></li></ul></div></div></div></section></div><footer class="wrapper signup" role=contentinfo><div class=container><p class=signup__title>Stay up to date with the latest features</p><form action=http://browsersync.us11.list-manage.com/subscribe method=GET><div class=signup__form><input type=hidden name=u value="fe62ed4e9f3fa1d6efb09da31"> <input type=hidden name=id value="22216352ac"> <input type=text placeholder=Email... name=MERGE0 class="input input--text form__email"> <input type=submit value=Signup class="button button--primary form__submit"></div></form><div class=signup__links><a href=https://github.com/Browsersync/browser-sync title="Browsersync on Github"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-github></use></svg></a> <a href=https://twitter.com/browsersync title="@Browsersync on Twitter"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-twitter></use></svg></a> <a href=https://browsersync.herokuapp.com title="Browsersync Slack Team"><svg class=svg-icon><use xmlns:xlink=http://www.w3.org/1999/xlink xlink:href=/img/icons/icons.svg#svg-slack></use></svg></a></div></div></footer><div class=credit><div class=container><nav><ul class=site-nav><li class=nav__item><a href=/docs class=nav-link>Documentation</a></li><li class=nav__item><a href="https://browsersync.herokuapp.com/" class=nav-link>Community</a></li><li class=nav__item><a href=/brand-assets class=nav-link>Brand Assets</a></li><li class="nav__item credit__thumb"><span>An open source project by</span> <a href="http://www.wearejh.com/" class=nav-link><img src=/img/jh-logo-white.png alt="JH"></a></li></ul></nav></div></div><script src=/js/dist/app.min.js></script><script>!function(s,y,n,c,I,t){s.GoogleAnalyticsObject=c,s[c]||(s[c]=function(){
         (s[c].q=s[c].q||[]).push(arguments)}),s[c].l=+new Date,I=y.createElement(n),
         t=y.getElementsByTagName(n)[0],I.src="//www.google-analytics.com/analytics.js",
         t.parentNode.insertBefore(I,t)}(window,document,"script","ga");
diff --git a/index.src/index.html b/index.src/index.html
index afe0c55..346bae7 100644
--- a/index.src/index.html
+++ b/index.src/index.html
@@ -32,8 +32,8 @@
             <nav>
                 <ul class="site-nav">
                     <li class="nav__item logo">
-                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-logo"></use></svg>
-     Browser<span>sync</span></a>
+                        <a href="/" class="nav-link"><svg class="svg-icon "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/icons/icons.svg#svg-wordmark"></use></svg>
+    </a>
                     </li>
                     <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                     <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
@@ -364,6 +364,7 @@ <h3>Integration Guides</h3>
             <ul class="site-nav">
                 <li class="nav__item "><a href="/docs" class="nav-link">Documentation</a></li>
                 <li class="nav__item "><a href="https://browsersync.herokuapp.com/" class="nav-link">Community</a></li>
+                <li class="nav__item "><a href="/brand-assets" class="nav-link">Brand Assets</a></li>
                 <li class="nav__item credit__thumb">
                     <span>An open source project by</span>
                     <a href="http://www.wearejh.com/" class="nav-link"><img src="/img/jh-logo-white.png" alt="JH"/></a>
diff --git a/js/dist/app.js b/js/dist/app.js
index cc21eb0..538ea45 100644
--- a/js/dist/app.js
+++ b/js/dist/app.js
@@ -116,7 +116,7 @@ function listVideoClose() {
         evt.preventDefault();
         overlay.classList.remove('open');
         setTimeout(function () {
-            video.innerHTML = '';
+            video.innerHTML = "";
             var script = document.getElementById('quickcast-vid');
             script.parentNode.removeChild(script);
         }, 300);
diff --git a/js/dist/app.min.js b/js/dist/app.min.js
index 967339a..e899034 100644
--- a/js/dist/app.min.js
+++ b/js/dist/app.min.js
@@ -1 +1 @@
-!function e(t,n,o){function r(u,a){if(!n[u]){if(!t[u]){var c="function"==typeof require&&require;if(!a&&c)return c(u,!0);if(i)return i(u,!0);var d=new Error("Cannot find module '"+u+"'");throw d.code="MODULE_NOT_FOUND",d}var l=n[u]={exports:{}};t[u][0].call(l.exports,function(e){var n=t[u][1][e];return r(n?n:e)},l,l.exports,e,t,n,o)}return n[u].exports}for(var i="function"==typeof require&&require,u=0;u<o.length;u++)r(o[u]);return r}({1:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=function(e,t){return document.querySelectorAll(e)[0]},t.exports=n["default"]},{}],2:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}var r=e("./sticky-nav"),i=o(r),u=e("./video-loader"),a=o(u);i["default"](),a["default"]()},{"./sticky-nav":3,"./video-loader":4}],3:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(){function e(e){e.preventDefault(),a.classList.toggle("open")}var t=u["default"](".nav-expand"),n="ontouchstart"in window,o="click";n&&(o="touchstart"),t.addEventListener(o,e)}Object.defineProperty(n,"__esModule",{value:!0});var i=e("./$"),u=o(i),a=void 0;n["default"]=function(){"/docs"===window.location.pathname.slice(0,5)&&(a=u["default"](".doc-nav"),a&&r())},t.exports=n["default"]},{"./$":1}],4:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(){return"<iframe name='quickcast' src='http://quick.as/embed/az3sxrb' scrolling='no' frameborder='0' width=\"100%\" allowfullscreen></iframe>"}function i(){var e=document.createElement("script");e.src="http://quick.as/embed/script/1.60",e.id="quickcast-vid",document.body.appendChild(e)}function u(){l.addEventListener("click",function(e){e.preventDefault(),f.classList.add("open"),setTimeout(function(){v.innerHTML=r(),i()},300)})}function a(){s.addEventListener("click",function(e){e.preventDefault(),f.classList.remove("open"),setTimeout(function(){v.innerHTML="";var e=document.getElementById("quickcast-vid");e.parentNode.removeChild(e)},300)})}Object.defineProperty(n,"__esModule",{value:!0});var c=e("./$"),d=o(c),l=void 0,f=void 0,s=void 0,v=void 0;n["default"]=function(){"/"===window.location.pathname.slice(0,5)&&(f=d["default"](".overlay"),l=d["default"](".video__link"),s=d["default"](".overlay__close"),v=d["default"](".overlay__video"),l&&(u(),a()))},t.exports=n["default"]},{"./$":1}]},{},[2]);
\ No newline at end of file
+!function e(t,n,o){function r(u,a){if(!n[u]){if(!t[u]){var c="function"==typeof require&&require;if(!a&&c)return c(u,!0);if(i)return i(u,!0);var d=new Error("Cannot find module '"+u+"'");throw d.code="MODULE_NOT_FOUND",d}var l=n[u]={exports:{}};t[u][0].call(l.exports,function(e){var n=t[u][1][e];return r(n?n:e)},l,l.exports,e,t,n,o)}return n[u].exports}for(var i="function"==typeof require&&require,u=0;u<o.length;u++)r(o[u]);return r}({1:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=function(e,t){return document.querySelectorAll(e)[0]},t.exports=n["default"]},{}],2:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}var r=e("./sticky-nav"),i=o(r),u=e("./video-loader"),a=o(u);(0,i["default"])(),(0,a["default"])()},{"./sticky-nav":3,"./video-loader":4}],3:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(){function e(e){e.preventDefault(),a.classList.toggle("open")}var t=(0,u["default"])(".nav-expand"),n="ontouchstart"in window,o="click";n&&(o="touchstart"),t.addEventListener(o,e)}Object.defineProperty(n,"__esModule",{value:!0});var i=e("./$"),u=o(i),a=void 0;n["default"]=function(){"/docs"===window.location.pathname.slice(0,5)&&(a=(0,u["default"])(".doc-nav"),a&&r())},t.exports=n["default"]},{"./$":1}],4:[function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(){return"<iframe name='quickcast' src='http://quick.as/embed/az3sxrb' scrolling='no' frameborder='0' width=\"100%\" allowfullscreen></iframe>"}function i(){var e=document.createElement("script");e.src="http://quick.as/embed/script/1.60",e.id="quickcast-vid",document.body.appendChild(e)}function u(){l.addEventListener("click",function(e){e.preventDefault(),f.classList.add("open"),setTimeout(function(){v.innerHTML=r(),i()},300)})}function a(){s.addEventListener("click",function(e){e.preventDefault(),f.classList.remove("open"),setTimeout(function(){v.innerHTML="";var e=document.getElementById("quickcast-vid");e.parentNode.removeChild(e)},300)})}Object.defineProperty(n,"__esModule",{value:!0});var c=e("./$"),d=o(c),l=void 0,f=void 0,s=void 0,v=void 0;n["default"]=function(){"/"===window.location.pathname.slice(0,5)&&(f=(0,d["default"])(".overlay"),l=(0,d["default"])(".video__link"),s=(0,d["default"])(".overlay__close"),v=(0,d["default"])(".overlay__video"),l&&(u(),a()))},t.exports=n["default"]},{"./$":1}]},{},[2]);
\ No newline at end of file
diff --git a/scss/_vars.scss b/scss/_vars.scss
index 46590c4..5721e04 100644
--- a/scss/_vars.scss
+++ b/scss/_vars.scss
@@ -61,6 +61,7 @@ $mono-font-family: $mono;
 // Special
 $lede-size: 24px;
 $small-size: 12px;
+$large-size: 48px;
 $micro-size: 10px;
 
 
diff --git a/scss/core.scss b/scss/core.scss
index 8d37873..439f069 100644
--- a/scss/core.scss
+++ b/scss/core.scss
@@ -29,8 +29,10 @@
 @import "theme/signup";
 @import "theme/credit";
 @import "theme/layout";
+@import "theme/brand-guidlines";
 
 @import "theme/header";
+@import "theme/sub-header";
 @import "theme/footer";
 
 @import "theme/code";
diff --git a/scss/theme/_brand-guidlines.scss b/scss/theme/_brand-guidlines.scss
new file mode 100644
index 0000000..5080819
--- /dev/null
+++ b/scss/theme/_brand-guidlines.scss
@@ -0,0 +1,293 @@
+.brand-asset-wrapper {
+    padding: 0 $half-spacing;
+    
+    .three-quarters {
+        //margin: 0 auto;
+    }
+}
+
+.brand-rule {
+    font-weight: normal;
+    padding: 0;
+}
+
+.brand-desc {
+
+}
+
+.brand-asset {
+    border-bottom: 1px dashed $silver;
+    padding: $header-height 0;
+    margin-bottom: $header-height;
+    
+    &:last-child {
+        border: none;
+        margin-bottom: 0;
+    }
+}
+
+.brand--evolution {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -$base-spacing;
+}
+
+.evolution__item {
+    width: 50%;
+    margin-bottom: $base-spacing;
+    text-align: center;
+    padding-left: $base-spacing;
+
+    @include media-query(min, $lap-start) {
+        width: 25%;
+    }
+}
+
+.evolution__image {
+    margin: 0;
+    width: 100%;
+    padding-bottom: 100%;
+    border: 1px solid $silver-lt;
+    position: relative;
+}
+
+.evo-img {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    margin: 0 auto;
+    width: 100%;
+    height: 5em;
+    color: #cccccc;
+
+    &.evo-4 {
+        color: $red;
+    }
+
+    &.evo-1 {
+        width: 40%;
+    }
+}
+
+.evolution__fig {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: $half-spacing;
+    margin: 0;
+    color: $silver;
+}
+
+.brand--colours {
+    margin-left: -$base-spacing;
+
+    @include media-query(min, $lap-start) {
+        display: flex;
+    }
+}
+
+.colour__item {
+    padding: $base-spacing;
+    position: relative;
+    color: $white;
+    margin-left: $base-spacing;
+
+    &:nth-child(2) {
+        color: #6D6D6D;
+        border: 1px solid #CCCCCC;
+    }
+
+    @include media-query(min, $lap-start) {
+        flex-grow: 1;
+        height: 160px;
+        padding: $half-spacing;
+    }
+}
+
+.colour__desc {
+    margin: 0;
+}
+
+.colour__hex {
+    float: right;
+    @include media-query(min, $lap-start) {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        padding: $half-spacing;
+    }
+}
+
+.brand--name {
+    margin-left: -$base-spacing;
+
+    @include media-query(min, $lap-start) {
+        display: flex;
+        align-items: center;
+    }
+}
+
+.name__item {
+    padding-left: $base-spacing;
+
+    @include media-query(min, $lap-start) {
+        flex: 1;
+    }
+
+    img {
+        width: 80%;
+        margin: 0 auto;
+    }
+}
+
+.brand--typeface {
+    @include media-query(min, $lap-start) {
+        display: flex;
+    }
+}
+
+.typeface__item {
+    text-align: center;
+    margin-bottom: $base-spacing;
+    
+    &:last-child {
+        margin: 0;
+    }
+
+    @include media-query(min, $lap-start) {
+        flex: 1;
+        margin: 0;
+    }
+}
+
+.typeface__img {
+    width: 100%;
+    height: 8em;
+    color: #6D6D6D;
+    margin: 0 auto $base-spacing;
+}
+
+.brand--usage {
+    margin-left: -$base-spacing;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.usage__item {
+    width: 50%;
+    padding-left: $base-spacing;
+    margin-bottom: $base-spacing;
+
+    @include media-query(min, $lap-start) {
+        width: 25%;
+    }
+
+    .svg-icon {
+        width: 100%;
+        height: 5em;
+    }
+}
+
+.usage__image {
+    margin: 0 0 $base-spacing 0;
+    width: 100%;
+    padding-bottom: 100%;
+    border: 1px solid $silver-lt;
+    position: relative;
+
+    .svg-icon {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        margin: 0 auto;
+        width: 80%;
+        height: 5em;
+    }
+}
+
+.usage--light {
+    .svg-icon {
+        color: $red;
+    }
+}
+
+.usage--dark {
+    background: $navy;
+    .svg-icon {
+        color: $white;
+    }
+}
+
+.usage__desc {
+    font-size: $small-size;
+}
+
+.brand--spacing {
+
+}
+
+.spacing__item {
+
+    &:nth-child(2) {
+        margin-top: $base-spacing*4;
+    }
+
+    img {
+        margin: 0 auto;
+    }
+}
+
+.brand--restrictions {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -$base-spacing;
+}
+
+.restriction__item {
+    width: 50%;
+    margin-bottom: $base-spacing;
+    padding-left: $base-spacing;
+    position: relative;
+    
+    @include media-query(min, $lap-start){
+        width: 33.33%;
+    }
+    @include media-query(min, $desk-start){
+        width: 16.66%;
+    }
+}
+
+.restriction__image {
+    margin: 0 0 $base-spacing 0;
+    width: 100%;
+    padding-bottom: 100%;
+    border: 1px solid $silver-lt;
+    position: relative;
+
+    .svg-icon {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 100%;
+        height: 5em;
+        margin: 0 auto;
+        color: $red;
+
+        &.restriction-2 {
+            color: $yellow;
+        }
+    }
+}
+
+.restriction-cross {
+    color: $failure;
+    width: 1.5em;
+    height: 1.5em;
+}
+
diff --git a/scss/theme/_header.scss b/scss/theme/_header.scss
index 8b5b90f..0f9296e 100644
--- a/scss/theme/_header.scss
+++ b/scss/theme/_header.scss
@@ -40,8 +40,10 @@
 
     .svg-icon {
         position: relative;
-        top: -2px;
+        top: -4px;
         margin-right: $half-spacing/2;
+        height: 30px;
+        width: 140px;
     }
 
     @include media-query(min, $lap-start) {
diff --git a/scss/theme/_sub-header.scss b/scss/theme/_sub-header.scss
new file mode 100644
index 0000000..d562af1
--- /dev/null
+++ b/scss/theme/_sub-header.scss
@@ -0,0 +1,36 @@
+.sub-header {
+    border-top: 1px solid rgba($white, 0.1);
+    background: $navy;
+    color: $white;
+    margin-bottom: $header-height;
+
+}
+
+.sub-header__intro {
+    padding: $base-spacing $half-spacing $base-spacing*2;
+
+    @include media-query(min, $lap-start){
+        width: 65%;
+        padding: $header-height $half-spacing;
+    }
+}
+
+.sub-header__title {
+font-weight: normal;
+    padding: 0;
+}
+
+.sub-header__desc {
+    margin-bottom: $base-spacing;
+    opacity: 0.7;
+}
+
+.sub-header__cta {
+    margin: 0;
+}
+
+.zip {
+    margin-left: 5px;
+    font-weight: 100;
+    font-size: $small-size;
+}
diff --git a/tasks/icons.js b/tasks/icons.js
index 07128dd..874dc6a 100644
--- a/tasks/icons.js
+++ b/tasks/icons.js
@@ -12,8 +12,11 @@ function icons (deferred, previous, ctx) {
      * @type {string[]}
      */
     var globals  = [
-        'logo', 'github', 'twitter', 'circle-play', 'code', 'menu', 'list', 'cross',
-        'slack'
+        'logo', 'wordmark', 'github', 'twitter', 'circle-play', 'code', 'menu', 'list', 'cross',
+        'slack',
+        'evo-1', 'evo-2', 'evo-3',
+        'typeface-reg', 'typeface-bold', 'typeface-thin',
+        'logo-rotate','logo-recolour','logo-distort','logo-alter', 'logo-multiply', 'logo-outline'
     ];
 
     /**