# Design Book — Back2thegym (www.back2thegym.nl)

*Opgesteld 2026-09-04 door MagicEverse op basis van de live site (WordPress/Flatsome, versie okt 2024). Bedoeld als briefing voor Claude Design en Claude Code: fonts, kleuren, componenten en tone of voice, zodat een mock direct "als Back2thegym" voelt.*

Assets staan in `assets/` (logo, favicon, hero-video, foto's, partnerlogo's, het Kimberley-font). Machine-leesbare tokens: `design-tokens.json`.

---

## 1. Wie is Back2thegym

- **Sportschool in Breda** (Franse Akker 21A, 4824 AL). Groepslessen voor jong én oud: kickboksen, funboksen, boksen, cardio-kickboksen, Funboks-HIIT, HYROX, Shape your BBB, personal training, kids-lessen (4-7, 8-12, 13-17 jaar), workshops, bedrijfsfitness.
- **Belofte:** "Train hard, feel good!" — samen fitter worden én je thuis voelen. Laagdrempelig, familiair, geen bodybuilder-gym maar een vechtsport-/fitnessschool met sfeer.
- **Conversiedoel van de site:** gratis proefles boeken en inschrijven (beide lopen via Sportbit, de ledenadministratie/app). De site is dus een marketingsite; alle transacties zitten in de app.
- **Doelgroepen op de homepage, in deze volgorde:** volwassenen (6 tegels) → "Jonge Helden" kids/jeugd (6 tegels) → personal training → bedrijfsfitness/partners.

## 2. Logo en beeldmerk

| Bestand | Gebruik |
|---|---|
| `assets/logo/back-2-the-gym-breda.png` (606×166) | Standaard woordmerk op licht: "Back **2** the gym" in dikke afgeronde zwarte letters, de rode **2** in een zwarte cirkel. |
| `assets/logo/B2TG-Logo-white.svg` | Witte variant voor donkere achtergronden; wordt in de transparante header over de hero gebruikt (beeldmerk erboven, woordmerk eronder, gestapeld). |
| `assets/favicon/B2TG-favicon-zwart-512.png` | Beeldmerk: twee gestileerde vechtsporters, één rood, één zwart, in een trap/hoge-schop-pose. Ook als favicon/app-icoon. |

Regels: het beeldmerk staat altijd rood + zwart (of rood + wit op donker). Het woordmerk nooit in kleur behalve de "2". Minimale hoogte in de header ± 60 px; gestapeld (beeldmerk boven woordmerk) in de site-header, horizontaal in de footer en op print.

## 3. Kleuren

| Token | Hex | Rol |
|---|---|---|
| `primary` | **#f50a0a** | Het rood. CTA-knoppen, actieve nav-onderlijn, hamburger, accenten, de "2" in het logo. |
| `primary-dark` | #b20000 | Donkerder rood (Flatsome "alert"), hover op knoppen. |
| `link-hover` | #7d0101 | Bordeaux — link-hover, donkerste rode tint. |
| `tile-overlay` | rgb(191,0,0) ≈ #bf0000 | Rode kleurlaag over de foto's in de les-tegels (multiply/overlay). |
| `secondary` / `black` | #000000 | Zwarte secties, footer, html-achtergrond, woordmerk. |
| `ink` | #191919 | Bodytekst. |
| `heading` | #0a0a0a | Koppen op licht. |
| `white` | #ffffff | Tekst op donker, kaarten, hero-koppen. |
| `surface` | #f1f1f1 | Lichtgrijze balk (header-bottom), lichte achtergrondvlakken. |
| `grey` | #313131 | Grijze tussentint, iconen. |
| `success` | #7a9c59 | Groene vinkjes (tarieven-USP's). |
| `whatsapp` | #25d366 | Zwevende WhatsApp-knop rechtsonder. |

Verhouding: **zwart en foto dominant, rood als accent, wit voor tekst.** Geen pastel, geen gradient, geen blauw. Het rood mag hard zijn (het is bijna puur rood), maar altijd op zwart/wit, nooit op foto zonder donkere overlay.

