Stijlgids · CrossView

Merk en interface

Alles begint bij het logo

Het raster vergelijkt opties kruislings. De grijze starttegel groeit via twee tussenstappen naar de rode, uitgewerkte keuze, die als enige een vinkje draagt en zelfs uit het raster breekt. Uit die vier tegels komen alle kleuren, combinaties en regels op deze pagina.

Stijlhandboek bekijken Handboek als PDF

Starttegel: De eerste optie, nog onuitgewerkt.
Tussentegels: Groeien elk in één richting.
Gekozen tegel: Uitgewerkt, met vinkje, breekt uit.
i-stip: De starttegel in het woord "View".

Merk

CrossView laat ontwerprichtingen eerlijk naast elkaar zien, zodat een team zonder groepsdruk tot een gedragen keuze komt.

Slogan

Kruislings vergelijken, trefzeker kiezen.

Belofte

Eerst eerlijk vergelijken, dan pas beslissen.

Cross

Kruislings vergelijken over duidelijke assen: meerdere uitgewerkte richtingen, allemaal met dezelfde inhoud, recht tegenover elkaar.

View

Rustig overzien vanaf je eigen scherm. Iedereen beoordeelt in eigen tempo, zonder verkoper of ontwerper die meekijkt.

ClearView

Het definitieve, beargumenteerde eindontwerp. Beoordelingen zijn input; het besluit wordt bewust zelf genomen en vastgelegd.

Eerlijk

Gelijke inhoud, gelijke kansen. We vergelijken vormgeving, niet wie de mooiste foto aanleverde.

Nuchter

Geen verkooppraat of superlatieven. We laten het werk voor zichzelf spreken.

Helder

Eén volgende stap per scherm, één accent per vlak, korte zinnen.

Zorgvuldig

Precieze lijnen, exacte maten en toetsbare keuzes, van kleurcontrast tot woordkeus.

Logo

Gebruik altijd de officiële bestanden. Kies de variant op basis van de grond: licht, donker, of een eigen vlak. Elke variant is te downloaden als SVG en als PNG.

Logo

Standaard op lichte grond

SVG PNG

Logo donker

Op donkere grond

SVG PNG

Op accent

Met eigen rood vlak

SVG PNG

Op inkt

Met eigen donker vlak

SVG PNG

Gestapeld

Voor smalle of vierkante ruimtes

SVG PNG

Gestapeld donker

Op donkere grond

SVG PNG

Woordmerk

Als het beeldmerk al elders staat

SVG PNG

Woordmerk donker

Op donkere grond

SVG PNG

Beeldmerk

Vanaf 32 px, met vinkje

SVG PNG

Beeldmerk donker

Vanaf 32 px op donker

SVG PNG

Beeldmerk klein

Onder 32 px, zonder vinkje

SVG PNG

Klein donker

Onder 32 px op donker

SVG PNG

Eenkleurig

Zwart-witdruk, gravure, folie

SVG PNG

Wit

Op foto's en donkere vlakken

SVG PNG

Vrije ruimte

Houd rondom het logo minstens de hoogte van de starttegel vrij. Geen tekst, rand of beeld binnen die zone.

Minimale grootte

Vanaf 32 px blijft het vinkje leesbaar. Daaronder neemt het kleine beeldmerk het over: de rode tegel draagt dan alleen de keuze. Het liggende logo nooit smaller dan 120 px.

64 px

48 px

32 px

24 px

16 px

Wel doen

De lichte variant op wit of grond, de donkere op zwart.
De ongelijke tegelmaten laten zoals ze zijn: dat is het verhaal van groei.
Het eenkleurige logo voor zwart-witdruk, gravure en folie.
De varianten met eigen vlak op foto's of drukke achtergronden.

Niet doen

Tegels gelijk maken, verplaatsen of herkleuren.
Het vinkje gebruiken onder 32 px: kies dan het kleine beeldmerk.
Het woordmerk opnieuw zetten in een ander lettertype.
Schaduw, verloop of omlijning toevoegen aan het logo.

Animatie

Het logo vertelt zijn eigen verhaal: vier gelijke opties verschijnen, de onderste rij wordt kort vergeleken, de tegels groeien naar hun echte vorm en de gekozen tegel krijgt zijn vinkje. Bij het logo schuift daarna het woordmerk in.

