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.
190 lines
10 KiB
190 lines
10 KiB
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<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">
|
|
<link href="/i2p-styleguide/assets/fonts/i2p.css" rel="stylesheet">
|
|
<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">
|
|
<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>
|
|
</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>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/i2p-styleguide/getting-started">Getting Started</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/i2p-styleguide/design/">Design</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/i2p-styleguide/components/">Components</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/i2p-styleguide/copywriting/">Copywriting</a>
|
|
</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>
|
|
|
|
<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">
|
|
<li class="list-group-item rb-main-sidebar">Getting Started</li>
|
|
</a>
|
|
|
|
<a href="/i2p-styleguide/design/" class="sidebar__link__light">
|
|
<li class="list-group-item rb-main-sidebar">Design</li>
|
|
</a>
|
|
|
|
<a href="/i2p-styleguide/components/" class="sidebar__link__light">
|
|
<li class="list-group-item rb-main-sidebar">Components</li>
|
|
</a>
|
|
|
|
<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">
|
|
<li class="list-group-item rb-main-sidebar">Copywriting</li>
|
|
</a>
|
|
</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;">
|
|
<ul class="p-0 list-group pt-3 sidebar-fill">
|
|
|
|
|
|
<a class="sidebar__link__light" href="#goals"><li class="list-group-item rb-sidebar">
|
|
Goals & Principles
|
|
</li></a>
|
|
|
|
|
|
|
|
<a class="sidebar__link__light" href="#personality"><li class="list-group-item rb-sidebar">
|
|
Personality
|
|
</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>
|
|
|
|
<h1 id="personality"></h1>
|
|
<div class="page-header mb-4 mt-3">
|
|
<h3>Personality</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 p-0">
|
|
<p>Our personality sets the tone for interactions within I2P platforms.</br />
|
|
It reflects a wide variety of values from different backgrounds associated with I2P. It's vital that these values are recognizable in the external-facing software and mediums we build and maintain.</p>
|
|
|
|
<h4>Concise</h4>
|
|
<p>I2P is privacy-preserving software. As such, we have a responsibility to inform our users about possibilities and limitations without creating false expectations. Our software is used by people with different threat models and we don't assume any specific one for our users. I2P software is powerful but is prone to fail securing a user's identity if not properly configured. We don't over-promise about features in our software or the ease of using them. We are aware that our tools are at time complicated and strive to help and simplify this path.</p>
|
|
|
|
<h4>Grounded</h4>
|
|
<p>We swim against the currents and many will disagree with our stance but we are used to that. Our position is clear and we can back it up by the work we do. While we strive for a world where everyone is in control of their privacy, we are aware of the many hurdles in practice. We take these into account in order to deliver the big picture, yet help users get from A to B.</p>
|
|
|
|
<h4>Patient</h4>
|
|
<p>We don't expect people to be of any skill level by default. I2P software should be designed to guide any user no matter their technical background. By doing this, we show patience and empathy. It's okay to take things slowly. Doing them right is more important.</p>
|
|
|
|
<h4>Simple</h4>
|
|
<p>It's very easy to derail and slip into tech jargon, but we strive to use the most simple wordings and explanation as possible. While complicated terms might be impressive in academic papers, we don't aim to impress users that way. Using simple language reflects our humility and makes our content and tools more accessible to global audiences.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-header mb-4 mt-5 d-none d-sm-none">
|
|
<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>
|
|
|
|
</body>
|
|
</html>
|
|
|