logo — test-concept
Vallende ster, spoor van stippen
Concept: verstrooide signalen (reviews, ratings) die samenkomen in één punt — het inzicht. SVG schaalt oneindig; PNG voor plekken die geen SVG tonen (Outlook, sommige tools).
Animatie (optioneel, web-only): de ster pulseert zachtjes en het spoor twinkelt — zoals hierboven in de hero. Geschikt voor een loading-state of een subtiele hover op de publieke site; nooit gebruiken in e-mail (geen animatie-support, kan flikkerend als losse frames tonen) en niet in tools/dashboards (rust > beweging in een werkinterface).
kleur-tokens
Paars → ember, met ink voor donkere surfaces
1-op-1 uit de bestaande marketing-tokens (index.css). Klik op een staal om de hex te kopiëren.
typografie
Familjen Grotesk + Inter
Display/koppen in Familjen Grotesk, UI en lopende tekst in Inter. Klik op de stack om te kopiëren.
klaar om 08:00
⚠ e-mail-uitzondering: Familjen Grotesk laadt niet in de meeste e-mailclients (Outlook desktop rendert geen web-fonts). Gebruik in e-mailtemplates altijd de systeem-fallback:
per kanaal
Wat mag waar
Zelfde merk, andere beperkingen per medium.
| Kenmerk | Website | Tools / dashboards | |
|---|---|---|---|
| Logo | Lockup of icoon, SVG | Lockup als gehost PNG (@2x), geen inline SVG (Outlook) | Mark-only (ink/wit), klein, geen kleurverloop-badge in dichte UI |
| Animatie | Toegestaan — subtiel (pulse/twinkle), prefers-reduced-motion respecteren |
Nooit | Nooit (rust boven beweging in werk-UI) |
| Kleur | Volledig verloop brand→ember, ink-achtergronden voor "rapport"-secties | Effen kleuren; verloop alleen in het gehoste logo-beeld, niet in tekst/knoppen (renderrisico) | Beperkte accenten: brand-600 voor primaire actie, ember-500 sporadisch voor attentie |
| Font | Familjen Grotesk (koppen) + Inter | Arial/Helvetica-fallback (system-ui-stack) | Inter / systeem-UI-font, geen display-font nodig |
| Achtergrond | Mauve licht + ink-donker (rapport-secties) | Wit — leesbaarheid en dark-mode-inversie in mailclients | Bestaande UI-achtergrond van de tool; logo past zich aan (ink- of witte mark) |
gebruik
Clearspace & do's / don'ts
Wel
- Houd minstens de hoogte van de ster vrij rond het icoon.
- Gebruik de kleurverloop-badge alleen op de app-tegel/favicon, niet als tekstachtergrond.
- Op donkere ("ink") achtergronden: witte mark/wordmark, geen ink-variant.
- In e-mail: gehoste PNG, geen animatie, systeem-font.
Niet
- Niet verdraaien, uitrekken of de sterverhouding wijzigen.
- Geen extra schaduwen/gloed toevoegen buiten wat hier staat.
- Geen paars-op-paars of ember-op-ember (te weinig contrast).
- Dit icoon niet naast het bestaande app-icoon in
marketing/gebruiken zonder akkoord — het is een test-concept, geen vervanging.