Logo licht

Op wit en de grond

Eenmalig Herhalend

Logo donker

Op zwart en inkt

Eenmalig Herhalend

Beeldmerk licht

Laadscherm, app-start

Eenmalig Herhalend

Beeldmerk donker

Op donkere vlakken

Eenmalig Herhalend

Eenmalig

Speelt 3,5 seconden en blijft staan als het gewone logo. Voor een eerste kennismaking: een introductiepagina, laadscherm of de opening van een presentatie.

Herhalend

Een lus van 5,9 seconden met een rustpauze op het eindbeeld. Alleen waar het logo los staat, zoals een wachtscherm of beurs-scherm. Nooit naast lopende tekst.

Minder beweging

Wie in het systeem minder beweging heeft ingesteld, krijgt automatisch het stilstaande logo. Gebruik daarvoor het componentLabLogoAnimation.

Kleuren

Rood is het enige accent en wordt per regio maar één keer uitgegeven. Alles daaromheen is inkt, grijs of wit.

Logokleuren

De acht globale kleuren uit het Affinity-palet "CrossView F2". Elke kleur heeft een lichte en een donkere variant, zodat het logo op beide gronden dezelfde verhouding houdt.

#FF4438

Rood licht

RGB 255 68 56

Gekozen tegel en "View" op lichte grond. Het enige accent.

--color-lab-primary

#FF5240

Rood donker

RGB 255 82 64

Gekozen tegel en "View" op donkere grond.

#3B4652

Inkt licht

RGB 59 70 82

Tussentegels en "Cross" op lichte grond. Secundaire kleur.

--color-lab-secondary

#E6EBF0

Inkt donker

RGB 230 235 240

Tussentegels en "Cross" op donkere grond.

--color-lab-secondary-subtle

#B4BDC6

Starttegel licht

RGB 180 189 198

De starttegel op lichte grond. Alleen decoratief.

--color-lab-ink-light, --color-lab-secondary-border

#4E5965

Starttegel donker

RGB 78 89 101

De starttegel op donkere grond. Alleen decoratief.

#FFFFFF

Wit

RGB 255 255 255

Lichte grond van het logo en elk vlak dat erop ligt.

--color-lab-surface

#0F1419

Zwart

RGB 15 20 25

Donkere grond van het logo, leestekst en eenkleurig logo.

--color-lab-text, --color-lab-neutral

Afgeleid voor de interface

Tinten die uit de logokleuren zijn afgeleid voor grond, lijnen en leesbare tekst. Ze verschijnen niet in het logo zelf.

#F4F6F8

Grond

RGB 244 246 248

Pagina-achtergrond, zodat witte vlakken zichtbaar opliggen.

--color-lab-bg

#EAEEF2

Vlak zacht

RGB 234 238 242

Hover, skeleton en neutrale badges.

--color-lab-surface-subtle

#DFE4E9

Lijn

RGB 223 228 233

Elke rand, scheiding en haarlijn.

--color-lab-line

#C3CAD2

Lijn sterk

RGB 195 202 210

Randen bij hover en focus.

--color-lab-line-strong

#525D69

Gedempt

RGB 82 93 105

Bijschriften, meta en placeholders.

--color-lab-muted

#D63024

Accenttekst

RGB 214 48 36

Het accent als tekst: links, badges, stempels.

--color-lab-primary-text

#FFE9E7

Accent zacht

RGB 255 233 231

Zachte vulling achter accentbadges.

--color-lab-primary-subtle

#2A3440

Inkt hover

RGB 42 52 64

Secundaire knop bij hover.

--color-lab-secondary-hover

Status en meldingen

Fout, waarschuwing, succes en info. Elke status heeft een volle kleur en een zachte vulling, en haalt AA voor tekst. Karmijn is bewust dieper dan het logo-rood, zodat een fout nooit als accent leest.

#A51D2B

Karmijn

RGB 165 29 43

Fout: verwijderen, ontbrekende invoer. Dieper dan het logo-rood.

--color-lab-error

#FFEDEC

Fout zacht

RGB 255 237 236

Vulling achter foutmeldingen.

--color-lab-error-subtle

#F5AE39

Amber

