You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
305 lines
10 KiB
305 lines
10 KiB
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Tor Style Guide</title>
|
|
<meta name="description" content="Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects.
|
|
">
|
|
|
|
<!-- Metadata -->
|
|
|
|
<meta property="og:site_name" content="Ura Design">
|
|
|
|
<meta property="og:title" content="Tor Style Guide">
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:description" content=""/>
|
|
|
|
|
|
<meta property="og:url" content="http://localhost:4000/projects/tor-style-guide.html" />
|
|
|
|
|
|
<meta content="https://ura.design/images/main/icon.png" property="og:image">
|
|
|
|
<meta name="twitter:card" content="summary" />
|
|
<meta name="twitter:site" content="@uracreative" />
|
|
<meta name="twitter:image:src" content="https://ura.design/" />
|
|
|
|
<link rel="stylesheet" href="/css/app.css">
|
|
<link href="/fonts/overpass/overpass.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/superslides.css"/>
|
|
<link rel="stylesheet" href="/css/slick-theme.css"/>
|
|
<link rel="stylesheet" href="/css/slick.css"/>
|
|
<link rel="stylesheet" href="/css/animate.css"/>
|
|
<link rel="stylesheet" href="/css/linea-styles.css"/>
|
|
<link rel="stylesheet" href="/css/linea-arrows-styles.css"/>
|
|
<link rel="stylesheet" href="/css/fontawesome-all.css"/>
|
|
<link rel="stylesheet" href="/css/style.css"/>
|
|
<link rel="stylesheet" href="/css/responsive.css"/>
|
|
|
|
<script src="/bower_components/modernizr/modernizr.js"></script>
|
|
|
|
<link rel="canonical" href="http://localhost:4000/projects/tor-style-guide.html">
|
|
<link rel="alternate" type="application/rss+xml" title="Ura Design" href="http://localhost:4000/feed.xml">
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div class='contain-to-grid sticky transparent'>
|
|
<nav class='top-bar' data-options='sticky_on: large' data-topbar=''>
|
|
<ul class='title-area'>
|
|
<li class="">
|
|
<h1>
|
|
<a href='/'><img src="/images/main/logo.svg" width="180.7px" height="56.5px" alt="Ura Logo">
|
|
</a>
|
|
</h1>
|
|
</li>
|
|
</ul>
|
|
<div id="menu-toggler" class="right">
|
|
<a href='#'>
|
|
<i class="icon-arrows-hamburger-2"></i>
|
|
</a>
|
|
</div>
|
|
<section class='top-bar-section closed'>
|
|
<ul class='right'>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown ">
|
|
<a href="/blog/">Blog</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/events">Events</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown ">
|
|
<a href="/services">Services</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/request">Request</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown ">
|
|
<a href="/projects">Projects</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/logobridge">Logobridge</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="">
|
|
<a href="/support-us">Support Us</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="has-dropdown ">
|
|
<a href="/about">About</a>
|
|
<ul class='dropdown'>
|
|
|
|
<li>
|
|
<a href="/contact">Contact</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/jobs">Jobs</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
</section>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<div id="cookieConsent" style="display: none;">
|
|
<div id="closeCookieConsent">x</div>
|
|
This website is using cookies. <a href="/privacy-policy" target="_blank">More info</a>. <a class="cookieConsentOK">That's Fine</a>
|
|
</div>
|
|
|
|
<div class="full no-padding footer blue centered-text">
|
|
<div class="two spacing"></div>
|
|
<div class="row">
|
|
<div class="small-12 columns">
|
|
<p>Made with <i class="fa fa-heart" style="color: red;" aria-hidden="true"></i> in <a href="https://en.wikipedia.org/wiki/Tirana" target="_blank">Tirana, Albania</a><p>
|
|
<div class="one spacing"></div>
|
|
<ul class="socials">
|
|
<li><a href="https://twitter.com/uracreative" target="_blank"><i class='fab fa-twitter'></i></a></li>
|
|
<li><a href="https://github.com/uracreative/ura.design/" target="_blank"><i class='fab fa-github'></i></a></li>
|
|
</ul>
|
|
<p>Committed to Free Software, Internet Freedom, and <a href="http://opensourcedesign.net/">Open Source Design</a></p>
|
|
<p> Trademarks are property of their respective owners. All site content, unless otherwise noted, is licensed <a href="http://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0 International</a> by Ura Design</p>
|
|
<p><a href="https://tinyletter.com/uracreative/archive" target="_blank">Newsletter Archive</a></p>
|
|
<p><a href="/privacy-policy" target="_blank">Privacy Policy</a></p>
|
|
<div class="two spacing"></div>
|
|
<p class="back-to-top"><a href="#"><i class="fas fa-chevron-up"></i>Back to top</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="spacing"></div>
|
|
</div>
|
|
|
|
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
|
<script src="/bower_components/foundation/js/foundation.min.js"></script>
|
|
<script src="/js/jquery.superslides.min.js"></script>
|
|
<script src="/js/slick.min.js"></script>
|
|
<script src="/js/wow.min.js"></script>
|
|
<script src="/js/jquery.validate.js"></script>
|
|
<!-- <script src="/bower_components/countto/jquery.countTo.js"></script> -->
|
|
<script src="/bower_components/appear/jquery.appear.js"></script>
|
|
<script src="/js/app.js"></script>
|
|
<script src="/js/svg.js"></script>
|
|
<script src="/js/cookie.js"></script>
|
|
|
|
<!-- Matomo -->
|
|
<script type="text/javascript">
|
|
var _paq = _paq || [];
|
|
/ tracker methods like "setCustomDimension" should be called before "trackPageView" /
|
|
_paq.push(["setCookieDomain", "*.ura.design"]);
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function() {
|
|
var u="//analytics.ura.design/";
|
|
_paq.push(['setTrackerUrl', u+'piwik.php']);
|
|
_paq.push(['setSiteId', '2']);
|
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
|
|
})();
|
|
</script>
|
|
|
|
<noscript><p><img src="//analytics.ura.design/piwik.php?idsite=2&rec=1" style="border:0;" alt="" /></p></noscript>
|
|
<!-- End Matomo Code -->
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|