Naar de inhoud
UNCODED
EN – English

GRØNN Studio

Een tweetalige site voor een tuinontwerpstudio die de persoon en het echte werk verkoopt, en meegaat met het licht van de dag van de bezoeker.

Live werk voor GRØNN Studio, de ecologische tuin- en landschapspraktijk in Stein (NL) van de oprichter van UNCODED.

Bezoek gronn.studio (opent in een nieuw tabblad)
Sector
Ecologisch tuinontwerp · Studiosite
Jaar
2026
Diensten
Webdesign, Development, Merktoepassing, Toegankelijkheid
Stack
Next.js, React, Tailwind CSS, TypeScript, Vercel, Playwright

(01)Het idee

Een tuinontwerp koop je op vertrouwen: wie loopt er straks door je tuin, en wat heeft die al echt gemaakt? GRØNN had een site nodig die in één scherm zegt voor wie hij is, waar hij om bekendstaat en waarom hij anders is, zonder iets dat niet echt is. Geen stocktuinen die doen alsof ze projecten zijn, geen verzonnen cijfers.

Eén scherm moet drie vragen beantwoorden: voor wie is dit, waar staat het om bekend, en waarom is het anders? Daarom opent de homepage met de persoon, Nick, en met een foto van echt werk, niet met een stocktuin.

Alles op de site moest waar en controleerbaar zijn. Twee echte projecten in plaats van een portfolio vol placeholders, sfeerbeelden die zeggen dat het sfeerbeelden zijn, en prijzen waar een vaste prijs kan.

Schermen

GRØNN-homepage in het lichte thema: de kop Room to grow, Nicks portret en een foto van de vijverrenovatie.
Home, Golden Hour (licht). Eerst de persoon en het echte werk.
Dezelfde GRØNN-homepage in het donkere thema, met de oranje P uit het logo.
Home, Blue Hour (donker), dat na 19:00 de klok van de bezoeker volgt.
De projectenpagina van GRØNN: de vijverrenovatie met haar fases en kerncijfers.
Projecten: alleen echt werk, met de fase waarin het zit.
GRØNN-homepage op een telefoon met de dock van vijf onderdelen onderaan.
Telefoon: de dock met vijf plekken, elk met een label.
GRØNN-dienstenpagina op een telefoon, met Diensten opgelicht in de dock.
De actieve plek licht op in bosgroen.
GRØNN op een telefoon tijdens het lezen: de dock is ingeklapt tot Home, Zoeken, WhatsApp, Delen en Boven.
Tijdens het lezen klapt de dock in tot vijf snelle acties.

(02)Ontwerpkeuzes

Kleur

  • Aarde-oranje#DB6923De enige actiekleur
  • Gebroken wit#EFEEEALichte achtergrond
  • Antraciet#202020Tekst, donkere achtergrond
  • Bosgroen#23483ADiepe secties, actieve staat
  • Mosgroen#607A59Tweede groen
  • Salie#B8C5A8Zacht groen
  • Donker oranje#A14312Oranje als tekst op licht

Typografie

  • Syne SemiBoldKoppen. Zelf gehost, teruggebracht tot de Latijnse tekenset.
  • MontserratLopende tekst en interface, met een echte gewichtsas van 400 tot 600.
  • Geist MonoVeldnotities en labels, als aantekeningen op een maattekening.

Kleur

Rechtstreeks uit de GRØNN Brand Guide 2026: 60 % licht, 30 % donker, 10 % accent. Oranje als vlak draagt antraciet tekst (4,70:1), nooit wit. Als tekst op de lichte achtergrond wordt het donkerder, #A14312, want het merkoranje op gebroken wit haalt maar 2,99:1.

Typografie

Syne geeft de koppen karakter, Montserrat blijft uit de weg, en Geist Mono markeert alles wat technisch is. De maten zijn vloeiend, met clamp() van een telefoon van 390 px tot een desktop van 1280 px. Tekst mag groeien; de navigatie staat vast in pixels, zodat ze nooit breekt.

Beweging

Klein en precies wint van groot en decoratief. Onthullingen en een leesvoortgangslijn draaien op CSS scroll timelines boven gewoon scrollen, zonder smooth-scroll-bibliotheek. Elke animatie heeft een rustige variant voor wie minder beweging wil.

Layout

