Five Dots / Designsysteem / v1.0

Verbind de punten.
Behoud de identiteit.

Een praktische referentie voor de goedgekeurde websiterichting: zelfverzekerde typografie, een blauw verbindingspunt, heldere productverhalen en doelgerichte beweging.

Download de designer-PDF (Engels) · Lees de volledige stijlgids (Engels) · Designtokens · Socialmediabanners (Engels)
01 / Identiteit

Vier fundamenten. Eén verbindingspunt.

Five Dots
Five Dots

De geometrie van het beeldmerk komt overeen met het favicon. Deze voorbeelden combineren het beeldmerk met DM Sans. Bestaande losse SVG-woordmerken gebruiken nog Arial en hebben voor externe verspreiding een beoordeelde versie met lettercontouren nodig.

Logo’s downloaden

Klaar voor je volgende profiel.

Gebruik de vierkante PNG voor LinkedIn en andere profielfoto’s. Beide exports zijn 1024 × 1024 px, met ruimte voor vierkante of ronde uitsneden. Gebruik SVG voor schaalbaar ontwerpwerk.

Transparante beeldmerken

Beeldmerk voor lichte achtergronden downloaden (SVG)
Beeldmerk voor donkere achtergronden downloaden (SVG)

Combineer het beeldmerk met DM Sans voor het volledige woordmerk. De oudere volledige SVG-logo’s bevatten bewerkbare Arial-tekst en zijn niet de voorkeursbestanden voor nieuw extern werk.

Socialmediabanners downloaden (Engels)

Eén identiteit. Elk kanaal.

Engelse banners voor LinkedIn-bedrijfspagina’s, YouTube en X, klaar om te uploaden. Elk ontwerp gebruikt de goedgekeurde zin “Your RevOps consultant in your AI.” Download PNG om te uploaden of SVG met lettercontouren voor ontwerpwerk. De ingebedde bannertekst blijft Engels.

Alle Engelse banners downloaden (ZIP)

SVG-letters zijn omgezet naar contouren om de lettertypen te behouden. Controleer vóór publicatie de uitsnede in het uploadvoorbeeld van elk platform. Lees de formaat- en uploadinstructies (Engels).

02 / Kleur

Blauw met ruimte om te ademen.

paper#FAFBFE
ink#202733
muted#526078
accent#3563E9
accentHover#254CBE
accentLight#E8EFFF
line#DDE3ED
white#FFFFFF
inverseText#F5F7FC
inverseAccent#82A5FF

Gebruik blauw voor acties, actieve toestanden en de vijfde stip. Houd grote vlakken licht en tekst donker. Vermijd groene merkaccenten en oranje primaire knoppen.

03 / Typografie
Helder denken.
Menselijke expressie.

DM Sans

Primaire koppen, lopende tekst en interface. Duidelijke hiërarchie, gematigde gewichten en ruime regelhoogte.

Newsreader cursief

Korte redactionele accenten in koppen.

IBM PLEX MONO

Stappen, sectielabels en kleine technische details.

Voor nieuwe componenten: 16 px lopende tekst, 14 px secundair, minimaal 12 px voor belangrijke hulptekst. Neem geen piepkleine demolabels over in formulieren.

04 / Componenten

Maak de volgende stap duidelijk.

Je RevOps-consultant in je AI-assistent.

Combineer één duidelijke hoofdactie met een rustiger alternatief.

Primaire actie ↗ Secundaire actie ↗

Voorbeeldknoppen navigeren binnen deze gids. 50 px hoog · 7 px radius · 13 px label. Kaarten hebben een radius van 12–14 px; grote sectiepanelen 18 px.

05 / Ritme en beweging

Ruimte om te begrijpen.

  • Contentbreedte 1240 px; sectieafstand op desktop 100 px.
  • Zet kolommen op smalle schermen onder elkaar; meestal 55–65 px sectieafstand op mobiel.
  • Wissel open, lichte en donkere secties af voor ritme.
  • De hero gaat direct over in het probleem.

Beweging met een doel.

  • Heroverhaal: 5 seconden per fase.
  • Klantlogo’s: doorlopende lus van 25 seconden.
  • Pauzeer bij hover en focus en respecteer verminderde beweging.
  • Verberg essentiële informatie nooit achter animatie.
06 / Hergebruik

Breid het systeem bewust uit.

Elke toekomstige aanbeveling moet de gebruikersbehoefte, het hergebruikte patroon, mobiel gedrag en gevolgen voor toegankelijkheid benoemen. Nieuwe kleuren, lettertypen en logovarianten vragen om een bewuste merkbeslissing.

Deze referentie legt de goedgekeurde richting vast. Voorgestelde hergebruikstandaarden en resterende CSS- en assetverschillen staan in de volledige gids; dit is geen toegankelijkheidscertificering.