Kleurgebruik

De vaste online huisstijl kleuren van provincie Brabant zijn rood (#DD0000) en donkergrijs (#666666) gecombineerd met wit (#FFFFFF) en een scala aan grijstinten.

Webrichtlijn contrast

De gebruikte kleur rood in de content wijkt iets af van de huisstijl kleur om te kunnen voldoen aan de overheidsrichtlijnen voor contrast en leesbaarheid.

Huisstijl kleuren

Voorbeelden van gebruik van de vaste rode kleur:

rood

#dd0000

zwart 60%

#666666

wit

#FFFFFF

Grijstinten

Scale van grijstinten als achtergrond voor tekst

zwart 86%

#232323

zwart 80%

#333333

zwart 60%

#666666

zwart 52%

#7a7a7a

zwart 40%

#999999

zwart 25%

#BEBEBE

zwart 20%

#CCCCCC

zwart 15%

#DFDFDF

Steun kleuren

Binnen provinciale websites zijn ook steunkleuren te gebruiken ter versterking van een specifieke uitstraling.

licht oranje

#F7A600

donker oranje

#EC6707

bordeaux rood

#941D42

paars

#5C2483

donker blauw

#24195D

licht blauw

#009AD8

turquoise

#009BA4

donker turquoise

#006E79

donker groen

#006B2D

licht groen

#13A538

lime

#AFCA0B

geel

#FFE500

Kleurverlopen

Gerelateerdeerd informatie - 'knoppen' - aan de rechterzijde is vormgegeven met een licht kleurverloop

#F8F8F8

#EEEEEE

Typografie

Het lettertype binnen de site is 'Arial' en de weergave van normale tekst is in 12 px met een interlinie van 18 px.

Webrichtlijn typografie

Tekst is schaalbaar.

Koppen (headings)

Door gebruik van de juiste heading-elementen in een pagina is de structuur eenvoudiger uit de pagina af te leiden.'

Bezoekers krijgen met een eenvoudige zoekopdracht naar de headings op een pagina een snel overzicht van de inhoud. Dit ijkpunt zorgt voor een drempelvrij en seo-vriendelijk gebruik van de headings elementen. Met bepaalde hulpsoftware kan de bezoeker via de headings-koppen door een pagina lopen en bepalen welke informatie relevant is. Alle headings-elementen zijn vertegenwoordigt.

Voorbeelden

Titel van de webpagina

Subtitel van panel of een paragraaf op een webpagina

Subtitels in overzichtslijst

H1. Futura, 22 px, #DD0000, Bold

H2. Futura, 20 px, #DD0000, Bold

H3. Futura, 18 px, #333333, Bold

H4. Futura, 16 px, #333333, Bold

H5. Futura, 14 px, #333333, Bold
H2. Futura, 12 px, #333333, Bold

Body tekst

Het lettertype van de normale tekst is 'Arial' in 12 px met een interlinie van 18 px. De standaard waarde voor "medium-text" font-weergave in elke moderne browser is 16px. En de eerste stap om deze waarde te verlagen voor de hele website is door de body-tag te voorzien van een font-size van 12 / 16 = 0.75 em. De standaard grootte verandert hiermee in 12px.

Er zijn 2 soorten paragraaf-titels:

  1. Artikel-paragraaf-titel op een zogenaamde detailpagina
  2. Onderwerp-paragraaf-titel op een zogenaamde onderwerppagina

Voorbeeld artikel-paragraaf-titel(detailpagina)

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Voorbeeld onderwerp-paragraaf-titel (onderwerppagina)

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Body tekst intro

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Lijsten

Codeer lijststructuur en lijstelementen met HTML-lijstelementen dl, ul en ol. Hierdoor zijn lijsten en lijstelementen inzichtelijker voor de lezer.

NOOT: gebruik deze alleen voor het maken van lijsten en niet voor formatteringseffecten, zoals inspringen.

Ongeordende lijsten

Gebruik voor een onafhanlijke volgorde een ongeordende (Unorderd list) lijstweergave.

  • Ongeordende lijst item 1
  • Ongeordende lijst item 2
    • Ongeordende lijst item 1
    • Ongeordende lijst item 2
    • Ongeordende lijst item 3
  • Ongeordende lijst item 3

Geordende lijsten

Gebruik voor een hierarchische volgorde een geordende (Orderd list) lijstweergave.

  1. Geordende lijst item 1
  2. Geordende lijst item 2
  3. Geordende lijst item 3

Buttons

Binnen brabant.nl en Brain zijn 2 type buttons beschikbaar. namelijk:

  • btn--default voor normaal (default) gebruik
  • btn--dark voor formulieren, omdat deze een achtergrond kleur hebben.

De buttons hebben allemaal dezelfde hoogte en de inhoud bepaald de breedte van de button.

Webrichtlijnen 2 buttons

Niet alle onderdelen van een formulier krijgen een naam via expliciete associatie van een label of een title attribuut.

  • het value-attribuut geeft een naam aan Submit, Reset en Button (input type="button") knoppen
  • het alt attribuut geeft een naam aan image buttons
  • bij button elementen wordt de naam tussen de <button> tags geboden.

Het is beter om geen reset knop te gebruiken bij een formulier. Het per ongeluk activeren van een reset knop kan namelijk als consequentie hebben dat de gebruiker al haar ingevulde gegevens verliest.

Button classes

Gebruik de beschikbare classes om een button stijlen.

Button tags

Gebruik de .btn op <a>, <button>, or <input> elementen.

Link