travis-web/app/templates/logo.hbs

<div id="landing" class="landing wrapper">
  <section class="section--white">
    <div class="inner">
      <header class="section--center team-header">
        <h1 class="h1--red">So, you wanna use our logo?</h1>
        <p class="text-big">That's no problem at all!<br> But first, let's go over some basics on how to use it.
        </p>
      </header>
      <p class="text-logo">The <strong>Travis CI wordmark</strong> combines the <strong>Travis CI mascot</strong> with the words “Travis CI” with a specific font and spacing treatment, creating a recognizable logo. This logo or wordmark is used online and in print for product website, sponsored conference materials, invoices, emails, and other official business uses. <strong>You may also use the wordmark in other materials such as presentations mentioning Travis CI, conferences we are sponsoring and other partnerships</strong>.</p>
      <p class="text-logo"><strong>Approved official Travis CI logos are available to download</strong> in high and low res (.eps, .png) below. If you have questions about using our logo, please email <a href="mailto:support@travis-ci.com" title="email the Travis CI support team">support@travis-ci.com</a>.</p>
      <div class="logo-logos">
        <figure>
          <div class="logos--light">
            <img src="../images/pro-landing/TravisCI-logolockup-spacingexample.svg" alt="Travis CI logo on light background">
          </div>
          <figcaption class="text-small">Dark logo on light background <a href="images/logos/TravisCI-Full-Color.eps" title="" download="travis-ci-logo-light-bg.eps">.eps</a> or <a href="images/logos/TravisCI-Full-Color.png" title="" download="travis-ci-logo-light-bg.png">.png</a></figcaption>
        </figure>
        <figure>
          <div class="logos--dark">
            <img src="../images/pro-landing/TravisCI-logolockup-spacingexample-darkbg.svg" alt="Travis CI logo on dark background">
          </div>
          <figcaption class="text-small">Light logo on dark background <a href="images/logos/TravisCI-Full-Color.eps" title="" download="travis-ci-logo-dark-bg.eps">.eps</a> or <a href="images/logos/TravisCI-Full-Color.png" title="" download="travis-ci-logo-dark-bg.png">.png</a></figcaption>
        </figure>
      </div>
    </div>
  </section>
  <section class="section--grey section--center">
    <div class="inner">
      <h2 class="h2--grey">Typography</h2>
      <ul class="list--fonts">
        <li>
          <p class="font-light">Source Sans Pro</p>
          <p class="text-big">Light (300)</p>
        </li>
        <li>
          <p class="font-regular">Source Sans Pro</p>
          <p class="text-big">Regular (400)</p>
        </li>
        <li>
          <p class="font-semibold">Source Sans Pro</p>
          <p class="text-big">Semi Bold (600)</p>
        </li>
      </ul>
      <h2 class="h2--grey">Brand Colors</h2>
      <ul class="list--colors">
        <li>
          <div class="colors-sample--teal" aria-hidden="true"></div>
          <p class="text-small"><strong>Turbo Teal</strong> #40A3AD</p>
        </li>
        <li>
          <div class="colors-sample--green" aria-hidden="true"></div>
          <p class="text-small"><strong>Passing green</strong> #44A662</p>
        </li>
        <li>
          <div class="colors-sample--yellow" aria-hidden="true"></div>
          <p class="text-small"><strong>Building yellow</strong> #E5DA3F</p>
        </li>
        <li>
          <div class="colors-sample--red" aria-hidden="true"></div>
          <p class="text-small"><strong>Failing red</strong> #D94341</p>
        </li>
        <li>
          <div class="colors-sample--grey" aria-hidden="true"></div>
          <p class="text-small"><strong>Asphalt grey</strong> #666666</p>
        </li>
      </ul>
    </div>
  </section>
  <section class="section--white section--center">
    <div class="inner">
      <h2 class="h2--grey">Alternative mascots for use</h2>
      <p class="text-logo"><strong>There are a couple alternative options for Travis CI's logo usage</strong>. If you would like to use a simplified version of our logo or a version for various background colors, please select from the following options. If you have questions about using our logo, please email <a href="mailto:support@travis-ci.com" title="email Travis CI support">support@travis-ci.com</a>.</p>
      <ul class="list--mascot">
        <li>
          <figure>
            <img src="../images/pro-landing/TravisCI-mascot.svg" alt="Mascot">
            <figcaption class="text-small"><a href="images/logos/mascot-bg-blue.eps" download="travis-ci-mascot.eps" title="">.eps</a> <a href="images/logos/mascot-bg-blue.png" download="travis-ci-mascot.png" title="">.png</a></figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img src="../images/pro-landing/TravisCI-mascot2.svg" alt="Mascot">
            <figcaption class="text-small"><a href="images/logos/mascot-bg-blue.eps" download="travis-ci-mascot.eps" title="">.eps</a> <a href="images/logos/mascot-bg-blue.png" download="travis-ci-mascot.png" title="">.png</a></figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img src="../images/pro-landing/TravisCI-mascot3.svg" alt="Mascot">
            <figcaption class="text-small"><a href="images/logos/mascot-bg-blue.eps" download="travis-ci-mascot.eps" title="">.eps</a> <a href="images/logos/mascot-bg-blue.png" download="travis-ci-mascot.png" title="">.png</a></figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img src="../images/pro-landing/TravisCI-mascot4.svg" alt="Mascot">
            <figcaption class="text-small"><a href="images/logos/mascot-bg-blue.eps" download="travis-ci-mascot.eps" title="">.eps</a> <a href="images/logos/mascot-bg-blue.png" download="travis-ci-mascot.png" title="">.png</a></figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img src="../images/pro-landing/TravisCI-mascot-grey.svg" alt="Mascot">
            <figcaption class="text-small"><a href="images/logos/mascot-bg-grey.eps" download="travis-ci-mascot-grey.eps" title="">.eps</a> <a href="images/logos/mascot-bg-grey.png" download="travis-ci-mascot-grey.png" title="">.png</a></figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img src="../images/pro-landing/TravisCI-mascot-blue.svg" alt="Mascot">
            <figcaption class="text-small"><a href="images/logos/mascot-bg-blue.eps" download="travis-ci-mascot-blue.eps" title="">.eps</a> <a href="images/logos/mascot-bg-blue.png" download="travis-ci-mascot-blue.png" title="">.png</a></figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img src="../images/pro-landing/TravisCI-mascot-red.svg" alt="Mascot">
            <figcaption class="text-small"><a href="images/logos/mascot-bg-red.eps" download="travis-ci-mascot-red.eps" title="">.eps</a> <a href="mascot-bg-red.png" download="travis-ci-mascot-red.png" title="">.png</a></figcaption>
          </figure>
        </li>
      </ul>
    </div>
  </section>
  <section class="section--grey">
    <div class="inner does-donts">
      <div class="does">
        <h2 class="h2--green">Go ahead! Do these things:</h2>
        <ul class="list--check text-big">
          <li>Use the Travis CI logo to link back to travis-ci.com</li>
          <li>Use the logo to show you're running your tests on Travis CI</li>
          <li>Use the mascot or logo in your blog, presentation or print material when mentioning us</li>
          <li>Use mascot or logo to show that your application or product integrates with Travis CI</li>
          <li>Use the mascot or logo for your next tattoo design (please, send us pics!)</li>
          <li>Use the mascot or logo to create vegan cookie shapes and send c/o @saltinejustine to Berlin</li>
        </ul>
      </div>
      <div class="donts">
        <h2 class="h2--red">Please don't do these things:</h2>
        <ul class="list--cross text-big">
          <li>Alter the logo in any way</li>
          <li>Redesign, redraw, animate, modify, distort or alter the proportions, color or typeface of the logo</li>
          <li>Use the logo for your own company or application icon</li>
          <li>Naming your projects in a way that implies Travis CI's endorsement</li>
          <li>Use the logo in artwork for sale</li>
          <li>Use the Travis CI artwork without permission</li>
        </ul>
      </div>
    </div>
  </section>
</div>