Typeface

Open Sans is our default typeface for websites, print and other materials. Designed with open forms and a friendly appearance, Open Sans carefully crafted glyphs and clean, modern lines also fit our Flat UI style.

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789(!@#$%&.,?:;)

Headings

Use <h1> through <h4> to add visual hierarchy to your page. <h5> and <h6> are given the same styling and should only be used to add semantic structure.

h1. The five boxing wizards jump quickly

h2. The five boxing wizards jump quickly

h3. The five boxing wizards jump quickly

h4. The five boxing wizards jump quickly

h5. The five boxing wizards jump quickly
h6. The five boxing wizards jump quickly
<h1>h1. The five boxing wizards jump quickly</h1>
<h2>h2. The five boxing wizards jump quickly</h2>
<h3>h3. The five boxing wizards jump quickly</h3>
<h4>h4. The five boxing wizards jump quickly</h4>
<h5>h5. The five boxing wizards jump quickly</h5>
<h6>h6. The five boxing wizards jump quickly</h6>

Fancy

Use .fancy to make h1, h2, and h3 headings stand out even more. We chose Bitter as a complement to Open Sans because of its bold and contemporary flair and exclusive design for the modern web.

h1. The five boxing wizards jump quickly

h2. The five boxing wizards jump quickly

h3. The five boxing wizards jump quickly

<h1 class='fancy'>h1. The five boxing wizards jump quickly</h1>
<h2 class='fancy'>h2. The five boxing wizards jump quickly</h2>
<h3 class='fancy'>h3. The five boxing wizards jump quickly</h3>

Secondary headings

Create secondary headings or subtitles by adding .small and .quiet classes to the heading.

Magazine

Silicon Valley's Youth Problem

<h4 class='small quiet'>Magazine</h4>
<h3>Silicon Valley's Youth Problem</h3>

Links

Links are styled globally using the styleguide's primary color. Customize this variable and others within variables.less.

The five boxing wizards jump quickly.

Body copy

Our default font-size is 15px with a line-height of 20px. This is applied to the <body> and all paragraphs. As expected the <p> tag receives a bottom margin to create space.

Text alignment

Need to align some text? Visit our helpers page to see some of the slick classes we've added.

Premium Leather Journal

Each handcrafted journal is made from premium natural raw leather. This buttery soft vegetable-tanned leather will darken over time and look even better as it ages. The more you use it, the better it looks. Each journal comes in a handy cotton pouch.

  • 7.5" x 5" and 1" thick
  • 192 blank white pages (7" x 4.75")
  • Sturdy Longstitch hand binding
  • Knotted thread place holder
  • Finished edges and rounded corners
  • Handmade in the USA

*Please note: each piece of leather will have slight variations and markings, making each journal truly one of a kind.

<h4>Premium Leather Journal</h4>
<p>
  Each handcrafted journal is made from <a href='#fakelink'>premium natural</a> raw leather. This buttery soft vegetable-tanned leather will <strong>darken</strong> over time and look even <em>better</em> as it ages. The more you use it, the better it looks. Each journal comes in a handy cotton pouch.
</p>
<p>
  <img src='../img/desk.jpg' width='500'>
</p>
<ul>
  <li>7.5" x 5" and 1" thick</li>
  <li>192 blank white pages (7" x 4.75")</li>
  <li>Sturdy Longstitch hand binding</li>
  <li>Knotted thread place holder</li>
  <li>Finished edges and rounded corners</li>
  <li>Handmade in the USA</li>
</ul>
<p class='small quiet'>
  *Please note: each piece of leather will have slight variations and markings, making each journal truly one of a kind.
</p>

Formatted text and readability

To add exaggerated heirarchy and breathing space for content like blogs and articles, use the prose class on a containing element.

Premium Leather Journal

Each handcrafted journal is made from premium natural raw leather. This buttery soft vegetable-tanned leather will darken over time and look even better as it ages. The more you use it, the better it looks. Each journal comes in a handy cotton pouch.

  • 7.5" x 5" and 1" thick
  • 192 blank white pages (7" x 4.75")
  • Sturdy Longstitch hand binding
  • Knotted thread place holder
  • Finished edges and rounded corners
  • Handmade in the USA

*Please note: each piece of leather will have slight variations and markings, making each journal truly one of a kind.

<div class='prose'>
  <h4>Premium Leather Journal</h4>
  <p>
    Each handcrafted journal is made from <a href='#fakelink'>premium natural</a> raw leather. This buttery soft vegetable-tanned leather will <strong>darken</strong> over time and look even <em>better</em> as it ages. The more you use it, the better it looks. Each journal comes in a handy cotton pouch.
  </p>
  <p>
    <img src='../img/desk.jpg' width='500'>
  </p>
  <ul>
    <li>7.5" x 5" and 1" thick</li>
    <li>192 blank white pages (7" x 4.75")</li>
    <li>Sturdy Longstitch hand binding</li>
    <li>Knotted thread place holder</li>
    <li>Finished edges and rounded corners</li>
    <li>Handmade in the USA</li>
  </ul>
  <p class='small quiet'>
    *Please note: each piece of leather will have slight variations and markings, making each journal truly one of a kind.
  </p>
</div>

Dark themed text

To add white text on a dark background combine the dark class with a fill-[color] from the colors palette on a containing element.

Light Text on Dark Backgrounds

Use caution when choosing dark themed text. Studies have shown that having light text on a dark background harms readability and is generally a bad idea.

Premium Leather Journal

Each handcrafted journal is made from premium natural raw leather. This buttery soft vegetable-tanned leather will darken over time and look even better as it ages. The more you use it, the better it looks. Each journal comes in a handy cotton pouch.

  • 7.5" x 5" and 1" thick
  • 192 blank white pages (7" x 4.75")
  • Sturdy Longstitch hand binding
  • Knotted thread place holder
  • Finished edges and rounded corners
  • Handmade in the USA

*Please note: each piece of leather will have slight variations and markings, making each journal truly one of a kind.

<div class='fill-denim dark'>
  <h4>Premium Leather Journal</h4>
  <p>
    Each handcrafted journal is made from <a href='#fakelink'>premium natural</a> raw leather. This buttery soft vegetable-tanned leather will <strong>darken</strong> over time and look even <em>better</em> as it ages. The more you use it, the better it looks. Each journal comes in a handy cotton pouch.
  </p>
  <p>
    <img src='../img/desk.jpg' width='500'>
  </p>
  <ul>
    <li>7.5" x 5" and 1" thick</li>
    <li>192 blank white pages (7" x 4.75")</li>
    <li>Sturdy Longstitch hand binding</li>
    <li>Knotted thread place holder</li>
    <li>Finished edges and rounded corners</li>
    <li>Handmade in the USA</li>
  </ul>
  <p class='small quiet'>
    *Please note: each piece of leather will have slight variations and markings, making each journal truly one of a kind.
  </p>
</div>
Made with in Norcross by the UX Team.