<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Pixelated Style Guide</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="css/opensans.css" rel="stylesheet" type="text/css"> <link href="css/news-cycle.css" rel="stylesheet" type="text/css"/> <link href="css/style-guide.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="../css/main.css"> </head> <body> <div id="style-guide-wrap" data-offcanvas> <nav class="top-bar" data-topbar> <ul class="left"> <li><a class="logo-anchor" href="#welcome">Pixelated Style Guide</a></li> </ul> <ul class="right"> <li><a href="#welcome">Home</a></li> <li><a href="#colors">Colors</a></li> <li><a href="#typography">Typography</a></li> <li><a href="#icons">Icons</a></li> </ul> </nav> <section id="welcome" class="guide-section" name="welcome"> <h2>Welcome to the Pixelated Style Guide</h2> <p> Here you'll find information about visual design and UI guidelines for Pixelated, such as colors, typography and components. </p> <p> This is a live style guide - that means it's reflecting the actual application cascading stylesheets, but also that it will be continuously and automatically updated as our design evolves. </p> <img class="screenshot" src="/images/pixelated-screenshot.png" alt="Pixelated Screenshot" /> </section> <section id="colors" class="guide-section"> <h2>Color Palette</h2> </br> <div class="color-grid"> <div id="primary-color-card" class="color-card"> <p class="color-label"> <span class="color-name">PRIMARY COLOR</span> <br>#EF4E2F </p> </div> <div id="secondary-color-card" class="color-card"> <p class="color-label"> <span class="color-name">SECONDARY COLOR</span> <br>#3E3A37 </p> </div> <div id="top-pane-card" class="color-card"> <p class="color-label"> <span class="color-name">TOP PANE</span> <br>#EAEAEA </p> </div> <div id="contrast-card" class="color-card"> <p class="color-label"> <span class="color-name">CONTRAST</span> <br>#F2F3ED </p> </div> <div id="action-buttons-card" class="color-card"> <p class="color-label"> <span class="color-name">ACTION BUTTONS</span> <br>#2ba6cb </p> </div> </div> <br> <div class="color-grid"> <div id="success-card" class="color-card"> <p class="color-label"> <span class="color-name">SUCCESS</span> <br>#2DAB49 </p> </div> <div id="attention-card" class="color-card"> <p class="color-label"> <span class="color-name">ATTENTION</span> <br>#F6A40A </p> </div> <div id="warning-card" class="color-card"> <p class="color-label"> <span class="color-name">WARNING</span> <br>#F7E8AF </p> </div> <div id="error-card" class="color-card"> <p class="color-label"> <span class="color-name">ERROR</span> <br>#D72A25 </p> </div> <div id="search-highlight-card" class="color-card"> <p class="color-label"> <span class="color-name">SEARCH HIGHLIGHT</span> <br>#FFEF29 </p> </div> <div id="count-background-card" class="color-card"> <p class="color-label"> <span class="color-name">COUNT BACKGROUND</span> <br>#C0B9B9 </p> </div> </div> </section> <section id="typography" class="guide-section"> <h2>Typography</h2> </br> Pixelated uses Open Sans as its main font for its readability and wide range of variations. <a href="https://www.google.com/fonts/specimen/Open+Sans">Open Sans</a> is a humanist sans serif typeface created by Steve Matteson. </br> <ul class="typography"> <li> <h2>Aa</h2> <span>Regular</span> </li> <li> <h2 class="bold-header">Aa</h2> <span>Bold</span> </li> <li> <h2 class="extra-bold-header">Aa</h2> <span>Extra Bold</span> </li> <li> <h2 class="lighter-header">Aa</h2> <span>Lighter</span> </li> </ul> <ul class="headers-and-sizes"> <li> <h1>Header 1</h1> </li> <li> <h2>Header 2</h2> </li> <li> <h3>Header 3</h3> </li> <li> <h4>Header 4</h4> </li> <li> <h5>Header 5</h5> </li> <li> <h6>Header 6</h6> </li> <li> <i>Italics</i><br> </li> <li> <strong>Strong / Emphasized</strong><br> </li> <li> <small>Small Text</small> </li> </ul> </section> <section id="icons" class="guide-section" name="icons"> <h2>Icons</h2> <p>Every icon in Pixelated comes from a font called <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome.</a> <p>Here are some of the icons we're currently using on Pixelated</p> <i class="fa fa-inbox"></i> <i class="fa fa-send"></i> <i class="fa fa-pencil"></i> <i class="fa fa-trash-o"></i> <i class="fa fa-archive"></i> <i class="fa fa-tags"></i> <i class="fa fa-navicon"></i> <i class="fa fa-refresh"></i> </section> </div> <script src="/bower_components/jquery/dist/jquery.js"></script> <script src="/js/style_guide/main.js"></script> </body> </html>