Colors

primary

torch-red #FF133E
turquoise #23E5DB
cerulean #0FB2E8
blue-charcoal #010D26

grayscale

ship-gray #45444A
mercury #E5E5E5
bombay #B3B6BE
athens-gray #E5E6E9
french-gray #D1D0D2
bastille #17151D
milk #fff
cola #000

Typography

Font family

Aa

Inter Regular

Aa

Inter Medium

Aa

Inter ExtraBold

Aa

Overpass Bold

Aa

Overpass Black

Heading 1

Font / weight:
Overpass Black
Font size:
100px/80px/80px/40px/40px/40px
Line height:
1.1
Letter spacing:
-3px/-2.4px/-2.4px/-1.2px/-1.2px/-1.2px

The quick brown fox jumps over the lazy dog

Heading 2

Font / weight:
Overpass Black
Font size:
60px/48px/48px/30px/30px/30px
Line height:
1.1
Letter spacing:
-2px/-1.6px/-1.6px/-1px/-1px/-1px

The quick brown fox jumps over the lazy dog

Heading 3

Font / weight:
Overpass Black
Font size:
50px/40px/40px/25px/25px/25px
Line height:
1.1
Letter spacing:
-2px/-1.6px/-1.6px/-1px/-1px/-1px

The quick brown fox jumps over the lazy dog

Heading 4

Font / weight:
Overpass Black
Font size:
40px/32px/32px/20px/20px/20px
Line height:
1.1
Letter spacing:
-1.5px/-1.2px/-1.2px/-.5px/-.5px/-.5px

The quick brown fox jumps over the lazy dog

Heading 5

Font / weight:
Overpass Black
Font size:
30px/24px/24px/20px/20px/20px
Line height:
1.1
Letter spacing:
-.75px/-.6px/-.6px/-.5px/-.5px/-.5px
The quick brown fox jumps over the lazy dog

Heading 6

Font / weight:
Overpass Black
Font size:
20px/16px/16px/16px/16px/16px
Line height:
1.1
Letter spacing:
-.2px/-.16px/-.16px/-.16px/-.16px/-.16px
The quick brown fox jumps over the lazy dog

Lead

Font / weight:
Overpass Black
Font size:
20px/16px/16px/16px/16px/16px
Line height:
26px/21px/21px/17px/17px/17px
Letter spacing:
-.2px/-.16px/-.16px/0/0/0

The quick brown fox jumps over the lazy dog

Subtitle 1

Font / weight:
Overpass Bold
Font size:
30px/24px/24px/15px/15px/15px
Line height:
36px/28px/28px/17px/17px/17px
Letter spacing:
0

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.

Subtitle 2

Font / weight:
Inter Medium
Font size:
24px/20px/20px/18px/18px/18px
Line height:
36px/28px/28px/27px/27px/27px
Letter spacing:
0

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.

Paragraph

Font / weight:
Inter Medium
Font size:
18px/14px/14px
Line height:
31px/25px/25px
Letter spacing:
0

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.

Paragraph Bold

Font / weight:
Inter ExtraBold

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.

Paragraph links

Font / weight:
Inter Medium
Text decoration
underline

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.

Unordered list

Font / weight:
Inter Medium
Font size:
18px/14px/14px
Line height:
31px/25px/25px
Letter spacing:
0
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aenean commodo ligula eget dolor.
  • Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  • Donec quam felis, ultricies nec, pellentesque.

Ordered list

Font / weight:
Inter Medium
Font size:
18px/14px/14px
Line height:
31px/25px/25px
Letter spacing:
0
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aenean commodo ligula eget dolor.
  3. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  4. Donec quam felis, ultricies nec, pellentesque.
  5. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  6. Aenean commodo ligula eget dolor.
  7. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  8. Donec quam felis, ultricies nec, pellentesque.
  9. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  10. Aenean commodo ligula eget dolor.
  11. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  12. Donec quam felis, ultricies nec, pellentesque.

Placeholder

Font / weight:
Inter Medium
Font size:
18px/14px/14px/15px/15px/15px
Line height:
31px/25px/25px/25px/25px/25px
Letter spacing:
0
The quick brown fox jumps over the lazy dog

Quote

Font / weight:
Overpass Bold
Font size:
30px/24px/24px/15px/15px/15px
Line height:
50px/40px/40px/25px/25px/25px
Letter spacing:
0

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.

Filter

Font / weight:
Inter Regular
Font size:
12px
Line height:
11px
Letter spacing:
0
FilterInterimInterim

System icons

Buttons

Primary button

Button text

Primary button (icon-left)

Button text

Secondary button

Secondary button (icon & IO)

Button text

social button

chips

Filter Interim Interim

Primary button

Primary button (icon-left)

Button text

Secondary button

Secondary button (icon & IO)

Button text

social button

chips

Filter Interim

Inputs

Vul een geldig e-mailadres in
Vul een geldig e-mailadres in

Note: Graag de volgende class op form-row zetten voor donkere input fields: form-row--dark-bg

Checkboxes

Active

Unactive

Radio buttons

Active

Unactive

Onze site gebruikt cookies

Om onze website gemakkelijker en persoonlijker te maker, gebruiken we cookies en vergelijkbare technieken. Je kunt altijd zelf kiezen welke soorten cookies je wilt toestaan. Lees hierover meer in onze cookieverklaring.