# Design Book — SportBit manager (www.sportbitmanager.nl + clubportaal *.sportbitapp.nl)

*Opgesteld 2026-09-04 door MagicEverse op basis van de live marketingsite (WordPress, eigen thema "wordpress-sportbit" op Bulma) en het ledenwebportaal van een club (Angular 17+ / Angular Material). Bedoeld als briefing voor Claude Design en Claude Code: fonts, kleuren, componenten en tone of voice, zodat een mock van een agentic tool "in de wereld van SportBit" past, of juist bewust ernaast.*

Assets in `assets/` (logo-svg, favicons, Roboto-woff2, product-visual). Machine-leesbare tokens: `design-tokens.json`. Screenshots in `_screenshots/`. Ruwe CSS in `_raw/`. Functioneel design van het platform: `../sportbit-fd/FD_SportBit_manager.docx`.

---

## 1. Twee gezichten: merk en product

SportBit heeft twee visuele lagen die je uit elkaar moet houden:

| Laag | Waar | Karakter |
|---|---|---|
| **Merk SportBit manager** | sportbitmanager.nl, salesmateriaal, demo's | Donker, sportief, energiek: zwart/antraciet met limoengroen accent, schuine sneden, cursieve vette koppen, foto's van trainende mensen. |
| **Product (backoffice, webportaal, app)** | `<club>.sportbitapp.nl`, SportBit-app, branded apps | Neutraal Material-Design-canvas dat de **huisstijl van de club** aanneemt: club-logo, club-primaire kleur, club-foto als achtergrond. SportBit is hier bijna onzichtbaar (alleen "© 2013–2026 | SportBit manager" in de voet). |

Voor een agent die *namens de club* met leden praat is dus niet SportBit-groen maar de **club-kleur + club-logo** leidend (bij Back2thegym: rood/zwart, zie `../DESIGN-BOOK.md`). SportBit-groen gebruik je alleen als je een tool aan SportBit zelf of aan sportondernemers presenteert.

## 2. Logo en beeldmerk (merk)

| Bestand | Gebruik |
|---|---|
| `assets/logo/sportbit-logo.svg` (viewBox 459×153) | Woordmerk **"SportBit"** in vet cursief wit met daaronder kleiner cursief "manager"; rechtsboven een **bliksemschicht** in groen `#9FC546`. Bedoeld voor donkere achtergrond (header, footer, cookiebalk-variant is de donkere tegenhanger). |
| `assets/favicon/cropped-favicon-512-*.png`, `apple-touch-icon.png` | Beeldmerk = de bliksemschicht (groen op zwart), 32/180/192 px. |
| `assets/favicon/portal-favicon.png/.ico` | Favicon van het webportaal (SportBit-icoon, klein). |

Regels: woordmerk altijd cursief, altijd op donker (zwart `#000`/`#040e0f`) of op wit in de zwarte variant; schicht altijd groen. Hoogte in de header ± 55 px, in de footer ± 40 px. De schicht mag los als icoon (favicon, app-tegel).

## 3. Kleuren

**Merk (sportbitmanager.nl)**

| Token | Hex | Rol |
|---|---|---|
| `primary` / `groen` | **#a3cd24** | Limoengroen. CTA-knoppen ("Gratis demo", "Probeer nu gratis"), accentwoorden in koppen (*sportieve*, *lesrooster*, *elke fase*), vinkjes, iconen in de USP-balk, hover van menu-items, groene diagonaal onder de hero. |
| `groen-logo` | #9fc546 | Iets gedempter groen in de logo-schicht. |
| `paars` | **#8900ff** | Paars, alleen voor de "Gratis demo"-knop in de hoofdnavigatie en actieve prijstab. Het tweede accent; spaarzaam. |
| `zwart` | #000000 | Topbalk, footer, prijzensectie-achtergrond. |
| `antraciet` / `sectie__groen` | **#040e0f** | Bijna-zwart met groenzweem; hero-achtergrond (over de foto), donkere secties. |
| `zwart-accent` | #222222 / #383838 | Tussentinten in donkere secties en de prijzen-gradient. |
| `ink` | #363636 | Koppen op licht (Bulma `.title`). |
| `text` | #4a4a4a | Bodytekst op licht. |
| `heading-dark` | #0a0a0a | Navigatie-links op licht, witte knoppen-tekst. |
| `grijs-licht` | #f2f2f2 / #ededed / #ebebeb | Lichte panelen, ronde icoon-cirkels achter de functie-iconen, tabs. |
| `wit` | #ffffff | Tekst op donker, kaarten (prijzen), lichte secties. |
| `overlay` | rgba(0,0,0,.6–.7) | Donkere laag over hero-foto/-video. |

