Style Guide:
De Domein Groot Besselink style guide, in which we explore the most important style elements for the website.
The basis for this is a CSS framework where all variables are defined to maintain a consistent design. All these variables have a mathematical basis and are scalable between different screen sizes.
Company Details
Domein Groot Besselink
Lage Lochemseweg 31 C
7218 PA Almen
Mood board
Collection of images to capture the inspiration and ideas of the visual direction of our project.






Color Palette
Guidelines for colors and usage to Domein Groot Besselink to represent effectively.
Brand Colors
'Brand colors' are 1 or more specific colors that represent your brand and are used in all visual communication. These colors are carefully chosen to build a recognizable and consistent brand identity. Using solid colors helps a brand to stand out visually and create an emotional connection with the audience, by conveying associations and values that fit the image of your brand. Using 1 color often gives peace, more colors a more eclectic look.
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' are colors that do not have a strong emotional charge or association and usually serve as a background or base in designs. They are often used to balance and support other, more striking colors, and provide a calm, harmonious look in visual designs.
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' are colors that convey a specific meaning within the context of a design or user interface. They are often used to communicate a certain function or status, such as red for errors or warnings, green for successes, blue for information, and yellow for attention or warnings. In web development and UI design, semantic colors help users intuitively understand what is happening on a website or application, by directly relating the color to the action or message being conveyed.
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
Guidelines for typography styles and usage to Domein Groot Besselink to represent effectively.
Font Families
Just like brand colors, fonts contribute to the visual identity of your brand and reinforce the message you want to convey. They are used in logos, websites, advertisements, and other forms of branding to ensure unity and recognizability. You can choose 1 font or a font pair.
Headings: Teacher
Headings
Heading 1 (H1)
Heading 2 (H2)
Heading 3 (H3)
Heading 4 (H4)
Heading 5 (H5)
Heading 6 (H6)
BodyText
This is sample text. Don't worry, this will be replaced when your website is completed. Once all the information is there, this sample will be text to be replaced through the correct texts.
Sometimes it is necessary to place temporary text to get an idea of what the text will look like on the website.
Traditionally, our industry has used Lorem Ipsum, a sample text written in Latin. Unfortunately, not everyone is familiar with Lorem Ipsum and this can lead to confusion. I can't tell you how many times I've had customers ask me why their website is in another language!
There are other sample texts such as Hipster Ipsum, Zombie Ipsum, Bacon Ipsum and many more. Sometimes funny, these sample text passages can also lead to confusion.
If you're curious, this is Website Ipsum. It was developed specifically for use on development websites. In addition to being less confusing than other Ipsums, Website Ipsum is also formatted in patterns that more closely resemble how a real copy is formatted on the internet today.
Weight
Different font weights for textual content.
Aa
Light 300
Aa
Regular 400
Aa
Bold 700
Aa
Italic Light 300
Aa
Italic Regular 400
Aa
Italic Bold 700
Buttons
Button style guidelines to maintain a consistent look and feel.