Styleguide — dezelfde assets/flexengo.css die de twee sites gebruiken. Wijzig je hier iets, dan verandert het overal.

Kleur

Twee merkkleuren uit het huisstijlhandboek, plus een handvol afgeleiden die nodig zijn om leesbaar en toegankelijk te blijven.

Blauw
#169FDB
Merkkleur. Vlakken, knoppen, grote koppen, ruit-motief.
3,0:1 op wit
Antraciet
#3C3C3B
Broodtekst, header, donkere secties.
11,0:1 op wit
Blauw donker
#0C6F9B
Kleine blauwe tekst op lichte achtergrond: labels, links.
5,6:1 op wit
Antraciet licht
#5A5A58
Ondersteunende tekst, bijschriften.
6,9:1 op wit
Blauw tint
#E7F4FB
Icoonvlakken, hover-vlakken.
Zand
#F4F6F7
Afwisselende sectie-achtergrond.
Lijn
#E4E8EA
Randen, scheidingslijnen, invoervelden.
Tekst op donker
#C2C4C3
Broodtekst op antraciet.
6,3:1 op antraciet
Belangrijk voor toegankelijkheid. Het merkblauw haalt op wit maar 3,0:1. Dat is genoeg voor grote koppen, knoppen en vormen, maar niet voor gewone tekst — daar is 4,5:1 de norm. Daarom staat kleine blauwe tekst altijd in #0C6F9B. Wit op blauw haalt 7,0:1 en kan overal.

Typografie

Outfit, in Bold en Regular zoals het handboek voorschrijft, aangevuld met SemiBold en ExtraBold voor hiërarchie op het web. Alle formaten schalen mee met de schermbreedte, dus onderstaande waarden zijn de maxima op desktop.

.fx-h1 / .fx-display — 58px · 800 · −0.028em
Uw productie draait
.fx-h2 — 36px · 700 · −0.025em
Drie manieren om samen te werken
.fx-h3 — 24px · 700
Van zoekopdracht naar mensen op de vloer
.fx-h4 — 18px · 700
Werving en selectie
.fx-lead — 19px · 400 · 1.55
Flexengo bemiddelt Pools vakpersoneel voor productie, logistiek, techniek en agri.
.fx-body — 16px · 400 · 1.68 · max 62ch

Goede mensen blijven alleen als de rest klopt. Daarom regelen wij het hele plaatje, niet alleen de plaatsing: huisvesting binnen redelijke reisafstand, vervoer van en naar het werk, en Poolstalige begeleiding als er iets misgaat.

.fx-small — 14.5px · 1.6

Flexibele inzet per week of per seizoen. Wij zijn werkgever, u stuurt aan op de vloer.

.fx-label — 12px · 700 · 0.2em · uppercase
Onze dienstverlening
Outfit wordt zelf gehost, ook in deze mockups. Twee bestanden dekken alle gewichten, want het is een variabel lettertype: outfit-latin.woff2 (32 kB) en outfit-latin-ext.woff2 (15 kB). Die tweede is niet optioneel — de Poolse tekens ą ć ę ł ń ś ź ż liggen allemaal boven U+0100 en zitten alleen daar in.
Waarom dat meer is dan een privacykwestie. Bij een extern lettertype met font-display: swap tekent de browser eerst een vervangend lettertype en wisselt daarna om. De navigatie is precies de plek waar dat opvalt: tekstlinks naast een logo van vaste breedte verspringen zichtbaar, bij elke paginawissel. Zelf hosten haalt die wissel weg — en meteen ook het verzoek naar Google-servers.

Ruimte en vorm

Eén schaal voor alle afstanden. Componenten kiezen daaruit, nooit een los getal.

Spacing
4
8
12
16
24
32
48
64
80
112
Hoeken en schaduw
4px · standaard
6px · kaarten
schaduw sm
schaduw md
schaduw lg
TokenWaardeToepassing
--fx-r-sm4pxKnoppen, invoervelden, kleine vlakken
--fx-r-md6pxKaarten, formulierpaneel, kruislink
--fx-container1200pxMaximale inhoudsbreedte
--fx-gutter20 / 32 / 40pxZijmarge, schaalt mee met het scherm

Het ruit-motief