Verhouding: **zwart/antraciet dominant, groen als accent (± 10 %), paars als één enkel signaal, veel wit in de midden-secties.** Het thema draait op Bulma; Bulma-standaardkleuren (#485fc7 blauw, #00d1b2 turquoise, #f14668 roze) komen wel in de CSS voor maar worden op de site niet gebruikt: negeren.

**Product (webportaal, standaard)**

| Token | Hex | Rol |
|---|---|---|
| `--primary-color` | **#33576d** (standaard) — per club overschreven | Knoppen `.btn__primary`, header-onderrand (0.5 rem), actieve tabs, kalenderdagen. Back2thegym gebruikt hier **rood (#f44336-achtig) met zwarte knoppen**. |
| `--secondary-color` | #464646 | Secundaire knoppen/tekst. |
| `--neutral-color` | #f3f3f3 | Panelen (login-kader, "Nog geen lid?"-paneel). |
| `--green-color` | #bcd500 | Succes/positief (aanwezig, betaald). |
| `--red-color` | #ac0000 | Fout/negatief, "Wachtwoord vergeten?"-link. |
| `--grey-color` | #999 | Placeholder, secundaire labels. |
| `--mat-app-background-color` | #fafafa | App-canvas. |
| tekst | rgba(0,0,0,.87) / .54 | Material-standaard voor primaire/secundaire tekst. |

## 4. Typografie

**Merk**

| Rol | Font | Bron | Kenmerken |
|---|---|---|---|
| Koppen (h1, h2, sectietitels, prijstitels) | **Roboto** 700–800 **italic** | zelf gehost, `assets/font/roboto-v48-latin-*.woff2` (100–700, ook italic) | Alle koppen zijn **vet én cursief**; één of twee woorden in de kop krijgen groen (`<span class="has-text-primary">`). h1 hero ± 48 px, sectie-h2 ± 32–36 px, prijstitel 28 px cursief. |
| Body | Roboto 400 | idem | 16 px, #4a4a4a op licht / #fff op donker, regelafstand 1.5. |
| Navigatie | Roboto 500–600 italic | idem | Menu-items zijn cursief, 16 px, wit op donker; actieve/hover groen. |
| Knoppen | Roboto 600–700, **uppercase** | idem | 14–15 px, letter-spacing licht, `border-radius: .25rem`. |
| Labels/kickers | Roboto 600 uppercase | idem | Kleine grijze kicker boven een kop ("PLANNING"), letter-spacing .1em. |
| Iconen | Font Awesome 6 Pro (light/regular/solid) | thema | Lijn-iconen in cirkels (functie-tegels), vinkjes, telefoon/mail. |

**Product**

| Rol | Font | Kenmerken |
|---|---|---|
| Alles | Roboto (Google Fonts, 100–900 + italic) met systeem-fallback | h1 2.75 rem/600, h2 2.25 rem/600 #363636, body 1 rem/400, labels .875 rem. Geen cursief; rustig Material-ritme. Material Icons voor iconen. |

**Voor Claude Design:** Roboto staat op Google Fonts; gebruik `700 italic` voor merkkoppen en `600` regular voor productkoppen. Bulma-schaal: .75 / .875 / 1 / 1.125 / 1.25 / 1.5 / 2 / 2.5 / 3 rem.

## 5. Layout en componenten — merk (sportbitmanager.nl)

**Grid en ritme**
- Bulma-container (max 1344 px, effectief ± 1150 px content), 12-koloms, kolomgap .75 rem.
- Secties wisselen **donker → wit → donker → wit → groen-verloop → wit → zwart** (hero, functie-iconen, "Meer dan krachtige software", referenties/onboarding, "Waarom SportBit", groene CTA-strook, team+footer).
- **Diagonale scheidingen**: `clip-path: polygon(...)` van ± 4° onder donkere secties, met een **groene schuine strook** (`diagonale-scheiding--groen`) onder de hero. Dit is hét herkenbare SportBit-element. Verder gestippelde gebogen lijnen ("route") als decoratie tussen blokken.

**Topbalk (USP-bar)**
- 44 px zwart: links "Jouw sportieve **software** partner" (groen woord), midden drie groene vinkjes + USP's (Nederlandse support · Vaste tarieven · Gratis en soepel overstappen!), rechts "Direct contact" + telefoon, drie ronde social-iconen (groen mail, roze Instagram, blauw Facebook).

**Header**
- Antraciet/transparant over de hero, 110 px: logo links, rechts cursieve witte menu-items (Functies · Voor wie · Prijzen · Referenties · Over ons · **Gratis demo** [paarse blokknop] · Contact). Sticky. Op mobiel: logo + hamburger, menu als volledig scherm.

**Hero**
- Volle breedte, foto of video (`hero-video`) met donkere overlay; links h1 wit cursief vet met groen accentwoord, subtekst 18 px wit, groene uppercase knop ("DEMO AANVRAAG"); rechts productvisual (laptop + telefoon met backoffice/app). Onderrand: groene diagonale strook.

**Knoppen**
- Primair: groen vlak `#a3cd24`, tekst zwart/wit, uppercase 600, radius .25 rem, padding .75×1.5 rem; hover iets donkerder groen.
- Secundair op donker: witte outline 2 px ("Ik heb meer dan 100 leden"), of zwart vlak met witte tekst ("Meer informatie" Lite). Op licht: zwarte outline.
- Signaal: paars `#8900ff` (menu "Gratis demo"; hover volle kleur, standaard 75 % opaque).
- Chips: rood "NIEUW"/"VANAF" badge (klein, wit op rood), grijze ronde "?"-tooltip.

**Functie-tegels**
- Acht iconen in lichtgrijze cirkels (Ø 90 px) met label eronder, in 5+3 grid, gecentreerd, elk klikbaar naar `/functies/...`.

**Prijskaarten**
- Drie witte kaarten op zwarte gradient-achtergrond; middelste (Basic) iets groter en uitgelicht; titel cursief (Lite zwart, Basic groen, Pro donkerblauwgrijs #1f4e5f-achtig), prijs 48 px, "VANAF"-badge, knop, lijst met groene vinkjes en "?"-tooltips. Boven de kaarten twee pill-toggles (<100 / >100 leden). Daaronder twee schuine kaarten "Branded app" / "Multi-business" met gevouwen hoek.

**Referenties**
- Grijze band met klantlogo's (zwart-wit), quote-blokken met portretfoto en naam/functie, video-thumbnails met play-knop in een carrousel (Slick).

**CTA-strook**
- Groen naar wit verloop met schuine bovenrand, kop cursief, e-mailveld + groene knop "Probeer 30 dagen".

**Footer**
- Wit teamblok (foto van vier medewerkers in zwarte shirts, telefoon sales/support) → zwarte footer met drie linkkolommen (Functies / Voor wie / SportBit manager), App Store & Google Play-badges, socials, "© 2010 – 2026 SportBit manager", "Klantreview: SportBit manager scoort een 8.3".

**Cookiebot**-balk (Usercentrics) onderaan met groene "Alles toestaan".

## 6. Layout en componenten — product (webportaal)

- **Canvas:** volledig-scherm club-foto (donker gefilterd) met daarop witte kaarten, Material-schaduw niveau 2–4, radius .25 rem. Op mobiel één kolom, kaart vult de breedte.
- **Login-kaart:** club-logo rond (Ø 110 px) + clubnaam vet + "Ledenwebportaal" grijs; vlagdropdown (NL/EN/DE); grijs formulierpaneel `#f3f3f3` met icoon-inputs (persoon, slot, oog), checkbox "Inlog onthouden", brede knop (club-kleur of grijs disabled), link "Wachtwoord vergeten?" in rood.
- **Zijpaneel "Nog geen lid?":** drie blokken met h2 32 px vet, tekst, zwarte knop: **Lid worden / Plan jouw proefles / Reserveer jouw drop-in**. Dit zijn de drie publieke instroomflows (registreren, proeflesplanner, dropinplanner).
- **Proeflesplanner:** kaart met logo + "Proefles planner", h1 "Plan jouw proefles", select "Kies een les", maandnavigatie, **kalendergrid** waarin beschikbare dagen als volle blokken in de club-kleur staan (rood bij Back2thegym), verleden grijs. Stappenindicator (`stap-indicator__progress`) voor kies-les → gegevens → bevestiging.
- **Header ingelogd (uit CSS):** wit, 100 px, logo links (max 384 px), account/acties rechts, **onderrand 0.5 rem in club-kleur**; tabs (`.sbmtabs`, Material MDC tabs) voor bijv. Groepslessen / Workout programma; kalender met week- en lijstweergave.
- **Knoppen:** `.btn` padding .75×1 rem, radius .25 rem; `.btn__primary` club-kleur met witte tekst. Badges Material (rood #f44336 voor meldingen).
- **Voet:** "ℹ Over <club>" + "© 2013 – 2026 | SportBit manager".

## 7. Beeld en iconografie

- Fotografie: echte trainingssituaties (boksen, groepsles, CrossFit), donker gegradeerd, mensen in beweging; geen stockglans. Productvisuals: laptop/tablet/telefoon-mockups met backoffice-schermen (donkere tabelkoppen, groen/blauwe cellen in het weekpatroon).
- Iconen: Font Awesome light in cirkels (merk), Material Icons (product). Decoratie: gestippelde gebogen lijnen, diagonale sneden, "route"-illustratie met genummerde stappen (onboarding).
- Illustratiestijl backoffice-snippets: witte kaarten met grijze koppen ("Roosterbezetting", "Bijzondere deelnemers"), cijfers in blauw/oranje, pijltjes.

## 8. Tone of voice

- **Aanspreekvorm:** je/jij, direct, enthousiast maar zakelijk. "Jouw sportieve business partner", "Speel jezelf tijd vrij", "Maak van maandelijkse betalingen een klein feestje".
- **Frames:** *tijd besparen* (85 % op administratie, "max 3 uur per week"), *businesspartner* i.p.v. leverancier, *Nederlandse support*, *community en retentie* ("de achterdeur dicht houden"), *groei op cijfers, niet op gevoel*.
- **Woordkeus:** gym/club/studio, leden, coaches/trainers, lessen, rittenkaart, proefles, drop-in, backoffice, clubapp, community wall, risicoleden, no-shows.
- **Vorm:** korte alinea's, veel bullets met vinkjes, koppen met één groen kernwoord, CTA's als imperatief ("Plan een demo", "Probeer 30 dagen").

## 9. Gebruik voor een agentic tool (Magic Agent)

- **Naar leden (namens de club):** club-huisstijl uit het portaal overnemen (logo, primaire kleur, foto), Roboto regular, Material-achtige kaarten; SportBit-groen vermijden. Ledentaal van SportBit hergebruiken (les, credits, rittenkaart, proefles, drop-in, wachtlijst) zodat de agent dezelfde begrippen gebruikt als de app.
- **Naar sportondernemers (verkoop aan SportBit-clubs):** SportBit-idioom mag als referentie: donker canvas, groen accent, cursieve koppen, vinkjes-lijsten; maar met MagicEverse-identiteit (magenta) als afzender.
- **Naar SportBit zelf (partnerpitch):** volledig in SportBit-stijl mocken (zie tokens), met hun eigen roadmap-termen ("Rapportages en Signalering Dashboard", "Retentie & Proefles conversie", "Herinneringen via WhatsApp of sms").

## 10. Bronnen

- `_raw/site_1.css` (wpo-minify header-bundel, 454 KB, Bulma + thema), `_raw/site_inline.css`, `_raw/portal.css` (styles-NFT6JS63.css, Angular Material), `_raw/css_links.txt`.
- Screenshots: `sbm_home_desktop.png`, `sbm_home_full.png`, `sbm_mobile.png`, `sbm_prijzen.png`, `sbm_planning.png`, `portal_b2tg_login.png`, `portal_b2tg_registreren.png`, `portal_b2tg_proeflesplanner.png`, `portal_b2tg_mobile.png` (headless Chrome 1366×N / 390×N, 2026-09-04).
- Niet gezien: ingelogde backoffice en app-schermen (alleen via demo-omgeving); die kleuren/tabellen zijn afgeleid van de productvisuals op de site.