Essevo
Design handover · Phase 2

Six new pages, one style guide

Everything needed to build the new Essevo pages in WordPress. Each page below is a full visual design with build notes attached at the bottom of that page — components to reuse, components to build, WordPress specifics, and what is still missing from the client.

Stack
WordPress · Blocksy · Elementor
Typeface
DM Sans, self-hosted
Style guide
v1.0 — already implemented
Language
Designs in Dutch, notes in English

Start here

The style guide

Every design on this site is built from these tokens. If anything in a page design looks ambiguous, the style guide is the source of truth.

Essevo Style Guide v1.0

Colour palette with contrast ratios, the full type scale for mobile and desktop, the 4px spacing system, all components with their states, imagery direction, logo usage, tone of voice, and the Elementor implementation checklist.

essevo-stijlgids.growin.digital/stijlgids.html
Open the style guide

Pages to build

Six designs, each with its own build notes

Open a page, scroll past the mockup, and the build notes are at the bottom in English. They tell you exactly what is reused, what is new, and what is still open.

Culturele due diligence

/diensten/culturele-due-diligence  ·  regular Page
Open design

A service page on cultural due diligence in mergers and acquisitions. Long-read structure: hero, intro, a three-column stat band, two text blocks with a pull quote, four benefit cards, and the standard closing CTA. Sits as a child item under Diensten.

New here
Stat bandPull quote Both are reusable elsewhere; build them once.
Watch out
The figures in the stat band need a source line before this goes live — the client is aware.

Cases — overview

/cases  ·  regular Page with a query loop
Open design

The casework overview. A page header, an introduction, a numbered “common thread” list, then a grid of case tiles and the closing CTA. The tile grid is not hand-built: it queries the Casus custom post type so a new case appears automatically, newest first.

New here
Case tileThread list The tile becomes the loop item template.
Watch out
With five cases the last tile spans both columns. Handle that in CSS (:last-child:nth-child(odd)) so it still works at six.

Case detail

/cases/[slug]  ·  custom post type Casus
Open design

The single template for a case, shown with the first case as example. A breadcrumb, title, a facts card that overhangs the hero, then the short web version of the story. Below it an expander opens the full write-up inline — built with a native <details> element, no JavaScript.

New here
Facts cardExpanderReading column
Fields
Nine custom fields, listed in the build notes on that page. Empty fields hide their whole element — no placeholders.
Watch out
Five cases to enter, all with the same template. Build it once, properly.

TMA partnership

/tma  ·  regular Page
Open design

A long-read on the exclusive partnership with TMA: what the method is, why it holds up scientifically, what the partnership means, and the three certified roles Essevo can deploy. Uses the heading-left / text-right split four times, two full-width pull quotes, and three role cards with line icons.

New here
Logo badgeRole cards The pull quote is the same one as on the CDD page, at a larger size.
Also on this page
A ±70-word short variant, below the mockup. Build it as a saved template — homepage and footer should pull the same source.
Watch out
TMA logo use has to be cleared with TMA first.

Clients & partners

/klanten  ·  regular Page
Open design

Two logo walls in equal white cells: ten clients, then three partners under their own heading. Static grid, no carousel, no grayscale filter. Alphabetical order.

New here
Logo cell Fixed 3:2 cell with a hard 46px height cap on the logo.
Assets
All thirteen logo files are supplied separately, with file names matching the design. A README lists which four still need better source files.

Contact

/contact  ·  regular Page
Open design

Details on the left, form on the right. Eight form fields including a subject dropdown and a required privacy consent. No map and no embedded third-party widgets, so the page stays free of external requests.

New here
Details columnForm card
Watch out
Use a honeypot for spam protection, not reCAPTCHA — reCAPTCHA would drag Google scripts and a consent layer onto the page.

Applies to all pages

Ground rules

Build order

  • Confirm the style guide tokens are all registered in Elementor's global settings before starting.
  • Build the Casus post type and its single template first — the Cases overview depends on it.
  • Save each new component as a reusable template the first time you build it. Several appear on more than one page.

Non-negotiables

  • No external requests. Fonts self-hosted, no Google Maps embed, no reCAPTCHA, no third-party widgets without a consent layer.
  • Keyboard focus rings stay visible. 3px blue outline, 2px offset, on every button and link.
  • Contrast holds at AA. Small coral labels use #B14E2A, not the lighter coral.
  • 4px spacing grid. No loose values.

Content status

  • All Dutch copy is final and taken verbatim from the client's documents — do not rewrite or reflow it.
  • Headings on the Contact and Clients pages are proposals, marked as such in those build notes.
  • Contact details in the closing blocks are still a dashed placeholder on every page.

What these designs are not

  • Not pixel-perfect specs for every breakpoint. Two are shown: desktop and ≤1000px. Use the style guide for the rest.
  • Not final photography. Where images appear, they are placeholders with the intended aspect ratio labelled.
  • Not a replacement for the build notes — those carry the detail the mockup cannot show.
Essevo — design handover, phase 2 · prepared by Growindigital essevo-stijlgids.growin.digital