Voorbeeld-thema · Huisstijl vastleggen · Handboek

Op deze pagina lees je wat het doel en de stijl is van het 'Voorbeeld-thema'.

Doel van het Voorbeeld-thema

Met het Voorbeeld-thema laten we zien hoe je een eigen thema kunt doorvoeren op basis van het Start-thema. Het dient als 'voorbeeld' en laat zien hoe je met een paar slimme aanpassingen je eigen huisstijl kunt toepassen.

Stijl van het Voorbeeld-thema uitgebeeld door middel van een violet vlak waarop met witte letters staat geschreven: Voorbeeld-thema. Uitgesproken en vriendelijk. Rechts staat in dezelfde violet kleur Nederland afgebeeld als illustratie.

Stijl van het Voorbeeld-thema

De stijl van het Voorbeeld-thema is uitgesprokener dan die van het Start-thema.

Typografie

In tegenstelling tot het Start-thema wordt er bij het Voorbeeld-thema gebruikgemaakt van twee verschillende lettertypes: Noto Serif en Noto Sans.

De teksten Noto Serif en Noto Sans worden afgebeeld met het overeenkomende lettertype.

Noto Serif wordt gebruikt voor koppen. Hiervoor krijgt basis.heading.font-family de waarde Noto Serif. Noto Sans wordt gebruikt voor alle andere teksten.

De Noto-familie is open source en voldoet aan onze richtlijnen voor typografie.

Leuk detail: De naam Noto komt van 'No Tofu. 'Tofu' is de bijnaam voor het rechthoekje dat je ziet (▯) wanneer een letter of karakter niet kan worden weergegeven op een scherm of printer. Dat betekent dat dit lettertype (bijna) alle talen ter wereld kan tonen, dus geen 'tofu-blokjes' meer op het scherm!

Kleur

In het Voorbeeld-thema voert de kleur violet de boventoon, gecombineerd met puur wit.

Twee cirkels. De linker is violet de rechter is wit met een grijze rand.

Maar dit zijn niet de enige kleuren die vanuit de huisstijl beschikbaar zijn gesteld. Er is een ondersteunend palet met blauwgrijze tinten en diverse signaalkleuren. Deze huisstijlkleuren hebben allemaal een Nederlandse benaming: violet, grijs, blauw, groen, geel, oranje en rood.

Zeven verticale kleurenschema's voor de kleuren violet, grijs, blauw, groen, geel, oranje en rood. De kleurenschema's starten met de meest lichte tint bovenaan en worden naar beneden toe steeds donkerder.

Al deze kleuren zijn als design tokens vastgelegd op het 'Brand' niveau. Vanuit de Common basis-tokens wordt daarnaar verwezen. Zo worden de kleuren consistent toegepast op alle componenten.

De afbeelding toont een blauwe en violet primaire knop. Daarboven staan de verwijzingen vanuit de verschillende token niveau's.

Violet leent zich uitstekend als kleur voor interactie. Daarom is ervoor gekozen knoppen violet te maken. Door de waarden van de basis-tokens action-1 en action-2 aan te passen, hebben de knoppen een afwijkende kleur ten opzichte van andere interactieve componenten.

De afbeelding toont de componenten Button, Link, Breadcrumb Navigation en Page Number Navigation. De knoppen zijn violet. Alle andere interactieve componenten zijn blauw.

De stijl van het Voorbeeld-thema is uitgesproken. Dit zie je ook terug in de Page Footer, waar violet via de basis-token basis.color.accent-1-inverse.bg-default echt van de pagina knalt.

De afbeelding toont de componenten Page Header en Page Footer. In beide componenten komt de violet kleur terug. Bij de Page Footer wordt de violetkleur als achtergrond gebruikt waardoor deze visueel zeer aanwezig is.

Overige keuzes

Voor nu zijn dit de belangrijkste verschillen met het Start-thema. De iconensets en waarden van basis-tokens voor ruimte, afmetingen, afgeronde hoeken, lijndikte en schaduw zijn verder ongewijzigd. Pas ze gerust aan als dat voor jouw organisatie nodig is.

Help deze documentatie te verbeteren

Om ervoor te zorgen dat deze documentatie nuttig, relevant en up-to-date is, kun je een wijziging voorstellen via GitHub.

Vragen

Heb je een vraag? Twijfel niet en neem contact op met het kernteam.