Merkgids Tennis-voordeel
“Tennis hoeft geen dure hobby te zijn: bekende merken, voordelig geprijsd, met een winkel en een klantenservice die je kunt bellen.”
Gemaakt met Brandyzr voor Tennis-voordeel, gepubliceerd met akkoord van de klant.
Tennis hoeft geen dure hobby te zijn.
Een tennisspeciaalzaak die op prijs wint
Tennis-voordeel verkoopt online tennisballen, rackets, snaren, tassen, grips, accessoires, schoenen en padelspullen van de bekende merken, met een winkel en een klantenservice die je kunt bellen. De belofte staat op elke pagina: voordelig, zonder in te leveren op merk of advies. Deze gids legt vast hoe dat eruitziet. Tennis-voordeel koos op 16 oktober 2026 voor variant B · Prijsbord; A en C zijn uitgewerkt als alternatief.
Tennis hoeft geen dure hobby te zijn: bekende merken, voordelig geprijsd, met een winkel en een klantenservice die je kunt bellen.
Nuchter, voordelig en behulpzaam. Geel als groot vlak, zwarte letters, alles haaks: een prijsbord in een sportwinkel.
“Wij bewijzen dat tennis geen dure hobby hoeft te zijn.”Homepage, intro
“Niet tevreden? Geen probleem. Je hebt 30 dagen bedenktijd.”Homepage, USP-blok
“Wij verzenden gratis vanaf € 50 via PostNL. Gewoon bij jou thuis.”Homepage, USP-blok
Prijsbord
Geel wordt het grote vlak: de hero, prijsstickers en banden. Zwart is de tekst én de actie. Alles staat haaks, met een harde schaduw zoals een opgeplakt bordje. Montserrat in 900 en kapitalen voor koppen. Navy verdwijnt.
- Maakt de naam letterlijk: "voordeel" springt van elke pagina af, zoals een prijsbord in een sportwinkel.
- Het gele vlak is het herkenbaarste wat het merk heeft; groot ingezet valt het direct op.
- Het risico: geel als vlak is luid en vraagt discipline. Eén geel vlak per scherm, anders wordt het schreeuwerig.
- Het breekt met de huidige site (navy weg, haaks in plaats van 5 px hoeken). Dat is een grotere stap voor bestaande klanten.
Alles hieronder schakelt mee met de variantkiezer bovenaan: kleuren, letters, hoeken, knoppen, iconen, het logo op de merkkleur en het live voorbeeld.
Zwart woord, gele bal, nooit anders getekend
Het logo blijft zoals het is: TENNIS VOORDEEL in een zware schreefloze letter over twee regels, met de gele tennisbal vóór de tweede regel. Wat per variant verandert is de ondergrond. Hieronder het origineel (Tennisvoordeel_Logo_RGB-1.png, 800 × 222 px), op vier ondergronden.
Rondom minimaal de hoogte van de bal (≈ 45% van de logohoogte). Daarbinnen geen tekst, rand of foto-onderwerp.
Scherm: minimaal 24 px hoog (header 34–40 px). Print: 10 mm. Kleiner: alleen de bal als favicon of avatar.
Zwart woord op licht, wit woord op donker; de bal blijft geel zolang de ondergrond niet geel is. Op geel en op de merkkleur: het hele logo in één kleur.
De bal vervangen door een andere bal of icoon, het woord op één regel zetten, uitrekken, een schaduw of omlijning toevoegen, of het geel tegen geel zetten.
Het logo is alleen als PNG gevonden (header, 800 × 222 px; favicon 50 × 50 px). Voor drukwerk en scherpe weergave op grote schermen is een vectorbestand (SVG/PDF) van de ontwerper nodig.
Elke kleur een rol, elke combinatie getoetst
De kleuren komen uit het logo (zwart #000000, geel #FFCB0A) en uit de Elementor-kit van de huidige site (navy #003462, zwart #0A0A0A, cyaan #00AEEF/#078DBF, diepblauw #132A36/#183544, grijs #ECF0F0/#F7F7F7). Elke swatch noemt het veld van de theme-global waarin hij landt.
48% wit · 27% geel · 22% zwart · 3% grijs
#FFCB0A tegen wit: 1,52:1 (AA vraagt 4,5:1). Met zwarte tekst erop: 13,01:1. De dichtstbijzijnde AA-variant op dezelfde tint (OKLCH hue 90) is #8C6F00 (4,8:1 op wit), maar die oogt als oker, niet als tennisbal. Daarom: geel is in alle drie de varianten een vlak met donkere tekst of een accent op donker, nooit tekst op wit en nooit een knop met witte tekst. Zacht geel voor achtergronden: #F9F0D6.
Ook op de huidige site: de cyaan hover #078DBF met witte tekst haalt 3,77:1, #00AEEF 2,53:1. Navy #003462 met wit: 12,59:1.
Contrast per combinatie (WCAG 2.2 AA)
| Combinatie | Kleuren | Ratio | Oordeel |
|---|---|---|---|
| tekst op achtergrond | Aa #0a0a0a op #ffffff | 19,8:1 (min 4,5) | AA |
| tekst op vlak (surface) | Aa #0a0a0a op #fff7de | 18,49:1 (min 4,5) | AA |
| secundaire tekst op achtergrond | Aa #545454 op #ffffff | 7,57:1 (min 4,5) | AA |
| gedimde tekst op achtergrond | Aa #696969 op #ffffff | 5,49:1 (min 4,5) | AA |
| gedimde tekst op vlak | Aa #696969 op #fff7de | 5,13:1 (min 4,5) | AA |
| primaire knop | Aa #ffffff op #0a0a0a | 19,8:1 (min 4,5) | AA |
| primaire knop hover | Aa #ffffff op #333333 | 12,63:1 (min 4,5) | AA |
| secundaire knop | Aa #0a0a0a op #ffcb0a | 13,01:1 (min 4,5) | AA |
| secundaire knop hover | Aa #0a0a0a op #f0be08 | 11,38:1 (min 4,5) | AA |
| primary als link op achtergrond | Aa #0a0a0a op #ffffff | 19,8:1 (min 4,5) | AA |
| primary als link op vlak | Aa #0a0a0a op #fff7de | 18,49:1 (min 4,5) | AA |
| witte tekst op band | Aa #ffffff op #0a0a0a | 19,8:1 (min 4,5) | AA |
| primaryLight (accentwoord) op secondary | Aa #ffcb0a op #0a0a0a | 13,01:1 (min 4,5) | AA |
| primaryLight op band | Aa #ffcb0a op #0a0a0a | 13,01:1 (min 4,5) | AA |
| inkt op accentvlak (badge, sticker) | Aa #0a0a0a op #ffcb0a | 13,01:1 (min 4,5) | AA |
| danger-knop | Aa #ffffff op #d53d38 | 4,61:1 (min 4,5) | AA |
| success-knop | Aa #ffffff op #02873d | 4,63:1 (min 4,5) | AA |
| iconen (greyMid) op wit | Aa #767676 op #ffffff | 4,54:1 (min 3) | AA |
| .btn-accent (btnPrimaryText op accentColor) .btn-accent niet gebruiken: seed buttons[].style = primary | Aa #ffffff op #ffcb0a | 1,52:1 (min 4,5) | onder AA |
Status
Statuskleuren van het platform, gelijk in alle varianten: knop (wit erop) 4,6:1; badge-tekst in de donkere tint op de lichte tint. Beoordelingssterren (rating) in #9E6B06, niet in geel: geel haalt op wit ook de 3:1 voor grafische elementen niet.
Wat de site nu laadt, en wat blijft
De site laadt nu vier families via Elementor, lokaal gehost: Roboto (kit-standaard, 40 regels CSS), Poppins (koppen, menu en labels in 800 kapitalen, 29 regels; het label-type wordt 480 keer aangeroepen), Inter (2 regels) en Roboto Slab (1 regel). Advies: terug naar twee families. Inter en Roboto Slab vallen af.
Montserrat 900 · -0.035em · kapitalenTennis voor minder
Montserrat 900 · kapitalenOnze populairste producten
Montserrat 700Babolat Pure Drive Wimbledon 2026
Roboto 400Wij verzenden gratis vanaf € 50 via PostNL. Gewoon bij jou thuis.
Roboto 400Bij Tennis-voordeel kun je online terecht voor tennisballen, snaren, rackets, innovatieve trainerspullen, tassen, accessoires en tennisschoenen.
Montserrat 800 · kapitalenGratis verzending vanaf € 50
- Poppins (Indian Type Foundry), Montserrat, Manrope: SIL Open Font License 1.1
- Roboto (Google): SIL OFL 1.1 in de huidige Google Fonts-versie (eerder Apache 2.0)
- Alle vier staan in de fontpresets van sityzr; zelf hosten mag en is AVG-vriendelijker dan de Google-CDN
- Koppen in de display-letter, lopende tekst in de tekstletter; nooit een derde familie
- Labels en menu: 12 px, 800, kapitalen, ruim gespatieerd (zoals nu)
- Prijzen in de display-letter, oude prijs doorgestreept in grijs
De bal is het enige decoratieve element
De gele bal uit het logo is het herkenbaarste wat Tennis-voordeel heeft. Hij komt terug als markering: als teller, als prijssticker, als opsommingsteken en als sectiemarkering. Verder is het merk vlak. Eén à twee ballen per scherm; is alles geel, dan valt niets meer op.
Geel vlak, donkere cijfers (13,0:1 met zwart, 9,8:1 met diepblauw). Staat nu al zo op de site.
Rond, licht gedraaid, zwarte tekst. Alleen bij een echte korting.
- Gratis verzending vanaf € 50
- 30 dagen bedenktijd
- Bekende merken
De bal als bullet in USP-lijsten.
Tennissnaren
Onder een sectiekop, in primaryColor (theme: sectionDivider*).
Vlakke iconen in geel en inkt
Acht iconen voor de belangrijkste categorieën en beloften, vlak en afgerond, opgebouwd uit dezelfde ronde vorm als de bal. Altijd geel met de tekstkleur van de variant, op wit. Per onderwerp gekozen uit meerdere ontwerpen en daarna naar de tokens omgekleurd.
- 48–64 px in kaarten en USP-balken; voor kleine interface-iconen (24 px, lijn) gewoon de iconenset van het platform
- Geen tekst of cijfers in een icoon, geen schaduw, geen verloop
- Alleen de twee tokenkleuren plus wit; elke andere tint is een fout
Zo ziet de homepage eruit
Opgebouwd uit dezelfde tokens als de theme-global. Teksten komen van de huidige homepage; de kop is herschreven uit “Wij bewijzen dat tennis geen dure hobby hoeft te zijn.”
Tennis hoeft geen dure hobby te zijn.
Tennisballen, snaren, rackets, trainerspullen, tassen en schoenen van bekende merken. Gratis verzonden vanaf € 50.
Achtergrond
Ballen op een diagonale baan, rechts in beeld; links blijft ruimte voor tekst. Eén beeld (1536 × 768), per variant naar de eigen kleuren gezet. Geen stockfoto's van spelers: echte productfoto's van de leveranciers doen het werk.
Eén actiekleur per scherm
De regel: de primaire knop is de enige plek waar de actiekleur als vlak staat. Eén per scherm. Zo zie je daarna in de cijfers waar mensen klikken. Labels, sectiekoppen en iconen zijn nooit in de actiekleur.
.btn · .btn-primary · .btn-secondary · .btn-outline-neutral · .btn-ghost · .btn-outline-light · .btn-sm/.btn-lg
1,52:1 Niet gebruiken in deze variant. Seed elke conversieknop als primary.
In het platform krijgt .btn-accent de accentkleur als vlak en btnPrimaryText als tekstkleur. Bij geel accent en witte knoptekst is dat 1,5:1.
Alles haaks (0 px). Harde schaduw van 2 tot 8 px recht naar rechtsonder, in zwart: een opgeplakt bordje. Knoppen komen 2 px omhoog bij hover.
Banner, productkaart, nieuwsbrief
Profielbanner 1584 × 396 px (LinkedIn) of 1640 × 624 (Facebook, zelfde opbouw): logo en één belofte links, de ballen rechts.
Babolat Pure Drive Wimbledon 2026
Ontvang € 5 korting op je bestelling
Schrijf je in voor onze nieuwsbrief en ontvang direct € 5 korting op je bestelling.
Door je aan te melden ga je akkoord met e-mailmarketing.
Prijzen en teksten van de huidige site (snapshot 12 juli 2026). Productbeeld in de kaart is een icoon als plaatshouder; live staat daar de leveranciersfoto.
Zeg wat het voordeel is, in één zin
Afgeleid van wat de site nu zegt. De sterkste zinnen zijn kort, noemen het voordeel concreet en klinken als een winkelier die zijn klanten kent.
| Principe | Zo wel (van de site) | Zo niet |
|---|---|---|
| Voordeel concreet | “Wij verzenden gratis vanaf € 50 via PostNL.” | “Scherpe deals op een enorm assortiment!” |
| Kort en geruststellend | “Niet tevreden? Geen probleem. Je hebt 30 dagen bedenktijd.” | “Retourneren is mogelijk conform artikel 7 van onze algemene voorwaarden.” |
| Trots op de sport | “Ontdek de wereld van Novak Djokovic, Rafael Nadal en Roger Federer.” | “Ontketen je innerlijke kampioen.” |
| Persoonlijk, klein team | “Hulp nodig? Bel ons gerust” | “Neem contact op met onze klantenserviceafdeling via het formulier.” |
| Eén aanspreekvorm: je | “Je hebt 30 dagen bedenktijd.” | “Bij ons kunt u online terecht voor uw nieuwe tennisballen” |
- Merk en model bij naam: Babolat Pure Drive, Wilson Blade, Luxilon
- Prijzen in euro's met komma: € 214,90
- Eén belofte per zin, zonder uitroepteken
- Je-vorm, overal
- u en je door elkaar
- Kapitalen halverwege een woord
- Apostrof in meervoud (“tennisprofs”, niet “tennisprof's”)
- Tijdgebonden meldingen laten staan na de datum
Van gekozen variant naar live theme
De waarden hieronder zijn letterlijk de velden van de sityzr theme-global (151 velden, gevalideerd tegen het schema). De huidige site draait op WordPress; dit theme geldt voor de sityzr-omgeving. De migratie zelf valt buiten deze gids.
| theme-veld | waarde (variant B) | CSS-var die eruit rolt |
|---|---|---|
| primaryColor | #0a0a0a | --color-primary |
| primaryLight | #ffcb0a | --color-primary-light |
| primaryGlow | rgba(255, 203, 10, 0.28) | --color-primary-glow |
| primaryDark | #000000 | — (knophover, gradients) |
| secondaryColor | #0a0a0a | --color-secondary |
| secondaryLight | #262626 | --color-secondary-light |
| accentColor | #ffcb0a | --color-accent |
| backgroundColor | #ffffff | --color-background |
| surfaceColor | #fff7de | --color-surface |
| borderColor | #e2e2e2 | --color-border |
| greyLight | #f2f2f2 | --color-grey-light |
| greyMid | #767676 | --color-grey-mid |
| greyDark | #545454 | --color-grey-dark |
| textPrimary | #0a0a0a | --color-text-primary |
| textSecondary | #545454 | --color-text-secondary |
| textMuted | #696969 | --color-text-muted |
| headingFont | Montserrat, system-ui, sans-serif | --font-display · --font-heading |
| bodyFont | Roboto, system-ui, sans-serif | --font · --font-body |
| primaryGradient | linear-gradient(135deg, #0a0a0a 0%, #262626 100%) | --gradient-primary |
| secondaryGradient | linear-gradient(135deg, #0a0a0a 0%, #1f1f1f 100%) | --gradient-secondary |
| heroGradient | linear-gradient(180deg, #ffcb0a 0%, #ffcb0a 100%) | --gradient-hero |
| accentGradient | linear-gradient(135deg, #ffcb0a 0%, #ffdc7c 100%) | --gradient-accent |
| radiusSm | 0px | --r-sm |
| radiusMd | 0px | --r-md |
| radiusLg | 0px | --r-lg |
| radiusXl | 0px | --r-xl |
| btnBorderRadius | 0px | --btn-border-radius |
| btnPrimaryBg | #0a0a0a | --btn-primary-bg |
| btnPrimaryText | #ffffff | --btn-primary-text |
| btnPrimaryHoverBg | #333333 | --btn-primary-hover |
| btnSecondaryBg | #ffcb0a | --btn-secondary-bg |
| btnSecondaryText | #0a0a0a | --btn-secondary-text |
| designPreset | bold | data-design |
- Variant gekozen
Tennis-voordeel koos op 16 oktober 2026 voor B · Prijsbord. A en C zijn uitgewerkt als alternatief.
- Theme laden
De theme-global van de gekozen variant wordt in de sityzr-omgeving geladen: alleen de merkvelden, de indeling blijft. Daarna één keer opslaan in de theme-instellingen.
- Content seeden
Elke primaire conversie (in winkelwagen, afrekenen, aanmelden) als buttons[].style = 'primary', nooit 'accent' (geel met witte tekst). Eén per scherm. Daarna de acht categorieën uit het menu, de USP-balk (gratis verzending v.a. € 50, 30 dagen bedenktijd, trainershulpmiddelen) en de klantenservice in de footer.
Volledige theme-JSON van deze variant
{
"theme": {
"primaryColor": "#0a0a0a",
"primaryLight": "#ffcb0a",
"primaryGlow": "rgba(255, 203, 10, 0.28)",
"primaryDark": "#000000",
"secondaryColor": "#0a0a0a",
"secondaryLight": "#262626",
"accentColor": "#ffcb0a",
"backgroundColor": "#ffffff",
"surfaceColor": "#fff7de",
"borderColor": "#e2e2e2",
"greyLight": "#f2f2f2",
"greyMid": "#767676",
"greyDark": "#545454",
"textPrimary": "#0a0a0a",
"textSecondary": "#545454",
"textMuted": "#696969",
"bandBg": "#0a0a0a",
"labelBg": "#0a0a0a",
"cardSurface": "#ffffff",
"successColor": "#02873d",
"successLight": "#e4f8e7",
"successDark": "#024c20",
"warningColor": "#9e6b06",
"warningLight": "#feefdc",
"warningDark": "#5d3d00",
"errorColor": "#d53d38",
"errorLight": "#feeeeb",
"errorDark": "#8d020d",
"infoColor": "#0377cd",
"infoLight": "#e9f3fe",
"infoDark": "#004479",
"rating": "#9e6b06",
"pageBackground": "background",
"headingFont": "Montserrat, system-ui, sans-serif",
"bodyFont": "Roboto, system-ui, sans-serif",
"labelFontFamily": "heading",
"fontMono": "'JetBrains Mono', 'Courier New', monospace",
"heroSize": 64,
"displayTitleSize": 84,
"sectionSize": 40,
"cardTitleSize": 19,
"bodyLgSize": 18,
"bodySize": 16,
"smallSize": 14,
"labelSize": 12,
"microSize": 10,
"heroTitleSizeMin": 38,
"heroTitleSizeVw": 5,
"sectionTitleSizeSource": "typeScale",
"sectionTitleWeight": 900,
"sectionTitleLineHeight": 1.15,
"sectionTitleMarginBottom": 16,
"heroTitleLineHeight": 0.98,
"heroTitleLetterSpacing": "-0.035em",
"sectionTitleLetterSpacing": "-0.02em",
"sectionTitleSizeMin": 28,
"sectionTitleSizeVw": 3,
"pageTitleSizeMin": 32,
"pageTitleSizeVw": 4,
"bodyLineHeight": 1.6,
"headingLineHeight": 1.05,
"headingLetterSpacing": "-0.01em",
"sectionDividerWidth": 64,
"sectionDividerHeight": 8,
"sectionDividerRadius": 0,
"sectionDividerStyle": "solid",
"sectionDividerMarginBottom": 16,
"sectionLeadSize": 18,
"sectionLeadColor": "secondary",
"sectionLeadMaxWidth": 62,
"sectionLeadMarginBottom": 32,
"sectionLeadLineHeight": 1.55,
"heroLeadSize": 20,
"heroLeadColor": "secondary",
"heroLeadMaxWidth": 56,
"heroLeadMarginBottom": 32,
"heroLeadSizeMin": 17,
"heroLeadSizeVw": 1.4,
"btnFontWeight": 800,
"btnBorderRadius": "0px",
"btnBorderWidth": "2px",
"btnIconGap": 8,
"btnTransitionDuration": "0.18s",
"btnHoverTranslateY": "-2px",
"btnDisabledOpacity": 0.45,
"btnHoverEffect": "lift",
"btnFontFamily": "heading",
"btnLetterSpacing": "0.02em",
"btnLineHeight": 1.3,
"btnHeroShadow": "none",
"btnSmPaddingY": 6,
"btnSmPaddingX": 12,
"btnSmFontSize": 13,
"btnSmIconSize": 14,
"btnMdPaddingY": 10,
"btnMdPaddingX": 18,
"btnMdFontSize": 15,
"btnMdIconSize": 16,
"btnLgPaddingY": 13,
"btnLgPaddingX": 24,
"btnLgFontSize": 16,
"btnLgIconSize": 18,
"btnPrimaryBg": "#0a0a0a",
"btnPrimaryText": "#ffffff",
"btnPrimaryHoverBg": "#333333",
"btnSecondaryBg": "#ffcb0a",
"btnSecondaryText": "#0a0a0a",
"btnSecondaryHoverBg": "#f0be08",
"btnDangerBg": "#d53d38",
"btnDangerText": "#ffffff",
"btnDangerHoverBg": "#8d020d",
"btnSuccessBg": "#02873d",
"btnSuccessText": "#ffffff",
"btnSuccessHoverBg": "#024c20",
"primaryGradient": "linear-gradient(135deg, #0a0a0a 0%, #262626 100%)",
"secondaryGradient": "linear-gradient(135deg, #0a0a0a 0%, #1f1f1f 100%)",
"heroGradient": "linear-gradient(180deg, #ffcb0a 0%, #ffcb0a 100%)",
"accentGradient": "linear-gradient(135deg, #ffcb0a 0%, #ffdc7c 100%)",
"containerWidth": "xl",
"fontScale": "md",
"spacing": "md",
"sectionSpacingTight": "clamp(40px, 5vw, 64px)",
"sectionSpacingDefault": "clamp(64px, 8vw, 112px)",
"sectionSpacingLoose": "clamp(96px, 11vw, 160px)",
"containerMaxWidth": 1280,
"containerPadding": 24,
"containerPaddingMin": 16,
"containerPaddingVw": 4,
"compactGridWidth": 960,
"compactGridGap": 24,
"designPreset": "bold",
"enableAnimations": true,
"radiusSm": 0,
"radiusMd": 0,
"radiusLg": 0,
"radiusXl": 0,
"radiusFull": 9999,
"shadowSm": "2px 2px 0 rgba(10, 10, 10, 1)",
"shadowMd": "4px 4px 0 rgba(10, 10, 10, 1)",
"shadowLg": "6px 6px 0 rgba(10, 10, 10, 1)",
"shadowXl": "8px 8px 0 rgba(10, 10, 10, 1)",
"crumbSeparator": "slash",
"crumbFontSize": "sm",
"crumbItemGap": "default",
"crumbCurrentWeight": "medium",
"zDropdown": 100,
"zSticky": 200,
"zOverlay": 300,
"zModal": 400,
"zToast": 500,
"customCSS": ""
}
}| Onderdeel | Status |
|---|---|
| Kleur, typografie, vormtaal | Gekozen: variant B · Prijsbord (16-10-2026) |
| Iconen (8) | Eerste set |
| Achtergrond (3 kleurstellingen) | Eerste set |
| Logo als vector | Nog aan te leveren: alleen PNG beschikbaar |
Zo’n merkgids voor jouw merk?
Logo, kleur, typografie, iconen, beeld, interface en tone of voice in één gids, met tokens die je website direct kan gebruiken.