De ruit uit het beeldmerk keert terug door de hele site. Dat geeft samenhang zonder dat er een tweede vormtaal bij hoeft.

Beeldmerk
1
Stapnummer
Icoonvlak
Opsommingsteken
Achtergrondvorm

Beeldbehandeling

Foto's krijgen grijswaarden met het merkblauw eroverheen vermenigvuldigd, zoals de cover van het huisstijlhandboek. Praktisch nut: stockbeeld uit verschillende bronnen gaat er hierdoor toch als één merk uitzien.

.fx-figure
Foto — duotoon blauw
Nog te regelen. Er is nog geen beeldmateriaal. De offerte gaat ervan uit dat Flexengo dat aanlevert; anders selecteren wij stockbeeld ter goedkeuring. Foto's van herkenbare medewerkers vragen om schriftelijke toestemming voordat ze online gaan.

Responsive

Mobile first: de smalste layout is de basis, breedere schermen voegen kolommen toe. Er zijn maar vier breekpunten, en elk heeft een reden — geen apparaatnamen, maar het punt waarop de inhoud het zelf vraagt.

VanafWat er verandertWaarom daar
560pxFormuliervelden naast elkaar in twee kolommenOnder deze breedte wordt een half veld te smal om een bedrijfsnaam in te lezen.
700pxKaarten twee kolommen, cijfers op één rij, footer twee kolommen, ruimere margesVanaf hier past een tweede tekstkolom zonder dat regels te kort worden.
900pxBeeld naast tekst, formulier naast introductieTwee volwaardige kolommen naast elkaar vragen deze breedte.
1024pxNavigatiepaneel wordt een gewone balkVier links, een knop en een taalwissel passen pas hier zonder te knellen.
1000pxKaarten drie kolommen, footer vier kolommenDrie kaarten van minimaal 300 px plus tussenruimte.
Vloeiend, niet trapsgewijs

Tekstgroottes en marges springen niet op een breekpunt maar schalen mee met de schermbreedte. De titel hieronder is dezelfde regel CSS op elk formaat — versmal je venster en hij krimpt vloeiend mee.

clamp(32px, 5.6vw, 58px) — sleep de vensterrand om het te zien
Uw productie draait
Op een telefoon

Beide sites hieronder in een venster van 375 px breed — de smalste maat die er in de praktijk toe doet. Scrollen en klikken werkt gewoon.

flexengo.nl — 375 px
flexengo.com — 375 px
Vaste regels
RegelWaardeReden
Aanraakvlakminimaal 48 px hoogKnoppen, invoervelden, menu-items en accordeon-koppen. Onder die maat wordt mistikken de norm.
Invoerveld-tekst16 pxiOS zoomt automatisch in bij kleinere tekst in een formulier. Dat verspringen wil je niet.
Horizontaal scrollennooitoverflow-x: hidden op de body vangt de ruitvormen van de hero op. Brede tabellen scrollen in hun eigen kader.
Ankerlinksscroll-padding-topDe vaste header mag nooit de kop verbergen waar je net naartoe sprong.
Regellengtemaximaal 62 tekensOp breed scherm blijft tekst leesbaar in plaats van door te lopen tot de rand.

Beweging

Acht herbruikbare micro-animaties, allemaal opgebouwd uit dezelfde twee curves en vier tijdsduren. Ze mogen nooit iets bewijzen of vertragen — ze bevestigen alleen wat er gebeurt.

