Typography
Use font family – Inter (Google Fonts): Download & use
| Name | Font-size | Font-weight | Line-Height | Letter-spacing |
Heading 1 | 46px | Bold | 56px | 0px |
Heading 2 | 38px | Bold | 56px | 0px |
Heading 3 | 30px | Bold | 36px | 0px |
Heading 4 | 24px | Bold | 28px | 0px |
Heading 5 | 20px | Bold | 24px | 0px |
Heading 6 | 16px | Bold | 20px | 0px |
Body | 14px | Regular | 24px | 0px |
Button | 14px | Semi-bold | 24px | 0px |
Grid system
Systeem voor opmaak van content, uitlijnen van elementen en blokken. Om consistent te blijven doorheen het systeem.
Spacing & margins
Gebruik van een 4pt schaal voor marges en witruimte. Gebruik van blokken met 10px border-radius.
Colors
Voorgesteld in hexadecimaal (RRGGBB).
Main
#4681FF
#EDF3FF
Accept
#13C08D
#E7F9F4
Error
#D60C16
#FFDEE5
Warning
#FFB30B
#FFEDCC
Other/unavailable
#6F6F6E
#F5F5F5
UI Components
Use icons – Google Icons: Download & use
Buttons
Accept/confirm
Error/fail
Warning
Other
Notifications
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.