Huisstijl

Logo

Het merk bestaat uit twee delen: het vosicoon en de naam in gewone letters. Het icoon staat links onder op elke pagina, klein, en is de weg terug naar de homepagina. Hetzelfde icoon is ook de favicon.

• Formaat op het web: 28 tot 36 px hoog. Kleiner mag, groter niet.
• Altijd op wit. Nooit in een vlak, nooit in een cirkel met kleur.
• Vrije ruimte rondom: minstens de halve hoogte van het icoon.
• Niet draaien, niet spiegelen, niet van kleur veranderen.
• Drie snelle klikken op het icoon geven eenmalig een knipoog. Dat is de enige grap.

Kleuren

• Inkt#0A1B2Boklch(0.2165 0.039 249)Alle tekst, lijnen en de primaire knop.
• Wit#FFFFFFoklch(1 0 0)Achtergrond van elke pagina. Altijd wit, nooit een vlak of verloop.
• Goud#AF9D68oklch(0.7 0.075 92)Accent: pijltjes bij hover, sociale iconen, kleine details.
• Sterrengeel#F5B301vastAlleen de vijf sterren van de reviewscore.
• Reviewgroen#1F9D55vastAlleen het kleine sterretje voor de 9,8.

Grijstinten

Er is geen grijs in de huisstijl. Elk grijs is inkt dat met wit gemengd is, zodat alles uit dezelfde kleur blijft komen.

• Tekst normaal100% inktTitels en belangrijke regels.
• Lopende tekst70% inkt op witAlinea's en uitleg.
• Kopjes klein55% inkt op witKleine kapitaaltjes-kopjes.
• Bijschrift45% inkt op witMeta-regel, datums, resultaten.
• Scheidingstekens30% inkt op witDe puntjes tussen links.
• Lijnen12% inkt op witRanden van knoppen en velden.

Typografie

Eén letter voor alles: Inter, in twee diktes (400 en 500). Twee formaten die meeschalen met het scherm. Titels staan altijd links, nooit gecentreerd.

• PaginatitelDe Gouden Vos500 · 2rem tot 4,25rem · regelafstand 1,06 · letterafstand −0,025em
• PayoffKlein aantal klanten. Grote resultaten.500 · 1,25rem tot 1,75rem · letterafstand −0,015em
• Lopende tekstWij maken bedrijven vindbaar en laten ze groeien.400 · 0,875rem tot 1rem · regelafstand 1,5 · 70% inkt
• Klein kopjeHet behaalde resultaat500 · 0,75rem tot 0,875rem · kapitalen · letterafstand 0,06em
• BijschriftRotterdam · 2026400 · 0,75rem tot 0,875rem · 45% inkt

Iconen

Eén iconenset: Lucide. Alleen lijnen, lijndikte 1,5 tot 1,6, en altijd in de kleur van de tekst ernaast. Geen gevulde iconen, geen emoji, geen tweede set. Een icoon staat nooit alleen: er hoort altijd tekst bij.

• HomeTerug naar de homepagina
• BriefcasePortfolio · LinkedIn Ads
• CompassAanpak · Wat we doen
• UsersOver ons · team · recruitment
• MailContact · e-mail
• NewspaperNieuwsbalk · blog
• SearchSEO
• GlobeB2B-websites
• ShoppingCartWebshops
• SparklesAI-vindbaarheid
• BotChatGPT Ads
• MegaphoneMeta Ads
• MousePointerClickGoogle Ads
• RepeatRemarketing
• BarChart3Analytics en tracking
• StarSterren bij de eigen score

• 13 – 14 px in de meta-regel en bij het huisicoon.
• 19 px in de menubalk onderin op de telefoon.
• Circa 16 – 18 px in lijsten en bij diensten.
• Sociale iconen (LinkedIn, Instagram, Facebook) zijn de officiële merklogo's: in merkkleur op contact, elders in goud.

Vormgeving

• LettertypeInter, in twee diktes: 400 en 500. Nooit vet, nooit cursief.
• ReserveHelvetica Neue, Helvetica, Arial, systeemletter.
• Ronding8 px op knoppen en kaders, 7 px op de kleine knoppen.
• LijnenAltijd 1 px, inkt op 12% (tabellijnen 8%). Geen schaduwen.
• RasterEén pagina per beeld. Titel links boven, meta-regel links onder.
• RuimteSchaalt met het scherm via clamp() en vh, zodat een pagina past.
• RegelbreedteTekstkolommen zijn 52 tot 62 tekens breed.
• ScrollenAlleen wanneer het echt moet. Horizontaal nooit.

Schermformaten

• Tot 640 pxTelefoonMenu als vaste balk onderin, logo met score en kleine links bovenin, twee kleine knoppen op de homepagina, partnerbadges en nieuwsbalk verborgen.
• 641 – 768 pxTabletMenulinks op één regel, score rechtsboven, geen menu onderin.
• 769 px en brederDesktopVolledige weergave met nieuwsbalk rechtsonder en partnerbadges.
• 900 – 1440 pxRuimAlleen meer ruimte en grotere logo's. Nooit nieuwe elementen.

Navigatie

