STYLE GUIDE
STYLE GUIDE
Bij MatchQ geloven we in de kracht van een sterke huisstijl.
Het is een weerspiegeling van wie we zijn en hoe we ons willen presenteren aan de wereld. Met deze style guide willen we ervoor zorgen dat onze merkidentiteit consistent en herkenbaar is, ongeacht het communicatiemiddel dat we gebruiken.
Bij MatchQ geloven we in de kracht van een sterke huisstijl. Het is een weerspiegeling van wie we zijn en hoe we ons willen presenteren aan de wereld. Met deze style guide willen we ervoor zorgen dat onze merkidentiteit consistent en herkenbaar is, ongeacht het communicatiemiddel dat we gebruiken.
Lettertype
Roboto is gekozen als het lettertype voor de MatchQ huisstijl vanwege zijn uitstekende leesbaarheid op digitale platforms en verschillende schermformaten. Het veelzijdige karakter van Roboto maakt het geschikt voor diverse typografische toepassingen, van koppen tot lopende tekst. Bovendien straalt het een moderne en eigentijdse uitstraling uit, waardoor het perfect past bij de visuele identiteit van MatchQ.
Roboto
Nummer & Tekens
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 – = [ ] ; ’ \
± ! @ # $ % ^ & * ( ) _+ { } : “ |
Lettertype
Roboto is gekozen als het lettertype voor de MatchQ huisstijl vanwege zijn uitstekende leesbaarheid op digitale platforms en verschillende schermformaten. Het veelzijdige karakter van Roboto maakt het geschikt voor diverse typografische toepassingen, van koppen tot lopende tekst. Bovendien straalt het een moderne en eigentijdse uitstraling uit, waardoor het perfect past bij de visuele identiteit van MatchQ.
Roboto
Nummer & Tekens
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 – = [ ] ; ’ \
± ! @ # $ % ^ & * ( ) _+ { } : “ |
Heading 1 - 50px
Heading 2 - 35-40px
Heading 3 - 32px
Heading 4 - 20px
paragraph - 16px
Aa
(Regular)
Aa
(Light)
Aa
(Bold)
Aa
(Italic)
Aa
(Light Italic)
Aa
(B Italic)
Aa
(Thin)
Aa
(Medium)
Aa
(Black)
Aa
(Thin Italic)
Aa
(M Italic)
Aa
(Black Italic)
Heading 1 - 50px
Heading 2 - 35px
Heading 3 - 32px
Heading 4 - 20px
paragraph - 16px
Aa
(Regular)
Aa
(Light)
Aa
(Bold)
Aa
(Italic)
Aa
(Light Italic)
Aa
(Bold Italic)
Aa
(Thin)
Aa
(Medium)
Aa
(Black)
Aa
(Thin Italic)
Aa
(Medium Italic)
Aa
(Black Italic)
Interlinie
Voor de broodtekst, zoals paragrafen of <p> elementen, is het van belang een interlinie van 2 em te handhaven. Dit zorgt voor een optimale leesbaarheid en een goede verhouding tussen de regelhoogte en de lettergrootte. In pixels zou de interlinie ongeveer 32 pixels moeten zijn. Het gebruik van een relatieve eenheid zoals ‘em’ is handig omdat het zich aanpast aan de grootte van het lettertype, waardoor de interlinie proportioneel blijft, zelfs als het lettertype wordt gewijzigd.
Voorbeelden
Voor de broodtekst, zoals paragrafen of <p> elementen, is het van belang een interlinie van 2em te hand haven.
Voor de broodtekst, zoals paragrafen of <p> elementen, is het van belang een interlinie van 2em te hand haven.
Voor de broodtekst, zoals paragrafen of <p> elementen, is het van belang een interlinie van 2em te hand haven.
Interlinie
Voor de broodtekst, zoals paragrafen of <p> elementen, is het van belang een interlinie van 2em te handhaven. Dit zorgt voor een optimale leesbaarheid en een goede verhouding tussen de regelhoogte en de lettergrootte. In pixels zou de interlinie ongeveer 32 pixels moeten zijn (16 * 1,7). Het gebruik van een relatieve eenheid zoals ‘em’ is handig omdat het zich aanpast aan de grootte van het lettertype, waardoor de interlinie proportioneel blijft, zelfs als het lettertype wordt gewijzigd.
Voorbeelden
Voor de broodtekst, zoals paragrafen of
elementen, is het van belang een interlinie van 1,5em
Voor de broodtekst, zoals paragrafen of <p> elementen, is het van belang een interlinie van 1,5em te hand haven.
Voor de broodtekst, zoals paragrafen of <p> elementen, is het van belang een interlinie van 1,5em te hand haven.
Logo & Kleur
Er zijn twee verschillende varianten van het MatchQ logo beschikbaar. Deze varianten zijn ontworpen om flexibiliteit en aanpassingsvermogen te bieden, afhankelijk van de context waarin het logo wordt gebruikt. Het gebruik van de juiste variant en kleur is essentieel om consistentie te behouden en het merkimago van MatchQ effectief te communiceren.
Kleuren
RGB: 62/131/148
CMYK: 74/31/33/12
#3E8394
RGB: 62/62/62
CMYK: 66/56/54/58
#3E3E3E
Via Adobe Illustrator kunnen gebruikers het MatchQ-logo openen die de juiste waardes bezit.
Als dit niet aan de orde is, kun je de juiste afmetingen uit dit voorbeeld lezen. Hieronder vind je de voorwaardes.
Logo & Kleur
Er zijn twee verschillende varianten van het MatchQ logo beschikbaar. Deze varianten zijn ontworpen om flexibiliteit en aanpassingsvermogen te bieden, afhankelijk van de context waarin het logo wordt gebruikt. Het gebruik van de juiste variant en kleur is essentieel om consistentie te behouden en het merkimago van MatchQ effectief te communiceren.
Kleuren
RGB: 62/131/148
CMYK: 74/31/33/12
#3E8394
RGB: 62/62/62
CMYK: 66/56/54/58
#3E3E3E
Via Adobe Illustrator kunnen gebruikers het MatchQ openen die de juiste waardes bezit.
Als dit niet aan de orde is, kun je de juiste afmetingen uit dit voorbeeld lezen. Hieronder vind je de voorwaardes.
Het hoofdlogo is de primaire versie van MatchQ. Het bestaat uit het volledige logo-ontwerp met de merknaam “MatchQ” ondersteund door het vierkant die de steunkleur bezit.
In dit voorbeeld mist het vierkantje die de steunkleur van MatchQ bezit. Het logo mag niet in deze stijl gebruikt worden en is daarom ongeldig.
Deze afkorting kan worden gebruikt op plaatsen waar het volledige logo niet past of waar een meer beknopte weergave wenselijk is, zoals op sociale media-avatars, kleine promotionele items of als een subtiel accent op ontwerpen.
Het hoofdlogo is de primaire versie van MatchQ. Het bestaat uit het volledige logo-ontwerp met de merknaam “MatchQ” ondersteund door het vierkant die de steunkleur bezit.
In dit voorbeeld mist het vierkantje die de steunkleur van MatchQ bezit. Het logo mag niet in deze stijl gebruikt worden en is daarom ongeldig.
Deze afkorting kan worden gebruikt op plaatsen waar het volledige logo niet past of waar een meer beknopte weergave wenselijk is, zoals op sociale media-avatars, kleine promotionele items of als een subtiel accent op ontwerpen.
Effecten & stijlen
Effecten & stijlen
Het logo moet een opacity van 100% hebben. Door een lagere opacity toe te passen is het logo niet meer geldig.
Schaduwen zijn een no-go in het logo. Gebruik geen enkele vorm van schaduw in text-elementen.
Het gebruiken van een gloed is ook ongeldig. Over het algemeen gebruikt MatchQ in al haar ontwerpen GEEN gloed. Uitzondering iconen.
Het logo moet een opacity van 100% hebben. Door een lagere opacity toe te passen is het logo niet meer geldig.
Schaduwen zijn een no-go in het logo. Gebruik geen enkele vorm van schaduw in text-elementen.
Het gebruiken van een gloed is ook ongeldig. Over het algemeen gebruikt MatchQ in al haar ontwerpen GEEN gloed. Uitzondering iconen.
Outlines zijn geen deel van MatchQ.
Het gebruik hiervan maakt het logo ongeldig voor gebruik.
Het logo mag niet gedraaid worden. Het behoud van de oorspronkelijke oriëntatie is essentieel.
Het gebruik van andere kleuren in het logo is niet toegestaan. Ook hier is er dan sprake van ongeldigheid.
Outlines zijn geen deel van MatchQ.
Het gebruik hiervan maakt het logo ongeldig voor gebruik.
Het logo mag niet gedraaid worden. Het behoud van de oorspronkelijke oriëntatie is essentieel .
Het gebruik van andere kleuren in het logo is niet toegestaan. Ook hier is er dan sprake van ongeldigheid.
Contrast
Contrast
Gebruik niet het primaire logo op donkere achtergronden. Dit zorgt voor contrast complicaties waardoor het logo wegvalt en moeilijk leesbaar is.
Gebruik wel het full white logo op donkere achtergronden. Deze variant kan gebruikt worden op de afbeeldingen of vlakken die aan de donkere kant liggen.
Gebruik niet het primaire logo op donkere achtergronden. Dit zorgt voor contrast complicaties waardoor het logo wegvalt en moeilijk leesbaar is.
Gebruik wel het witte logo op donkere achtergronden. Deze variant kan worden gebruikt voor afbeeldingen of vlakken die aan de donkere kant liggen.
Gebruik wel het primaire logo op lichte achtergronden. Dit lost contrast complicaties op waardoor het logo zicht-en-leesbaar is.
Gebruik niet het witte logo een lichte achtergrond. Deze variant is niet geschikt voor licht contrast en zorgt voor onleesbaarheid.
Gebruik niet het primaire logo op donkere achtergronden. Dit zorgt voor contrast complicaties waardoor het logo wegvalt en moeilijk leesbaar is.
Gebruik niet het primaire logo op donkere achtergronden. Dit zorgt voor contrast complicaties waardoor het logo wegvalt en moeilijk leesbaar is.
Downloads
Je kunt hier de MatchQ logo varianten
downloaden in zowel SVG en PNG-formaat.
Positionering
Het is belangrijk om het MatchQ-logo goed te positioneren in de navbar, specifiek links bovenaan, omdat dit een prominente en herkenbare plek is die direct de aandacht trekt van de bezoekers van de website. Deze positionering draagt bij aan de merkidentificatie en zorgt voor een consistente gebruikerservaring.
Positionering
Het is belangrijk om het Matchq-logo goed te positioneren in de navbar, specifiek links bovenaan, omdat dit een prominente en herkenbare plek is die direct de aandacht trekt van de bezoekers van de website. Deze positionering draagt bij aan de merkidentificatie en zorgt voor een consistente gebruikerservaring.



