CINXE.COM
Tor Styleguide | The Tor Project | Tor Styleguide
<!doctype html> <html lang="en"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="static/css/bootstrap.css?h=fb444024"> <link rel="stylesheet" href=""> <link rel="stylesheet" href="static/fonts/fontawesome/css/all.min.css?h=9d272f6a" rel="stylesheet"> <title>Tor Styleguide | The Tor Project | Tor Styleguide </title> <body class="no-gutters"> <header> <div class="container-fluid bg-primary"> <nav class="navbar no-background navbar-expand-lg navbar-dark bg-primary p-2"> <a class="navbar-brand" href="./"> <img alt="The Tor Project" src="static/images/tor-logo@2x.png?h=16ad42bc" > <span class="sr-only">Tor Logo</span> </a> </div> </nav> </div> </header> <div class="page"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <nav id="sidenav-topics" class="border bg-white p-4 sticky-top"> <ul class="nav bd-toc flex-column"> <li class="nav-item active" > <a class="nav-link p-1 pr-4" href="./">About</a> </li> <li class="nav-item"> <a class="nav-link p-1 pr-4" href="getting-started/">Getting Started</a> </li> <li class="nav-item"> <a class="nav-link p-1 pr-4" href="brand-assets/">Brand Assets</a> </li> <li class="nav-item"> <a class="nav-link p-1 pr-4" href="visuals/">Visuals</a> </li> <li class="nav-item"> <a class="nav-link p-1 pr-4" href="components/">Components</a> </li> </ul> </nav> <div class="row col-sm-12 col-xs-12 ml-sm-auto col-md-9 col-lg-9 mx-auto"> <main role="main" class="col-12 col-md-10 col-xl-10 content-scroll" data-spy="scroll" data-offset="0"> <div class="row"> <div class="col-12"> <div class="page-header mb-4 mt-5"> <h3>About</h3> <p class="text-muted">We are making Tor usable for everyone.</p> </div> <p>The visual identity of software is an integral part of its user experience. Correctly using a consistent and attractive style is important to the Tor Project <mark>to build user trust in our work.</mark></p> <p>This guide can help you create materials and answer questions you might have about using the Tor brand. <p class="text-black small text-muted">Conventions</p></p> <p>This guide aims to show by doing. The main body of each page contains examples of graphic elements that are (and, in some cases, are not) conformant with the style being described. The column on the left specifies the details of each style and offers guidance on when and how to use it. </p><p class="text-black small text-muted">Contact</p><p class="purple"> Please reach out to the UX team if you encounter a situation this guide does not cover. We will work with you to help you find a solution for your design problem, and your feedback will also help us expand and refine the guide to help it better meet the Tor Community鈥檚 needs. You can also reach out to the UX team for any other styleguide related questions or inquiries.</p><!-- this is a test comment --> <div> <p class="m-0">Tor UX Team</p> <button class="btn btn-link p-0">ux@lists.torproject.org</button> </div> </div> </div> </main> </div> </div> </div> <div class="container-fluid bg-dark footer order-last text-left"> <div class="row"> <div class="col-4 d-flex onion-pattern"> <img src="" class="img-svg"> </div> <div class="col-sm-8 d-flex download-section mt-auto"> <div class="container pb-2 justify-content-right"> <h2 class="text-white text-bold">Download Tor Browser</h2> <p class="text-white">Download Tor Browser to experience real private browsing without tracking, surveillance, or censorship.</p><a class="btn text-primary bg-white btn-light pull-right mt-2" href="https://www.torproject.org/download/"> Download Tor Browser<i class="ml-2 pt-1 fas fa-arrow-down-png-purple"></i> </a> </div> </div> </div> <div class="row"> <div class="col-12 d-flex justify-content-center"> <div class="col-sm-6 offset-lx-1 offset-sm-0 mt-5"> <h5 class="font-weight-bold mt-5 text-white">Our mission:</h5> <p class="text-white mb-5" >To advance human rights and freedoms by creating and deploying free and open source anonymity and privacy technologies, supporting their unrestricted availability and use, and furthering their scientific and popular understanding.</p> </div> <div class="col-sm-2 mt-5 d-none d-sm-block"> <ul class="nav flex-column mt-sm-5"> <li class="nav-item"> <a class="nav-link text-light" href="https://www.torproject.org/about/jobs/"> Jobs </a> </li> <li class="nav-item"> <a class="nav-link text-light" href="https://blog.torproject.org"> Blog </a> </li> <li class="nav-item"> <a class="nav-link text-light" href="https://www.torproject.org/contact/"> Contact </a> </li> <li class="nav-item"> <a class="nav-link text-light" href="https://www.torproject.org/press/"> Press </a> </li> <li class="nav-item"> <a class="nav-link text-light" href="https://www.torproject.org/privchat"> PrivChat </a> </li> </ul> <a href="https://donate.torproject.org" title="Donate" class="h5"><span class="badge badge-warning p-2 mt-2">Donate Now</span></a> </div> </div> </div> <div class="row"> <div class="col-12 d-flex justify-content-center"> <div class="col-sm-6 offset-lx-1 offset-sm-0 mt-5"> <p class="text-primary-light">SUBSCRIBE TO OUR NEWSLETTER</p> <p class="text-light">Get monthly updates and opportunities from the Tor Project:</p> <p class="w"><a class="btn btn-small btn-dark mt-2 text-white active" role="button" aria-pressed="true" href="https://donate.torproject.org/subscribe/">SIGN UP</a></p> </div> <div class="col-sm-2 mt-5 d-none d-sm-block"> <div class="row"> <h4><a class="text-white px-3" target="_blank" href="https://forum.torproject.org"><i class="fab fa-discourse"></i></a></h4> <h4><a class="text-white px-3" target="_blank" href="https://www.facebook.com/TorProject/"><i class="fab fa-facebook-png"></i></a></h4> <h4><a class="mastodon text-white px-3" target="_blank" href="https://mastodon.social/@torproject" rel="me"><i class="fab fa-mastodon-png"></i></a></h4> </div> <div class="row"> <h4><a class="instagram text-white px-3" target="_blank" href="https://www.instagram.com/torproject"><i class="fab fa-instagram-png"></i></a></h4> <h4><a class="twitter text-white px-3" target="_blank" href="https://twitter.com/torproject"><i class="fab fa-twitter-png"></i></a></h4> <h4><a class="linkedin text-white px-3" target="_blank" href="https://www.linkedin.com/company/tor-project"><i class="fab fa-linkedin-png"></i></a></h4> </div> <div class="row"> <h4><a class="github text-white px-3" target="_blank" href="https://github.com/torproject"><i class="fab fa-github-png"></i></a></h4> <h4><a class="telegram text-white px-3" target="_blank" href="https://t.me/torproject"><i class="fab fa-telegram-png"></i></a></h4> <h4><a class="gitlab text-white px-3" target="_blank" href="https://gitlab.torproject.org/"><i class="fab fa-gitlab-png"></i></a></h4> </div> </div> </div> </div> <div class="row"> <div class="col-12 d-flex justify-content-center"> <div class="col-8 mt-5 trademark-policy"> <p>Trademark, copyright notices, and rules for use by third parties can be found in our <a href="https://www.torproject.org/about/trademark">Trademark and Brand policy</a>.</p> </div> </div> </div> <script src="static/js/jquery-3.2.1.min.js?h=1055018c" ></script> <script src="static/js/popper.min.js?h=a4336719" ></script> <script src="static/js/bootstrap.bundle.min.js?h=46d1f82f" ></script> <script src="static/js/scrollspy.min.js?h=02674132" ></script> <script src="static/js/modernizr.js?h=9a7f0609" ></script> <script src="static/js/download.js?h=caaadf8f" ></script> <script src="static/js/fallback.js?h=8a716acd" ></script> </div> </div> </body> </html>