Een grid van 1280 px met marges van 24 en 64 px. Alles is rond: pilknoppen, en hoeken van 16 px voor kaarten en foto's. Pagina's worden opgebouwd uit één component per element, dus een nieuw onderdeel wordt eerst een element.

(03)De aanpak

  1. 01

    Twee paletten, vernoemd naar het licht, Golden Hour en Blue Hour, die de klok van de bezoeker volgen. Een script draait vóór de eerste weergave, zodat een terugkerende bezoeker nooit de verkeerde achtergrond ziet flitsen.

  2. 02

    Op telefoons één dock onderaan die tijdens het scrollen inklapt tot een compacte leesbalk. In pixels gemaakt, zodat hij zijn vorm houdt bij 125 % tekstgrootte, en getest van 320 tot 430 px breed.

  3. 03

    Alleen echt werk: een vijverrenovatie met de eigen foto's van de klant, ontdaan van locatiegegevens, en een terras in Geulle. Sfeerbeelden dragen een zichtbaar label en staan nooit naast een project.

  4. 04

    Contrast wordt gemeten, niet geschat: een script toetst elk kleurpaar uit de merkgids aan WCAG AA, en een test fotografeert het glas van de navigatie boven de zwaarste foto en eist 3:1.

(04)De stack

Next.js 16
App Router met serverpagina's voor metadata en clientcomponenten alleen waar iets beweegt. Dezelfde app draait een klantportaal en tools voor de eigenaar.
React 19
Het componentmodel achter de elementencatalogus.
Tailwind CSS 4
Elke kleur is een semantisch token in één stylesheet, dus twee thema's zijn twee sets variabelen, geen twee sets componenten.
TypeScript
Content is getypte data (projecten, diensten, bedrijfsgegevens) in plaats van een CMS. De bedrijfsgegevens staan in één bestand dat footer, juridische pagina's en gestructureerde data allemaal lezen.
Vercel
Een push naar main is een productiedeploy; branches krijgen preview-URL's.
Supabase + Auth.js
Achter het klantportaal en de editor van de eigenaar, nooit op de publieke pagina's.
Playwright + axe
End-to-end tests op telefoons van 320 tot 430 px, toegankelijkheidscontroles, en een contrasttest die een screenshot van de dock boven de zwaarste foto uitleest en 3:1 eist.

(05)In de details

  1. 01

    De uren volgen jouw klok

    Golden Hour vanaf 07:00, Blue Hour vanaf 19:00, op de klok van de bezoeker. Eén knop met label wisselt tussen Auto, Licht en Donker. Een script draait vóór de eerste weergave, zodat terugkerende bezoekers nooit de verkeerde kleur zien flitsen.

  2. 02

    Een dock die inklapt als je leest

    Op telefoons vijf plekken met een label: Home, Diensten, Projecten, Studio, Contact. Scroll om te lezen en hij klapt in tot Home, Zoeken, WhatsApp, Delen en Boven, met hetzelfde glas en dezelfde komeetring.

  3. 03

    Glas dat gemeten is, niet gekozen

    De helderheid achter het glas van de dock is per thema afgesteld tot elk icoon 3:1 haalde boven de donkerste foto op de site. Zakt een test eronder, dan verandert het glas, nooit de grens.

  4. 04

    Eerlijke foto's

    Projectfoto's zijn verkleind en ontdaan van locatiegegevens, en een test controleert dat. Een AI-visualisatie draagt altijd een label, en sfeerbeelden heten sfeerbeeld en staan nooit naast een project.

  5. 05

    Een tuinkalender voor Stein

    Eén vuistregel per maand, plus de zon en maan van vandaag, in de browser berekend voor de coördinaten van de studio.

  6. 06

    Een linkpagina op een eigen subdomein

    links.gronn.studio is een linkpagina in bento-stijl, geserveerd door dezelfde app via een hostregel in de proxy. Zonder menu, zonder dock en zonder footer.

(06) Het resultaat

Live op gronn.studio in het Nederlands en Engels, volgens de GRØNN Brand Guide 2026, met een tuinkalender berekend voor Stein en een linkpagina in bento-stijl op een eigen subdomein.

Even kennismaken

Laten we iets
ongewoons bouwen.

Een gratis intakegesprek, zonder verplichtingen. Je gaat weg met een heldere scope en een vaste prijs.

Start een project