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.

527 lines
21 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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
<a class="navbar-brand" href="https://geti2p.net/">
<img src="/i2p-styleguide/assets/images/horizontal_color.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/visuals/">Visuals</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-5 hidden-sm p-0">
<div class="row" style="height: 100%">
<div class="col-md-6 col-sm-6 col-xs-6 p-0">
<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">
<li class="list-group-item rb-main-sidebar">
<a href="/i2p-styleguide/" class="sidebar__link__light">About</a>
</li>
<li class="list-group-item rb-main-sidebar">
<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">Getting Started</a>
</li>
<li class="list-group-item rb-main-sidebar">
<a href="/i2p-styleguide/visuals/" class="sidebar__link__light">Visuals</a>
</li>
<li class="list-group-item rb-main-sidebar">
<a href="/i2p-styleguide/components/" class="sidebar__link__light">Components</a>
</li>
<li class="list-group-item rb-main-sidebar">
<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">Copywriting</a>
</li>
</ul>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 p-0">
<div class="sidebar border-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;">
<ul class="p-0 list-group pt-3 sidebar-fill">
<a href="#colors"><li class="list-group-item rb-sidebar">
Colors
</li></a>
<a href="#grid"><li class="list-group-item rb-sidebar">
Grid
</li></a>
<a href="#typography"><li class="list-group-item rb-sidebar">
Typography
</li></a>
<a href="#assets"><li class="list-group-item rb-sidebar">
Assets
</li></a>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
<div id="colors" class="page-header mb-4">
<h2 class="b-border">Colors</h2>
<p class="text-muted">The main I2P color is Blue. Use Green as a secondary option and Yellow as accent color.</p>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-primary text-white small">#4661A9</div>
<h6 class="pt2 text-left">Primary Color</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-secondary text-white small">#60AB60</div>
<h6 class="pt2 text-left">Secondary color</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-warning text-white small">#FFC434</div>
<h6 class="pt2 text-left">Warning</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-danger text-white small">#E15647</div>
<h6 class="pt2 text-left">Danger</h6>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-0 text-black small">#f8f9fa</div>
<h6 class="pt2 text-left">Gray 0</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-1 text-black small">#f1f3f5</div>
<h6 class="pt2 text-left">Gray 1</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-2 text-black small">#e9ecef</div>
<h6 class="pt2 text-left">Gray 2</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-3 text-black small">#dee2e6</div>
<h6 class="pt2 text-left">Gray 3</h6>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-4 text-black small">#ced4da</div>
<h6 class="pt2 text-left">Gray 4</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-5 text-black small">#adb5bd</div>
<h6 class="pt2 text-left">Gray 5</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-6 text-white small">#868e96</div>
<h6 class="pt2 text-left">Gray 6</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-7 text-white small">#495057</div>
<h6 class="pt2 text-left">Gray 7</h6>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-8 text-white small">#343a40</div>
<h6 class="pt2 text-left">Gray 8</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-9 text-white small">#212529</div>
<h6 class="pt2 text-left">Gray 9</h6>
</div>
</div>
<div id="grid" class="page-header mb-4 mt-5">
<h2 class="b-border">Grid</h2>
<p class="text-muted">Our main used grid compositions are outlined here. Use them to generate one column or various columns layouts.</p>
</div>
<div class="container bg-light p-5">
<div class="row mb-1">
<div class="col-12">
<p class="background-primary p-3 text-white small">
12
</p>
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<p class="background-primary p-3 text-white small">
4
</p>
</div>
<div class="col-8">
<p class="background-primary p-3 text-white small">
8
</p>
</div>
</div>
<div class="row mb-1">
<div class="col-3">
<p class="background-primary p-3 text-white small">
3
</p>
</div>
<div class="col-9">
<p class="background-primary p-3 text-white small">
9
</p>
</div>
</div>
<div class="row mb-1">
<div class="col-2">
<p class="background-primary p-3 text-white small">
2
</p>
</div>
<div class="col-2">
<p class="background-primary p-3 text-white small">
2
</p>
</div>
<div class="col-2">
<p class="background-primary p-3 text-white small">
2
</p>
</div>
<div class="col-2">
<p class="background-primary p-3 text-white small">
2
</p>
</div>
<div class="col-2">
<p class="background-primary p-3 text-white small">
2
</p>
</div>
<div class="col-2">
<p class="background-primary p-3 text-white small">
2
</p>
</div>
</div>
<div class="row mb-1">
<div class="col-3">
<p class="background-primary p-3 text-white small">
3
</p>
</div>
<div class="col-3">
<p class="background-primary p-3 text-white small">
3
</p>
</div>
<div class="col-3">
<p class="background-primary p-3 text-white small">
3
</p>
</div>
<div class="col-3">
<p class="background-primary p-3 text-white small">
3
</p>
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<p class="background-primary p-3 text-white small">
4
</p>
</div>
<div class="col-4">
<p class="background-primary p-3 text-white small">
4
</p>
</div>
<div class="col-4">
<p class="background-primary p-3 text-white small">
4
</p>
</div>
</div>
<div class="row mb-1">
<div class="col-6">
<p class="background-primary p-3 text-white small">
6
</p>
</div>
<div class="col-6">
<p class="background-primary p-3 text-white small">
6
</p>
</div>
</div>
<div class="row mb-1">
<div class="col-8 offset-2">
<p class="background-primary p-3 text-white small">
8
</p>
</div>
</div>
<div class="row mb-1">
<div class="col-6 offset-3">
<p class="background-primary p-3 text-white small">
6
</p>
</div>
</div>
</div>
<div id="typography" class="page-header mb-4 mt-5">
<h2 class="b-border">Typography</h2>
<p class="text-muted">Our main typography is Source Sans made by Adobe.</p>
</div>
<div class="row">
<div class="col-12">
<p class="text-black small text-muted">H1</p>
<h1>Protect communications from monitoring</h1>
<p class="text-black small text-muted">H2</p>
<h2>Protect communications from monitoring</h2>
<p class="text-black small text-muted">H3</p>
<h3>Protect communications from monitoring</h3>
<p class="text-black small text-muted">H4</p>
<h4>Protect communications from monitoring</h4>
<p class="text-black small text-muted">H5</p>
<h5>Protect communications from monitoring</h5>
<p class="text-black small text-muted">H6</p>
<h6>Protect communications from monitoring</h6>
<p class="text-black small pt-5 text-muted">H1 display</p>
<h1 class="header-display color-secondary">I2P Anonymous Network</h1>
<p class="text-black small text-muted">H2 display</p>
<h2 class="header-display color-secondary">I2P Anonymous Network</h2>
<p class="text-black small text-muted">H3 display</p>
<h3 class="header-display color-secondary">I2P Anonymous Network</h3>
<p class="text-black small text-muted">H4 display</p>
<h4 class="header-display color-secondary">I2P Anonymous Network</h4>
</div>
</div>
<div class="row pt-5">
<div class="col-md-5">
<p class="text-black small">
<span class="text-left color-gray-2 rb-isBold">Paragraph</span>
<span class="text-right color-primary rb-isBold" style="float: right;">Source Sans Regular</span>
</p>
<p>
I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<p class="text-black small">
<span class="text-left color-gray-2 rb-isBold">Code Snippet</span>
<span class="text-right color-primary rb-isBold" style="float: right;">Source Code</span>
</p>
<pre class="bg-light p-2 prettyprint rb-code" style="border: none;">
$('.rb-sidebar').on('click', 'a',function() {
$('.rb-sidebar a.active').removeClass('active');
$(this).addClass('active');
});
</pre>
</div>
</div>
<div id="assets" class="page-header mb-4 mt-5">
<h2 class="b-border">Identity Assets</h2>
<p class="text-muted">The I2P brand assets are included here. Use them responsibly.</p>
</div>
<div class="row">
<div class="col-xs-12 col-md-5 col-sm-6">
<div class="image border p-5">
<img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_color.png" class="rb-contain">
</div>
<p class="text-black pt-3 align-horizontally flex-space-between">
<span class="text-left color-gray-2 rb-isBold">Default</span>
<span class="text-right color-primary rb-isBold" style="float: right;">
<a target="_blank"
href="https://demo.identihub.co/assets/SecureDrop_ICONS_62.svg"
class="button btn btn-sm btn-outline-medium">Download SVG</a>
</span>
</p>
</div>
<div class="col-xs-12 col-md-5 col-sm-6">
<div class="image border p-5 bg-dark">
<img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="rb-contain">
</div>
<p class="text-black pt-3 align-horizontally flex-space-between">
<span class="text-left color-gray-2 rb-isBold">White</span>
<span class="text-right color-primary rb-isBold" style="float: right;">
<a target="_blank"
href="https://demo.identihub.co/assets/SecureDrop_ICONS_6.svg"
class="button btn btn-sm btn-outline-medium">Download SVG</a>
</span>
</p>
</div>
</div>
<div class="row mt-5">
<div class="col-xs-12 col-md-5 col-sm-6">
<div class="image border p-5">
<img src="https://github.com/uracreative/works/raw/master/I2P/PNG/vertical_color.png" class="rb-contain">
</div>
<p class="text-black pt-3 align-horizontally flex-space-between">
<span class="text-left color-gray-2 rb-isBold">Default</span>
<span class="text-right color-primary rb-isBold" style="float: right;">
<a target="_blank"
href="https://demo.identihub.co/assets/SecureDrop_ICONS_63.svg"
class="button btn btn-sm btn-outline-medium">Download SVG</a>
</span>
</p>
</div>
<div class="col-xs-12 col-md-5 col-sm-6">
<div class="image border p-5 bg-dark">
<img src="https://github.com/uracreative/works/raw/master/I2P/PNG/vertical_white.png" class="rb-contain">
</div>
<p class="text-black pt-3 align-horizontally flex-space-between">
<span class="text-left color-gray-2 rb-isBold">White</span>
<span class="text-right color-primary rb-isBold" style="float: right;">
<a target="_blank"
href="https://demo.identihub.co/assets/SecureDrop_ICONS_9.svg"
class="button btn btn-sm btn-outline-medium">Download SVG</a>
</span>
</p>
</div>
</div>
<div class="row mt-5">
<div class="col-xs-12 col-md-5 col-sm-6">
<div class="image border p-5">
<img src="https://github.com/uracreative/works/raw/master/I2P/PNG/icon_color.png" class="rb-contain">
</div>
<p class="text-black pt-3 align-horizontally flex-space-between">
<span class="text-left color-gray-2 rb-isBold">Default</span>
<span class="text-right color-primary rb-isBold" style="float: right;">
<a target="_blank"
href="https://demo.identihub.co/assets/SecureDrop_ICONS_1.svg"
class="button btn btn-sm btn-outline-medium">Download SVG</a>
</span>
</p>
</div>
<div class="col-xs-12 col-md-5 col-sm-6">
<div class="image bg-dark border p-5">
<img src="https://github.com/uracreative/works/raw/master/I2P/PNG/icon_white.png" class="rb-contain">
</div>
<p class="text-black pt-3 align-horizontally flex-space-between">
<span class="text-left color-gray-2 rb-isBold">White</span>
<span class="text-right color-primary rb-isBold" style="float: right;">
<a target="_blank"
href="https://demo.identihub.co/assets/SecureDrop_ICONS_3.svg"
class="button btn btn-sm btn-outline-medium">Download SVG</a>
</span>
</p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-6">
<div class="bg-box p-5 mb-3">
<h6>I2P repo</h6>
<p class="m-0">Download SVG and PNG files</p>
<a class="btn btn-lg btn-link p-0" title="SecureDrop Repo"
href="https://github.com/uracreative/works/tree/master/I2P" target="_blank">Visit Repo</a></div>
</div>
<div class="col-md-6">
<div class="bg-box p-5 text-left">
<h6>Styleguide Mirror on Identihub</h6>
<p class="m-0">Identihub Project</p>
<a class="btn btn-lg btn-link p-0" href="https://demo.identihub.co/project/securedrop"
target="_blank">Visit Project Page</a>
</div>
</div>
</div>
<h1 id="scrollspy"> </h1>
<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>
<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>
</div>
</div>
</body>
</html>