ura.design/projects/tor-style-guide.html

---
layout: default
section_id: portfolio
title: Tor Style Guide
---

<div class="full new" style="background-color: #7D4698;">
  <div class="section-title new">
    <div class="row">
      <div class="medium-10 medium-centered columns">
        <h1 class="wow slideInUp" style="font-size: 2rem;">Tor Style Guide</h1>
      </div>
    </div>
  </div>
</div>
<div class="full text">
  <div class="row">
    <div class="large-8 columns">
      <img src="../images/projects/tor-0.png" alt="style guide 1">
      <div class="three spacing"></div>
      <img src="../images/projects/tor-4.png" alt="style guide 3">
      <div class="three spacing"></div>
      <img src="../images/projects/tor-5.png" alt="style guide 3">
      <div class="three spacing"></div>
      <img src="../images/projects/tor-1.png" alt="style guide 1">
      <div class="three spacing"></div>
      <img src="../images/projects/tor-2.png" alt="style guide 2">
      <div class="three spacing"></div>
      <img src="../images/projects/tor-3.png" alt="style guide 3">
      <div class="three spacing"></div>
    </div>
    <div class="large-4 columns">
      <div class="project-intro">
        <p>In 2016, we collaborated with Simply Secure to start a process which has been long overdue: refreshing the brand identity of The Tor Project to ensure consistency and create a style guide to make it easier to follow the new style. We worked with the newly formed UX Team to establish guidelines for the Tor brand, including typography, iconography, colors and subbranding. In 2018, this style guide has been evolved by the Tor UX team and includes patterns and CSS styles in the form of a living style guide.</p>
        <hr>
        <div class="spacing"></div>
        <h4>Date</h4>
        <p><span>February, 2018</span></p>
        <h4>Clients</h4>
        <p><span><a href="https://torproject.org" target="_blank">The Tor Project</a></span></p>
        <h4>Category</h4>
        <p><span>Style Guide</span></p>
        <hr>
        <a class="button boxed black" href="https://github.com/uracreative/" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
        <a class="button boxed identihub" href="https://demo.identihub.co/project/tor-project" target="_blank"><img src="../images/projects/identihub.svg" > Identihub</a><br />
        <a class="button boxed tor" href="https://styleguide.torproject.org" target="_blank"><i class="fas fa-globe"></i> Website</a>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="full">
  <div class="section-title">
    <div class="row">
      <div class="medium-10 medium-centered columns">
        <h2>Related projects</h2>
      </div>
    </div>
  </div>
  <div class="related-works">
    <div class="row">
      <div class="large-4 columns">
        <div class="work-wrapper">
          <a href="openlabs" class="work">
            <img src="../images/projects/openlabs.jpg" alt="">
            <div class="info">
              <h3>Open Labs</h3>
              <p>Rebranding</p>
            </div>
          </a>
        </div>
      </div>
      <div class="large-4 columns">
        <div class="work-wrapper">
          <a href="openchain" class="work">
          <img src="../images/projects/penguins_thumb.jpg" alt="">
          <div class="info">
            <h3>OpenChain Penguins</h3>
            <p>Illustration</p>
          </div>
        </a>
        </div>
      </div>
      <div class="large-4 columns">
        <div class="work-wrapper">
          <a href="mozilla-l10n" class="work">
            <img src="../images/projects/mozilla-l10n.jpg" alt="">
            <div class="info">
              <h3>Mozilla L10N T-shirts</h3>
              <p>Prints</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>

</div>