Concurrentiebeding
Na het einde van uw arbeidsovereenkomst wilt u ander werk gaan doen, bij een andere werkgever of als zelfstandige.
Lees meerMake-over denbestenadvocatuur.nl · design system
Vaste grond: het design system voor Den Besten Advocatuur
Eén set tokens, één set componenten, in één licht thema. Alles op deze pagina is live gerenderd met dezelfde CSS die de site straks gebruikt; de contrasttabel rekent de WCAG-ratio's ter plekke uit de hex-waarden. Teksten in de voorbeelden komen letterlijk van de huidige site.
1. Identiteit: “Vaste grond”
Den Besten Advocatuur is één advocaat, mr. Harrie den Besten, sinds 1994 advocaat en daarvoor CNV-vakbondsbestuurder. De site zegt het zelf: “Praktische oplossingen genieten zijn voorkeur boven een juridisch kostbaar getouwtrek.” Het design system vertaalt dat naar rust en aardsheid: warm papier, diepgroen, koper voor de ene actie die telt, en een serif die klinkt als een vakman.
Wordmark
Tekst-wordmark, EB Garamond 600
Den Besten Advocatuur Arbeidsrecht · Almere
Waarom: een eenmanskantoor wint aan geloofwaardigheid met een naam die als naam wordt getoond, niet met een beeldmerk dat om een bureau vraagt.
Principes
- Eén actie per pagina. Alleen contact opnemen krijgt de koperen knop; al het andere is groen of tekst. Waarom: de bron heeft nul knoppen en het doel van de site is bellen.
- Diepte door vlak, niet door schaduw. Papier, wit en tint doen het werk; de enige schaduw is 1 px. Waarom: zware schaduwen ogen als een SaaS-template, niet als een advocatenkantoor.
- Kleur is nooit de enige drager. Links zijn onderstreept, status staat in woorden, fouten hebben een icoon. Waarom: WCAG 1.4.1 en een deel van de doelgroep leest op oudere schermen.
- Niets van de oude site. Geen blauw, geen Poppins of Oswald, geen foto's of partnerlogo's. Waarom: het concept moet als nieuw ontwerp beoordeeld worden, en het VvA-logo is nergens in tekst toegelicht.
Toon
Arbeidsrecht specialist in Almere
Harrie den Besten is advocaat in hart en nieren en dat al heel wat jaren. Hij begon zijn carrière ooit als CNV-vakbondsbestuurder, maar is sinds 1994 advocaat.
Waarom: de titel-tag van de huidige homepage is de duidelijkste belofte in de bron en wordt daarom de H1; de hero-tagline met ondernemingsrecht en bouwrecht heeft geen pagina's om op te landen.
2. Kleurpalet
Eén volledige set, licht. De set wordt hieronder getoond, onafhankelijk van de modus waarin je deze pagina bekijkt.
Waarom groen en koper: groen draagt “vaste grond” en is in de advocatuur ongebruikelijk genoeg om te onderscheiden; koper is de warme tegenkleur die maar op één plek voorkomt, zodat het oog die ene knop vindt.
Waarom geen categoriekleuren: er zijn acht rechtsgebieden en geen producten; acht kleuren zouden betekenis suggereren die er niet is, dus krijgen rechtsgebieden één tag-stijl.
Waarom semantische kleuren met een zachte achtergrond: een formulierfout of bevestiging moet als vlak opvallen, terwijl de tekst erop nog steeds minstens 4,5:1 haalt.
3. Contrasttabel (live berekend)
De ratio's hieronder worden bij het laden berekend uit de hex-waarden in de tokens (WCAG 2.x relatieve luminantie). Eis: tekst 4,5:1 (AA), bedienelementen en grote tekst 3:1, decoratieve lijnen zonder eis. Daarnaast controleert het script of de tokens in de tabel gelijk zijn aan de CSS-variabelen die de browser daadwerkelijk toepast.
Waarom de focusring buiten het element ligt: koper op koper (focus op de CTA-knop) haalt 1,45:1, dus staat de ring met 2 px offset op de achtergrond, waar hij 4,5:1 of meer haalt.
4. Typografie
Twee families via Google Fonts, met systeemfallbacks zodat de pagina ook zonder netwerk (file://) leesbaar blijft. Basis 18 px op desktop en 17 px onder 720 px; regelafstand 1,6 voor tekst en 1,15 voor koppen; lopende tekst maximaal 68 tekens breed.
Aa Bb Cc Dd Ee Ff Gg 0123456789 & ?!
Waarom: een variabele serif met optische maten leest groot als een boekletter en klein als een krantenkop, en klinkt als dertig jaar praktijk.
Aa Bb Cc Dd Ee Ff Gg 0123456789 & ?!
Waarom: een humanistische sans met ruime x-hoogte blijft leesbaar op 14,4 px in tabellen en op telefoons.
Specimen
Arbeidsrecht specialist in Almere
Praktische oplossingen genieten zijn voorkeur boven een juridisch kostbaar getouwtrek.
Concurrentiebeding
Tijdelijke arbeidsovereenkomst
Na het einde van uw arbeidsovereenkomst wilt u ander werk gaan doen, bij een andere werkgever of als zelfstandige.
Heeft u een tijdelijke arbeidsovereenkomst die is gesloten op of na 1 januari 2015? Een concurrentiebeding mag dan alleen als de werkgever schriftelijk uitlegt waarom dat nodig is. Hij moet een zwaarwegend bedrijfsbelang hebben.
Vastgesteld 12-01-2022 · Advocatenkantoor Den Besten b.v., KvK 39095011
036 790 00 20 · 06 55 30 74 45 · KvK 39095011
Typeschaal
| Token | Waarde | Nu gerenderd | Gebruik | Voorbeeld |
|---|---|---|---|---|
--fs-3xl | clamp(2,2rem, 1,5rem + 3vw, 3,6rem) | H1, één per pagina | Pensioen | |
--fs-2xl | clamp(1,8rem, 1,3rem + 1,6vw, 2,4rem) | H2, sectiekoppen | Pensioen | |
--fs-xl | 1,5rem | H3, kaarttitels | Pensioen | |
--fs-lg | 1,2rem | H4, intro's, telefoonknop | Pensioen | |
--fs-md | 1rem | lopende tekst, knoppen, velden | Pensioen | |
--fs-sm | 0,9rem | bijschriften, footer, tabellen | Pensioen | |
--fs-xs | 0,8rem | meta, tabelkop, badges (nooit kleiner) | Pensioen |
Waarom clamp voor H1 en H2: de koppen groeien mee met het scherm zonder mediaquery's en blijven op 390 px binnen twee regels.
5. Spacing en grid
Alle afstanden staan op een basis van 4 px. Secties krijgen --s-8 (desktop) of --s-7 (mobiel); de contentbreedte is --measure 72 rem met zijmarge --s-4 mobiel en --s-6 desktop. Elk bedienelement is minstens --tap 2,75 rem (44 px) hoog en breed.
Schaal
Waarom 4 px: de schaal deelt netjes op 17 en 18 px basisgrootte en is klein genoeg voor tabellen en groot genoeg voor secties.
Grid
12 kolommen op desktop, 4 kolommen onder 720 px, kolomafstand --s-4. Breekpunten: 600 px (2 kaarten), 720 px (menu, tabellen, marges), 860 px (twee kolommen tekst), 960 px (3 kaarten).
1
2
3
4
5
6
7
8
9
10
11
12
8 · tekst
4 · zijkolom
4
4
4
6
6
Waarom 8/4: lange juridische teksten lezen het best in een kolom van maximaal 68 tekens, met de contactkaart ernaast.
6. Radius, lijnen en diepte
--r-sm 4 px
--r-md 10 px
--r-lg 16 px
Waarom drie stappen: velden en tags 4 px, knoppen en dropdowns 10 px, kaarten en panelen 16 px; alles daartussen oogt willekeurig.
- Lijn
- 1 px
--border, decoratief - Nadruk
- 2 px
--primary(secundaire knop, tabelscheiding mobiel) - Bedienrand
- 1 px
--border-strong, minstens 3:1 - Fout
- 2 px
--error - Focus
- 3 px
--focus, offset 2 px - Schaduw
--shadow0 1px 2px, alleen op kaarten en dropdown- Beweging
- 150 ms ease-out op kleur en outline; 0 ms bij
prefers-reduced-motion
7. Componenten
Alles hieronder is de echte component, niet een afbeelding ervan. Probeer het met muis, toetsenbord en in beide modi. De links in de voorbeelden landen op de secties van deze pagina; in het prototype landen ze op de bijbehorende pagina's.
7.1 Knoppen
Vier varianten: primair (koper, één per pagina), secundair (groene rand), tertiair (tekstknop) en telefoon (groen vlak, cijfers in EB Garamond). Alle staten hieronder zijn geforceerd met hulpklassen; de knoppen in de laatste kolom zijn interactief.
Primair
- RustNeem contact op
- HoverNeem contact op
- FocusNeem contact op
- ActiefNeem contact op
- Uitgeschakeld
- InteractiefNeem contact op
- RustBekijk rechtsgebieden
- HoverBekijk rechtsgebieden
- FocusBekijk rechtsgebieden
- ActiefBekijk rechtsgebieden
- Uitgeschakeld
- InteractiefBekijk rechtsgebieden
- Tertiair rustAlle artikelen
- Tertiair hoverAlle artikelen
- Tertiair focusAlle artikelen
- Telefoon rust036 790 00 20
- Telefoon hover036 790 00 20
- KleinContact
Waarom de telefoonknop groen is: op de contactpagina is bellen de primaire actie en krijgt de telefoonknop de koperen stijl; elders is hij ondersteunend en dus groen, zodat er nooit twee koperen knoppen op één pagina staan.
Waarom uitgeschakeld grijs zonder contrasteis: WCAG stelt geen eis aan inactieve elementen, maar de knop blijft leesbaar en verliest zijn kleur zodat niemand erop klikt.
7.2 Kaarten
Rechtsgebied-kaarten met de eerste zin van de bronpagina; artikel-kaarten met datum en titel zoals op de site. De hele kaart licht op bij hover en focus; de titel is de link.
Rechtsgebied-kaart
Rechtsgebied
Rechtsgebied
Rechtsgebied
Artikel-kaart
Loon
In de meeste gevallen wordt loon vastgesteld in geld. Naast het ‘normale’ uurloon of maandelijkse loon, kunnen ook vakantietoeslag, een bonus, gratificatie, overwerkvergoeding, winstaandeel of dertiende maand onder het loon vallen.
Lees meerPensioen
Pensioen is een bijzonder rechtsgebied en vraagt deskundigheid van de advocaat vaak in samenwerking met een actuaris.
Lees meerKtr.: werkgever die geen reële kans op terugkeer naar het werk biedt na conflict, handelt ernstig verwijtbaar
In AR 2025-1516 oordeelt de kantonrechter dat een werkgever ernstig verwijtbaar handelt door een werknemer geen reële kans op terugkeer naar de werkvloer te bieden na een eerder arbeidsconflict en een ingetrokken ontbindingsverzoek.
OntslagOntslag op staande voet: geen sinecure!
Op 22 augustus 2023 verscheen de volgende krantenkop op het RTL nieuws: “Moeder van vier belandt in stacaravan na fraude van 245 euro”.
OntslagWaarom de hele kaart een rand krijgt bij hover: alleen de titel is de link (geen geneste links, geen hele-kaart-anchor), maar de rand laat zien dat de kaart één eenheid is.
7.3 Badges
Eén stijl voor rechtsgebied-tags en vier semantische varianten. De betekenis staat altijd in het woord; de stip is decoratief.
Rechtsgebied
Ontslag
Transitievergoeding
CAO
Verzonden
Controleer
Verplicht
Waarom hoofdletters en spatiëring: een badge op 14,4 px moet als label lezen, niet als een kort zinnetje.
7.4 Prijstabel
De prijstabel is datagestuurd: hij leest de producten uit PRODUCTS.json (hieronder ingesloten) en rendert per product een kaart met naam, prijs, kenmerken en knop. Voor dit kantoor is die lijst leeg, dus zie je de lege staat. De kosten en voorwaarden die de site wél noemt staan in de tabel eronder.
Uit PRODUCTS.json
| Onderwerp | Regeling | Bron |
|---|---|---|
| Honorarium | Wordt bij aanvang van de opdracht overeengekomen; geen uurtarief op de site. | AV art. 6 |
| Kantoorkosten | 7% | AV art. 7 |
| Reiskosten | € 1,- per km | AV art. 7 |
| Betaaltermijn | 14 dagen; € 50,- excl. btw administratiekosten per te late declaratie; incassokosten minimaal EUR 40,00 | AV art. 8 |
| Declaratie | In tijdseenheden, in beginsel maandelijks | AV art. 11–12 |
| Gesubsidieerde rechtsbijstand | Toevoeging via de Raad voor Rechtsbijstand is mogelijk | AV art. 6, 14 |
| Derdenrekening | “Den Besten Advocatuur heeft geen derdenrekening.” | Footer, AV art. 10 |
Waarom geen voorbeeldproducten: de bron bevat geen tarieven of pakketten, en een prijstabel met verzonnen bedragen zou de klant precies het verkeerde beeld geven.
7.5 Trust-bar
Vijf feiten uit de bronsite, als één rij op desktop en gestapeld op mobiel. Geen cijfers of reviews: die heeft de site niet.
- Advocaat sinds 1994
- Lid van de VAAN
- Vaste advocaat voor FNV Zelfstandigen
- Arbiter in CAO-geschillen
- Randstad 22 13B, Almere
Waarom alleen deze vijf: ze staan letterlijk in de bio en de header van de huidige site; “ex-tuchtrechter” en “kerkorganist” zijn waar maar overtuigen geen werkgever met een ontslagzaak.
7.6 Formulier met foutstaten
Contactformulier met validatie bij verzenden en daarna per veld. Fouten staan in een samenvatting bovenaan (met links naar het veld) én onder het veld, met icoon en tekst. Verplichte velden zijn gemarkeerd; het formulier verstuurt in dit design system niets.
Waarom validatie pas bij verzenden: wie tijdens het typen al rood ziet, haakt af; na de eerste poging valideert elk veld wel direct, zodat de fout verdwijnt zodra hij is opgelost.
Waarom een samenvatting én een melding per veld: schermlezers krijgen de samenvatting voorgelezen (role=alert) en zien de foutmelding via aria-describedby bij het veld; zienden zien beide.
In het prototype staat dit formulier alleen als er een serverafhandeling is; de huidige site heeft geen formulier en het concept vertrouwt primair op telefoon en e-mail.
7.7 Navigatie: dropdown en mobiele sheet
Hoofdmenu volgens de nieuwe informatiearchitectuur: Home, Rechtsgebieden (dropdown), Over Harrie den Besten, Artikelen, Contact. Toetsenbord: Tab naar “Rechtsgebieden”, Enter, Spatie of ↓ opent en zet focus op het eerste item, ↑/↓ lopen rond, Home/End springen, Esc sluit en zet focus terug, Tab uit het menu sluit het. Onder 720 px verschijnt de menuknop en opent het menu als sheet met focus-trap; op desktop kun je de sheet hieronder ook openen.
Waarom een disclosure en geen menubar: het zijn gewone links; het ARIA-menupatroon is bedoeld voor applicatiemenu's en verwart schermlezers bij navigatie.
Waarom de telefoonknop in de balk staat: op de huidige site staat het nummer als platte tekst boven het menu; de knop maakt het op elke pagina met één tik bereikbaar zonder een tweede koperen knop te introduceren.
7.8 Footer
Contactgegevens, juridische pagina's en de zin over de derdenrekening, allemaal uit de huidige footer.
8. Tokens als CSS
Kopieer dit blok als tokens.css. Het wordt gegenereerd uit dezelfde tokenlijst als de contrasttabel, dus wat hier staat is wat er is doorgerekend.
9. Implementatie-notitie
CSS custom properties
- Alle kleuren, maten en fonts staan één keer in
:root; componenten verwijzen alleen naar variabelen, nooit naar hex-waarden. - Eén licht thema; er is geen donkere modus.
--durwordt 0 s bijprefers-reduced-motion; er zijn geen animaties, alleen kleurovergangen.- Geen externe libraries; alleen Google Fonts met
display=swapen volledige systeemfallbacks.
Componenten 1:1
De klassen op deze pagina zijn de klassen van de site: .btn (met .secondary, .tertiary, .phone, .small), .c-card, .badge, .trust, .price, .form/.field/.input/.error-msg/.alert, .nav/.sub/.sheet, .c-footer, plus de tabelstijl die onder 720 px stapelt. De JavaScript voor dropdown, sheet en formulier is vanilla en staat onderaan deze pagina; het prototype neemt hem ongewijzigd over.
CMS-blokken (optie 3, JustFlows)
Elke pagina is een stapel blokken met vaste velden. Zo kan het kantoor teksten en artikelen bijhouden zonder de stijl te breken.
| Blok | Component | Velden |
|---|---|---|
| Hero | H1 + intro + primaire knop | titel, intro, knoptekst, knopdoel |
| Trust-bar | .trust | lijst van feiten (tekst) |
| Rechtsgebieden | .cards + .c-card | selectie van rechtsgebied-pagina's; kaart leest titel en eerste alinea |
| Artikelen | .cards.two-up + .c-card | aantal, filter op thema-tag |
| Tekst | koppen, alinea's, lijsten, tabellen | rich text (H2–H4, geen H1) |
| Juridische tekst | Tekst met inhoudsopgave | titel, datum, rich text, integraal |
| Contact | telefoonknop, e-mail, adres, optioneel .form | nummers, e-mail, adres, formulier aan/uit |
| Prijstabel | .price-grid | producten (naam, prijs, kenmerken); nu leeg |
Waarom blokken en geen vrije opmaak: het contrast en de tikdoelen zijn per component doorgerekend; een vrije editor zou dat binnen een maand ongedaan maken.