RGB 245 174 57

Waarschuwing als vlak of bolletje, met zwart erop.

--color-lab-warning-fill

#8A5700

Amber donker

RGB 138 87 0

Waarschuwing als tekst en icoon.

--color-lab-warning

#FFF2DC

Waarschuwing zacht

RGB 255 242 220

Vulling achter waarschuwingen.

--color-lab-warning-subtle

#008053

Smaragd

RGB 0 128 83

Gelukt of opgeslagen.

--color-lab-success

#E6F9EE

Succes zacht

RGB 230 249 238

Vulling achter succesmeldingen.

--color-lab-success-subtle

#226FB3

Blauw

RGB 34 111 179

Neutrale informatie, zoals een lopende ronde.

--color-lab-info

Kleurcombinaties

Getoetst aan WCAG 2.1 AA: tekst vraagt 4,5:1, grote tekst en grafische elementen 3:1. De verhoudingen worden live uit de kleuren berekend.

AaKoppen en lopende tekst

Zwart op Grond

17,1:1 · AA tekst

AaLogo en secundaire koppen

Inkt licht op Wit

9,6:1 · AA tekst

AaBijschriften en meta

Gedempt op Grond

6,2:1 · AA tekst

AaTekstlinks en stempels

Accenttekst op Wit

4,9:1 · AA tekst

AaAccentknop (merkkeuze, korte labels)

Wit op Rood licht

3,4:1 · AA grafisch

AaSecundaire knop

Wit op Inkt licht

9,6:1 · AA tekst

AaTekst op donkere vlakken

Inkt donker op Zwart

15,4:1 · AA tekst

AaLogo-accent op donker

Rood donker op Zwart

5,8:1 · AA tekst

AaFocusring en markering (grafisch)

Rood licht op Grond

3,2:1 · AA grafisch

AaFoutmelding

Karmijn op Fout zacht

6,6:1 · AA tekst

AaWaarschuwingsvlak

Zwart op Amber

9,7:1 · AA tekst

AaWaarschuwingstekst

Amber donker op Waarschuwing zacht

5,5:1 · AA tekst

Vermijden

Amber op Wit · 1,9:1

Niet als tekst: gebruik Amber donker

Rood licht op Wit · 3,4:1

Niet als tekst: gebruik Accenttekst

Starttegel licht op Wit · 1,9:1

Alleen decoratief, nooit tekst

Typografie

Drie families, elk met een eigen taak. In Office-documenten vallen ze terug op Arial.

Satoshi · Display

Bold 700, Black 900

Het woordmerk, paginatitels, koppen en grote cijfers.

Geist Sans · Tekst

Regular 400, Medium 500, Semibold 600

Lopende tekst, knoppen, navigatie en formulieren.

Inter · Detail

Semibold 600, Bold 700

Labels, datums, nummers, stempels en tabellen.

Titel

48 px · Black · -4% spatiëring · print 36 pt

Eerst vergelijken

Kop 1

32 px · Black · print 24 pt

Kruislings vergelijken

Kop 2

24 px · Bold · print 16 pt

Rustig overzien

Kop 3

18 px · Bold · print 12 pt

Ronde 2 · huidig

Tekst

16 tot 18 px · Regular · regelafstand 1,6 · print 9,5 tot 10,5 pt

Iedereen beoordeelt in eigen tempo, zonder groepsdruk.

Klein

14 px · Regular · print 8 pt

Laatst bijgewerkt op 27 oktober 2026

Label

11 px · Semibold · hoofdletters · print 7 pt

Ronde 2 · huidig

Tekst en toon

Nuchter, helder, eerlijk en persoonlijk: zo klinkt CrossView, van knop tot campagne.

Nuchter, niet opgeklopt

Iedereen kijkt zelf, in eigen tempo.

Revolutionaire, baanbrekende beoordelingsbeleving!

Helder, niet vaag

Beoordeel de zes richtingen voor vrijdag.

Graag uw input op de diverse concepten.

Eerlijk, niet sturend

Een ranking is input, geen besluit.

De winnaar is bekend!

Persoonlijk, niet ambtelijk

Je ziet de andere beoordelingen nadat je hebt opgeslagen.

Na indiening worden overige beoordelingen zichtbaar.

