Digitale Guidelines — Quentravix

Praktische richtlijnen voor kleur, typografie, toegankelijkheid, iconografie en herbruikbare webcomponenten die je merk consistent houden online.

Toegankelijk en responsive
Consistente branding across web & marketing
Downloadbare assets en component library

Bekijk logo pakket Plan een review

Visie & principes

Onze digitale guidelines zijn ontworpen om snel beslissingen te nemen tijdens ontwerp- en ontwikkeltrajecten. Ze focussen op helderheid, schaalbaarheid en inclusiviteit.

Merkconsistentie: kleuren, vormen en toon
Performance-first: lichte assets en SVG-icoons
WCAG-gebaseerde toegankelijkheid

Bekijk illustraties

Wireframes, flows en componenten in één bronbestand.

Kleurenpalet

Primaire en secundaire kleuren, met hex, RGB en gebruiksadviezen voor contrast en achtergrond.

#0B1020
Dark core — primary bg / accents

#00BCD4
Accent — buttons, links

Palet tabel

Naam	HEX	RGB	Gebruik
Quentravix Dark	#0B1020	11,16,32	Header, footers, hero
Accent Cyan	#00BCD4	0,188,212	CTA, links
Soft Neon	#00FFFF	0,255,255	Highlights

Typografie

Gebruik een beperkte set fonts voor helderheid en performance. Vaste schaal voor headings en body.

Heading: Inter / 600
Body: Roboto / 400
Spatiëring: 1.45 line-height voor leesbaarheid

H1 48px / H2 34px / H3 24px / Body 16px

Lettergrootte en hiërarchie toepassen in UI componenten.

UI-componenten & gedrag

Standaard componenten die developers en designers hergebruiken.

Primaire knop: afgeronde rechthoek, kleur #00BCD4, duidelijke hover states en focus outlines. Gebruik aria-labels voor icon-only knoppen.

Cards gebruiken consistente padding, radius 12–14px en subtiele schaduwen. Gebruik beeldverhoudingen 16:9 of crops voor thumbnails.

Gebruik duidelijke labels, inline validatie en toegankelijke foutmeldingen. Zorg voor logische tabvolgorde en focusbeheer.

Component library

Alle componenten beschikbaar als Figma- en codefragmenten (HTML/CSS/JS). Download het starterpakket hieronder.

Download guidelines (zip)Aanvraag review

Toegankelijkheid (A11y)

Minimale WCAG 2.1 AA eisen: kleurcontrast, toetsenbordnavigatie, duidelijke focusindicatoren en alternatieve teksten bij afbeeldingen.

Contrast ratio >= 4.5 voor body tekst
Formulieren hebben labels en ARIA-berichten
Media: ondertitels en transcripts waar nodig

Marieke Jansen
Lead UX / Accessibility

Veelgestelde vragen

Hoe krijg ik componentcode?

Componenten worden geleverd als HTML/CSS-snippets en als Figma-frames. Vraag de ZIP aan via de downloadknop of neem contact op.

Neem contact op

Mag ik de kleuren aanpassen?

Kleuren mogen aangepast worden binnen de toegestane variaties; raadpleeg de contrastregels voordat je wijzigingen doorvoert.

Resources & downloads

Directe links naar logo's, SVG-icoons, en designkits.

Logo assets

PNG, SVG en vaste brandmarks.

Download logo's

Icon set

SVG-icoons geoptimaliseerd voor performance.

Download icon set

Figma kit

Complete UI-kit en componentenbibliotheek.

Open in Figma