Style Guide
De Domein Groot Besselink stijlgids, waarin we de belangrijkste stijlelementen voor de website verkennen.
De basis hiervan is een CSS framework waarin alle variabelen worden vastgelegd om zo een consistent ontwerp te behouden. Al deze variabelen hebben een wiskundige basis en zijn schaalbaar tussen verschillende schermformaten.
Bedrijfsgegevens
Domein Groot Besselink
Lage Lochemseweg 31 C
7218 PA Almen
Moodboard
Verzameling afbeeldingen om de inspiratie en ideeën van de visuele richting van ons project vast te leggen.






Color Pallete
Richtlijnen voor kleuren en -gebruik om Domein Groot Besselink effectief te vertegenwoordigen.
Brand Colors
‘Brand colors’ zijn 1 of meer specifieke kleuren die jouw merk vertegenwoordigen en gebruikt worden in alle visuele communicatie. Deze kleuren zijn zorgvuldig gekozen om een herkenbare en consistente merkidentiteit op te bouwen. Het gebruik van vaste kleuren helpt een merk om visueel op te vallen en een emotionele connectie met het publiek te creëren, door associaties en waarden over te brengen die passen bij het imago van jouw merk. Gebruik van 1 kleur geeft vaak rust, meer kleuren een meer eclectische uitstraling.
Primary
Secondary
Tertiary
Accent
Primary
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
Secondary
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
Tertiary
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
Accent
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
Neutral colors
‘Neutral colors’ zijn kleuren die geen sterke emotionele lading of associatie hebben en meestal dienen als achtergrond of basis in ontwerpen. Ze worden vaak gebruikt om andere, meer opvallende kleuren te balanceren en te ondersteunen, en zorgen voor een rustige, harmonieuze uitstraling in visuele ontwerpen.
Base
Neutral
Base
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
Neutral
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
Semantic Colors
‘Semantic colors’ zijn kleuren die een specifieke betekenis overbrengen binnen de context van een ontwerp of gebruikersinterface. Ze worden vaak gebruikt om een bepaalde functie of status te communiceren, zoals rood voor fouten of waarschuwingen, groen voor successen, blauw voor informatie en geel voor aandacht of waarschuwingen. In webontwikkeling en UI-design helpen semantische kleuren gebruikers intuïtief te begrijpen wat er gebeurt op een website of applicatie, doordat de kleur direct verband houdt met de actie of boodschap die wordt overgebracht.
Success
Danger
Warning
Info
Success
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
Danger
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
Warning
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
Info
Ultra Light
Light
Semi Light
Semi Dark
Dark
Ultra Dark
Typography
Richtlijnen voor typografiestijlen en -gebruik om Domein Groot Besselink effectief te vertegenwoordigen.
Font Families
Net als bij merkkleuren dragen lettertypes bij aan de visuele identiteit van jouw merk en versterken ze de boodschap die je wil overbrengen. Ze worden toegepast in logo’s, websites, advertenties, en andere vormen van branding om eenheid en herkenbaarheid te waarborgen. Gekozen kan worden voor 1 lettertype of een fontpair.
Headings: Teacher
Headings
Heading 1 (H1)
Heading 2 (H2)
Heading 3 (H3)
Heading 4 (H4)
Heading 5 (H5)
Heading 6 (H6)
Body Text
Dit is voorbeeld tekst. Geen zorgen, dit zal vervangen worden bij de afronding van je website. Zo gauw alle informatie aanwezig is, zal deze voorbeeld tekst vervangen worden door de juiste teksten.
Soms is het nodig om tijdelijke tekst te plaatsen om een idee te krijgen hoe de tekst op de website eruit ziet.
Van oudsher gebruikt onze branche Lorem Ipsum, een voorbeeld tekst geschreven in het Latijn. Helaas is niet iedereen bekend met Lorem Ipsum en dat kan tot verwarring leiden. Ik kan je niet vertellen hoe vaak klanten me hebben gevraagd waarom hun website in een andere taal is!
Er zijn andere voorbeeld teksten zoals Hipster Ipsum, Zombie Ipsum, Bacon Ipsum en nog veel meer. Soms grappig, deze voorbeeld tekst passages kan ook leiden tot verwarring.
Als je nieuwsgierig bent, dit is Website Ipsum. Het is speciaal ontwikkeld voor gebruik op ontwikkelingswebsites. Behalve dat het minder verwarrend is dan andere Ipsum’s, is Website Ipsum ook geformatteerd in patronen die meer lijken op hoe een echte kopie tegenwoordig op internet wordt geformatteerd.
Weight
Verschillende lettertypegewichten voor tekstuele inhoud.
Aa
Light 300
Aa
Regular 400
Aa
Bold 700
Aa
Italic Light 300
Aa
Italic Regular 400
Aa
Italic Bold 700
Buttons
Richtlijnen voor knopstijlen om een consistente look en feel te behouden.