Stijlgids

Color Design System

Here goes your text ... Select any part of your text to access the formatting toolbar.

var(--base-space)

Primary

LIGHT SHADES

at-primary

at-primary-l-1

at-primary-l-2

at-primary-l-3

at-primary-l-4

at-primary-l-5

at-primary-l-6

secondary

Light shades

at-secondary

at-secondary-l-1

at-secondary-l-2

at-secondary-l-3

at-secondary-l-4

at-secondary-l-5

at-secondary-l-6

base

Light shades

at-base

at-base-l-1

at-base-l-2

at-base-l-3

at-base-l-4

at-base-l-5

at-base-l-6

NEUTRAL

Light shades

at-neutral

at-neutral-l-1

at-neutral-l-2

at-neutral-l-3

at-neutral-l-4

at-neutral-l-5

at-neutral-l-6

Primary

Dark shades

at-primary

at-primary-d-1

at-primary-d-2

at-primary-d-3

at-primary-d-4

at-primary-l-5

at-primary-l-6

secondary

Dark shades

at-secondary

at-secondary-d-1

at-secondary-d-2

at-secondary-d-3

at-secondary-d-4

at-secondary-l-5

at-secondary-l-6

base

Dark shades

at-base

at-base-d-1

at-base-d-2

at-base-d-3

at-base-d-4

at-base-d-5

at-base-d-6

NEUTRAL

dark shades

at-neutral

at-neutral-d-1

at-neutral-d-2

at-neutral-d-3

at-neutral-d-4

at-neutral-d-5

at-neutral-d-6

Primary

transparency shades

at-primary

at-primary-t-1

at-primary-t-2

at-primary-t-3

at-primary-t-4

at-primary-t-5

at-primary-t-6

at-primary

at-primary-t-1

at-primary-t-2

at-primary-t-3

at-primary-t-4

at-primary-t-5

at-primary-t-6

Secondary

transparency shades

at-secondary

at-secondary-t-1

at-secondary-t-2

at-secondary-t-3

at-secondary-t-4

at-secondary-t-5

at-secondary-t-6

at-secondary

at-secondary-t-1

at-secondary-t-2

at-secondary-t-3

at-secondary-t-4

at-secondary-t-5

at-secondary-t-6

base

transparency shades

at-base

at-base-t-1

at-base-t-2

at-base-t-3

at-base-t-4

at-base-t-5

at-base-t-6

at-base

at-base-t-1

at-base-t-2

at-base-t-3

at-base-t-4

at-base-t-5

at-base-t-6

NEUTRAL

transparency shades

at-neutral

at-neutral-t-1

at-neutral-t-2

at-neutral-t-3

at-neutral-t-4

at-neutral-t-5

at-neutral-t-6

at-neutral

at-neutral-t-1

at-neutral-t-2

at-neutral-t-3

at-neutral-t-4

at-neutral-t-5

at-neutral-t-6

Black

Transparency SHADES

at-black

at-black-t-1

at-black-t-2

at-black-t-3

at-black-t-4

at-black-t-5

at-black-t-6

White

TRANSPARENCY SHADES

at-white

at-white-t-1

at-white-t-2

at-white-t-3

at-white-t-4

at-white-t-5

at-white-t-6

GREY

LIGHT shades

at-grey

at-grey-l-1

at-grey-l-2

at-grey-l-3

at-grey-l-4

at-grey-l-5

at-grey-l-6

Grey Dark

Dark shades

at-grey

at-grey-d-1

at-grey-d-2

at-grey-d-3

at-grey-d-4

at-grey-d-5

at-grey-d-6

primary

De primaire is meestal de kleuren die een merk als identiteit hanteert. Het gebruik van merkkleuren als primaire kleuren versterkt de merkbekendheid.

secondary

Secundaire kleuren zijn de aanvullende kleuren die een merkidentiteit versterken. Ze worden gebruikt om accenten te leggen, harmonie te creëren.

base

Denk aan achtergrondkleuren, zachte vlakken, lichte accenten. Staat meestal dichter bij neutral, maar is specifieker aan de brand look gekoppeld.

neutral

Neutral kleuren zijn functionele neutrale tinten die je gebruikt voor tekst, borders en UI-structuur omdat ze rust, leesbaarheid en consistentie geven.
neutral = HSL(hue, saturation * 0.1–0.25, lightness * 0.20–0.35)

