Hoe we praten. Hoe we eruitzien. Wat we wel en niet doen. Geen pakkende slogans op een muur. Gewoon de regels die elke klantopdracht consistent maken.
--logo-ink #111827, --logo-accent #4abaeb) staan los van de UI-tokens.--text-* tokens omgezet van px naar clamp(). Headings schalen nu vloeiend tussen mobile en wide screen. Body, small en eyebrow blijven vast voor toegankelijkheid.<em> tags krijgen voortaan zowel cyan kleur als echte italic. Dubbele markering, één regel.Direct, warm, no-nonsense, een tikje brutaal. Geen corporate vulling, geen US-superlatieven. Dutch first, sentence case, je en jij. Korte zinnen. Twee-woord-zinnen zijn aangemoedigd.
"Geen gedoe. Gewoon geregeld."
Anafora ("Geen … Geen …") is een handtekening. Twee zinnen, één idee. Klant snapt het binnen één ademteug.
"Wij ontzorgen jouw onderneming met state-of-the-art oplossingen."
Buzzword-stack. Vage superlatieven. Voelt als een commercial uit 2014. Schrappen.
"Bakkie doen? Dan kijken we samen waar je staat."
Uitnodiging in spreektaal. Een mens aan de andere kant, geen verkoopformulier.
"Hi there! Klik hieronder om een vrijblijvende intake in te plannen!"
Tech-bro opening. Engels-Nederlandse mix. Twee uitroeptekens. Drie kruisjes.
Het wordmark is een geknipte sans, schuin gezet, met de tweede letterhelft als cyan-accent. Het mark zonder tekst is de twee schuine vormen los. Verder niks. Geen icoontje, geen tagline, geen drop-shadow.
Het wordmark is gebouwd uit vier elementen. Niks toevoegen, niks weglaten, geen swap van letters.
Rondom het logo blijft minimaal een ruimte gelijk aan de hoogte van de hoofdletter E. Geen tekst, geen lijnen, geen tweede logo binnen die zone.
Vuistregel. Pak de hoogte van één E uit het logo. Dat is je marge boven, onder, links en rechts. In een digitale grid komt dat meestal neer op 24 tot 32 pixels rondom een logo van 120px breed.
Onder deze drempels valt detail weg. De cyan-helft van de V smelt in de donkere helft, de O verliest zijn ring, en op print loopt de inkt door. Niet doen.
Cream, paper en ink zijn de drie veilige vlakken. Cyan en amber zijn no-go als achtergrond. Daarop verliest het cyan-accent zijn functie.
Het logo gebruikt een eigen, iets diepere navy en een zachtere cyan dan de UI. Dat is bewust: op print en social media houdt deze versie meer contrast en blijft de cyan-helft zichtbaar. UI-elementen gebruiken nog steeds --brand-ink en --brand-accent.
Vier SVG-bestanden. Vector, schaalt zonder verlies, werkt overal van favicon tot gevelreclame. Mailbestand maakt het pakket compleet.
Vier basis-kleuren, plus amber als action-kleur. Geen gradients. Geen schaduwen die uit het navy-familie stappen. Elke kleur heeft één taak, en geen kleur leent een taak van een andere.
De vijf kleuren naast hun taak. Hou deze tabel open bij twijfel.
Cyan is geen kleur voor "decoratie". Het is functioneel: het markeert iets, geeft focus, of nodigt uit tot actie. Als het niet één van die drie dingen doet, hoort het niet op de pagina.
De grijsschaal interpoleert van cream naar navy. Elke grijs zit in de navy-familie, zodat hij nooit vecht met het merk.
Display is Bricolage Grotesque. Body is Inter. Mono is JetBrains Mono. Dutch grotesque DNA voor headlines, workhorse-leesbaarheid voor body. Modulaire scale op ratio 1.250. Letter-spacing schaalt invers met font-size.
Wat elke token uitkomt op elk schermformaat. Mobile is 375px, desktop is 1440px, wide screen 1920+. Body, small en eyebrow zijn vast (toegankelijkheid). Alles ertussen schaalt vloeiend via clamp().
Vetgedrukt = clamp-anker (min of max bereikt). Tussenwaardes schalen vloeiend met de viewport. Onder 720px scrollt de tabel horizontaal.
De em-tag doet voortaan twee dingen tegelijk: cyan kleur én Bricolage italic. Subtiel maar onmiskenbaar. Het highlight-moment heeft daarmee twee signalen, zodat hij ook werkt voor mensen met kleurblindheid.
Optie A. Bricolage italic in dezelfde family. Werkt overal, geen extra font-load, past bij understatement. Dit is de v1.2 default.
Optie B (later). Instrument Serif italic als display-twist. Dramatischer, editorial. Geparkeerd voor v1.3 als je extra drama wilt.
Te smal = oog springt te vaak terug. Te breed = oog raakt de regel kwijt. De sweet spot is 45 tot 75 tekens. Gebruik de drie tokens.
Wij bouwen websites waar je echt wat aan hebt. Snel, eerlijk, en zonder kleine lettertjes.
✓ Ideaal · 65 ch (body)Wij bouwen websites waar je echt wat aan hebt. Snel, eerlijk geprijsd, en zonder kleine lettertjes. Je krijgt een vaste contactpersoon, geen ticketsysteem. Korte lijnen, snel schakelen.
× Te breed · onbeperktWij bouwen websites waar je echt wat aan hebt. Snel, eerlijk geprijsd, en zonder kleine lettertjes. Je krijgt een vaste contactpersoon, geen ticketsysteem. Korte lijnen, snel schakelen. Een digitale partner, geen leverancier, en wij denken mee in plaats van alleen knoppen klikken op een hoofdscherm.
Alles in deze stijl is een veelvoud van 4. Section gaps zitten op 64 tot 96. Inter-block op 24 tot 32. Inline op 8 tot 16.
--space-14px--space-28px--space-312px--space-416px--space-524px--space-632px--space-748px--space-864px--space-996px--space-10128pxButtons, form, cards, data en navigatie. Elk component pakt één rol en pakt die ook. Geen mengvormen. Hairlines op cream, hardere borders op slabs.
Een webshop die meegroeit met je voorraad. iDEAL, snelle hosting, en geen plug-in-puzzel om de twee maanden.
BekijkCyan focus-ring, rode error-ring, groene success-ring. Label boven, helper-text onder. Nooit placeholder als enige label.
Eén werkdag reactie. Geen verkoop-pitch.
Service, case, blog, testimonial, pricing. Zelfde basis (radius, hairline, schaduw). Andere inhoud, andere klik-flow.
Een webshop die meegroeit met je voorraad. iDEAL, snelle hosting, en geen plug-in-puzzel om de twee maanden.
BekijkMaatwerk WooCommerce-shop met snelle iDEAL-checkout en herkenbare merkidentiteit.
Lees de caseGeen no-code platform, geen headless overkill. Een eerlijke kijk op wat er voor MKB werkt.
Lees verderEindelijk een bureau dat snel schakelt. Geen tickets, gewoon even bellen. En als ik 's avonds wat vraag, ligt er 's ochtends een antwoord.
Voor wie zekerheid wil zonder gedoe.
Voor wie ook wil groeien, niet alleen stilhouden.
Eén nummer, één punt. Geen dashboards-met-zes-grafieken die niemand leest. Een sterke quote pakt meer aandacht dan tien stat-blokken.
Wij bouwen websites waar je echt wat aan hebt. Snel, eerlijk geprijsd, en zonder kleine lettertjes.
| Plan | Prijs | Uren wijziging | Reactietijd |
|---|---|---|---|
| Geregeld | €149/mnd | 1 uur | Eén werkdag |
| Vooruit | €229/mnd | 2 uur | Eén werkdag |
| Maatwerk | Op aanvraag | Onbeperkt | Direct |
Breadcrumbs, tabs en paginering laten zien waar je bent en wat de volgende stap is. Niet meer.
Amber op cream. Amber op navy. Twee plekken waar deze knop het meeste werk doet.
Wij bouwen websites waar je echt wat aan hebt. Snel, eerlijk geprijsd, en zonder kleine lettertjes.
Vaste contactpersoon, geen ticketsysteem. Korte lijnen, snel schakelen.
Line-icons op een 24px-grid, 1.5px stroke, ronde caps en joins. Geen fill, geen multi-color, erven currentColor. Eigen paths, geen Lucide. De pijl naar rechts is de inline-CTA.
Hover op een icoon voor copy en download. Wissel hieronder kleur en formaat, of pak alles in één ZIP. Stroke blijft scherp, ook bij grote maten.
Elke maat heeft een rol. Mix ze niet door elkaar binnen één component. Een button gebruikt 16px, een card-icoon 24px. Punt.
Iconen volgen dezelfde kleurlogica als tekst. Navy is de default, cyan markeert wat belangrijk is, action-amber roept tot actie. Muted voor secundaire info.
Iconen werken altijd in samenhang met tekst, kleur en spacing. Hieronder de patronen die op de site en in demo's voorkomen.
Binnen 14 dagen live, zonder eindeloze meetings.
Geen gedoe, gewoon geregeld. Plan een tijd via de site, of stuur een mailtje naar fabian@evoconnect.nl.
Korte lijst om consistentie te bewaken. Bij twijfel: liever geen icoon dan een verkeerd icoon.
currentColor. Eén regel CSS regelt de hele tile.ICONS-object toevoegen, geen aparte SVG-bestanden inplakken.width en height niet gelijk te houden.Hou deze pagina open als je twijfelt. Als iets aan de "× nooit"-kant zit, schrap het en begin opnieuw.
Voor elke veelvoorkomende plek op de site zit er een patroon. Vul de gaten, hou de cadans.
Eén klein technisch detail uit de bronbestanden, plus één upgrade-pad voor later.
<defs>. De wordmark rendert nu met navy + cyan als fallback. Vraag: zijn die fallback-kleuren correct, of zit er een specifiekere fill-rule in het bronbestand?