CPI — huisstijlverkenning v3 (signal)

logo — test-concept v3

Chevron-stack, nu op een squircle

Dezelfde drie gelijke chevrons uit v2 (zelfde grootte, zelfde hoek, gelijk verdeeld) — alleen de kleur, de vorm van de tegel en het schrift zijn vervangen. Wordmark is nu een geometrisch kleine-letters "cpi" (Space Grotesk), geen dot-matrix meer.

Icoon

app-tegel, favicon

svg png

Mark — ink

op licht, geen tegel

svg png

Mark — mist

op donker, geen tegel

svg png

Wordmark — ink

Space Grotesk 700, kleine letters

svg* png

Lockup — ink

e-mail header, briefpapier

svg* png

Lockup — mist

donkere UI, dark mode

svg* png

Favicon / app-icon

16 · 32 · 180 · 512px

32 180 512

* de wordmark/lockup-SVG's gebruiken live tekst in Space Grotesk (schaalt oneindig, maar vereist dat het lettertype beschikbaar is waar je het opent — werkt in elke browser). De PNG's zijn altijd pixel-correct, ook zonder dat lettertype geïnstalleerd is. Animatie (optioneel, web-only): de drie chevrons bewegen om-en-om een fractie omhoog, zoals in de hero. Nooit in e-mail of tools/dashboards — zelfde regel als v1/v2.

kleur-tokens

Ink, mist, signal-teal

Eén koele accentkleur (teal) in drie stappen voor de chevrons — geen oranje, geen paars, geen verloop. Klik op een staal om de hex te kopiëren.

typografie

Space Grotesk + Inter + JetBrains Mono

Geometrisch, kleine letters voor koppen (Space Grotesk) — geen hoofdletters-stencil meer. Inter voor UI/lopende tekst, JetBrains Mono voor labels en cijfers. Klik op de stack om te kopiëren.

rapport klaar
om 08:00

Deze week 4,6★ gemiddeld over 128 reviews. Twee terugkerende complimenten, één actiepunt over wachttijd bij de lunch.

font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif

font-sans: 'Inter', system-ui, -apple-system, sans-serif

font-mono: 'JetBrains Mono', ui-monospace, monospace

⚠ e-mail-uitzondering: Space Grotesk en JetBrains Mono laden niet in de meeste e-mailclients. Gebruik in e-mailtemplates altijd de systeem-fallback:

font-family (e-mail): Helvetica Neue, Arial, sans-serif

per kanaal

Wat mag waar

Zelfde merk, andere beperkingen per medium.

Kenmerk	Website	E-mail	Tools / dashboards
Logo	Lockup of icoon, SVG	Lockup als gehost PNG (@2x), geen inline SVG (Outlook)	Mark-only (ink/mist), klein, geen squircle-tegel in dichte UI
Animatie	Toegestaan — subtiele puls, `prefers-reduced-motion` respecteren	Nooit	Nooit (rust boven beweging in werk-UI)
Kleur	Ink-secties met teal-accent; geen verloop	Effen kleuren; teal alleen voor knoppen/links, niet als vlak	Teal uitsluitend voor primaire actie; slate voor de rest
Font	Space Grotesk (koppen, kleine letters) + Inter	Helvetica Neue/Arial-fallback	Inter / systeem-UI-font, JetBrains Mono voor labels/cijfers
Achtergrond	Mist licht + ink-donker (hero/rapport-secties)	Wit — leesbaarheid en dark-mode-inversie in mailclients	Bestaande UI-achtergrond van de tool; logo past zich aan (ink- of mist-mark)

gebruik

Clearspace & do's / don'ts

Wel

Houd minstens de hoogte van één chevron vrij rond het icoon.
Eén accentkleur (teal) — geen tweede kleur ernaast introduceren.
Op donkere ("ink") achtergronden: mist-mark/wordmark, geen ink-variant.
In e-mail: gehoste PNG, geen animatie, systeem-font.

Niet

Geen hoofdletters-stencil of dot-matrix meer gebruiken — dat was v2.
Geen warm oranje/khaki terugbrengen — dat las als "jeep-verhuurder".
Geen scherpe/hoekige plaat (octagon) — dit is bewust een zachte squircle.
Dit icoon niet naast v1/v2 of marketing/ gebruiken zonder akkoord — test-concept, geen vervanging.