# Huisstijl De Gouden Vos — volledige merkgids Dit bestand beschrijft de complete huisstijl van De Gouden Vos (degoudenvos.nl). Het is geschreven om zowel door mensen als door een AI-assistent gebruikt te worden. Wie op basis van dit bestand iets ontwerpt of bouwt, volgt uitsluitend de regels hieronder en verzint niets nieuws: geen extra kleuren, geen extra lettertypen, geen extra vormen. Versie: 14 september 2026 Bron: https://degoudenvos.nl/huisstijl --- ## 1. Merk in één alinea De Gouden Vos is een klein B2B-marketingbureau uit Rotterdam. Het merk werkt met een volledig witte pagina, één lettertype (Inter), één donkere tekstkleur (inkt) en één accentkleur (goud). De site voelt bewust bijna leeg: alles wat niet nodig is, staat er niet. Rust, ruimte en bewijs (cijfers, klanten, reviews) doen het werk. Nooit schreeuwen. Payoff: **Klein aantal klanten. Grote resultaten.** Belofte in één regel: Wij maken bedrijven vindbaar en laten ze groeien. --- ## 2. Kleur | Naam | Hex | Technische waarde | Gebruik | |---|---|---|---| | Inkt | `#0A1B2B` | `oklch(0.2165 0.039 249)` | Alle tekst, lijnen, primaire knop | | Wit | `#FFFFFF` | `oklch(1 0 0)` | Achtergrond van elke pagina | | Goud | `#AF9D68` | `oklch(0.7 0.075 92)` | Accent: pijltjes bij hover, sociale iconen, bullets | | Sterrengeel | `#F5B301` | vast | Uitsluitend de vijf reviewsterren | | Reviewgroen | `#1F9D55` | vast | Uitsluitend het sterretje voor de score 9,8 | Regels: - De achtergrond is altijd wit. Geen vlakken, geen verlopen, geen donkere modus. - Er is geen los grijs. Elk "grijs" is inkt gemengd met wit: `color-mix(in oklab, var(--ink) N%, #fff)`. - Goud is een accent, nooit een vlak en nooit een tekstkleur voor hele zinnen. - Sterrengeel en reviewgroen zijn functioneel en komen alleen bij de reviewscore voor. ### Grijstrap (percentage inkt op wit) | Toepassing | Waarde | |---|---| | Titels en belangrijke regels | 100% | | Lopende tekst | 70% | | Kleine kapitaaltjes-kopjes | 55% | | Bijschriften, meta-regel, datums | 45% | | Scheidingspuntjes tussen links | 30% | | Randen van knoppen en velden | 12% (soms 8% voor tabellijnen) | CSS-variabelen zoals in de site: ```css :root { --background: oklch(1 0 0); --foreground: oklch(0.2165 0.039 249); --ink: oklch(0.2165 0.039 249); --gold: oklch(0.7 0.075 92); --font-grotesk: "Inter", "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, Arial, sans-serif; } ``` --- ## 3. Typografie - Eén lettertype: **Inter**, geladen via Google Fonts, gewichten **400** en **500**. - Reserveletters: Helvetica Neue, Helvetica, -apple-system, Arial, sans-serif. - Nooit vet (700+), nooit cursief, nooit een tweede lettertype. - Titels staan altijd links uitgelijnd, nooit gecentreerd. - Cijfers in scores staan in tabular-nums, zodat ze niet verspringen. | Rol | Gewicht | Grootte | Details | |---|---|---|---| | Paginatitel (h1) | 500 | `clamp(2rem, 5.2vw, 4.25rem)` | regelafstand 1,06 · letterafstand −0,025em | | Payoff / subtitel | 500 | `clamp(1.25rem, 2vw, 1.75rem)` | letterafstand −0,015em · regelafstand 1,15 | | Sectiekopje (h2) | 500 | 0,8rem | kapitalen · letterafstand 0,12em · 55% inkt | | Klein kopje in tekst | 500 | `clamp(0.75rem, 0.85vw, 0.875rem)` | kapitalen · letterafstand 0,06em | | Lopende tekst | 400 | `clamp(0.875rem, 1vw, 1rem)` | regelafstand 1,5 · 70% inkt · max 52–62 tekens breed | | Bijschrift / meta | 400 | `clamp(0.75rem, 0.85vw, 0.875rem)` | 45% inkt | | Knoptekst | 400 | `clamp(0.75rem, 0.9vw, 0.8125rem)` | letterafstand 0,01em | Elke pagina heeft een vaste paginatitel, in dezelfde grootte op elke pagina. Die titel wordt nooit verwijderd of verkleind. --- ## 4. Logo en beeldmerk - Het merk bestaat uit het vosicoon (schild met vos in goud) en de naam in gewone letters. - Het volledige logo is het vosschild in goud met daarnaast "De Gouden Vos" in inkt, op wit. Op de huisstijlpagina staat dit volledige logo als voorbeeld. - Het icoon staat klein links onder op elke pagina en is de weg terug naar de homepagina. - Weergavehoogte op het web: 28 tot 36 px. Kleiner mag, groter niet. - Altijd op wit. Nooit in een gekleurd vlak of cirkel. - Vrije ruimte rondom: minstens de halve hoogte van het icoon. - Niet draaien, spiegelen, uitrekken of van kleur veranderen. - Favicon: hetzelfde vosicoon als PNG (`/favicon.png`). - Easter egg: drie snelle klikken op het icoon (of het woord "vos" typen) geeft een korte knipoog met de regel "Gevonden. Slim. Dat werkt bij ons ook zo." Dit blijft eenmalig en wordt onthouden in de browser. --- ## 5. Iconen - Iconenset: **Lucide** (lucide-react). Geen andere set, geen gevulde iconen, geen emoji. - Lijndikte: 1,5 tot 1,6. Kleur: neemt de tekstkleur over (`currentColor`). - Formaten: 13–14 px in de meta-regel en het huisicoon, 19 px in de mobiele menubalk, ongeveer 16 px in lijsten van diensten. - Een icoon staat altijd naast tekst, nooit alleen als betekenisdrager. - Iconen zijn `aria-hidden` wanneer de tekst ernaast al zegt wat het is. Vaste iconen per functie: | Functie | Lucide-icoon | |---|---| | Home / terug naar start | `Home` | | Portfolio, ons werk, LinkedIn Ads | `Briefcase` | | Aanpak, wat we doen | `Compass` | | Over ons, team, recruitment | `Users` | | Contact, e-mail | `Mail` | | Nieuwsbalk / blog | `Newspaper` | | SEO, zoeken | `Search` | | B2B-websites | `Globe` | | Webshops | `ShoppingCart` | | AI-vindbaarheid | `Sparkles` | | ChatGPT Ads | `Bot` | | Meta Ads | `Megaphone` | | Google Ads | `MousePointerClick` | | Remarketing | `Repeat` | | Analytics en tracking | `BarChart3` | | Reviews (Trustigo, Google) | `Star`, `BadgeCheck` | Sociale iconen (LinkedIn, Instagram, Facebook) zijn de officiële merklogo's als SVG-pad. Op de contactpagina staan ze in hun eigen merkkleur; elders in goud op 85% dekking. --- ## 6. Vorm, ruimte en raster - Ronding: 8 px op knoppen en kaders, 7 px op de kleine knoppen, 50% op stipjes. - Lijnen: altijd 1 px, in 12% inkt (tabellijnen 8%). - Geen schaduwen, geen verlopen, geen omkaderde "cards". - Eén pagina = één beeld. De titel staat links boven, de meta-regel links onder. - Scrollen mag alleen als de inhoud echt niet past. Horizontaal scrollen nooit. - Ruimtes schalen mee met het scherm via `clamp()` en `vh`-waarden. - Tekstkolommen zijn maximaal 52 tot 62 tekens breed. Breekpunten: | Breedte | Gedrag | |---|---| | tot 640 px (telefoon) | Menu als vaste balk onderin, logo + score + kleine links bovenin, twee kleine knoppen op de homepagina, partnerbadges verborgen | | 641 tot 768 px (tablet) | Menulinks op één regel, score rechtsboven | | 769 px en breder (desktop) | Volledige weergave, nieuwsbalk rechtsonder, partnerbadges zichtbaar | | vanaf 900 / 1000 / 1440 px | Alleen extra ruimte en grotere logo's; geen nieuwe elementen | --- ## 7. Navigatie Desktop: - Geen menubalk bovenaan, geen hamburgermenu. - Losse tekstlinks links boven: Ons werk · Wat we doen · De Gouden Vos · Blogs · Contact, met een huisicoon ervoor als weg naar de homepagina. - Links krijgen geen onderstreping, maar een pijltje `↗` dat bij hover goud wordt, plus een lijntje dat onder de link inschuift. - Rechtsboven: "Klanten geven ons een 9,8". - Rechtsonder: kleine nieuwsbalk met de laatste blogtitel. Privacyverklaring en Algemene Voorwaarden staan hier niet. Telefoon: - Menu onderin als app-balk met vijf items (Home, Portfolio, Aanpak, Over, Contact) met icoon en label, plus een klein stipje dat naar de actieve pagina schuift. - Bovenin: vosicoon (naar de homepagina), de score en de kleine links "Blog · Contact". - De nieuwsbalk is verborgen. --- ## 8. Knoppen en links - Primaire knop: gevuld met inkt, witte tekst, ronding 8 px, padding 0,42rem 0,9rem. Eén primaire knop per pagina. - Secundaire knop: witte vulling, lijn van 1 px in 12% inkt, tekst in 70% inkt. - Kleine knop (mobiel): padding 0,34rem 0,7rem, ronding 7 px, 0,75rem tekst. - Bij aanwijzen verdiept de lijn of de vulling licht; bij indrukken zakt de knop 1 px. - Nooit meer dan twee knoppen naast elkaar. - Standaardteksten: "Plan een kennismaking" (primair) en "Bekijk ons werk" (secundair). - Onderaan elke diensten- en portfoliopagina staat dezelfde uitnodiging met deze twee knoppen. --- ## 9. Bewijs, cijfers en partners - Score: groen sterretje + "9,8", en de regel "Klanten geven ons een 9,8". - Sterren: vijf gele sterren die één keer van links naar rechts oplichten. - Reviews: "12 Google reviews". Score en aantal tellen bij het openen één keer kort op. - Partnerbadges op de homepagina en de over-pagina, links uitgelijnd onder de sterren, in deze volgorde: Google Partner, Leadinfo Certified Partner, CookieYes Verified Agency Partner, ChatGPT Ads Partner. Alleen op desktop. - Klantlogo's staan rustig op één rij, klein op de telefoon en groter op desktop. - Elke claim heeft een getal of staat er niet. --- ## 10. Beweging - Openen van een pagina: titel (320 ms), payoff (340 ms) en inhoud (360 ms) komen kort na elkaar rustig op, met een minimale verschuiving omhoog. - Aanwijzen van een link: lijntje schuift in via `scaleX`, pijltje wordt goud. - Indrukken van een knop: 1 px zakken. - Sterren en badges: één keer oplichten, van links naar rechts, met 60 ms verschil. - Case-foto's: minimale inzoom (scale 1,02) bij hover. - Nieuwsbalk: staat stil, schuift de titel alleen bij hover en springt daarna terug naar de eerste letter. Eén keer een zachte teaser als de balk lang niet bekeken is. - Bubbel van het goede doel: verschijnt op de homepagina na 3 seconden. - Duur: 0,2 tot 0,36 seconde. Alles via CSS-keyframes en transitions, geen animatiebibliotheek. - Wie in zijn systeem minder beweging kiest (`prefers-reduced-motion`), krijgt een stille versie. --- ## 11. Tone of voice - Korte zinnen. Punt. Volgende zin. - Nederlands, geen Engels jargon. - Nooit schreeuwen: geen uitroeptekens, geen hoofdletters als nadruk, geen kortingen. - Beloften met een getal erachter, of niet. - Wij zeggen "wij", de lezer is "jij". - Kopjes zijn feitelijk: "Het behaalde resultaat", "Waar begin je?", "Team". - Voorbeeldregels uit de site: "Klein aantal klanten. Grote resultaten." · "Alleen klanten ontvangen ons telefoonnummer." · "Wij maken bedrijven vindbaar en laten ze groeien." --- ## 12. Fotografie - Echte klanten, echt werk, echte mensen uit het team. Geen stockbeelden. - Rustig licht, weinig kleur, geen filters. - Portretten recht en op ooghoogte, vierkant of staand. - Elke foto krijgt een vaste hoogte en breedte, zodat de pagina niet verspringt. - Wij gebruiken of genereren Nederlandse beelden: Nederlandse mensen, Nederlandse omgeving, Nederlandse borden en teksten in beeld. - Elke foto krijgt een beschrijving (alt-tekst) in het Nederlands. - Blogs zonder eigen beeld krijgen een neutrale standaardafbeelding in huisstijl (wit met een gouden haarlijn, 1200 × 630). --- ## 13. Structuur van de site - `/` homepagina: één beeld, wisselende titel, bewijs, partnerlogo's, twee kleine knoppen op mobiel. - `/werk` portfolio met 12 cases, `/werk/` per case met "Het behaalde resultaat" en CTA. - `/wat-we-doen` overzicht in vier groepen: Websites, Vindbaarheid, Campagnes, Reviews. Verdiepingspagina's: b2b-websites, webshops, seo, ai-vindbaarheid, analytics, google-ads, meta-ads, linkedin-ads, chatgpt-ads, remarketing, recruitmentcampagnes, trustigo-reviews, google-reviews. Elke pagina: brede lage banner onder de payoff, aanpakstappen, CTA onderaan. - `/de-gouden-vos` over ons met team en partnerbadges. - `/contact` met adres, e-mail, sociale kanalen, KvK/BTW, juridische links en een FAQ die volledig dicht begint. - `/blogs` overzicht met alleen titels en datums, `/blogs/` per artikel. - `/privacyverklaring`, `/algemene-voorwaarden` (met PDF-download), `/huisstijl`. - 404-pagina in dezelfde stijl, met de vier hoofdlinks. --- ## 14. Techniek en metadata - Elke pagina heeft een eigen titel, omschrijving, og:title, og:description en canonical. Titelvorm: "Onderwerp — De Gouden Vos". - Taal: ``. De hele site is Nederlands. - Machineleesbare bedrijfsgegevens (JSON-LD Organization) op de homepagina, Article op blogs. - Sitemap op `/sitemap.xml`, aangemeld in `robots.txt`. - Cookiemelding verschijnt na 2 seconden, op de telefoon net boven de menubalk. - Toegankelijkheid: skip-link "Naar de inhoud", zichtbare toetsenbordfocus, één h1 per pagina, alt-teksten op alle beelden, aanraakvlakken minimaal 40 px hoog. --- ## 15. Bedrijfsgegevens - De Gouden Vos B.V., Westplein 12, 3016 BM Rotterdam, Nederland - E-mail: team@degoudenvos.nl - Bereikbaar: ma – vr, 09:00 – 18:00, reactie meestal binnen 2 uur - Telefoonnummer: alleen klanten ontvangen ons telefoonnummer - KvK 89728963 · BTW NL865080574B01 - Website: https://degoudenvos.nl - LinkedIn: https://www.linkedin.com/company/degoudenvos/ - Instagram: https://www.instagram.com/degoudenvos/ - Facebook: https://www.facebook.com/profile.php?id=61590470127814 - Goed doel: Kerstkans — https://www.kerstkans.nl --- ## 16. Wat we niet doen - Geen menubalk bovenaan op de computer en geen hamburgermenu. - Geen verlopen, geen schaduwen, geen kaders om blokjes. - Geen stockfoto's van handen die elkaar schudden. - Geen tweede accentkleur naast goud. - Geen banners, pop-ups of beweging die vanzelf begint. - Geen donkere modus. - Geen tweede lettertype en geen vette of cursieve letters. - Geen drukke pagina's met secties onder elkaar; één beeld per pagina. --- ## 17. Instructie voor een AI-assistent Gebruik dit bestand als de enige bron voor vormgeving en toon van De Gouden Vos. 1. Neem exact de kleuren, letters, groottes, rondingen en afstanden uit dit document over. 2. Voeg niets toe wat hier niet staat. Bij twijfel: kies de rustigste optie. 3. Schrijf Nederlands, in korte zinnen, zonder uitroeptekens en zonder Engels jargon. 4. Houd de pagina wit, links uitgelijnd, met één paginatitel en één primaire knop. 5. Houd beweging kort (0,2 – 0,36 s) en respecteer `prefers-reduced-motion`. 6. Gebruik Lucide-iconen volgens de tabel in hoofdstuk 5. 7. Vermeld nooit een telefoonnummer; verwijs naar e-mail of een kennismaking. 8. Gebruik alleen echte gegevens uit hoofdstuk 15; verzin nooit openingstijden, nummers of cijfers.