Design System

Branding

Typography

We gebruiken 2 standaard lettertypes: Outfit en Verdana, waarbij Outfit het kenmerkende lettertype is van Connexie.

Typeface

Outfit geeft Connexie zijn karakteristieke uitstraling en bepaalt voor een groot gedeelte de visuele identiteit. Verdana is een vervangend font dat kan worden ingezet als secundair lettertype wanneer Outfit niet beschikbaar is.

Typescale

/ /
NameFontsize / Line-heightFont weight

Display

Heading

Heading

Heading

Heading

Body Large
Body Bold
Body
Body Light
Label

Colors

Connexie is te herkennen aan een vast en harmonieus kleurenpalet. Connexie (donker)blauw bepaalt, samen met Paars en Geel het gezicht van Connexie. De kleuren staan in het algemeen voor positiviteit, professionaliteit, vertrouwen en vernieuwing.

Primary colors

Dit zijn de primaire kleuren van Connexie

primary

RGB :
HEX :
SCSS: $primary

secondary

RGB :
HEX :
SCSS: $secondary

quartiary

RGB :
HEX :
SCSS: $quartiary

Secondary colors

Dit zijn de secondaire kleuren van Connexie

off-white

RGB :
HEX :
SCSS: $off-white

light-primary

RGB :
HEX :
SCSS: $light-primary

tertiary

RGB :
HEX :
SCSS: $tertiary

Buttons

 <?php getButton('primary', $buttonContent, '', false, false) ?>
 <?php  getButton('primary', $buttonContent, 'arrow_forward', false, false) ?>
 <?php  getButton('secondary', $buttonContent, 'arrow_forward', false, false) ?>
 <?php getButton('tertiary', $buttonContent, 'arrow_forward', false, false) ?>
 <?php getButton('quartiary', $buttonContent, 'arrow_forward', false, false) ?>
 <?php getButton('link', $buttonContent, 'arrow_forward', false, false) ?>
 <?php getButton('outline-primary', $buttonContent, 'arrow_forward', false, false) ?>
 <?php getButton('outline-secondary', $buttonContent, 'arrow_forward', false, false) ?>
 <?php getButton('outline-white', $buttonContent, 'arrow_forward', false, false) ?>

Layout

Het gridsysteem van Connexie bestaat uit een flexible grid van 12 colums met een gutter van 2 x 12px (op desktop) of 2 x 0.75rem

Grid

Het gridsysteem van Connexie bestaat uit een flexible grid van 12 colums met een gutter van 2 x 12px (op desktop) of 2 x 0.75rem

Container widths:

sm: 540px
md: 720px
lg: 960px
xl: 1100px
xxl: 1200px

Container fluid

Col 12
Col 6
Col 6
Col 4
Col 4
Col 4
Col 3
Col 3
Col 3
Col 3
Col 2
Col 2
Col 2
Col 2
Col 2
Col 2
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1
Col 1

Icons

Hier beschrijven we waarom we voor deze iconset van Google Material Icons Outlined hebben gekozen.

search
Zoeken
arrow_forward
Pijltje rechts
menu
Menu
close
Close
person
Account

Custom icons Icons

Hier beschrijven we waarom we voor custom icons hebben gekozen. Deze custom icons zitten in de images/icons map

Instagram
Linkedin
X(Twitter)
Whatsapp

0000