<!DOCTYPE html>
< html lang = "en" dir = "ltr" >
< head >
< meta charset = "utf-8" >
< title > I2P Styleguide< / title >
< link rel = "stylesheet" href = "/assets/static/open-iconic-bootstrap.css" / >
< link rel = "stylesheet" href = "/assets/static/bootstrap.min.css" >
< link rel = "stylesheet" href = "/assets/styles/main.css" >
< link rel = "shortcut icon" type = "image/png" href = "/assets/images/favicon.png" / >
< link href = "/assets/fonts/sourcesans.css" rel = "stylesheet" >
< link href = "/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 = "/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 = "/" > About< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/getting-started" > Getting Started< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/visuals/" > Visuals< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/components/" > Components< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/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 = "/" class = "sidebar__link__light" > About< / a >
< / li >
< li class = "list-group-item rb-main-sidebar" >
< a href = "/getting-started/" class = "sidebar__link__light" > Getting Started< / a >
< / li >
< li class = "list-group-item rb-main-sidebar" >
< a href = "/visuals/" class = "sidebar__link__light" > Visuals< / a >
< / li >
< li class = "list-group-item rb-main-sidebar" >
< a href = "/components/" class = "sidebar__link__light" > Components< / a >
< / li >
< li class = "list-group-item rb-main-sidebar" >
< a href = "/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-white text-black small" > #ffffff< / div >
< h6 class = "pt2 text-left" > White< / 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" > #95989A< / 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-white small" > #181818< / 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-black text-white small" > #000000< / div >
< h6 class = "pt2 text-left" > Black< / 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 = "/assets/javascript/modernizr.min.js" > < / script >
< script src = "/assets/javascript/jquery-3.3.1.slim.min.js" > < / script >
< script src = "/assets/javascript/popper.min.js" > < / script >
< script src = "/assets/javascript/bootstrap.min.js" > < / script >
<!-- <script src="/assets/javascript/run_prettify.js"></script> /* -->
< script type = "text/javascript" src = "/assets/javascript/index.js" > < / script >
< / div >
< / div >
< / body >
< / html >
