Visuele reference voor het MV Blueprint design system. Deze pagina toont alle kleuren, typografie, componenten, layouts en shortcodes die de klantsite tot z’n beschikking heeft.

Kleuren

Tokens uit theme.json. Pas via Site Editor → Styles → Colors aan, of via Style Dictionary tokens pipeline (make tokens).

Primary--wp--preset--color--primary

Secondary--wp--preset--color--secondary

Accent--wp--preset--color--accent

Background--wp--preset--color--background

Surface--wp--preset--color--surface

Border--wp--preset--color--border

Logo’s

Geüpload via Site Instellingen → Merk & Media. Het donkere logo wordt automatisch gebruikt op donkere achtergronden (footer, hero overlays).

Logo — primair, voor lichte achtergronden
[afbeelding type="logo"]

Logo (wit / donkere achtergrond) — voor footer + hero overlays
[afbeelding type="logo_donker"]

Typografie

Heading 1 — De grote kop

Heading 2 — Sectie kop

Heading 3 — Subsectie

Heading 4 — Item

Heading 5 — Sub-item / label

Heading 6 — Klein label / metadata

Body — Standaard paragraph tekst. Bold, italic, link, inline code. De quick brown fox jumps over the lazy dog.

Small — Voor footnotes, captions en bijzaken. Lorem ipsum dolor sit amet.

“Een blockquote met aangehaalde tekst — uitspraak van een klant of waarde-statement.”
— Wouter Polman, Monkey Vision

Buttons

Primary button

Accent button

Outline button

Iconen — Phosphor

Inline SVG via [icon name="..."]. Style komt uit Site Instellingen → Merk & Media → Icon stijl (regular / bold / fill / etc) — alle iconen op de site gebruiken automatisch dezelfde stijl.

UI

check arrow-right arrow-up arrow-down chevron-right chevron-down magnifying-glass shopping-cart user heart star

Social

instagram facebook linkedin youtube tiktok

Social profiles

Block [social] — toont alleen ingevulde URLs in volgorde Instagram → Facebook → LinkedIn → YouTube → TikTok. Container variant uit Site Instellingen → Merk & Media.

Shortcodes (Site Instellingen)

Alle 13 shortcodes uit MV Core lezen direct uit Site Instellingen. Lege velden renderen als lege string (geen errors).

Shortcode	Output
`[bedrijfsnaam]`	MV Test Pro22
`[email]`	hallo@monkeyvision.nl
`[telefoon]`	+31 24 123 4567
`[straat]`	Kerkenbos 1059
`[postcode]`	6546 BE
`[plaats]`	Nijmegen
`[adres]`	MV Test Pro22 Kerkenbos 1059 6546 BE Nijmegen
`[openingstijden]`	Maandag 09:00-17:00 Dinsdag 09:00-17:00 Woensdag 09:00-17:00 Donderdag 09:00-17:00 Vrijdag 09:00-17:00 Zaterdag gesloten Zondag gesloten
`[kvk]`	85729810
`[btw]`	NL863729471B01
`[jaar]`	2026
`[icon name="ui/check"]`
`[afbeelding type="logo"]`

Flex Layouts

10 herbruikbare layouts via Meta Box Paginasecties. Voor live previews zie de v030-test page. Layouts:

hero — title + subtitle + CTA (3 varianten: centered, split-left, split-right)
text_image — tekst naast afbeelding (links | rechts)
columns — 2 / 3 / 4 columns met heading + body
cta_banner — full-width call-to-action met achtergrondkleur
testimonials — 1-3 quote cards
usp_row — 3-4 USP cards met icon + heading + body
form_section — Gravity Forms wrapper met titel
accordion — collapsible Q&A sectie
video_embed — YouTube/Vimeo responsive iframe
image_gallery — masonry / grid afbeelding gallery

Block Patterns

Inserterbare patterns (Editor → Inserter → Patterns → MV Blueprint). Pattern previews zichtbaar in editor met viewportWidth 1440.

Hero — basic
CTA Banner
Testimonials 3-col
USP Row