Style Guide

This guide offers comprehensive instructions on various design elements, ranging from color schemes and typography to button styles and text size.

By adhering to these guidelines, you can maintain consistency, enhance visual appeal, and ensure seamless navigation throughout your website.

Colours

Primary Colour

Zongeel 1000
Toga purpurea 1000

Secondary Colours

Heerlen geek en blauw

Heerlen geel 100
Heerlen blauw 100
Heerlen blauw 200
Heerlen blauw 300

Secondary Colours

Actiekleur

Paars 100
Rood 100
Paars 1000

Brand Colours

Zongeel 1000
Zongeel 500
Toga purpurea 1000
Toga purpurea 900
Toga purpurea 800
Toga purpurea 700
Toga purpurea 600
Toga purpurea 500
Toga purpurea 400
Toga purpurea 300
Toga purpurea 200
Toga purpurea 100

Basis Colours

White 1000
Paars 1000

Background Colours

Toga purpurea dark bg
Toga purpurea light bg

Typography

H1

H2

H3

H4

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. Nunc ut sem vitae risus tristique posuere.

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. Nunc ut sem vitae risus tristique posuere.

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. Nunc ut sem vitae risus tristique posuere.

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. Nunc ut sem vitae risus tristique posuere.

Rich Text

Rich text blocks (RTBs) are different from regular paragraph and text elements.
‍
RTBs allow you to format headings, paragraphs, quotes, images, videos, captions, and lists all within the one element.

RTBs are what will be used for the primary body of your blog posts.
‍

Heading 1

Heading 2

Heading 3

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Buttons

Ja, ik word vriend

Logo