Tijd en curve
TokenWaardeWaarvoor
--fx-t-1150 msHover en focus. Moet aanvoelen als direct.
--fx-t-2280 msKleine verplaatsing: kaart omhoog, paneel open, accordeon.
--fx-t-3520 msBinnenkomst van een sectie.
--fx-t-4760 msGrote vlakken en het inzoomen van beeld.
--fx-easecubic-bezier(.22,.61,.36,1)Reactie op iets dat de bezoeker zelf deed.
--fx-ease-outcubic-bezier(.16,1,.3,1)Dingen die uit zichzelf aankomen. Snelle start, lange uitloop — dat leest als duur.
--fx-stagger70 msVertraging tussen opeenvolgende items in een groep.
De acht
NaamWat het doetAanroep
BinnenkomstSectie komt 20 px omhoog en vervaagt in, eenmalig, zodra hij in beeld schuift.data-reveal
TrapsgewijsKinderen van een groep komen 70 ms na elkaar binnen.data-reveal-group
Cijfers tellen opKerncijfer loopt in 1,1 s naar zijn eindwaarde, eenmalig.data-count
Knop licht op2 px omhoog met een schaduw in de merkkleur; zakt terug bij indrukken.automatisch
Pijl duwt doorHet pijltje in de knop schuift 4 px vooruit..fx-btn--arrow
Ruit draaitHet icoon in een kaart draait een kwartslag — de logovorm die de muis opmerkt.automatisch in .fx-card
OnderstrepingNavigatielink krijgt een streep die vanaf links binnenloopt.automatisch
Beeld zoomtDuotone foto schaalt 4,5% in bij hover over het blok.automatisch in .fx-media
Uitproberen
Hover over de knoppen, de kaart en de navigatielink
Tekstlink

Uitzenden

Beweeg de muis hierheen: de kaart komt omhoog en de ruit draait een kwartslag.

De achtergrondvormen in de hero drijven traag rond, in een cyclus van vijftien en negentien seconden. Twee verschillende looptijden, zodat ze nooit synchroon lopen en het patroon zich niet laat betrappen.
Alles gaat uit bij prefers-reduced-motion. Zet iemand in zijn besturingssysteem bewegingseffecten uit — vaak vanwege migraine of evenwichtsklachten — dan verdwijnen alle animaties en toont de pagina meteen de eindtoestand. Nooit een lege of half opgebouwde pagina. Dat is geen extraatje: bewegingseffecten die je niet kunt uitzetten vallen onder WCAG 2.3.3 en daarmee onder de Europese toegankelijkheidsrichtlijn.
Zonder JavaScript blijft alles zichtbaar. De verborgen begintoestand van data-reveal hangt aan een js-klasse die het script zelf op de pagina zet. Laadt het script niet, dan is er niets om te onthullen en staat de pagina er gewoon.

Knoppen

Eén primaire knop per sectie. De witte en doorzichtige varianten bestaan alleen om op het blauwe heroblok te staan.

Op lichte achtergrond
Tekstlink
Op de blauwe hero
KlasseGebruik
.fx-btn--primaryDe hoofdactie. Één per sectie.
.fx-btn--outlineNevenactie op lichte achtergrond.
.fx-btn--whiteHoofdactie op blauw.
.fx-btn--ghostNevenactie op blauw.
.fx-btn--blockVolle breedte, gebruikt onder formulieren.
.fx-btn--smIn de navigatiebalk.

Formuliervelden

Elk veld heeft een zichtbaar label — geen placeholder-als-label, want die verdwijnt zodra iemand begint te typen. Foutmeldingen staan onder het veld en zijn niet alleen aan kleur te herkennen.

Alle veldtypen en toestanden
Vul een geldig e-mailadres in.
Wij bellen alleen over deze aanvraag.
Bestand uploaden

Toelichting onder de knop, met link naar privacyverklaring.

Velden worden in PHP gedefinieerd, niet in de content. Het form-blok verwijst alleen naar search_request of application. Zo kan niemand die teksten aanpast per ongeluk een verplicht veld of een toestemmingsvinkje weghalen.

Lijsten

.fx-checklist — op licht en op donker
  • Reactie binnen één werkdag
  • Geen kosten aan een aanvraag
  • Vast aanspreekpunt
  • Huisvesting geregeld
  • Vervoer van en naar het werk
  • Poolstalige begeleiding

Paginacomponenten

Elk blok hieronder is één component met een vaste set velden. Pagina's bouw je door blokken te stapelen in de front matter van een MD-bestand — een nieuwe pagina is dus een nieuw contentbestand, geen nieuwe code.

header

Vast op elke pagina. Komt uit content/{site}/site.yml, niet uit de pagina zelf.

Hierboven staat de desktopvorm afgedwongen, zodat hij ook op een smal scherm te beoordelen is. Het echte gedrag onder 1024 px staat bij Mobiele navigatie.

# content/nl/site.yml
nav:
  - { label: Dienstverlening, url: /dienstverlening }
  - { label: Werkwijze,       url: /werkwijze }
nav_cta: { label: Zoekopdracht plaatsen, url: /#zoekopdracht }
sister_site: { label: PL, url: https://flexengo.com, lang: pl }

hero

Openingsblok. Variant brand is het blauwe vlak; image zet er een duotone foto onder.

Flexibel talent, oneindige mogelijkheden

Uw productie draait.
Wij leveren de mensen.

Flexengo bemiddelt Pools vakpersoneel voor productie, logistiek, techniek en agri.

- type: hero
  variant: brand          # brand | image
  eyebrow: Flexibel talent, oneindige mogelijkheden
  heading: |
    Uw productie draait.
    Wij leveren de mensen.
  body: Flexengo bemiddelt Pools vakpersoneel …
  cta:     { label: Zoekopdracht plaatsen, url: "#zoekopdracht" }
  cta_alt: { label: Bekijk onze werkwijze,  url: "#werkwijze" }

stats

Twee tot vier kerncijfers. Meer wordt onleesbaar op mobiel.

14
dagen van aanvraag tot start
450+
flexkrachten bemiddeld
100%
huisvesting en vervoer geregeld
- type: stats
  items:
    - { value: "14",   label: dagen van aanvraag tot start }
    - { value: "450+", label: flexkrachten bemiddeld }
    - { value: "100%", label: huisvesting en vervoer geregeld }
Cijfers zijn een claim. Voor go-live moeten ze door Flexengo bevestigd worden.

cards

Diensten, sectoren, USP's. Twee kolommen op tablet, drie op desktop.

Onze dienstverlening

Drie manieren om samen te werken

Uitzenden

Flexibele inzet per week of per seizoen. Wij zijn werkgever, u stuurt aan op de vloer.

Inhouse

Een vast team met eigen coördinator op uw locatie.

Werving en selectie

Wij werven in Polen, u neemt zelf in dienst.

- type: cards
  background: sand
  eyebrow: Onze dienstverlening
  heading: Drie manieren om samen te werken
  items:
    - { title: Uitzenden, body: Flexibele inzet per week of per seizoen. }
    - { title: Inhouse,   body: Een vast team met eigen coördinator. }

steps

Genummerd proces. De nummering komt uit de volgorde, niet uit het contentbestand — hernummeren gebeurt dus vanzelf.

Werkwijze

Van zoekopdracht naar mensen op de vloer

  1. 1

    U plaatst een zoekopdracht

    Binnen één werkdag nemen wij contact op.

  2. 2

    Wij matchen en regelen

    Huisvesting en vervoer geregeld, papieren in orde.

  3. 3

    Uw team start

    Eén vast aanspreekpunt, begeleiding blijft doorlopen.

- type: steps
  eyebrow: Werkwijze
  heading: Van zoekopdracht naar mensen op de vloer
  items:
    - { title: U plaatst een zoekopdracht, body: Binnen één werkdag nemen wij contact op. }

media_text

Beeld naast tekst. position wisselt links en rechts, theme zet het tekstvlak op antraciet.

Foto — duotoon blauw
Volledig ontzorgd

Wij regelen wat er buiten de poort gebeurt

Goede mensen blijven alleen als de rest klopt.

  • Huisvesting binnen redelijke reisafstand
  • Vervoer van en naar het werk
  • Poolstalige begeleiding
- type: media_text
  image: media/productiehal.jpg
  alt: Medewerker aan een productielijn
  position: left            # left | right
  theme: ink                 # light | ink
  eyebrow: Volledig ontzorgd
  heading: Wij regelen wat er buiten de poort gebeurt
  body: Goede mensen blijven alleen als de rest klopt.
  checklist:
    - Huisvesting binnen redelijke reisafstand
    - Vervoer van en naar het werk

form

Verwijst naar een formulier dat in PHP is gedefinieerd. De content bepaalt alleen de omlijsting: kop, tekst en het lijstje ernaast.

Zoekopdracht

Vertel ons wie u zoekt

Wij nemen binnen één werkdag contact op — vrijblijvend en zonder kosten.

  • Reactie binnen één werkdag
  • Geen kosten aan een aanvraag

Uw gegevens gebruiken wij alleen om contact op te nemen over deze aanvraag.

- type: form
  form: search_request      # search_request | application
  id: zoekopdracht          # ankerpunt voor links
  background: sand
  eyebrow: Zoekopdracht
  heading: Vertel ons wie u zoekt
  body: Wij nemen binnen één werkdag contact op.
  checklist:
    - Reactie binnen één werkdag

cta_band

Volle-breedte oproep. Ook de plek voor een verwijzing naar de zustersite.

Liever eerst even sparren?

In tien minuten weet u of wij iets voor u kunnen betekenen.

+31 (0)541 50 00 00
- type: cta_band
  theme: blue                # blue | ink
  heading: Liever eerst even sparren?
  body: In tien minuten weet u of wij iets voor u kunnen betekenen.
  cta: { label: "+31 (0)541 50 00 00", url: "tel:+31541500000" }

faq

Uitklapbaar met <details>, dus werkt ook zonder JavaScript. Levert automatisch FAQPage-markup op voor Google.

Hoe snel kunnen mensen starten?

Voor de meeste functies rekenen wij op ongeveer twee weken tussen aanvraag en eerste werkdag.

Wie is de werkgever?

Bij uitzenden en inhouse zijn wij de werkgever en dragen wij loonadministratie, verzuim en verzekeringen.

Regelen jullie ook huisvesting?

Ja, inclusief vervoer van en naar het werk.

- type: faq
  eyebrow: Veelgestelde vragen
  heading: Wat opdrachtgevers ons vragen
  items:
    - question: Hoe snel kunnen mensen starten?
      answer: Voor de meeste functies rekenen wij op ongeveer twee weken.

prose

Gewone markdown. Voor de privacyverklaring, voorwaarden en alles zonder eigen vormgeving.

Welke gegevens wij verwerken

Wanneer u een zoekopdracht plaatst, verwerken wij uw bedrijfsnaam, contactgegevens en de omschrijving van de functie die u zoekt.

Bewaartermijn

Wij bewaren aanvragen maximaal twaalf maanden, tenzij er een samenwerking uit voortkomt.

  • Contactgegevens van de aanvrager
  • Omschrijving van de zoekopdracht
- type: prose
  body: |
    ## Welke gegevens wij verwerken
    Wanneer u een zoekopdracht plaatst, verwerken wij …

contact

Trekt standaard uit site.yml, zodat adres en telefoonnummer op één plek staan.

Contact

Even overleggen?

Bel of mail gerust. Wij reageren binnen één werkdag.

  • AdresOldenzaal
  • Telefoon+31 (0)541 50 00 00
  • E-mailinfo@flexengo.nl
Kaart of foto
- type: contact
  heading: Even overleggen?
  body: Bel of mail gerust. Wij reageren binnen één werkdag.
  show_map: false           # kaart pas na akkoord: laadt data van derden

logos

Keurmerken of klantlogo's. Nog niet bouwen — eerst vaststellen welke keurmerken Flexengo daadwerkelijk voert.

Aangesloten bij
logo
logo
logo
logo
- type: logos
  heading: Aangesloten bij
  items:
    - { image: media/sna.svg, alt: SNA-keurmerk, url: https://… }
Niet invullen zonder bewijs. Een keurmerklogo tonen dat niet gevoerd wordt is misleidend en juridisch riskant.

Wat hier nog niet in zit

Eerlijk overzicht van wat er nog moet gebeuren voordat dit een werkende site is.

OnderwerpStatus
Teksten en cijfersVoorbeelden. Bronmateriaal moet nog door Flexengo aangewezen worden.
Poolse vertalingEerste versie. Eindcontrole door een Poolstalige lezer staat nog open.
BeeldmateriaalOntbreekt. Aanlevering door Flexengo of stockselectie ter goedkeuring.
Actieve pagina in de navigatiearia-current is opgemaakt maar nog niet gezet — dat gebeurt straks in de Blade-layout.
FormulierafhandelingVelden staan, verzending nog niet. Backend, opslag en CV-upload volgen in de bouwfase.
MetingKeuze tussen een cookieloze tool of Google Analytics staat nog open. Bij Analytics komt er een consent-banner bij.
BeeldmateriaalNog geen fotografie; alle duotone-vlakken zijn plaatshouders.