01 — Kleuren

Kleurenpalet

Het kleurenpalet van VRander is opgebouwd rond een krachtig paars als primaire merkkleur, aangevuld met blauwtinten voor acties en subtiele grijstinten voor structuur.

Merk & CTA

CTA Paars

$color-cta

#553b8f

CTA Hover

$color-cta-hover

rgba(#553b8f, 0.8)

CTA Donker

$color-cta-dark

darken(#553b8f, 20%)

Primary / Cream

$color-primary

#fef9f5

Accent & Secundair

Blauw

$color-cta-2

#5396d1

Donkerblauw

$color-cta-3

#5869b0

Lichtblauw

$color-cta-4

#b4e1fa

Neutraal & Tekst

Tekst

$text-color

#000

Zwart

$color-black

#151515

Donkergrijs

$color-dark-grey

#666

Grijs

$color-grey

#a6a6a6

Wit

$color-white

#fff

Borders & Achtergronden

Achtergrond Grijs

$background-color-grey

#f5f5f5

Border

$border-color

#e2e7ed

Divider

$divider-color

#dee7eb

Button Border

$button-border

#d9ebf5

02 — Typografie

Lettertype & hiërarchie

VRander gebruikt Acumin Variable Concept als primair lettertype. De typografische schaal is mobiel-eerst met grotere formaten op desktop.

Acumin Variable Concept

Primair lettertype voor alle tekst op de website.
Formaat: WOFF2 · Fallback: sans-serif
Font-display: swap

Regulier

400 — Regular

Semibold

600 — Semibold

Bold

700 — Bold

<h1> 4.125rem / 70px line-height bold

Virtueel oefenen, echt veranderen

<h2> 2.75rem / 48px line-height bold

Ontdek de kracht van VR-therapie

<h3> 2.125rem bold

Hoe werkt het precies?

<p> 1rem / 30px line-height regular

VRander biedt innovatieve VR-behandelingen voor uiteenlopende klachten. Door middel van virtual reality oefenen cliënten in een veilige, virtuele omgeving met situaties die ze in het dagelijks leven als moeilijk ervaren.

Links $color-cta / hover 80%

Dit is een tekstlink in een alinea

03 — Buttons

Knoppen & acties

Buttons zijn uppercase met letter-spacing van 4px. De standaard variant gebruikt blauw, de CTA-variant paars. Alle buttons hebben een overgang van 0.3s.

.button Standaard

.button--cta CTA Paars

.button--white Wit

.button--transparent Transparant

.button--small Lees meer

.wp-block-button__link Gutenberg Button

Op donkere achtergrond:

CTA Paars Transparant

04 — Spacing

Witruimte & afstanden

Het spacing-systeem volgt een consistente schaal. Hieronder staan de meest gebruikte waarden in het thema.

4px

Fijne margins, input spacing

8px

Button padding, kleine gaps

15px

Container padding (mobiel)

16px

Standaard margin, divider, lijsten

20px

Paragraaf margin, footer headings

32px

Heading margin-top

40px

Header padding (medium)

42px

Sectie padding klein

66px

Sectie padding groot

80px

Header padding (large)

86px

Content padding-top

92px

Text-media content padding

05 — Componenten

UI-elementen

Voorbeelden van veelgebruikte componenten op de VRander website, inclusief hun toepassing en visuele stijl.

Over VRander
Behandelingen
Contact

AANMELDEN

Header

.header — Fixed navigatie met logo, menu en CTA-buttons

Hero Sectie

Achtergrondafbeelding met overlay en centered content

Plan een sessie

Hero

.hero — Grote headersecties met achtergrondafbeelding/video en 40% zwarte overlay

150px breed, 3px hoog, rotate(-1deg)

Divider

.divider — Visuele scheiding in $color-cta

VR-sessie op maat
Professionele begeleiding
Bewezen effectief
Direct resultaat

Content Lijst

.content ul — Paarse bullets van 6px met border-radius: 50%

Naam E-mail

Formulier

.form — Gravity Forms styling met $color-cta submit button, font-weight: 600

.bg--white

.bg--grey

.bg--black

.bg--cta

.bg--cta-2

Achtergrond Utilities

.bg--* — Utility classes voor sectie-achtergronden

06 — Breakpoints

Responsive design

Mobile-first benadering met SCSS mixins. De website schaalt door 4 hoofdbreakpoints met aanvullende "only" varianten.

Mixin	Breakpoint	Doel
`@include small`	min-width: 640px	Smartphones landscape
`@include small-only`	max-width: 813px	Alleen kleine schermen
`@include medium`	min-width: 813px	Tablets portrait
`@include medium-only`	813px — 1024px	Alleen tablets
`@include large`	min-width: 1280px	Desktops
`@include large-only`	1024px — 1280px	Alleen kleine desktops

07 — Schaduwen & effecten

Diepte & beweging

Schaduwen worden spaarzaam ingezet voor navigatie en interactieve elementen. Transities zijn standaard 0.3s.

Header

0 0 10px 0 $color-black

Social buttons

0 0 4px 0 $color-black

Sticky menu

0 0 15px 0 $color-black

Overige effecten

Effect	Waarde	Toepassing
Transitie	`0.3s`	Alle interactieve elementen
Hero overlay	`rgba(0,0,0,0.4)`	40% zwarte overlay op hero-secties
Text shadow	`#222 0px 0px 10px`	Hero titels en subtitels
Divider rotatie	`rotate(-1deg)`	Decoratieve scheidslijnen

Huisstijl