## 4. Typografie

| Rol | Font | Bron | Kenmerken |
|---|---|---|---|
| Koppen (h1, h2, tegels, footer-titels) | **Kimberley** (Typodermic) | `assets/font/Kimberley.woff2` (geüpload via Use Any Font) | Vierkant techno/display-font, één gewicht (400), **altijd hoofdletters**, wit op donker of #0a0a0a op licht. Geeft de "fight gym"-uitstraling. |
| Body, nav, knoppen | **Systeem-sans** (`'Segoe UI', Tahoma, Geneva, Verdana, sans-serif`) | geen webfont (Flatsome body = inherit) | Body 16 px, #191919, regelafstand ± 1,6. Nav en knoppen **bold + uppercase + letter-spacing**. |
| Accent (`.alt-font`) | Dancing Script | Google Font, lokaal gehost | Handgeschreven script, in de huidige site nauwelijks zichtbaar. Alleen inzetten voor één woord als contrast ("feel good"), niet voor lopende tekst. |

Groottes (WP-presets): small 13 · normal 16 · medium 20 · large 36 · huge 42 px. De hero-h1 is ± 42-48 px Kimberley, de subregel 20-22 px bold in de systeemfont.

**Voor Claude Design:** Kimberley is niet op Google Fonts; laad hem als `@font-face` uit `assets/font/Kimberley.woff2`. Als dat niet kan: de dichtstbijzijnde vrije alternatieven zijn *Orbitron* (te futuristisch) of *Saira Extra Condensed 700* (dichter bij de sportsfeer). Body mag *Inter* of *Roboto* zijn; de site zelf gebruikt de systeemfont.

## 5. Layout en componenten

**Grid en ritme**
- Container ± 1080 px, secties full-width met veel verticale ruimte (80-120 px).
- **Afwisseling licht/donker:** hero (donker, video) → wit (intro + foto) → zwart (les-tegels) → wit (kids-tegels) → wit (PT) → zwart (reviews + partners) → zwart footer.
- **Schuine sectie-overgangen** (diagonale divider onder de hero en tussen zwarte/witte blokken) — dit is een herkenbaar Back2thegym-element. Hou die schuine snede (± 4°) in de mock.

**Header**
- Transparant over de hero, 94 px hoog, wordt sticky en 70 px bij scrollen (witte achtergrond 90 % opaque).
- Nav: uppercase, bold, wit op de hero, zwart op licht; actieve pagina krijgt een **rode onderlijn**. Dropdowns bij "Sporten" en "PT".
- Rechts: rode blok-knop **PROEFLES** + zoek-icoon. Op mobiel: rode ronde hamburger links, gestapeld logo in het midden, zoek rechts.

**Hero**
- Full-height, **video-achtergrond** (`assets/hero/Website_Horizontal_V2_final_lr.mp4`, autoplay/muted/loop) met donkere overlay (rgba(0,0,0,.5)).
- Gecentreerd: h1 Kimberley wit uppercase → subregel bold wit → twee knoppen: **outline wit** ("ONZE LESSEN") + **rood gevuld** ("BOEK NU EEN PROEFLES! ›").

