I2P brand styleguides for the web
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.

224 lines
9.6 KiB

7 years ago
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
7 years ago
<title>I2P Styleguide</title>
<link rel="stylesheet" href="/i2p-styleguide/assets/static/open-iconic-bootstrap.css" />
<link rel="stylesheet" href="/i2p-styleguide/assets/static/bootstrap.min.css">
<link rel="stylesheet" href="/i2p-styleguide/assets/styles/main.css">
<link rel="shortcut icon" type="image/png" href="/i2p-styleguide/assets/images/favicon.png"/>
<link href="/i2p-styleguide/assets/fonts/sourcesans.css" rel="stylesheet">
<link href="/i2p-styleguide/assets/fonts/sourcecode.css" rel="stylesheet">
7 years ago
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
7 years ago
<a class="navbar-brand" href="https://geti2p.net/">
<img src="/i2p-styleguide/assets/images/horizontal_white.png" class="my-2" height="40" width="auto" alt=""></img>
7 years ago
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav mr-auto display-xs">
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/">About</a>
7 years ago
</li>
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/getting-started">Getting Started</a>
7 years ago
</li>
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/visuals/">Visuals</a>
7 years ago
</li>
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/components/">Components</a>
7 years ago
</li>
<li class="nav-item">
<a class="nav-link" href="/i2p-styleguide/copywriting/">Copywriting</a>
7 years ago
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-4 p-0">
<div class="row" style="height: 100%">
<div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md">
<div class="sidebar rb-sidebar__1" id="sidebar1">
<ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
<a href="/i2p-styleguide/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">About</li>
</a>
7 years ago
<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">Getting Started</li>
</a>
7 years ago
<a href="/i2p-styleguide/visuals/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">Visuals</li>
</a>
7 years ago
<a href="/i2p-styleguide/components/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">Components</li>
</a>
7 years ago
<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">Copywriting</li>
</a>
7 years ago
</ul>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-2 p-0">
<div class="sidebar border-left-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;">
7 years ago
<ul class="p-0 list-group pt-3 sidebar-fill">
<a class="sidebar__link__light" href="#goals"><li class="list-group-item rb-sidebar">
7 years ago
Goals & Principles
</li></a>
<a class="sidebar__link__light" href="#voice"><li class="list-group-item rb-sidebar">
7 years ago
Voice & Tone
</li></a>
<a class="sidebar__link__light" href="#grammar"><li class="list-group-item rb-sidebar">
7 years ago
Grammar
</li></a>
<a class="sidebar__link__light" href="#mechanics"><li class="list-group-item rb-sidebar">
7 years ago
Mechanics
</li></a>
<a class="sidebar__link__light" href="#people"><li class="list-group-item rb-sidebar">
7 years ago
People & Design
</li></a>
<a class="sidebar__link__light" href="#blog-posts"><li class="list-group-item rb-sidebar">
7 years ago
Blog Posts
</li></a>
<a class="sidebar__link__light" href="#newsletter"><li class="list-group-item rb-sidebar">
7 years ago
Newsletter
</li></a>
<a class="sidebar__link__light" href="#social-media"><li class="list-group-item rb-sidebar">
7 years ago
Social Media
</li></a>
<a class="sidebar__link__light" href="#copyright"><li class="list-group-item rb-sidebar">
7 years ago
Copyright
</li></a>
<a class="sidebar__link__light" href="#word-list"><li class="list-group-item rb-sidebar">
7 years ago
Word List
</li></a>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-9 col-sm-8 col-xs-8 container-wrapper">
<!--<p>This is the Copywriting page!</p>
-->
<h1 id="goals"></h1>
<div class="page-header mb-4 mt-3">
<h3>Writing Goals and Principles</h3>
</div>
<div class="row">
<div class="col-12 p-0">
<p>With every piece of content we publish, we aim to:</p>
<ul>
<li><b>Empower.</b> Help people understand Ura Design by using language that informs them and encourages them to make the most of our products.</li>
<li><b>Respect.</b> Treat readers with the respect they deserve. Put yourself in their shoes, and don’t patronize them. Remember that they have other things to do. Be considerate and inclusive. Don’t market at people; communicate with them.</li>
<li><b>Educate.</b> Tell readers what they need to know, not just what we want to say. Give them the exact information they need, along with opportunities to learn more. Remember that you’re the expert, and readers don’t have access to everything you know.</li>
<li><b>Guide</b> Think of yourself as a tour guide for our readers. Whether you’re leading them through our website, apps, or educational materials, communicate in a friendly and helpful way.</li>
<li><b>Speak truth.</b> Understand Ura's place in our customers’ lives. Avoid dramatic storytelling and grandiose claims. Focus on our real strengths.</li>
</ul>
<p>In order to achieve those goals, we make sure our content is:</p>
<ul>
<li><b>Clear.</b> Understand the topic you’re writing about. Use simple words and sentences.</li>
<li><b>Useful.</b> Before you start writing, ask yourself: What purpose does this serve? Who is going to read it? What do they need to know?</li>
<li><b>Friendly.</b> Write like a human. Don’t be afraid to break a few rules if it makes your writing more relatable. All of our content, from splashy homepage copy to system alerts, should be warm and human.</li>
<li><b>Appropriate.</b> Write in a way that suits the situation. Just like you do in face-to-face conversations, adapt your tone depending on who you’re writing to and what you’re writing about.</li>
</ul>
</div>
</div>
6 years ago
<div class="page-header mb-4 mt-5 d-none d-sm-none">
7 years ago
<h3>Scrollspy</h3>
<!--p class="text-muted">Some Description about scrollspy.</p-->
</div>
<div class="row p-0 pt-5 bg-light d-none d-sm-none">
<div class="bd-example">
<div class="row">
<div class="col-4">
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action active" href="https://securedrop.org/">SecureDrop</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Second Link</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Third Link</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Forth Link</a>
</div>
</div>
<div class="col-8">
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
</div>
</div>
</div>
</div>
</div>
<div class="dropdown-divider mt-5 wi"></div>
<div class="row">
<div class="col-12 p-0">
<p class="mt-5 mb-5">
<span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.<br>Templates and styles based on the <a href="https://reproducible-builds.org/style" target="_blank">Reproducible Builds styleguide</a>.</span>
</p>
</div>
</div>
</div>
</div>
<script src="/i2p-styleguide/assets/javascript/modernizr.min.js"></script>
<script src="/i2p-styleguide/assets/javascript/jquery-3.3.1.slim.min.js"></script>
<script src="/i2p-styleguide/assets/javascript/popper.min.js"></script>
<script src="/i2p-styleguide/assets/javascript/bootstrap.min.js"></script>
<!-- <script src="/i2p-styleguide/assets/javascript/run_prettify.js"></script> /* -->
<script type="text/javascript" src="/i2p-styleguide/assets/javascript/index.js"></script>
7 years ago
</body>
</html>