• DesktopLosse tekstlinks links boven met een huisicoon ervoor. Geen menubalk, geen hamburger. Score rechtsboven, nieuwsbalk rechtsonder.
• TelefoonMenu onderin als app-balk met vijf iconen en labels, plus een stipje bij de actieve pagina. Bovenin het vosicoon, de score en Blog · Contact.
• LinksGeen onderstreping, wel een pijltje ↗ dat goud wordt en een lijntje dat bij aanwijzen inschuift.
• JuridischPrivacyverklaring, Algemene Voorwaarden en Huisstijl staan op de contactpagina, niet rechtsonder op desktop.

Knoppen en links

• De donkere knop is de eerste keuze op een pagina. Eén per pagina.
• De lichte knop staat ernaast, met een lijn van 1 px en witte vulling.
• De kleine knop is voor de telefoon: 0,34rem bij 0,7rem, ronding 7 px.
• Losse tekstlinks krijgen geen onderstreping, maar een pijltje: ↗ dat bij aanwijzen goud wordt.
• Nooit meer dan twee knoppen naast elkaar.

Bewijs en cijfers

Bewijs staat klein en droog in beeld: de score met een groen sterretje, vijf gele sterren en het aantal reviews. Partnerlogo's staan op één rij, links uitgelijnd, in deze volgorde: Google Partner, Leadinfo, CookieYes, ChatGPT Ads. Elke claim heeft een getal, of staat er niet.

9,8★★★★★12 Google reviews

Beweging

• Openen van een paginaTitel, payoff en inhoud komen kort na elkaar rustig op.
• AanwijzenEen lijntje schuift onder een menulink, kleur verdiept iets.
• IndrukkenEen knop zakt 1 px.
• Sterren en badgesLichten van links naar rechts één keer op.
• Case-foto'sZoomen minimaal in bij aanwijzen (scale 1,02).
• NieuwsbalkStaat stil, schuift bij hover en springt daarna terug.
• Duur0,2 tot 0,36 seconde. Nooit langer, nooit springend.
• Rust voorafWie in zijn systeem minder beweging kiest, krijgt een stille versie.

Tone of voice

• Korte zinnen. Punt. Volgende zin.
• Nederlands, geen Engels jargon.
• Nooit schreeuwen: geen uitroeptekens, geen hoofdletters, 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'.

Fotografie

• Echte klanten, echt werk, echte mensen uit het team. Geen stockbeeld.
• Rustig licht, weinig kleur, geen filters.
• Portretten recht en op ooghoogte, in een vierkant of staand formaat.
• Elke foto krijgt een vaste hoogte en breedte, zodat de pagina niet verspringt.
• Elke foto krijgt een Nederlandse beschrijving voor wie de site laat voorlezen.
• Wij gebruiken of genereren Nederlandse beelden: Nederlandse mensen, Nederlandse omgeving, Nederlandse borden en teksten in beeld.
• Blogs zonder eigen beeld krijgen de neutrale standaardafbeelding (1200 × 630).

Opbouw van de site

• HomepaginaEén beeld met wisselende titel, bewijs, logo's en knoppen.
• Portfolio12 cases, per case 'Het behaalde resultaat' en dezelfde CTA.
• Wat we doenVier groepen: Websites, Vindbaarheid, Campagnes, Tools. Twaalf verdiepingspagina's met banner, aanpakstappen en CTA.
• De Gouden VosOver ons met team en dezelfde partnerbadges.
• ContactAdres, e-mail, sociale kanalen, KvK/BTW, juridisch en de FAQ.
• BlogsOverzicht met titels en datums, per blog een eigen pagina.
• JuridischPrivacyverklaring, Algemene Voorwaarden (met PDF), Huisstijl.
• 404Dezelfde stijl, met de weg terug naar de vier hoofdpagina's.

Techniek en vindbaarheid

• TitelsElke pagina: 'Onderwerp — De Gouden Vos', met eigen omschrijving.
• DelenEigen og:title, og:description en canonical per pagina.
• TaalDe hele site is Nederlands (lang="nl").
• GegevensBedrijfsgegevens en reviewscore machineleesbaar op de homepagina.
• VindbaarheidSitemap op /sitemap.xml, aangemeld in robots.txt.
• CookiesMelding na 2 seconden, op de telefoon net boven de menubalk.
• ToegankelijkSkip-link, zichtbare toetsenbordfocus, één h1 per pagina, alt-teksten overal.

Bedrijfsgegevens

• NaamDe Gouden Vos B.V.
• AdresWestplein 12, 3016 BM Rotterdam, Nederland
• E-mailteam@degoudenvos.nl
• BereikbaarMa – Vr · 09:00 – 18:00 · reactie meestal < 2 uur
• TelefoonAlleen klanten ontvangen ons telefoonnummer.
• KvK & BTWKvK 89728963 · BTW NL865080574B01
• Websitedegoudenvos.nl
• SociaalLinkedIn, Instagram en Facebook: /degoudenvos
• Goed doelKerstkans · kerstkans.nl

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 automatisch startende beweging.
• Geen donkere modus en geen tweede lettertype.

Download

De volledige merkgids staat in één bestand: kleuren, letters, iconen, maten, beweging, toon, opbouw van de site en de bedrijfsgegevens. Het bestand is zo geschreven dat je het ook in een AI-assistent kunt zetten; die neemt alles dan in één keer goed over.

Download de merkgidsMarkdown · leesbaar voor mens en AI