Style Guide

Typography

Heading 1
Desktop: Circular | 48px / 1.2em | 500 Medium
Mobile: Circular | 32px / 1.2em | 500 Medium

The quick brown fox
jumps over the lazy dog.

Heading 2
Desktop: Circular | 32px / 1.2em | 500 Medium
Mobile: Circular | 24px / 1.2em | 500 Medium

The quick brown fox
jumps over the lazy dog.

Heading 3
Desktop: Circular | 20px / 1.2em | 500 Medium
Mobile: Circular | 20px / 1.2em | 500 Medium

The quick brown fox
jumps over the lazy dog.

Heading 4
Desktop: Circular | 20px / 1.2em | 500 Medium
Mobile: Circular | 18px / 1.2em | 500 Medium

The quick brown fox
jumps over the lazy dog.

Heading 5
Desktop: Circular | 18px / 1.2em | 500 Medium
Mobile: Circular | 16px / 1.2em | 500 Medium
The quick brown fox
jumps over the lazy dog.
Heading 6
Desktop: Circular | 16px / 1.2em | 500 Medium
Mobile: Circular | 16px / 1.2em | 500 Medium
The quick brown fox
jumps over the lazy dog.
Paragraph - Big
Desktop: Circular | 20px / 1.7em | 300 Light
Mobile: Circular | 18px / 1.7em | 300 Light

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Paragraph - Regular
Desktop: Circular | 16px / 1.7em | 300 Light
Mobile: Circular | 16px / 1.7em | 300 Light

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Style Guide

Elements

Button - Primary
Desktop: Circular | 15px / 1.7em | 500 Medium | 36px / 12px
Mobile: Circular | 15px / 1.7em | 500 Medium | 36px / 12px
Read more
Button - Secondary
Desktop: Circular | 15px / 1.7em | 500 Medium | 36px / 12px
Mobile: Circular | 15px / 1.7em | 500 Medium | 36px / 12px
Read more
Button - Extra
Desktop: Circular | 15px / 1.7em | 500 Medium | 36px / 12px
Mobile: Circular | 15px / 1.7em | 500 Medium | 36px / 12px
Read more
List - Unordered
Desktop: Circular | 16px / 1.7em | 300 Light
Mobile: Circular | 16px / 1.7em | 300 Light
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Suspendisse varius enim in eros elementum tristique.
  • Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
List - Ordered
Desktop: Circular | 16px / 1.7em | 300 Light
Mobile: Circular | 16px / 1.7em | 300 Light
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Suspendisse varius enim in eros elementum tristique.
  • Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
List - Ordered
Desktop: Circular | 16px / 1.7em | 300 Light
Mobile: Circular | 16px / 1.7em | 300 Light
Heading 1
Heading 2
Row 1
Row 1
Row 2
Row 2
Row 3
Row 3
Navigation
Desktop: Circular | 16px / 1.7em | 500 Medium
Mobile: Circular | 16px / 1.7em | 500 Medium
Forms
Desktop: Circular | 16px / 1.7em | 300 Light
Mobile: Circular | 16px / 1.7em | 300 Light
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Style Guide

Previews

Preview 1
Heading 1 + Paragraph big

The quick brown fox
jumps over the lazy dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

Preview 2
Heading 2 + Paragraph + Buttons

The quick brown fox
jumps over the lazy dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Read moreRead more
Preview 3
Icon + Heading 3 + Paragraph + Button
Altijd een winkel in de buurt

The quick brown fox jumps over the dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Read more

Style Guide

Colours

Black
Headings,
main texts, icons
Dark grey
Secondary texts
Light grey
Dividers, borders
Dark red
Button hover
Link hover
Fire red
Primary buttons
Style elements
White smoke
Secondary background
White
Primary background