**Knoppen**
- Rechthoekig, **geen** of minimale radius (Flatsome default 0; her en der 12 px). Uppercase, bold, letter-spacing 0,05 em, padding 14×28.
- Primair: rood vlak, witte tekst. Secundair: witte outline op donker / zwarte outline op licht. Hover: donkerder rood (#b20000).
- Pijl-icoon "›" rechts in de belangrijkste CTA.

**Les-tegels**
- 3-koloms grid (2 op tablet, 1 op mobiel), vierkant-achtig, foto met **rode overlay** en de lesnaam in Kimberley wit uppercase gecentreerd. Hover: overlay lichter, foto zichtbaar. Klikbaar naar de lespagina.
- Zes tegels per doelgroep-blok; laatste tegel is "MEER VOOR VOLWASSENEN" / "WORKSHOPS".

**Content-blokken**
- Tekst links (h2 Kimberley, alinea, rode knop) + foto rechts met afgeronde hoeken (± 12 px). Wisselend links/rechts.
- USP-lijstjes met groene vink-cirkels (tarieven, proefles).
- Tarieven: drie kolommen (FIT / FIT+ / FIT PRO) met rode kolomkoppen, prijs per maand, looptijd als onderscheid.

**Social proof**
- Google-reviews carrousel (Trustindex): witte kaarten, sterren, naam, korte quote. Op zwart.
- Partner-logo slider (Bedrijfsfitness abonnement, Bedrijfsfitness Nederland, Go-Vital, Jeugdfonds Sport & Cultuur) onder de kop "WIJ WERKEN SAMEN MET DE VOLGENDE ORGANISATIES:".

**Footer**
- Zwart, vier kolommen: Proefles (tekst + rode knop AANMELDEN), Volg ons via socials (ronde outline-iconen Facebook/Instagram), Download de app! (Google Play / App Store), Contact (adres + knoppen ROUTE, telefoon, e-mail).
- Onderbalk: Algemene voorwaarden · Privacy · Huisregels (rood) en "Back2thegym 2026 ©".
- Zwevende groene **WhatsApp-knop** rechtsonder op elke pagina.

## 6. Beeldtaal

- **Eigen foto's uit de zaal**: rode matten, zwarte muren, bokszakken, handschoenen, échte leden en trainers (geen stock). Veel actie en oogcontact; kinderen prominent.
- Kleurtemperatuur: koel/donker met het rood van de matten en handschoenen als natuurlijk accent — de fotografie draagt het kleurenpalet al.
- Hero altijd **beweging** (video of actiefoto), nooit een lege zaal.
- Pagina-headers: full-width foto met donkere overlay + paginatitel in Kimberley wit, schuin afgesneden onderkant.
- Iconen: eenvoudige lijn-iconen als SVG (`assets/images/gloves.svg`, `cardio.svg`, `kids.svg`, `arm-muscle.svg`) voor de vier categorieën (Kick)Boksen · Cardio & Kracht · Kids · Maatwerk.
- Formaat: foto's landscape 3:2 voor content, portrait 3:4 voor kids/PT-blokken, tegels ± 1:1.

## 7. Tone of voice

- **Je/jij**, informeel, energiek, veel uitroeptekens: "Schrijf je nu in!", "Boek nu een proefles!", "Kom langs en ontdek de leukste sportschool van Breda!"
- Korte zinnen, actiewoorden vooraan. Engelse kreten voor de energie ("Train hard, feel good!", "HYROX", "Shape your BBB") maar de rest Nederlands.
- Inclusief en geruststellend: "voor alle leeftijden en op ieder niveau", "iedereen sport met respect voor elkaar", gratis proefles, handschoenen te leen.
- Kids-sectie speels: "Sporten voor Jonge Helden", "Sterk & Stoer".
- Geen vakjargon, geen prijsdruk; flexibiliteit als argument ("kies zelf wanneer en welke sport", "gemist? inhalen kan").

## 8. Do's & don'ts voor de mock

**Do**
- Zwart + rood + wit, foto's dragen de sfeer. Koppen in Kimberley uppercase.
- Schuine sectie-overgangen en de afwisseling donker/licht behouden.
- Eén duidelijke primaire CTA per scherm: **proefles**. Inschrijven is de tweede.
- WhatsApp-knop en app-download houden — dat zijn de echte kanalen.
- Mobile first: 60 %+ van dit publiek komt via telefoon; hamburger links, logo midden.

**Don't**
- Geen pastel, gradients, blauw of paars. Geen afgeronde pill-knoppen.
- Geen stockfoto's van glimmende fitnessmodellen; het merk is een échte zaal in Breda.
- Kimberley niet in lopende tekst en niet in kleine letters.
- Geen webshop-look: producten (handschoenen, shirts) mogen, maar als verlengstuk van de zaal, niet als e-commerce-catalogus.