Schrijfregels

Taal: Nederlands. Spreek de lezer aan met je en jij. Engels alleen voor vaste productnamen.
Hoofdletters: Koppen, knoppen en labels in zinsvorm: alleen de eerste letter en namen met een hoofdletter.
Knoppen: Werkwoord plus onderwerp: "Beoordeling opslaan", "Ronde openen". Nooit alleen "OK" of "Verstuur".
Leestekens: Geen lange gedachtestreep (—). Gebruik een dubbele punt, komma, haakjes of een nieuwe zin. Het koppelteken (-) en het bereikstreepje (–) mogen wel.
Zinnen: Kort en actief. Eén gedachte per zin, het belangrijkste eerst.
Getallen en datums: Datums voluit: 17 september 2026. Getallen onder de tien in woorden in lopende tekst, cijfers in tabellen en labels.
Foutmeldingen: Zeg wat er gebeurde en wat de lezer nu kan doen. Geen schuld, geen technische codes.
Lege schermen: Een uitnodiging met één duidelijke volgende stap, geen "Geen resultaten".

Woordenlijst

CrossView: Altijd aan elkaar, met hoofdletters C en V. Nooit Crossview, Cross View of CROSSVIEW in lopende tekst.
ClearView: De fase en het resultaat: het definitieve, beargumenteerde eindontwerp.
Richting: Een uitgewerkt ontwerp binnen een ronde. In vakteksten ook stijlwereld.
Ronde: Eén vergelijkingsmoment met een vaste set richtingen en een eigen besluit.
Beoordeling: De input van één beoordelaar. Nooit "stem" of "uitslag".
Besluit: Wat het team zelf vastlegt na de ronde. Een ranking of AI-advies is nooit het besluit.
Advies, geen besluit: Vaste toevoeging bij AI-analyses en samenvattingen.

Toepassingen

Formaten en afspraken voor print, social media en marketing. De volledige uitwerking staat in het stijlhandboek.

Visitekaartje85 × 55 mm: Voorzijde wit met logo, achterzijde zwart met beeldmerk. Minimaal 350 g/m², mat.
BriefpapierA4 · 210 × 297 mm: Logo linksboven op 20 mm van de rand, adresblok onderaan in Inter 7 pt.
FlyerA5 · 148 × 210 mm: Eén boodschap, één rood accent, logo onderaan.
PosterA3 / A2: Grote tegels als achtergrondvorm, titel in Satoshi Black.
Roll-up banner85 × 200 cm: Logo in het bovenste derde, belangrijkste tekst boven 100 cm. Onderste 20 cm leeg (voet en ooghoogte).
Spandoek210 × 100 cm: Gestapeld of liggend logo op minstens een derde van de hoogte; leesbaar op 10 meter.

Social media

LinkedIn post1200 × 1200 px: Vierkant, of 1200 × 627 px voor een link.
LinkedIn banner1584 × 396 px: Logo rechts: links valt de profielfoto over de banner.
Instagram feed1080 × 1350 px: Staand 4:5, beste bereik in de feed.
Stories en reels1080 × 1920 px: Houd 250 px boven en onder vrij voor de interface.
Profielfoto400 × 400 px: Beeldmerk op wit, gecentreerd; wordt rond afgesneden.
Deelbeeld (Open Graph)1200 × 630 px: Automatisch bij gedeelde links; officieel bestand in de stijlgids.

Aanleveren voor druk

Afloop: 3 mm rondom (groot formaat: volgens drukker, vaak 2 tot 5 cm)
Veilige marge: 5 mm binnen het snijformaat, 10 mm bij brochures
Kleurmodus: CMYK coated (FOGRA39), spotkleur Warm Red C waar mogelijk
Zwart: Tekst kleiner dan 12 pt in 100 % K; grote vlakken in diep zwart 60 50 40 100
Resolutie: 300 dpi op eindformaat; groot formaat 100 tot 150 dpi
Bestanden: PDF/X-4 met ingesloten lettertypen; logo altijd als vector (SVG, PDF, AI)
Kleurproef: Altijd een proefdruk van het rood: fel oranjerood ligt deels buiten CMYK

Presentaties