Buttons
De styling van de buttons in MatchQ is belangrijk omdat het bijdraagt aan de consistentie, herkenbaarheid en gebruiksvriendelijkheid van de website. Goed gestileerde buttons helpen gebruikers om acties gemakkelijk te identificeren en uit te voeren. Ze zorgen voor een visuele hiërarchie en maken belangrijke acties opvallend. Ook hier voldoen een aantal voorwaardes.
Buttons
De styling van de buttons in MatchQ is belangrijk omdat het bijdraagt aan de consistentie, herkenbaarheid en gebruiksvriendelijkheid van de website. Goed gestileerde buttons helpen gebruikers om acties gemakkelijk te identificeren en uit te voeren. Ze zorgen voor een visuele hiërarchie en maken belangrijke acties opvallend. Ook hier voldoen een aantal voorwaardes.
Kleur
Kleur
Lettertype
Ook voor de buttons geldt het lettertype Roboto, maar dan de Regular variant met een corps van 18px. De tekst staat ook gecentreerd van de button.
Lettertype
Ook voor de buttons geldt het lettertype Roboto, maar dan de Regular variant met een corps van 18px. De tekst staat ook gecentreerd van de button.
Padding
De witruimte binnen de button is ook een vereiste.
De tekst van de button staat gecentreerd maar
de randen staan veelte dichtbij.
Padding
De witruimte binnen de button is ook een vereiste.
De tekst van de button staat gecentreerd maar
de randen staan veelte dichtbij.