Intern en voor partners

Onze huisstijl

Alles wat je nodig hebt om iets te maken dat er als Mediavisie uitziet. Klik op een waarde om hem te kopiëren.

Kleur

Het oranje is de merkkleur en die staat vast. De rest zijn vlakken om dat oranje lucht te geven. De site heeft een lichte en een donkere stand, en een paar tokens wisselen daarin van waarde: dat staat er per kleur bij.

Mediavisie Oranje

De huiskleur. Knoppen, accenten en het beeldmerk.

HEX
RGB
HSL
CMYK
Token

6,10:1 tegen inkt Alle tekst

Inkt

Alle tekst op een licht vlak, en de donkere vlakken zelf.

HEX
RGB
HSL
CMYK
Token

14,86:1 tegen zand Alle tekst

Zand

De achtergrond van de site in de lichte stand.

HEX
RGB
HSL
CMYK
Token

14,86:1 tegen inkt Alle tekst

Zand diep

Het vlak onder een sectie die van de achtergrond af moet komen.

HEX
RGB
HSL
CMYK
Token

13,63:1 tegen inkt Alle tekst

Zand schaduw

Randen en scheidingen op een zandvlak.

HEX
RGB
HSL
CMYK
Token

10,80:1 tegen inkt Alle tekst

Nacht

De achtergrond in de donkere stand, en zwevende vlakken zoals de schakelaar.

HEX
RGB
HSL
CMYK
Token

16,15:1 tegen zand Alle tekst

Nacht diep

Het donkerste vlak. Draagt de strook naar de andere sites.

HEX
RGB
HSL
CMYK
Token

17,13:1 tegen zand Alle tekst

Grijs

Bijschriften en alles wat een stap zachter mag dan de tekst.

HEX
RGB
HSL
CMYK
Token

5,01:1 tegen zand Alle tekst

Het oranje op zand

Het merkoranje haalt op het zand 2,44:1. Dat is te weinig om te lezen, ook voor een kop. Gebruik het daar als vlak met inkt erop, of pak een donkerder oranje als je toch tekst in die kleur wil. Op de donkere stand kan het oranje wel als tekstkleur: daar haalt het 6,63:1.

Letters

Twee letters, met een duidelijke taakverdeling. Helvetica Now Display doet het werk, Instrument Serif zet één woord in de schijnwerper.

Helvetica Now Display

Alles: koppen, lopende tekst, knoppen, het menu.

We bedenken strategie, bouwen aan merken en bereiken resultaat.

  • Aa Light 300
  • Aa Regular 400
  • Aa Medium 500
  • Aa Bold 700
  • Aa ExtraBold 800

Instrument Serif

Alleen voor de woorden die je wil laten opvallen in een kop. Nooit voor lopende tekst.

bedenken, bouwen, bereiken

  • Aa Italic 400

Groottes

De schaal schaalt mee met het scherm. Wat je hieronder ziet is de werkelijke grootte op de breedte waarop je nu kijkt, dus maak je scherm smaller en het beweegt mee.

clamp(64px, 9vw, 160px) Het grote woord op een openingsscherm.

Display

clamp(52px, 7.5vw, 120px) De kop van de homepage.

Hero

clamp(44px, 6vw, 140px) De paginatitel.

H1

clamp(32px, 4vw, 96px) Sectiekoppen.

H2

clamp(24px, 2.8vw, 64px) Koppen binnen een sectie.

H3

clamp(20px, 2.2vw, 48px) Kaarttitels.

H4

clamp(16px, 1.1vw, 22px) Lopende tekst.

Tekst

clamp(13px, 0.95vw, 18px) Bijschriften en metagegevens.

Detail

13px Kleine kapitalen boven een sectie.

Label

Maten en vormen

Rondingen en tussenruimte. Vijf stappen, gekoppeld aan de rol van het vlak: hoe groter het vlak, hoe ronder de hoek. Knoppen en dunne balken zijn altijd volledig rond.

