logo.tpl in ustyle-1.10.0

- old
+ new
@@ -1,102 +1,260 @@
+<ul class='table-of-contents'>
+  <li><a href="#orientation">Orientation</a></li>
+  <li><a href="#colour">Colour</a></li>
+  <li><a href="#exclusion-zone">Exclusion zone</a></li>
+  <li><a href="#alternate-logo">Alternate logo (small)</a></li>
+  <li><a href="#minimum-sizes">Minimum sizes</a></li>
+  <li><a href="#icon-only">Icon only</a></li>
+  <li><a href="#usage-rules">Usage rules</a></li>
+</ul>
 <div class="us-content-group">
   <div class="us-grid-row">
-    <div class="us-col-6">
-      <h3>Variations</h3>
-      <p>Primary logo  - can be used in either brand blue #174695 or as a white out version (see below for usage on different background colours)</p>
+    <div class="us-col-12">
+      <h3 id="orientation">Orientation</h3>
+      <p>
+        We've made our logo available in vertical and horizontal formats to
+        allow for flexibility in various layouts. Choose the format that best
+        suits the usage.
+      </p>
     </div>
-    <div class="us-col-6">
+  </div>
+  <div class="us-grid-row">
+    <div class="us-col-12">
       <div class="us-grid-row">
         <div class="us-col-6">
-          <h5>Blue logo</h5>
-          <div class="logo-state logo--blue">
-            <span class="us-icon--notext us-icon--uswitch us-icon--custom us-icon--large"></span>
+          <div class="logo__state logo__vertical logo--blue">
+            <svg><use xlink:href="#uicon-logo-vertical"/></svg>
           </div>
+          <p>
+            Vertical orientation
+          </p>
         </div>
         <div class="us-col-6">
-          <h5>White logo</h5>
-          <div class="logo-state logo--white">
-            <span class="us-icon--notext us-icon--uswitch us-icon--white us-icon--large"></span>
+          <div class="logo__state logo__horizontal logo--blue">
+            <svg><use xlink:href="#uicon-logo"/></svg>
           </div>
+          <p>
+            Horizontal orientation
+          </p>
         </div>
       </div>
     </div>
   </div>
 </div>
 
 <div class="us-content-group">
   <div class="us-grid-row">
-    <div class="us-col-6">
-      <h3>Spacing</h3>
-      <p>Every time our logo appears, there should always be minimum clear space around it.This can be worked out by taking the width of the left stem (see ‘S’ in the diagram), and applying it around the logo. This area should always be kept clear.</p>
+    <div class="us-col-12">
+      <h3 id="colour">Colour</h3>
+      <p>
+        Our logo should only appear in our approved colours. The brand blue logo
+        is the preferred version. It can also be displayed on a cyan background.
+      </p>
     </div>
-    <div class="us-col-6">
-      <p><strong>s</strong> = The width of the left stem of the U.</p>
-      <div class="logo-state logo-spacer">
-        <span class="us-icon--notext us-icon--uswitch us-icon--custom us-icon--large"></span>
+  </div>
+
+  <div class="us-grid-row">
+    <div class="us-col-12">
+      <div class="us-grid-row">
+        <div class="us-col-4">
+          <div class="logo__state logo__vertical logo--blue">
+            <svg><use xlink:href="#uicon-logo-vertical"/></svg>
+          </div>
+          <p>
+            Brand blue is the preferred version of the logo.
+          </p>
+        </div>
+        <div class="us-col-4">
+          <div class="logo__state logo__vertical logo--white">
+            <svg><use xlink:href="#uicon-logo-vertical"/></svg>
+          </div>
+          <p>
+            Alternatively it can also be used in white on dark backgrounds.
+          </p>
+        </div>
+        <div class="us-col-4">
+          <div class="logo__state logo__vertical logo--cyan">
+            <svg><use xlink:href="#uicon-logo-vertical"/></svg>
+          </div>
+          <p>
+            It can also be used on a cyan background.
+          </p>
+        </div>
       </div>
     </div>
   </div>
+
+  <div class="us-grid-row">
+    <div class="us-col-12">
+      <p>
+        The black and white versions of our logo should only be used when colour
+        reproduction is not available. Choose the option that will provide the
+        most contrast with the background.
+      </p>
+    </div>
+  </div>
+
+  <div class="us-grid-row">
+    <div class="us-col-12">
+      <div class="us-grid-row">
+        <div class="us-col-6">
+          <div class="logo__state logo__horizontal logo--bwwhite">
+            <svg><use xlink:href="#uicon-logo"/></svg>
+          </div>
+          <p>
+            The black logo is for use on light backgrounds where colour
+            reproduction is not available.
+          </p>
+        </div>
+        <div class="us-col-6">
+          <div class="logo__state logo__horizontal logo--bwblack">
+            <svg><use xlink:href="#uicon-logo"/></svg>
+          </div>
+          <p>
+            The white logo is for use on dark backgrounds where colour
+            reproduction is not available.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
 <div class="us-content-group">
   <div class="us-grid-row">
-    <div class="us-col-6">
-      <h3>Sizing</h3>
-      <p>Our logo comes in 3 different sizes through our SVG/PNG icon system.</p>
+    <div class="us-col-12">
+      <h3 id="exclusion-zone">Exclusion Zone</h3>
+      <p>
+        Always leave plenty of room around the logo. This will enable it to
+        feature prominently without clutter.
+      </p>
     </div>
