Styleguide
The Safe Space club
Deze styleguide beschrijft de visuele taal van The Safe Space Club. Hij legt vast hoe typografie, kleur, componenten en layouts worden toegepast om een consistente, toegankelijke en warme ervaring te creëren op alle digitale pagina's. Gebruik deze guide als uitgangspunt bij het bouwen of aanpassen van pagina's in Webflow.
Logo's
Het logo van The Safe Space Club is beschikbaar in drie varianten: het standaardlogo, het landschapslogo en het symbool. Gebruik altijd de variant die het beste past bij de beschikbare ruimte en context.
Het logo van The Safe Space Club vertelt het verhaal van wie we zijn. De C van Club vormt een cirkel: een community waar vrouwen zichzelf kunnen zijn. In het hart van die cirkel zit een hartje, het symbool van verbinding en gemeenschap.
Default logo
Het standaardlogo is de primaire logovariant. Gebruik dit logo waar voldoende verticale ruimte beschikbaar is, zoals in de header, op een homepagina of in marketingmaterialen.
Landscape logo
Het landschapslogo is de horizontale variant en wordt gebruikt in contexten met beperkte verticale ruimte.
Symbool
Het symbool wordt zelfstandig gebruikt wanneer de merknaam al bekend is bij de doelgroep, of wanneer de ruimte te beperkt is voor het volledige logo, zoals bij een favicon, app-icoon of social media-profielfoto.
Typography
De typografie van The Safe Space Club is bold, leesbaar en toegankelijk. Headings zijn sterk en robuust, ze stralen kracht en veiligheid uit. Bodytekst is helder en goed leesbaar, zodat de inhoud voor iedereen toegankelijk is. De regelhoogtes van headings zijn vastgezet om een consistent visueel ritme te bewaren. Pas deze nooit handmatig aan. Bodytekst is beschikbaar in vijf groottes, gebruik altijd de grootte die past bij de context en hiërarchie van de pagina.
h1
h2
h3
h4
h5
h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
List
- Heading line height is fixed
- All buttons now have tooltips
- Spell checker number issue fixed
Link
Image with caption
Rich Text
Het rich text-element wordt gebruikt voor langere inhoud, zoals blogartikelen, informatiepagina's en partnerteksten. Alle stijlen binnen een rich text-blok worden overgenomen uit de globale typografie-instellingen. Voeg geen losse inline-stijlen toe, gebruik altijd de vastgestelde tekstklassen.
This is a Header.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Latest updates
- Heading line height is fixed
- All buttons now have tooltips
- Spell checker number issue fixed
Colour Strategy
De kleuren van The Safe Space Club zijn gekozen om zowel uitgesproken als uitnodigend te zijn. Om onze kernwaarden, professionaliteit, toegankelijkheid en warmte, uit te dragen, zetten we kleuren bewust in voor een strak, warm maar gedurfd resultaat.Voor een goede gebruikerservaring worden kleuren per sectie anders toegepast. Paars is de primaire kleur van de organisatie. Toch gebruiken we kleur ook om de gebruiker door de website te begeleiden en consistentie per product te creëren. We combineren nooit meer dan drie merkkleuren per element, want hoewel we gedurfd zijn, willen we een professionele uitstraling behouden. De meest gebruikte kleurencombinaties zijn vastgelegd hier.
Een noot over toegankelijkheid: Alle combinaties van tekst en achtergrond zijn getest op WCAG AA-contrastnormen. Gebruik bij twijfel altijd de vastgestelde kleurencombinaties hieronder, in plaats van kleuren vrij te combineren.
Brand - Primary
Neutrals
Purple shades
Orange shades
Pink shades
Brown shades
Red shades
Color combinations
This is an accent
This is a heading
Dit is de basiskleurencombinatie die we door de hele website gebruiken. Paars is de primaire merkkleur en oranje wordt ingezet als accentkleur. De achtergrond is licht, we gebruiken hiervoor de lichtste variant van de merkkleur roze.
This is an accent
This is a heading
Deze combinatie wordt gebruikt voor The Club House en communicatie richting survivors die op zoek zijn naar deze vorm van ondersteuning. In deze mag je gebruik maken van decoratieve elementen voor het community-karakter (gezelligheid).
This is an accent
This is a heading
Deze combinatie wordt gebruikt voor het 1-op-1 begeleidingsaanbod en communicatie richting survivors die op zoek zijn naar deze vorm van hulp.
This is an accent
This is a heading
Deze combinatie wordt gebruikt voor de groepstrajecten en communicatie richting survivors die op zoek zijn naar deze vorm van ondersteuning.
This is an accent
This is a heading
Deze combinatie wordt gebruikt voor partnerpagina's en communicatie richting samenwerkingspartners.
Buttons
The buttons are used differently throughout the site and depend heavily on their context. We do, however, use a consistent design regard primary, highlighted, secondary, disabled, link buttons.
Primary buttons always have a filled background, the secondary buttons have a transparent background and the text is the button colour and the border as well. The highlighted button is always the accent colour of the elements brand context. The link button is the same as the text colour.
Primair, secundair, highlight
Link button
Disabled
Grids
GridsHet gridsysteem zorgt voor visuele consistentie en responsief gedrag op alle schermformaten.
4 Grid
3 Grid
2 Grid
2-1 Grid
1-2 Grid
Icons
Iconen worden spaarzaam ingezet om tekst te ondersteunen, niet te vervangen. Alle iconen komen uit het Phosphor Icon Pack in de regular-stijl.
Combineer nooit verschillende icoonpakketten of -gewichten. Iconen worden in interface-contexten altijd vergezeld van een label, behalve wanneer het icoon universeel begrepen wordt (zoals social media-iconen in de footer).
Forms
Formulieren zijn het belangrijkste contactpunt tussen gebruikers en The Safe Space Club. Houd formulieren kort, duidelijk en laagdrempelig. Elk veld heeft een zichtbaar label.
Placeholdertekst is aanvullend, hij verdwijnt zodra iemand begint te typen en mag een label nooit vervangen.Foutmeldingen verschijnen inline onder het betreffende veld, in rood.
Bevestigingen na verzending worden getoond zonder dat de pagina ververst waar mogelijk. Elk formulier bevat een expliciete privacytoestemmingscheckbox vóór verzending.