✂ ONTWERPNOTITIES — HET LANDGOED · FASE 2

Luxe is hier een kwestie van tempo.

Dit document beschrijft het systeem achter het concept, zodat elke volgende pagina dezelfde taal spreekt. Kern: fotografie draagt, de interface wijkt; goud is een lijn, nooit een vlak; en alles beweegt traag genoeg om duur te voelen.

Kleur

Eén canvas, twee verhogingen, één accent. Alle kleuren leven als tokens in styles.css — nergens hardcoded rgba's, het structurele probleem van de huidige site.

Forest

#0F1A14

Forest-2

#121F18

Bone

#EDE5D1

Brass

#BC9B60

Paper

#F3EDDF

Paper bestaat alleen voor secties die het nodig hebben (plattegronden, documenten). Messing komt nooit groter voor dan een hairline, een letter of een knopcontour — zodra goud een vlak vult, is het De Beweging en niet Het Landgoed.

Typografie

Ruimte om dichtbij te zijnCormorant Garamond 300 · display · clamp(46–104px) · lh 1.02

De collectieCormorant Garamond 300 · h2 · clamp(32–58px)

Een Silva is geen bijgebouw. Het is een huis dat generaties weer naast elkaar laat wonen.Montserrat 300 · body · 14–16.5px · lh 1.65

Luxury woodprinted homesMontserrat 500 · label · 10.5px · ls .4em · caps

Cursief is de accentstem: één woord per kop, altijd het emotionele woord (dichtbij, stilte, bewoond). Anton verdwijnt volledig uit dit register; de huidige site laadt al een ongebruikte serif — die belofte lossen we hier in. Voor productie: fonts self-hosten als gesubsette woff2 (de huidige TTF's zijn 876 KB).

Motion

Eén easing: cubic-bezier(.22,.8,.28,1) voor alles — reveals, knoppen, drawer.
Reveals: 1.1s, 26px omhoog, threshold 14%, trapsgewijs met 60–80ms verschil. Eén keer; nooit opnieuw bij terugscrollen.
Ken Burns: 18s van scale 1.08 naar 1 op grote fotografie. De site voelt als een steadicam-shot.
Knoppen: messing vult van links in 0.5s; tekst kleurt naar donker. Geen translateY-lifts, geen schaduwvergroting — dat is de oude taal.
prefers-reduced-motion: alles staat dan direct, zonder lege schermen.

Componenten

Header: transparant over de hero, krijgt blur + hairline na 24px scroll. Geen kortingspil, geen floating CTA's, geen offer-banner.
Mobiel menu: volledig scherm, serif-links van 34–52px, trapsgewijze reveal. Dit lost het echte gat op: de huidige site heeft onder de 1080px geen navigatie.
Collectiekaarten: beeld, serif-naam, gebruikslabel, stille prijs. Hover: alleen beeldschaal en een messing lijn die verschijnt.
Formulieren: velden als hairlines, focus in messing, microcopy in de merkstem ("do right geldt ook hier"). Bevestiging in serif.
FAQ: native details/summary met serif-vragen en een draaiend plusje — geen JS nodig.

Stem & conversie

"Reserveer een privébezoek" in plaats van "vraag een offerte". Prijzen blijven transparant (do) maar nooit een kop (don't); de €17.000-introductiekorting verhuist van de hero naar het gesprek. Doelgroep-vocabulaire per pagina: zorg en waardigheid bij Embrace, autonomie bij Freedom, rendement pas bij Haven/Pulse.

Implementatie

Fase 1 — FundamentNieuwe tokenlaag en fonts (woff2, gesubset) in de bestaande codebase; oude kleurvariabelen eroverheen mappen. Eén dag werk, nul zichtbare risico's.
Fase 2 — ChromeHeader, mobiel menu (het bestaat nu niet), footer en knoppen omzetten naar dit systeem. Direct site-breed voelbaar.
Fase 3 — HomepageHero zonder kortingspil, statement, collectie, materiaalband, experience-CTA. De reveal/Ken Burns-laag als kleine vanilla-module naast de bestaande app.js.
Fase 4 — Subpagina'sModelpagina's op het Embrace-stramien; bezoek/contact vervangt het losse gidsformulier; daarna i18n-teksten (nl/en/es/de) bijwerken.

De huidige stack (statisch HTML/CSS/JS, GitLab Pages) kan dit allemaal dragen — er is geen framework nodig, wel discipline in de tokenlaag. Let op: de deploy-lijst in .gitlab-ci.yml mist nu al mappen en moet mee.