-    <div class="us-col-6">
-      <span class="us-icon--notext us-icon--uswitch us-icon--custom us-icon--small"></span>
-      <span class="us-icon--notext us-icon--uswitch us-icon--custom us-icon--medium"></span>
-      <span class="us-icon--notext us-icon--uswitch us-icon--custom us-icon--large"></span>
+  </div>
+
+  <div class="us-grid-row">
+    <div class="us-col-12">
+      <div class="us-grid-row">
+        <div class="us-col-6">
+          <div class="logo__state logo__vertical logo__spacer--vertical logo--blue">
+            <svg><use xlink:href="#uicon-logo-vertical"/></svg>
+          </div>
+        </div>
+        <br>
+        <div class="us-col-6">
+          <div class="logo__state logo__horizontal logo__spacer--horizontal logo--white">
+            <svg><use xlink:href="#uicon-logo"/></svg>
+          </div>
+        </div>
+      </div>
+      <p>
+        The 'S' from our wordmark can be used to measure out the exclusion zone.
+      </p>
     </div>
   </div>
 </div>
 
 <div class="us-content-group">
   <div class="us-grid-row">
-    <div class="us-col-6">
-      <h3>Usage rules</h3>
-      <p>Please make sure you’re not tempted to do any of the following to the logo:</p>
-      <ul>
-        <li>Change elements of it</li>
-        <li>Outline or put a keyline around it</li>
-        <li>Use a different blue</li>
-        <li>Use a gradient or tint</li>
-        <li>Rotate the logo</li>
-      </ul>
+    <div class="us-col-12">
+      <h3 id="alternate-logo">Alternate logo for use at smaller sizes</h3>
+      <p>
+        An alternative version of our logo must be used when it's being displayed
+        at smaller sizes. It ensures that the arrowhead, a key element of our
+        brand, remains clear and prominent.
+      </p>
     </div>
-    <div class="us-col-6"></div>
   </div>
+  <div class="us-grid-row">
+    <div class="us-col-12">
+      <div class="us-grid-row">
+        <div class="us-col-6">
+          <div class="logo__state logo__vertical--alternate logo--blue">
+            <svg><use xlink:href="#uicon-logo-vertical-small"/>
+            <div class="logo__sizing h92">92px</div>
+          </div>
+          <p>
+            Use the alternative version of the vertical logo when using at a
+            height of 92px or less.
+          </p>
+        </div>
+        <div class="us-col-6">
+          <div class="logo__state logo__horizontal--alternate logo--white">
+            <svg><use xlink:href="#uicon-logo-small"/></svg>
+            <div class="logo__sizing h64">64px</div>
+          </div>
+          <p>
+            Use the alternate version of the horizontal logo when using at a
+            height of 64px or less.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
 <div class="us-content-group">
   <div class="us-grid-row">
-    <div class="us-col-6">
-      <h3>Blue logo placement</h3>
-      <p>Our blue logo can be placed on a white or light-coloured background, or even on simple photography. However, it should not be placed on a dark or contrasting blue, as it doesn’t stand out so well. The same goes for complex imagery and gradients.</p>
+    <div class="us-col-12">
+      <h3 id="minimum-sizes">Minimum Size</h3>
+      <p>To ensure legibility of our logo, it must not be used below the
+        minimum size.</p>
+      <div class="us-col-6">
+          <div class="logo__state logo__vertical--alternate-min logo--blue">
+            <svg><use xlink:href="#uicon-logo-vertical-small"/>
+            <div class="logo__sizing h70">70px</div>
+          </div>
+          <p>
+            The minimum height that the vertical logo may be used at is 70px.
+          </p>
+        </div>
+        <div class="us-col-6">
+          <div class="logo__state logo__horizontal--alternate-min logo--white">
+            <svg><use xlink:href="#uicon-logo-small"/></svg>
+            <div class="logo__sizing h35">35px</div>
+          </div>
+          <p>
+            The minimum height that the horizontal logo may be used at is 35px.
+          </p>
+        </div>
+      </div>
     </div>
-    <div class="us-col-6"></div>
   </div>
 </div>
 
 <div class="us-content-group">
   <div class="us-grid-row">
-    <div class="us-col-6">
-      <h3>White logo placement</h3>
-      <p>Our white logo can be placed over any of the uSwitch blues, or dark-coloured backgrounds, and even on simple photography. However, it should not be placed on a light colour or complex imagery as it doesn’t stand out so well..</p>
+    <div class="us-col-12">
+      <h3 id="icon-only">Icon only</h3>
+      <p>
+        Our icon and wordmark must always be used together. The only
+        exceptions are our app icon, website favicon and awards logos. Do not
+        separate the icon and wordmark in any other instances.
+      </p>
+      <div class="logo__icon-standalone us-margin-bottom">
+        <div class="us-icon--uswitch us-icon--large us-icon--white us-icon--notext"></div>
+      </div>
+      <p>
+        The icon may only be used separately from the wordmark in approved
+        situations, such as our app icon.
+      </p>
+
+      <p><strong>Do not separate the elements in any other situations.</strong></p>
     </div>
-    <div class="us-col-6"></div>
   </div>
 </div>
 
 <div class="us-content-group">
   <div class="us-grid-row">
-    <div class="us-col-6">
-      <h3>Partner / Off site usage</h3>
-      <p>For off-site and partner use we have a logo variant that includes the site URL. The same usage guidelines apply</p>
-    </div>
-    <div class="us-col-6">
-      <span class="us-icon--before us-icon--uswitch--before us-icon--custom--before us-icon--large--before"><strong class="us-color--blue">uSwitch.com</strong></span>
+    <div class="us-col-12">
+      <h3 id="usage-rules">Usage rules</h3>
+      <p>Please make sure you’re not tempted to do any of the following to the logo:</p>
+      <ul>
+        <li>Change elements of it</li>
+        <li>Outline or put a keyline around it</li>
+        <li>Use a different blue</li>
+        <li>Use a gradient or tint</li>
+        <li>Rotate the logo</li>
+      </ul>
     </div>
   </div>
 </div>