16:9 (1920 × 1080). Titelslide op zwart met het donkere logo, inhoudsslides op wit met het beeldmerk klein linksonder. Eén boodschap per slide, rood voor het ene kerncijfer.

E-mailhandtekening

Naam in Arial Bold, functie en contact in Arial Regular 11 px. Beeldmerk als PNG van 32 px hoog; geen slogans of banners.

Nieuwsbrief

600 px breed, logo bovenaan op wit, één hoofdboodschap met één rode knop. Lettertypen vallen terug op Arial.

Beurs en evenement

Roll-up en spandoek volgens de printformaten. Beeldmerk-animatie op schermen als herhalende versie.

Merchandise

Eenkleurig logo of beeldmerk in zeefdruk of borduur; minimaal 8 mm beeldmerk. Op donkere stof het witte logo.

Video

Openen of sluiten met de eenmalige logo-animatie op wit of zwart. Ondertitels in Geist Sans, wit op een zwart vlak.

Iconen en deelbeeld

Favicons, app-iconen en het deelbeeld voor sociale media. Ze staan in de root van de site en worden door de browser en het besturingssysteem zelf opgehaald.

favicon.svg

Volgt licht en donker

favicon-16.png

16 px, zonder vinkje

favicon-32.png

32 px

favicon-48.png

48 px

apple-touch-icon.png

180 px, iOS rondt zelf af

icon-192.png

192 px

icon-512.png

512 px

icon-maskable-512.png

512 px, Android-veilige zone

safari-pinned-tab.svg

Eenkleurig masker

og-image.png

1200 × 630 px, voor links op sociale media en in chat

Download

Componenten

De logokleuren in gebruik. Dezelfde tokens onder de motorkap: wat hier verandert, verandert overal.

Knoppen

Badges

NeutraalAccentSecundairSuccesFoutOmlijnd

Formulierveld

Naam van de ronde

Kaart en link

Een kaart

Wit vlak op de koele grond, met lijn en schaduw uit dezelfde tokens.

Een tekstlink

Typografie

Lopende tekst in Geist Sans, koppen en het woordmerk in Satoshi, dit label in Inter: drie families, één systeem.

Detail label

Donker vlak

Inkt donker op zwart, met het rood van de donkere variant.

Tokens

Alle kleuren, lettertypes en schaduwen van de CrossView-chrome lopen via deze tokens. Een opgeslagen aanpassing geldt per direct op elke lab-pagina: hub, beoordelen, rapport en documentatie. De zes stijlwerelden binnen een project doen bewust niet mee. De logokleuren hierboven liggen vast in de logobestanden en volgen een aanpassing niet.

Bewerken ontgrendelen

De stijlgids is voor iedereen zichtbaar. Aanpassen kan alleen met het admin-wachtwoord: een wijziging geldt direct voor de hele lab-omgeving.

Accent

Het rood van het logo is het enige accent. Accenttekst is een eigen, diepere tint die als tekst leesbaar blijft.

Accent

--color-lab-primary

#FF4438

Accent hover

--color-lab-primary-hover

#F03D31

Accent als tekst

--color-lab-primary-text

#D63024

Accenttekst hover

--color-lab-primary-text-hover

#B8281D

Tekst op accent

--color-lab-primary-content

#FFFFFF

Accent zacht

--color-lab-primary-subtle

#FFE9E7

Accent lijn

--color-lab-primary-border

#FFB6AF

Secundair en neutraal

Secundair

--color-lab-secondary

#3B4652

Secundair hover

--color-lab-secondary-hover

#2A3440

Tekst op secundair

--color-lab-secondary-content

var(--color-lab-primary-content)

Secundair zacht

--color-lab-secondary-subtle

#E6EBF0

Secundair lijn

--color-lab-secondary-border

var(--color-lab-ink-light)

Neutraal

--color-lab-neutral

var(--color-lab-text)

Tekst op neutraal

--color-lab-neutral-content

var(--color-lab-bg)

Oppervlakken, lijnen en tekst

De koele grond, witte vlakken, lijnen en inkt. Starttegel-grijs is alleen decoratief en nooit voor tekst.

Basis 100

--color-lab-base-100

var(--color-lab-bg)

Basis 200

--color-lab-base-200

var(--color-lab-surface-subtle)

Basis 300

