Erkende osteopaten op 3 locaties in Antwerpen en Vlaams-Brabant. Geen wachtlijst, geen verwijzing nodig. Direct terecht voor persoonlijke, holistische zorg.
Dit boek beschrijft hoe OsteosOnline eruitziet, klinkt en aanvoelt op osteosonline.be en osteosonline.nl. Eén design system. Twee markten. Geen WordPress meer — sinds 2026 een levend Next.js product met video, parallax, sticky-scroll storytelling. Het merk is niet meer een statische website. Het is een filmische ervaring met een operationele kern.
De homepage is geen lijst secties. Het is een ritme van floating cards — elk in een eigen oppervlak. Forest draagt foto en video. Mist draagt cijfers en rust. Wit draagt informatie. Elke sectie zweeft als rounded card binnen 10 px margin van de schermrand. Edge-to-edge bestaat hier niet.
Forest en mist secties leven binnen mx-1.5 md:mx-2 lg:mx-2.5 margin van de schermrand, met rounded-2xl hoeken. Witte secties (FAQ, doelgroepen) zijn edge-to-edge en zonder rounding. Dit is geen toevallig design-keuze — het IS de visuele grammatica. Floating panel = belangrijk / immersive. Edge-to-edge = informatie / functioneel.
Donker — licht — donker. De homepage gaat doorlopend op en neer tussen forest-panelen (met foto/video) en mist-panelen (met cijfers en rust). Dit ritme is wat de site filmisch laat aanvoelen. Twee mist-secties achter elkaar = saai. Twee forest-secties achter elkaar = zwaar. De afwisseling is de stijl.
OsteosOnline is een netwerk van erkende osteopaten. Drie praktijken in België (Antwerpen, Londerzeel, Reet), zeven in Nederland. Geen wachtlijst, geen verwijzing, geen drempel. Het merk staat voor toegankelijke vakkundigheid die filmisch gepresenteerd wordt: echte gezichten, echte verhalen, echte cijfers — geen stockfoto's en geen marketing-mist.
De homepage opent niet met een claim, hij opent met een mens: een video van een patiënt, of een testimonial-foto. Zo werkt het hele merk. Mensen voor methodes, gezichten voor beloften.
Geen statische marketing-site. Hero-video, sticky-scroll testimonials, animated counters, interactive video player. De site beweegt, en wat beweegt is altijd echte content.
NRO-geregistreerd. Drie locaties. Drie osteopaten. 26.495 succesvol behandelde klachten. De autoriteit komt uit het werk en de cijfers, niet uit superlatieven.
OsteosOnline schrijft zoals een goede huisarts spreekt op een rustig consult: zorgvuldig, geduldig, helder. We gebruiken de "u"-vorm in BE, "je" in NL — beide warm, geen van beide afstandelijk. Concrete cijfers vervangen abstracties. Een verhaal met een naam vervangt een claim met een sterretje.
"Ze kan eindelijk op haar rug liggen zonder te huilen."
Maxime · Jonge moeder
Erkende osteopaten op 3 locaties in Antwerpen en Vlaams-Brabant. Geen wachtlijst, geen verwijzing nodig.
Een uitgebreid netwerk van premium praktijklocaties, geleid door een toonaangevend team van zorgprofessionals.
"Pijnvrij bewegen en presteren, daar kom ik voor terug." — Martin, CrossFit athlete.
Onze tevreden klanten ervaren significante verbetering van hun levenskwaliteit dankzij onze evidence-based aanpak.
7449 pijnklachten behandeld. 2776 hoofdpijnklachten. 1102 buikpijn en misselijkheid.
Wij behandelen een breed scala aan klachten met uitstekende resultaten en hoge patiëntentevredenheid.
BE consistent "u" en "uw" (formeel, warm). NL gebruikt "je" en "jouw" (informeel, even warm). Dezelfde toon, andere afstand — past bij de markt.
Eén gedachte per zin. Een zin van 25+ woorden kan meestal in twee. Korte zinnen lezen sneller op video-overlays en mobile.
Het werk is rustig, de toon ook. Een uitroepteken verraadt onzekerheid. Een goed feit overtuigt zonder hulpschreeuw.
Wordmark + cirkelmerk in één lockup. Drie cirkels (groen + teal + mist) als visuele kern. Witte logo-variant is de hoofdvorm op de homepage — boven video en foto. De donkere variant verschijnt pas wanneer de header bij scroll naar de witte glassmorphic pill switcht.
Op forest-dark hero (met video), op forest sectie-card (video-sectie), op forest footer, op foto-overlays in testimonials. Bestand: osteosonline-logo-white.svg
Alleen in de glassmorphic floating header zodra de bezoeker > 50 px gescrolld heeft (header switcht automatisch van wit → glass), en op witte content-pagina's. Bestand: osteosonline-logo-dark.svg
Productie-breedte: 150 px op desktop, 100 px op mobile. Witruimte: minstens de hoogte van een hoofdletter "O" rondom. Onder 100 px breed verliest het cirkelmerk zijn drie-lagen-leesbaarheid — niet kleiner inzetten.
Forest is geen achtergrond, het is een hoofdrol. De homepage staat voor minstens 40% in forest- of forest-dark — de hero, de testimonials, de videosectie, de footer. Osteo green is het signature-accent, sparzaam ingezet op CTA's en op het laatste woord van een headline. Mist is het ademblok tussen de donkere panels. Geen marketing-rainbow, geen extra accent-kleuren. Vier families. Genoeg.
Forest (#3D5A4C) draagt de footer en de video-sectie. Forest-dark (#2A4A3A) draagt de hero en testimonials. Forest-deep en forest-light bestaan in tokens maar verschijnen amper op de pagina.
Op de forest-donkere oppervlakken signaleert osteo-green: actieve states, CTA-knoppen, het laatste woord van headlines, progress-bars, hover-states, scroll-indicators. Op mist-secties is osteo-green de uppercase-label-kleur ("Onze resultaten", "Onze aanpak", "Voor wie"). Nooit als achtergrond van grote vlakken — het accent verliest zijn signaal als het oppervlak wordt.
Mist is GROOT — het is een sectie-oppervlak, geen subtiele "alternate background". Mist-floating-cards dragen de statistieken en aanpak-sectie als hoofdoppervlak. Mist-dark verschijnt alleen in hover-states van pills en tab-buttons.
Eén osteo-green plek per scherm draagt het signaal: het laatste woord van een headline, of de primaire CTA, of de progress-bar — niet alle drie tegelijk. Spaarzaamheid is het signaal.
Forest sectie → mist sectie → forest sectie. Twee mist-secties achter elkaar = saai. Twee forest-secties achter elkaar = zwaar. Het ritme is de stijl.
De footer-CTA "Klaar om een afspraak te maken?" gebruikt bg-osteo-green. Teal is gereserveerd voor één deel van twee-kleuren-titels en de Antwerpse logo-cirkel — niet voor knoppen op de homepage.
Cards gebruiken shadow-card (0 4px 30px rgba(0,0,0,0.06)) — bijna onzichtbaar. Glow-shadow alleen op de play-button. Donkere shadow (rgba(0,0,0,0.3)) alleen op de video-thumbnail.
Inter draagt alles: wordmark, display, koppen, body, captions. Variable font geladen met gewichten 400, 500, 600, 700. Negatieve tracking op headings (-0.025em op h1, -0.02em op h2). Uppercase labels in tracking-wider (0.05em) of tracking-widest — sentence case overal elders.
Een open, leesbare geometrische sans. Bij display- en kopgroottes met negatieve tracking voor visuele rust.
Waarden komen uit de productie-components: HomeHero, StatisticsSection, ApproachSection.
Zero-padded nummers ("01", "02", "03"...) zijn een signature-detail. Ze verschijnen op quicklinks, locatie-rijen, doelgroep-pills, testimonials ("02 / 04"). Altijd in ink-300 of white/30, klein (11-12 px), licht.
Twee-kleuren-koppen: laatste 1-2 woorden in osteo-green, niet italic. Past op alle hero-style koppen. "Persoonlijke zorg, dichtbij huis." Werkt op forest-donker en op wit.
Headings, buttons, list labels: sentence case. Uitzondering: eyebrows ("Onze resultaten", "Voor wie") in UPPERCASE met tracking-wider. Title Case bestaat hier niet.
De acht bouwstenen die de homepage vormen. Elk component is hier zichtbaar in zijn echte oppervlak — niet abstract op wit, maar in de surface waar hij in productie verschijnt.
Bovenaan de pagina: bg-transparent. Logo in wit-variant. Knoppen in bg-white/15 backdrop-blur-sm glassmorphism.
Bij scrollY > 50: header krimpt naar floating pill met bg-white/80 backdrop-blur-xl, rounded-2xl, margin van de schermrand. Logo switcht naar donker. Menu-knop wordt forest.
Mist-pills op witte edge-to-edge sectie. Nummer-prefix in ink-300, label in ink-700, diagonale arrow ↗ (M7 17L17 7M17 7H7M17 7v10). Hover: bg-mist-dark, label naar forest, arrow naar groen.
Erkende osteopaten in Antwerpen en Vlaams-Brabant. Geen wachtlijst, geen verwijzing nodig — direct terecht.
Floating mist card (mx-2 rounded-2xl). Big numbers text-6xl lg:text-8xl in ink-950, animated counters in productie (0 → target, 2s easeOut). List rows met diagonal arrow.
De groene linker-border accent (border-l-2 border-osteo-green pl-6) is een specifieke signature van de StatisticsSection. Niet het "groen vlak achter kaart" patroon — dat is een styleguide-overblijfsel maar wordt op de homepage niet ingezet.
Maxime kwam met haar dochter Lief. Telkens als ze haar op de rug legde, begon ze direct te huilen. Na de behandelingen kan ze rustig op haar rug liggen en slaapt ze als een malle.
Foto fullbleed, from-forest-dark/90 via-forest-dark/70 to-forest-dark/40 gradient van links naar rechts (tekst-zijde donker, foto-detail rechts zichtbaar). Progress-bar in groen voor actieve. Play-button met groene glow shadow. Sticky-scroll cycle door 4 testimonials over 400 vh.
Floating forest card. Inline video player links, topic-list rechts. Niet-actieve topics op opacity-40, actieve op 100%. Klikken = video-source swap, autoplay.
Witte edge-to-edge sectie (geen floating card). Tabs links: actief = bg-forest text-white, inactief = bg-mist. Accordion items: vraag in ink-500 (dicht) of ink-950 (open), plus-icon in cirkel (rounded-full), draait 45° naar X bij open, groene fill bij open.
Primaire CTA = bg-osteo-green met shadow-[0_4px_20px_rgba(101,208,114,0.30)]. Hover: schaduw groter, 1 px omhoog. Tekstlink met diagonale of horizontale arrow voor secundaire navigatie ("Meer over..."). Glassmorphic outline alleen op forest-oppervlakken.
Geen verwijzing nodig. Kies een locatie en boek direct online.
Boek direct onlineErkende osteopaten in Antwerpen en Vlaams-Brabant. Geen wachtlijst, geen verwijzing nodig.
Forest (#3D5A4C) met rounded-t-[40px] lg:rounded-t-[60px] — de footer "hapt af" met een grote ronde bovenrand, alsof de pagina eronder duikt. Footer-CTA is osteo-green, niet teal. BE-footer linkt naar NL-locaties (osteosonline.nl) en omgekeerd — de twee sites zijn met elkaar verbonden.
Hoe alle bouwstenen elkaar opvolgen op de homepage. Donker–licht–donker. Foto–cijfer–foto. Filmische opening, statistische rust, menselijk verhaal, praktische aanpak, video-uitleg, lichte content, donkere afsluiter. Negen secties, één arc.
Twee mist-secties achter elkaar laten de pagina inkakken. Tussen elke mist-card hoort een forest-panel, een witte sectie, of een edge-to-edge sectie als pauze.
Wanneer een sectie een foto bevat als hoofdvisual, hoort die in een forest-floating-card met dezelfde gradient-overlay als de hero. Foto op wit oppervlak voelt vreemd binnen het systeem.
Alle floating cards gebruiken mx-1.5 md:mx-2 lg:mx-2.5 — 6 px op mobile, 8 px op tablet, 10 px op desktop. Dit creëert de minuscule "ademrand" rond elke section-card.
BE en NL delen het volledige design system. Verschil zit in copy (u vs je) en in lokale content (verzekeringen, locaties). Niet in kleuren of components. Wat hier staat geldt voor beide.