Grid

Colors

Greyscale

Patterns

Fonts

Oswald

Semi-Bold

Roboto

Regular, Bold

Montserrat

Bold

Typography

H1, Oswald,
Semi-bold, 90/90px

H2, oswald, Semi-Bold, 45/55px

H3, oswald, semi-Bold, 30/45px

H4, oswald, semi-Bold, 20/30px

“Quote, oswald, semi-Bold, 45/55px.”

– Author

Body, Roboto, Regular, 15/30px, Letter (0.5). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum, nibh pellentesque vestibulum mattis, lacus tortor posuere nulla, vel sagittis risus mauris ac tortor. Vestibulum et lacus a tellus sodales iaculis id vel dui. Etiam euismod lacus ornare risus egestas dignissim. Fusce mattis justo vitae congue varius. Suspendisse auctor dapibus ornare. Praesent venenatis lacus a sem interdum tempor et vitae magna. Aenean vel consectetur odio. Curabitur malesuada scelerisque massa varius volutpat.

Small Text, Roboto, Regular, 13/20px, Letter (0.5). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum, nibh pellentesque vestibulum mattis, lacus tortor posuere nulla, vel sagittis risus mauris ac tortor. Vestibulum et lacus a tellus sodales iaculis id vel dui. Etiam euismod lacus ornare risus egestas dignissim. Fusce mattis justo vitae congue varius. Suspendisse auctor dapibus ornare. Praesent venenatis lacus a sem interdum tempor et vitae magna. Aenean vel consectetur odio. Curabitur malesuada scelerisque massa varius volutpat.

Tables

Label Label Label Label Label Label
Value Value Value Value Value Value
Value Value Value Value Value Value
Value Value Value Value Value Value
Value Value Value Value Value Value

Lists

Definition List Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Title ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Title ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four
  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Buttons

Forms

Messages

Message
Confirmation
Tooltip
Message
Confirmation
Tooltip
Message

Pagination

Icons