Type

Basecoat has a custom type system to visually separate marketing & signed-out pages from signed-in and product pages. Unlike the product, which uses Helvetica, Basecoat uses Roboto.

Headings
Paragraphs
Lists
Quotes
Modfiers

Headings

To make headings more portable, we’ve assigned class names in addition to the default element styling. This allows us to visually present elements as headings without affecting their semantic meaning in markup.

Heading 1 / .text-alpha

Heading 2 / .text-beta

Heading 3 / .text-gamma

Heading 4 / .text-delta

<h1>Heading 1 / .text-alpha</h1><!-- or --><p class="text-alpha">Heading 1 / .alpha</p>
<h2>Heading 2 / .text-beta</h2><!-- or --><p class="text-beta">Heading 2 / .beta</p>
<h3>Heading 3 / .text-gamma</h3><!-- or --><p class="text-gamma">Heading 3 / .gamma</p>
<h4>Heading 4 / .text-delta</h4><!-- or --><p class="text-delta">Heading 4 / .delta</p>

Paragraphs

Lead Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Normal Paragraphs

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Lists

Unordered list

List item
- Nested list item
- Nested list item
List item
List item
List item

<ul>
  <li>
    List item
    <ul>
      <li>Nested list item</li>
      <li>Nested list item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Ordered list

List item
1. Nested list item
2. Nested list item
List item
List item
List item

<ol>
  <li>
  List item
    <ol>
      <li>Nested list item</li>
      <li>Nested list item</li>
    </ol>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

Checklist

List item
List item
List item
List item

<ul class="checklist">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

Unstyled List

List item
List item
List item
List item

<ul class="list-unstyled">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

Inline list

List item
List item
List item
List item

<ul class="list-inline">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Quotes

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Harry Dunne, Philosopher

<blockquote>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <cite class="blockquote-credit">Harry Dunne, Philosopher</cite>
</blockquote>

Blockquote Alt

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lloyd Christmas, Poet

<blockquote class="pullquote">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <cite class="blockquote-credit">Lloyd Christmas, Poet</cite>
</blockquote>