Style Guide

A simple page to illustrate colors, typography, and page elements

Color Scheme

Primary Colors

Secondary Colors

Miscellaneous Colors (e.g. Code Samples)


Headings:

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading
Level 6 Heading

Paragraphs & Lists:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  4. Nunc dignissim risus id metus.
  5. Cras ornare tristique elit.
  6. Vivamus vestibulum nulla nec ante.
  7. Praesent placerat risus quis eros.
  8. Fusce pellentesque suscipit nibh.
  9. Integer vitae libero ac risus egestas placerat.
  10. Vestibulum commodo felis quis tortor.
  11. Ut aliquam sollicitudin leo.
  12. Cras iaculis ultricies nulla.
  13. Donec quis dui at dolor tempor interdum.
  14. Vivamus molestie gravida turpis.
  15. Fusce lobortis lorem at ipsum semper sagittis.
  16. Nam convallis pellentesque nisl.
  17. Integer malesuada commodo nulla.
Lorem ipsum dolor sit amet
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
Donec nec justo eget felis facilisis fermentum
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Morbi in sem quis dui placerat ornare
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
Praesent dapibus
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
Phasellus ultrices nulla quis nibh
Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.
Pellentesque fermentum dolor
Nulla sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Sed adipiscing ornare risus
Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus.
Morbi purus libero
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Integer eu magna sit amet metus fermentum posuere
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Font Sizes:

Paragraph with the .alpha class.

Paragraph with the .beta class.

Paragraph with the .gamma class.

Paragraph with the .delta class.

Paragraph with the .epsilon class.

Paragraph with the .zeta class.

SI Prefixes:

Level 1 Heading (.giga)

Paragraph (.giga): Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Paragraph (.milli): Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.


Form Elements:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.


Miscellaneous Elements:

Link Button

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Example blockquote: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus.

Blockquote

Tables

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3