6px Merktekens, toetsen en markeringen.
10px Chips, kleine vlakken en meldingen.
14px Bedieningselementen, tegels en formuliervelden.
clamp(16px, 1.6vw, 28px) Kaarten, panelen, secties en beeld. Loopt mee met het scherm.
100px Knoppen, tags, schakelaars en dunne balken. Altijd volledig rond.
clamp(12px, 1.2vw, 28px) De ruimte tussen kaarten in een raster.
1.05em Regelafstand in koppen.
1.75em Regelafstand in lopende tekst.

Knoppen

Eén hoofdactie per scherm. De rest krijgt een lichtere knop, zodat duidelijk blijft wat we willen dat je doet.

Standaard
De belangrijkste actie op een scherm. Er staat er één per sectie.
Tweede
De actie ernaast, die minder zwaar mag wegen.
Omlijnd
Op een vlak waar een gevulde knop te hard wordt.
Stil
Voor een actie die er wel moet zijn maar niet mag roepen.

Schrijven

Hoe we klinken. Dit zijn afspraken en geen suggesties: ze gelden voor webteksten, mails, offertes en alles wat er verder onder onze naam uitgaat.

Geen kastlijntjes

Gebruik een punt, een komma of een dubbele punt. Een lange streep midden in een zin leest als een adempauze die er niet is, en hij komt in geen enkele Nederlandse tekst van ons voor.

Wel We bouwen het zelf. Dat scheelt je een schakel.

Niet We bouwen het zelf, dat scheelt je een schakel.

Gewone taal boven vakjargon

Schrijf wat iets de klant oplevert, niet hoe het bij ons heet. Een term die je aan de telefoon zou uitleggen, leg je in de tekst ook uit of laat je weg.

Wel Je site laadt binnen een seconde, ook op een matige verbinding.

Niet Geoptimaliseerde Core Web Vitals met een LCP onder de 1s.

Actief en concreet

Zeg wie wat doet. De lijdende vorm maakt een zin langer en vager tegelijk.

Wel Wij bouwen de site, jij houdt de sleutels.

Niet De site wordt gebouwd waarna het beheer wordt overgedragen.

Je, niet u

We schrijven onze klanten aan met je. Alleen richting onderwijsinstellingen en overheden kan u passen, en dan doen we het consequent op die hele pagina.

Wel Vertel wat je wil bereiken.

Niet Vertelt u ons wat u wenst te bereiken.

Wel en niet

De vier dingen die het vaakst misgaan, met de reden erbij. Snap je de reden, dan weet je ook wat te doen in een geval dat hier niet staat.

Wel Het oranje als vlak, met donkere tekst erop.

Niet Het oranje als tekstkleur op zand.

Op zand haalt het oranje 2,4:1. Dat is niet te lezen. Als vlak met inkt erop haalt het 6,1:1.

Wel De serif voor één of twee woorden in een kop.

Niet De serif voor een hele alinea.

Het is een accentletter. Zet je er meer dan een paar woorden in, dan valt het accent weg en leest het slechter.

Wel Het beeldmerk op een rustig vlak, met ruimte eromheen.

Niet Het beeldmerk over een foto of tegen een rand aan.

Het merk moet los kunnen ademen. Houd minstens de hoogte van de letters vrij aan alle kanten.

Wel Eén hoofdactie per scherm.

Niet Drie gevulde knoppen naast elkaar.

Als alles even zwaar is, kiest niemand. De tweede actie krijgt de omlijnde of stille knop.

E-mailhandtekening

Dezelfde opbouw voor iedereen. Vervang wat tussen haakjes staat en laat de rest zoals het is.

[Voornaam Achternaam]
[Functie]

Mediavisie
Brink 90, 7411 BZ Deventer
Palatijn 3, 7521 PN Enschede

053 - 461 13 41
[voornaam]@mediavisie.nl
mediavisie.nl

Geen plaatjes

Geen logo als afbeelding, geen banner, geen citaat eronder. De helft van de ontvangers blokkeert externe beelden en ziet dan een rij grijze vlakken. Platte tekst komt overal aan.