Buttons

BUTTONS ON LIGHT BACKGROUND

ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineBaseBase Outline

BUTTONS ON DARK BACKGROUND

ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineWhiteWhite Outline
Button scale
Button XS
btn--primary / btn--xs
Button S
btn--primary / btn--s
Button M
btn--primary / btn--m
Button L
btn--primary / btn--l
Button XL
btn--primary / btn--xl
Button XXL
btn--primary / btn--xxl

Typography

Typografie vormt de visuele stem van het merk. Ze bepaalt hoe we communiceren, versterkt de uitstraling en zorgt voor consistentie tussen alle digitale en offline uitingen. In dit document definëren we het lettertypegebruik, hiërarchie, schaal en spacing zodat ontwerpers en developers exact weten hoe typografie wordt toegepast.

Primary Typeface

Secondary Typeface

Secondary Typeface

Typography

Below is an overview of responsive typography sizes and weights for this site. These are computed from a base size and a mathematical scale.
Headings
H1 (--xxl)

Heading 1 Regular

Heading 1 Medium

Heading 1 Bold

H2 (--xl)

Heading 2 Regular

Heading 2 Medium

Heading 2 Bold

H3 (--l)

Heading 3 Regular

Heading 3 Medium

Heading 3 Bold

H4 (--m)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5 (--s)

Heading 5 Regular
Heading 5 Medium
Heading 5 Bold
H6 (--xs)

Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Body Text

BODY TEXT (--l)
Text l Regular
Text l Medium
Text l Bold
BODY TEXT (--m)
Text m Regular
Text m Medium
Text m Bold
SMALL TEXT (--s)
Text s Regular
Text s Medium
Text s Bold
XTRA SMALL TEXT (--xs)
Text xs Regular
Text xs Medium
Text xs Bold
heading + body text in action

Heading 1 (H1)

This is large text. Dit is de tekst die bezoekers lezen om informatie te krijgen over wat er op de pagina of website wordt aangeboden. In tegenstelling tot koppen, menu's of voetnoten, die bedoeld zijn om te navigeren of beknopte info te geven, biedt de body text gedetailleerde informatie en is meestal het langste en meest inhoudelijke deel van de pagina.

Heading 2 (H2)

Dit is de tekst die bezoekers lezen om informatie te krijgen over wat er op de pagina of website wordt aangeboden. In tegenstelling tot koppen, menu's of voetnoten, die bedoeld zijn om te navigeren of beknopte info te geven, biedt de body text gedetailleerde informatie en is meestal het langste en meest inhoudelijke deel van de pagina.

Heading 3 (H3)

Dit is de tekst die bezoekers lezen om informatie te krijgen over wat er op de pagina of website wordt aangeboden. In tegenstelling tot koppen, menu's of voetnoten, die bedoeld zijn om te navigeren of beknopte info te geven, biedt de body text gedetailleerde informatie en is meestal het langste en meest inhoudelijke deel van de pagina.

Heading 4 (H4)

Dit is de tekst die bezoekers lezen om informatie te krijgen over wat er op de pagina of website wordt aangeboden. In tegenstelling tot koppen, menu's of voetnoten, die bedoeld zijn om te navigeren of beknopte info te geven, biedt de body text gedetailleerde informatie en is meestal het langste en meest inhoudelijke deel van de pagina.
Heading 5 (H5)
Dit is de tekst die bezoekers lezen om informatie te krijgen over wat er op de pagina of website wordt aangeboden. In tegenstelling tot koppen, menu's of voetnoten, die bedoeld zijn om te navigeren of beknopte info te geven, biedt de body text gedetailleerde informatie en is meestal het langste en meest inhoudelijke deel van de pagina.
Heading 6 (H6)
Dit is de tekst die bezoekers lezen om informatie te krijgen over wat er op de pagina of website wordt aangeboden. In tegenstelling tot koppen, menu's of voetnoten, die bedoeld zijn om te navigeren of beknopte info te geven, biedt de body text gedetailleerde informatie en is meestal het langste en meest inhoudelijke deel van de pagina.

Brand tokens and settings

Post TitlePost Date
--secondaryvalue

