Friday

Grid layout

Total Width: px Columns: 12 Column Width: px Gutter Width: px or 66.66% of column width

Colors

Brand

Primary
Secondary

UI

The colors below are supporting colors to the main brand color palette. Think of usage in text, backgrounds for sections or hovers, and borders for input fields.

Typography

Headings

Title

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

Normal Paragraph

Paragraph XXL

Paragraph Extra Large

Paragraph Large

Paragraph Medium

Paragraph Small

Paragraph Tiny

Buttons / links

Buttons

Primary
Label Label
Secondary
Label
Secondary
Label
White
Label
Primary small
Label Label
Secondary small
Label
Secondary small
Label
White small
Label

Links

Lists

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • In quis dapibus augue.
  • Vestibulum et ex sed elit maximus fermentum sed sed sapien.
  • Proin commodo placerat dui vitae feugiat. Ut vitae augue faucibus augue auctor hendrerit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • In quis dapibus augue.
  • Vestibulum et ex sed elit maximus fermentum sed sed sapien.
  • Proin commodo placerat dui vitae feugiat. Ut vitae augue faucibus augue auctor hendrerit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • In quis dapibus augue.
  • Vestibulum et ex sed elit maximus fermentum sed sed sapien.
  • Proin commodo placerat dui vitae feugiat. Ut vitae augue faucibus augue auctor hendrerit.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. In quis dapibus augue.
  3. Vestibulum et ex sed elit maximus fermentum sed sed sapien.
  4. Proin commodo placerat dui vitae feugiat. Ut vitae augue faucibus augue auctor hendrerit.

Tables

# Name Country
1 Jan Netherlands
2 Therese France
3 Joe United Kingdom
# Users

Forms

Friday - Styleguide