Colors

Base

Makelaar

Nieuwbouw

Other

Breakpoints

BreakpointResolutieActiefGridGutter
FHD (desktop large)1920x1080px1920px - ∞1440px33px
XXL (desktop regular)1440x900px1440px - 1919px1170px25px
XL (desktop small)1280x800px1280px - 1439px1170x25px
LG (tablet landscape)1024x768px1024px - 1279px940px20px
MD (tablet portrait)768x1024px768px - 1023px-30px (links/rechts)15px
SM (mobile landscape)568x375px568px - 767px-15px (links/rechts)15px
XS (mobile portrait)375x568px0px - 567px-15px (links/rechts)14px

Typography

Font family

Aa

Pangram Regular

Aa

Pangram Bold

Heading 1

Font / weight:
BruumFY
Font size:
85px/70px/70px/55px/40px/35px
Line height:
90px/75px/75px/60px/45px/37px
Letter spacing
0,2/0,15/0,15/0,1/0,1/0,05

Lorem Ipsum dolor sit

Lorem Ipsum dolor sit

Heading 2

Font / weight:
BruumFY
Font size:
65px/55px/55px/44px/35px/30px
Line height:
70px/60px/60px/47px/38px/33px
Letter spacing
0,15/0,1/0,1/0,1/0,05/0,01

Lorem Ipsum dolor sit

Lorem Ipsum dolor sit

Heading 3

Font / weight:
BruumFY
Font size:
50px/40px/40px/32px/30px/28px
Line height:
55px/45px/45px/36px/34px/32px
Letter spacing
0,1/0,05/0,05/0,02/0,01/0,01

Lorem Ipsum dolor sit

Lorem Ipsum dolor sit

Heading 4

Font / weight:
BruumFY
Font size:
40px/33px/33px/26px/23px/20px
Line height:
45px/36px/36px/29px/26px/24px
Letter spacing
0,1/0,07/0,07/0,05/0,01/0,01

Lorem Ipsum dolor sit

Lorem Ipsum dolor sit

Heading 5

Font / weight:
BruumFY
Font size:
40px/33px/33px/26px/23px/20px
Line height:
45px/36px/36px/29px/26px/24px
Letter spacing
0,1/0,07/0,07/0,05/0,01/0,01
Lorem Ipsum dolor sit
Lorem Ipsum dolor sit

Heading 6

Font / weight:
BruumFY
Font size:
40px/33px/33px/26px/23px/20px
Line height:
45px/36px/36px/29px/26px/24px
Letter spacing
0,1/0,07/0,07/0,05/0,01/0,01
Lorem Ipsum dolor sit
Lorem Ipsum dolor sit

Lead

Font / weight:
BruumFY
Font size:
40px/33px/33px/26px/23px/20px
Line height:
45px/36px/36px/29px/26px/24px
Letter spacing
0,1/0,07/0,07/0,05/0,01/0,01

Lorem Ipsum dolor sit

Paragraph

Font / weight:
BruumFY
Font size:
18px/16px/16px/14px/14px/14px
Line height:
30px/26px/26px/21px/21px/21px
Letter spacing
0,01/0,01/0,01/0,01/0,01/0,01

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

Paragraph Small

Font / weight:
BruumFY
Font size:
18px/16px/16px/14px/14px/14px
Line height:
30px/26px/26px/21px/21px/21px
Letter spacing
0,01/0,01/0,01/0,01/0,01/0,01

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

Unordered list

Font / weight:
BruumFY
Font size:
18px/16px/16px/14px/14px/14px
Line height:
30px/26px/26px/21px/21px/21px
Letter spacing
0,01/0,01/0,01/0,01/0,01/0,01
  • List item
  • List item
  • List item
  • List item

Ordered list

Font / weight:
BruumFY
Font size:
18px/16px/16px/14px/14px/14px
Line height:
30px/26px/26px/21px/21px/21px
Letter spacing
0,01/0,01/0,01/0,01/0,01/0,01
  1. List item
  2. List item
  3. List item
  4. List item

Buttons

Normal button (empty & icon)

Button

Button

Text link

Normal button (empty & icon)

Button

Button

Text link

Inputs

A distructive toast