Typography

Below is an overview of responsive typography sizes and weights for this site. These are computed from a base size and a mathematical scale.
Headings
H1 (--xxl)

Heading 1 Regular

Heading 1 Medium

Heading 1 Bold

H2 (--xl)

Heading 2 Regular

Heading 2 Medium

Heading 2 Bold

H3 (--l)

Heading 3 Regular

Heading 3 Medium

Heading 3 Bold

H4 (--m)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5 (--s)

Heading 5 Regular
Heading 5 Medium
Heading 5 Bold
H6 (--xs)

Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Body Text

BODY TEXT (--l)
Text l Regular
Text l Medium
Text l Bold
BODY TEXT (--m)
Text m Regular
Text m Medium
Text m Bold
SMALL TEXT (--s)
Text s Regular
Text s Medium
Text s Bold
XTRA SMALL TEXT (--xs)
Text xs Regular
Text xs Medium
Text xs Bold
heading + body text in action

Heading 1 (H1)

This is large text. Dit is de tekst die bezoekers lezen om informatie te krijgen over wat er op de pagina of website wordt aangeboden. In tegenstelling tot koppen, menu's of voetnoten, die bedoeld zijn om te navigeren of beknopte info te geven, biedt de body text gedetailleerde informatie en is meestal het langste en meest inhoudelijke deel van de pagina.

Heading 2 (H2)

Dit is de tekst die bezoekers lezen om informatie te krijgen over wat er op de pagina of website wordt aangeboden. In tegenstelling tot koppen, menu's of voetnoten, die bedoeld zijn om te navigeren of beknopte info te geven, biedt de body text gedetailleerde informatie en is meestal het langste en meest inhoudelijke deel van de pagina.

Heading 3 (H3)

Dit is de tekst die bezoekers lezen om informatie te krijgen over wat er op de pagina of website wordt aangeboden. In tegenstelling tot koppen, menu's of voetnoten, die bedoeld zijn om te navigeren of beknopte info te geven, biedt de body text gedetailleerde informatie en is meestal het langste en meest inhoudelijke deel van de pagina.

Heading 4 (H4)

Dit is de tekst die bezoekers lezen om informatie te krijgen over wat er op de pagina of website wordt aangeboden. In tegenstelling tot koppen, menu's of voetnoten, die bedoeld zijn om te navigeren of beknopte info te geven, biedt de body text gedetailleerde informatie en is meestal het langste en meest inhoudelijke deel van de pagina.
Heading 5 (H5)
Dit is de tekst die bezoekers lezen om informatie te krijgen over wat er op de pagina of website wordt aangeboden. In tegenstelling tot koppen, menu's of voetnoten, die bedoeld zijn om te navigeren of beknopte info te geven, biedt de body text gedetailleerde informatie en is meestal het langste en meest inhoudelijke deel van de pagina.
Heading 6 (H6)
Dit is de tekst die bezoekers lezen om informatie te krijgen over wat er op de pagina of website wordt aangeboden. In tegenstelling tot koppen, menu's of voetnoten, die bedoeld zijn om te navigeren of beknopte info te geven, biedt de body text gedetailleerde informatie en is meestal het langste en meest inhoudelijke deel van de pagina.

Widths

There are six values you can use to control element width. They're automatically responsive.
--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-xxl

Section Padding

Padding for sections is responsive and based on a multiplier of the core spacing system.
None
XS
S
M
L
XL
XXL

Spacing

There are six levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

Element Padding

Here are the six levels of spacing visualized as padding.

Card: XS padding

This is a card with XS padding. Its content is pretty close to the edges.

Card: S padding

This is a card with S padding. It has a little bit tighter padding.

Card: M padding

This is a card with M padding. It has standard breathing room.

Card: L padding

This is a card with L padding. It has extra breathing room.

Card: XL padding

This is a card with XL padding. It has significant breathing room.

Card: XXL padding

This is a card with XXL padding. Avoid using this in a confined space.

Shadows

There are three multi-layer box shadows to choose from.
Box shadow M
Box shadow L
Box shadow XL

Border radius

There are six border radius values calculated from a base size and a mathematical scale.
Rounded XS
Rounded S
Rounded M
Rounded L
Rounded XL
Rounded XXL

e-mail: