Werkplaatsfoto
Zeilmakerij De Vuurtoren
Bootkappen, buiskappen en reparaties voor jachten en sloepen.
Lid sinds 2019Profiel →
00
Principes
Vier regels die elke keuze in deze huisstijl verklaren. Twijfel je bij een ontwerp, dan beslissen deze vier.
RangordeBranche eerst
SZS is in de eerste plaats de brancheorganisatie. Petrol draagt het gezag van de vereniging; oker markeert wat je moet doen of zien. De vakbeurs mag knallen, maar op zijn eigen pagina's.
VakmanschapLaat het vak zien
Doek, stiksels, machines, handen. Echte werkplaatsen boven stockbeeld. De golfvorm uit het beeldmerk is ons detail: spaarzaam gebruikt.
Rust met accent60 · 25 · 10 · 5
Veel wit en licht grijs, petrol voor structuur, staal als steun, oker alleen als accent. Nooit meer oker dan nodig: het werkt omdat het schaars is.
Eigen, niet generiekRustig en concreet
Geen kapitalen, geen schaduwen, geen pillen en geen labels die de kop herhalen. Korte knoppen, echte foto's en echte namen. Zo lijkt de site niet op elke andere site die met dezelfde sjablonen is gemaakt.
Wat is er veranderd in versie 1.1 (oktober 2026)
- Geen kapitalen meer, behalve in het logo-sublabel.
- Meestal één titel. Een boventitel alleen als die iets toevoegt, in gewone schrijfwijze en zonder streepje.
- Rondingen in verhouding: chips 6 px, knoppen en velden 8 px, kaarten 12 px, grote vlakken 16 px. Een binnenvak is altijd minder rond dan het vak eromheen.
- Geen schaduwen en niet optillen bij hover.
- Status, tags en filters als gewone tekst in plaats van pillen.
- Foto's rondom afgerond, in verhouding (12 px, kleine foto's 10 px); de fotovermelding als klein label in de hoek.
- Knopteksten kort (maximaal 4 woorden) en één naam per actie.
- Correcties: de cao sluit SZS af met vakbond CNV; geen "erkend"; altijd de u-vorm; geen AI-beeld.
01
Kleuren
Twee merkkleuren uit het brandbook, uitgebreid tot vier schalen en een set transparanten. Klik op een waarde om te kopiëren.
Primair · structuur, koppen, vlakkenPetrol
- HEX
- RGB
- CMYK
- 95 · 60 · 51 · 57
- Pantone
- 2217 C
- Token
--petrol-800
Accent · knoppen, highlights, beursOker
- HEX
- RGB
- CMYK
- 13 · 42 · 92 · 3
- Pantone
- 7563 C
- Token
--oker-500
Kleurschalen
Per schaal staat onder de hexcode het contrast met wit tekst (w) of petrol-tekst (p). AA = geschikt voor gewone tekst (≥ 4,5:1). De merkkleur heeft een witte rand.
Transparante subkleuren
Voor achtergrondvlakken, hovers, randen en overlays op foto's. Transparant op wit, dus ze passen zich aan aan wat eronder ligt. Tekst altijd in volle kleur, nooit transparant.
Petrol 6% als sectievlak
Petrol 12% · badgeOker 16% · badge
Lijn: petrol 16%
Overlay op foto
Petrol 92% → 35% verloop, zodat witte tekst altijd leesbaar blijft
Kleur per onderdeel
Eén merk, drie accenten. De basis blijft gelijk; de nadruk laat de bezoeker voelen waar hij is.
Hoofdrol · leden
Branche
vereniging
vereniging
Petrol is dominant: vlakken, koppen, navigatie. Oker alleen voor de hoofdknop "Word lid".
Toeleveranciers
Business
club
club
Staal als eigen accent: koeler, zakelijk, technisch. Onderscheidt partners van leden zonder een nieuw merk.
Om de twee jaar · 12–13 okt 2027
Oker mag hier groot: hero's, datums, de knop "Gratis ticket". Tekst op oker is altijd petrol.
Verhouding
Richtlijn voor een gemiddelde pagina van de branchevereniging. Op vakbeurspagina's schuift oker op naar ± 20%.
60% wit / grijs
25% petrol
10%
5
Wit/grijs: ademruimte en leesbaarheidPetrol: structuur en gezagStaal: steun, Business ClubOker: actie en accent
Combinaties
Tekst- en achtergrondparen met hun contrast. Alleen de groene paren gebruiken voor lopende tekst.
Aa Petrol op wit13,2 : 1AAA
Aa Wit op petrol13,2 : 1AAA
Aa Petrol op oker5,5 : 1AA
Aa Oker-700 op wit4,7 : 1AA
Aa Wit op staal5,1 : 1AA
Aa Oker op petrol6,4 : 1AA
Aa Oker op wit2,4 : 1Niet voor tekst
Aa Wit op oker2,4 : 1Niet voor tekst
Signaalkleuren
Alleen voor status in formulieren en meldingen. Informatie gebruikt staal, een waarschuwing oker; zo blijft het palet klein.
Succes#1F7A4D5,3 : 1
Fout#B423186,6 : 1
Info#3E75905,1 : 1
Let opoker-100 / 800AA
02
Typografie
Outfit voor koppen: rond en stevig, familie van het "szs"-woordmerk. Source Sans 3 voor tekst: helder, rustig en de vrije opvolger van Myriad uit het brandbook. Beide gratis Google Fonts (SIL OFL), dus zonder licentie te gebruiken in WordPress.
Aa
Outfit
Light 300Regular 400SemiBold 600Bold 700ExtraBold 800
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 € & @ → “ ”
abcdefghijklmnopqrstuvwxyz
0123456789 € & @ → “ ”
Aa
Source Sans 3
Regular 400Italic 400SemiBold 600Bold 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 € & @ → “ ”
abcdefghijklmnopqrstuvwxyz
0123456789 € & @ → “ ”
Typeschaal
Groottes schalen vloeiend van mobiel (375 px) naar desktop (1280 px). Eén schaal voor de hele site; nieuwe groottes alleen via deze tabel.
DisplayOutfit 800
72 / 40 px · lh 1.0
72 / 40 px · lh 1.0
-0.025emDe zeilmakerij sterker
H1Outfit 700
52 / 34 px · lh 1.08
52 / 34 px · lh 1.08
-0.02emSamen bouwen aan een sterke sector
H2Outfit 700
38 / 28 px · lh 1.15
38 / 28 px · lh 1.15
-0.015emBelangenbehartiging en cao
H3Outfit 600
28 / 22 px · lh 1.25
28 / 22 px · lh 1.25
Veilig werken met de branche-RI&E
H4Outfit 600
22 / 19 px · lh 1.3
22 / 19 px · lh 1.3
Juridische ondersteuning voor leden
H5Outfit 600
18 px · lh 1.4
18 px · lh 1.4
Algemene leveringsvoorwaarden
BoventitelOutfit 600
15 px · gewone schrijfwijze
alleen als die iets toevoegt
15 px · gewone schrijfwijze
alleen als die iets toevoegt
Zeilmakerij Vakbeurs · 12–13 oktober 2027
LeadSource Sans 3 400
21 / 19 px · lh 1.55
21 / 19 px · lh 1.55
SZS ondersteunt zeilmakerijen met cao, RI&E, juridische hulp, voorwaarden en een sterk professioneel netwerk.
BodySource Sans 3 400
17 / 16 px · lh 1.65
max. 68 tekens per regel
17 / 16 px · lh 1.65
max. 68 tekens per regel
Onze sector bestaat uit vakmensen en ondernemers met ieder hun eigen bedrijf, specialisme en visie. Juist die diversiteit maakt de branche sterk. Tegelijk zijn er onderwerpen waarop we elkaar nodig hebben: personeel, opleiding, regelgeving en innovatie.
SmallSource Sans 3 400
15 px · lh 1.55
15 px · lh 1.55
Alle bedragen zijn exclusief btw. Early bird tot en met 28 februari 2027.
CaptionSource Sans 3 400
13 px · lh 1.45
13 px · lh 1.45
Foto: werkplaats van een SZS-lid, Friesland, 2025.
CijferOutfit 800 · tabular
72 / 48 px · lh 1.0
72 / 48 px · lh 1.0
43
KnopOutfit 600
16 px
16 px
Word lid van SZS →
In gebruik
Een voorbeeld van een contentpagina, zodat je ziet hoe de niveaus samen werken.
Arbeid & cao
Wat betekent de nieuwe cao voor uw bedrijf?
SZS sluit een eigen cao voor de zeilmakerij af met vakbond CNV. Hier leest u wat er speelt en wat u nu kunt doen.
De onderhandelingen voor 2027 starten dit najaar. Via de ledenenquête bepaalt u mee welke onderwerpen de delegatie op tafel legt: loonruimte, looptijd en ruimte voor beloningsverschillen.
Wat u nu kunt doen
- Vul de ledenenquête in via Mijn SZS
- Bekijk de huidige loontabellen in Mijn SZS
- Stel uw vraag aan de cao-commissie
Laatst inhoudelijk gecontroleerd: september 2026 · Eigenaar: cao-commissie
Regels
✓Koppen in Outfit, tekst in Source Sans 3. Nooit omgekeerd, en geen derde lettertype.
✓Zinsopbouw met hoofdletter alleen aan het begin. "Belangenbehartiging en cao", niet "Belangenbehartiging En Cao".
✓Geen kapitalen, ook niet in labels, tabelkoppen, rollen of datums. Alleen het logo-sublabel staat in hoofdletters.
✓Meestal één titel. Een boventitel alleen als die iets toevoegt dat de kop niet zegt: doelgroep, toegang, jaartal, status of prijs. Nooit direct onder het kruimelpad.
✕Geen Outfit 800 voor lange koppen (meer dan ± 8 woorden): dan H1 in 700.
✕Geen gecentreerde lopende tekst en geen regels breder dan 75 tekens.
03
Logo & beeldmerk
Het SZS Netwerk-logo (beeldmerk + woordmerk) is de afzender van alles. De onderdelen krijgen een sublabel naast het logo, gescheiden door een dunne lijn.
Op licht · standaard
Op petrol · wit + oker
Op oker · petrol + wit (voorstel)
Sublabels per onderdeel
Het vakbeurslogo is het officiële bestand. De lockups voor Branchevereniging en Business Club zijn hier nagebouwd volgens het brandbook (Outfit Light, hoofdletters); vraag de definitieve vectorbestanden op bij de ontwerper.
Branche
vereniging
Nagebouwd · voor leden en de branchevereniging
Business
club
Nagebouwd · voor toeleveranciersclub
Officieel bestand · vakbeurs
Beeldmerk los
De drie golvende banen mogen los gebruikt worden: als favicon, avatar op social media, en als achtergrondvorm op 6–10% dekking.
Kleur
Op petrol
Eén kleur
Vrije ruimte en minimale grootte
xxxx
xVrije ruimte = hoogte van de "s" rondom het logo. Daarbinnen geen tekst, randen of beeld.
↔Minimaal 100 px breed op schermen en 25 mm in druk. Kleiner? Gebruik het losse beeldmerk.
✓Bestanden:
brand/logos/ bevat de vector-PDF (master) en PNG in kleur en wit.Niet doen
✕Niet uitrekken of vervormen
✕Geen andere kleuren
✕Niet op onrustige of middentonen
✕Niet draaien of effecten toevoegen
04
Beeld & vorm
Het vaste detail komt uit het beeldmerk: de golfstap. Samen met echte vakfotografie geven ze de site karakter zonder drukte.
Plek voor een echte vakfoto
LedenverhaalZo helpt SZS ons met de RI&E
Golfstap
De vorm uit het beeldmerk: vlak, een zachte S-bocht, weer vlak. Gebruik hem als sectie-overgang en als uitsnede onderaan grote foto's. Maximaal één per scherm.
Stikselnaad
Een stippellijn in oker, zoals de naad in een zeil. Alleen als scheidingslijn, bijvoorbeeld in de e-mailhandtekening. Niet voor labels boven koppen en nooit als rand om een vlak.
Fotohoeken
Foto's zijn rondom afgerond, in verhouding met het vak eromheen: 12 px, kleine foto's in een galerij 10 px. De fotovermelding staat als klein label rechtsboven in de hoek: "Foto: bedrijfsnaam".
Fotografie
✓Echte werkplaatsen en mensen: handen aan het doek, machines in bedrijf, stiksels van dichtbij, eindproducten in gebruik.
✓Per onderdeel een eigen onderwerp: leden en overleg (vereniging), machines en innovatie (Business Club), beursvloer en demo's (vakbeurs).
✓Nog geen foto? Dan een leeg vak. Een petrol- of okervlak blijft zichtbaar leeg tot er een echte foto is.
✕Geen generieke stockfoto's van handdrukken of lachende kantoormensen.
✕Geen AI-beeld, ook niet als sfeerbeeld of illustratie.
✕Geen logo-muur als hoofdbeeld. Logo's ondersteunen, ze vertellen geen verhaal.
05
Componenten
De bouwstenen voor Figma en WordPress. Rondingen in verhouding (knoppen 8 px, kaarten 12 px, grote vlakken 16 px), geen schaduwen en één duidelijke hoofdactie per blok.
Knoppen
Op licht
Op petrol
1Primair (petrol) voor de hoofdactie op SZS-pagina's. Accent (oker, petrol tekst) voor de hoofdactie op vakbeurspagina's en op donkere vlakken. Staal alleen in de Business Club.
2Maximaal één gevulde knop per blok; de rest is outline of tekstlink. Werkwoord voorop: "Word lid", niet "Lidmaatschap".
3Kort en overal dezelfde naam. Een knop is 1–3 woorden (maximaal 4), begint met een werkwoord of is een vaste naam, en is nooit een vraag. Nooit "Lees meer" of "Klik hier".
Knopteksten: één naam per actie
Dezelfde actie heet overal hetzelfde, ook in menu en header. Twee verschillende plekken krijgen nooit bijna dezelfde naam.
| Actie | Knoptekst | Niet |
|---|---|---|
| Aanmelden als lid | Word lid | Direct aanmelden · Aanmelden |
| Uitleg over het lidmaatschap | Over het lidmaatschap | Lid worden (verwarrend naast Word lid) |
| Een zeilmakerij zoeken | Vind een zeilmakerij | Ik zoek een vakbedrijf · Vind een vakbedrijf |
| Ticket voor de vakbeurs | Gratis ticket | Registreer je bezoek |
| Stand op de vakbeurs | Stand boeken | Schrijf u in als exposant · Direct een stand boeken |
| Exposanten bekijken | Bekijk exposanten | Bereid uw bezoek voor: exposanten |
| Partner van de Business Club | Partner worden | Sluit u aan · Word partner |
| Alle nieuwsberichten | Alle berichten | Al het nieuws van SZS |
| Interesse in een bijeenkomst | Interesse melden | Laat uw interesse weten |
| Verder lezen | Naar de cao · Lees het artikel | Lees meer · Klik hier |
Rondingen
In verhouding: hoe groter het vlak, hoe ronder. Een vak binnen een ander vak is altijd minder rond. Geen pillen en geen schaduwen; ronde vormen alleen voor bolletjes en stipjes.
6 px
chip, label
chip, label
8 px
knop, veld
knop, veld
12 px
kaart
kaart
16 px
groot vlak
groot vlak
foto
12 px rondom
12 px rondom
Status, tags en filters
Geen pillen of gekleurde labels. Status is tekst met een bolletje, tags zijn tekst met een punt ertussen, filters zijn een rustige tabrij.
VastgesteldIn voorbereidingNieuw
AllesCaoArbeidVeiligheid
Formulieren
Zoals ingeschreven bij de KvK
Vul een volledig e-mailadres in, bijv. info@bedrijf.nl
Wat doet uw bedrijf?
3 à 4 keer per jaar. Afmelden kan altijd.
ℹ
Na aanmeldingHet secretariaat neemt binnen 5 werkdagen contact met u op.
!
Early bird tot 28 februariSchrijf nu in en ontvang 10% korting op uw stand.
Taakblokken
"Waarmee kunnen we helpen?" op de homepage: een taak per blok, direct naar de dienst.
Cao & personeelLoontabellen, verlof, ziekte
RI&E & veiligheidBranche-RI&E, arbo, machines
JuridischEerstelijns advies en verwijzing
VoorwaardenLeveringsvoorwaarden zeilmakerij
Kaarten
Logo exposant
Voorbeeld Machinebouw
Hoogfrequent lassen en snijtafels voor PVC-doek en technisch textiel.
NederlandProfiel · Plattegrond
Nieuwsbeeld
Ledenenquête cao 2027: uw input telt
Bepaal mee met welk mandaat de delegatie de onderhandelingen ingaat.
23 sep 2026Lees het artikel →
De kaarten hierboven tonen voorbeeldinhoud, geen echte leden of exposanten.
Prijstabel
| Standtype · 4 × 3 m | Inbegrepen | Standaard | Business Club |
|---|---|---|---|
| Space only | Tapijttegels, stroom 230 V / 3 kW | € 2.000 | € 1.500 |
| Shell scheme | Wanden, verlichting, frieslijst met naam, stroom | € 2.500 | € 2.000 |
06
Tekst & tone of voice
Nuchter, vakkundig, branche-eigen. We spreken de lezer aan met u, schrijven vanuit de waarde voor het bedrijf en maken alles concreet.
4e
editie van de Zeilmakerij Vakbeurs, sinds de start in 2018
Bron: uitnodiging exposanten 202743
stands op de beursvloer in Expo Houten, editie 2025
Bron: nieuwsbrief exposanten aug. 202512–13
oktober 2027 · twee beursdagen van 11.00 tot 19.00 uur
Bron: deelnemershandboek 2027Cijferblok: alleen cijfers met een bron. Geen afgeronde claims als "75+" zonder dat het bestuur ze bevestigt.
Niet voor u bepalen, wel naast u staan
Ieder bedrijf vaart zijn eigen koers. SZS zorgt dat u weet wat er speelt: van cao en regelgeving tot nieuwe materialen en technieken.
Want wie vooruit wil, moet weten wat er speelt.Visie SZS Branchevereniging
Schrijfregels
| Zo schrijven we | Waarom | Zo niet |
|---|---|---|
| SZS helpt u bij cao-vragen over verlof en ziekte | Concreet: wat, voor wie | Wij verbinden en versterken |
| Leveranciers delen kennis en innovaties met de branche | Business Club als partner | Toegang tot uw potentiële klanten |
| Samenwerking tussen leden | Nederlandse vaktaal | Synergy en cross selling |
| Gratis ticket · Stand boeken | Kort, werkwoord of vaste naam, overal dezelfde naam | Klik hier · Lees meer |
| Vragen over de Business Club | De kop zegt het zelf: geen label erboven | VEELGESTELDE VRAGEN boven de kop |
| Op 12 en 13 oktober 2027 in Expo Houten | Datum, plaats, geen superlatieven | Dé ultieme beurservaring |
07
Templates
Uitgangspunten voor social media, presentaties, e-mail en beurs. Maak de definitieve versies in Figma of Canva met deze opbouw.
Zeilmakerij Vakbeurs 2027
Reserveer
Reserveer
uw stand
12–13 okt
Expo Houten
Expo Houten
Branchevereniging · cao
Uw stem in de cao 2027
De branche
van het vak.
Word lid van SZS
Presentatieslide 16:9 · titel + cijfers
E-mailbanner 600 × 235 · voor exposanten
E-mailhandtekening
Cameron Koopman
Netwerkmanager SZS Netwerk
cameron@szsnetwerk.nl · www.szsnetwerk.nl
08
Voor de developer
Alle waarden als CSS-variabelen. Plak dit in het thema (WordPress: theme.json of het hoofd-CSS-bestand) en bouw alles met deze tokens.
✓Fonts: Outfit 400/600/700/800 en Source Sans 3 400/600/700 + italic, self-hosted of via Google Fonts met
font-display: swap.✓Toegankelijkheid: WCAG 2.2 AA. Focusring oker 2 px, tikdoelen ≥ 44 px, oker nooit als tekstkleur op wit (gebruik
--oker-700).✓Rust: geen
text-transform: uppercase (alleen het logo-sublabel), geen box-shadow op kaarten en geen transform bij hover. Een binnenvak is minder rond dan het vak eromheen.✓Klikbare kaarten: de linknaam is de titel plus de linktekst (
aria-label), niet de hele kaarttekst.✓Bronbestanden: tokens staan ook in
brand/design-system/tokens/ (CSS + JSON), logo's in brand/logos/.