--color-lab-base-300

var(--color-lab-line)

Tekst op basis

--color-lab-base-content

var(--color-lab-text)

Pagina-achtergrond

--color-lab-bg

#F4F6F8

Oppervlak

--color-lab-surface

#FFFFFF

Oppervlak verhoogd

--color-lab-surface-elevated

var(--color-lab-surface)

Oppervlak zacht

--color-lab-surface-subtle

#EAEEF2

Lijn

--color-lab-line

#DFE4E9

Lijn zacht

--color-lab-line-subtle

#EEF1F4

Lijn sterk

--color-lab-line-strong

#C3CAD2

Tekst

--color-lab-text

#0F1419

Tekst gedempt

--color-lab-muted

#525D69

Ink licht (decoratief)

--color-lab-ink-light

#B4BDC6

Statuskleuren

Fout

--color-lab-error

#A51D2B

Tekst op fout

--color-lab-error-content

var(--color-lab-primary-content)

Fout zacht

--color-lab-error-subtle

#FFEDEC

Succes

--color-lab-success

#008053

Tekst op succes

--color-lab-success-content

var(--color-lab-primary-content)

Succes zacht

--color-lab-success-subtle

#E6F9EE

Succes lijn

--color-lab-success-border

#A6DCBE

Waarschuwing

--color-lab-warning

#8A5700

Tekst op waarschuwing

--color-lab-warning-content

var(--color-lab-text)

Waarschuwing zacht

--color-lab-warning-subtle

#FFF2DC

Waarschuwing lijn

--color-lab-warning-border

#F4C98E

Waarschuwing vlak

--color-lab-warning-fill

#F5AE39

Info

--color-lab-info

#226FB3

Tekst op info

--color-lab-info-content

var(--color-lab-primary-content)

Info zacht

--color-lab-info-subtle

#E7F5FF

Info lijn

--color-lab-info-border

#ACD2FB

Kop

Kop achtergrond

--color-lab-header-bg

var(--color-lab-bg)

Kop oppervlak

--color-lab-header-surface

var(--color-lab-surface-subtle)

Kop tekst

--color-lab-header-text

var(--color-lab-text)

Kop tekst gedempt

--color-lab-header-muted

var(--color-lab-muted)

Kop lijn

--color-lab-header-line

var(--color-lab-line)

Kop accent

--color-lab-header-primary

var(--color-lab-primary-text)

Achtergronden

Kop

--background-lab-header

var(--color-lab-bg)

Briefing

--background-lab-briefing

var(--color-lab-bg)

Custom

--background-lab-custom

var(--color-lab-bg)

Footer

--background-lab-footer

var(--color-lab-neutral)

Typografie

Drie zelf-gehoste families: Geist Sans voor tekst, Satoshi voor koppen en het woordmerk, Inter voor detail en ledger.

Lopende tekst

--font-lab

"Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif

Display koppen

--font-lab-display

"Satoshi", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Detail en ledger

--font-lab-detail

"Inter", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Schaduwen

Diepte komt uit schaduw en lijnen, niet uit verlopen.

Schaduw xs

--shadow-lab-xs

0 1px 2px 0 rgba(0, 0, 0, 0.04)

Schaduw sm

--shadow-lab-sm

0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06)

Schaduw md

--shadow-lab-md

0 4px 14px -2px rgba(15, 20, 25, 0.07), 0 2px 6px -2px rgba(15, 20, 25, 0.04)

Schaduw lg

--shadow-lab-lg

0 12px 24px -4px rgba(15, 20, 25, 0.09), 0 4px 8px -2px rgba(15, 20, 25, 0.03)

Schaduw xl

--shadow-lab-xl

0 20px 32px -6px rgba(15, 20, 25, 0.12), 0 8px 16px -4px rgba(15, 20, 25, 0.06)

Schaduw gloed

--shadow-lab-glow

0 0 24px -4px rgba(255, 68, 56, 0.35)

Coss kaart

--shadow-coss-card

var(--shadow-lab-sm)

Coss hover

--shadow-coss-hover

var(--shadow-lab-md)

Coss verhoogd

--shadow-coss-elevated

var(--shadow-lab-lg)

Schaduw 2xs

--shadow-2xs

var(--shadow-lab-xs)