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

0575 234 234 
info@grootbesselink.nl

Mood board

Collection of images to capture the inspiration and ideas of the visual direction of our project.

Company Logo

Logo Usage Guidelines of Domein Groot Besselink.

Logo Dark

For use on light background

Logo Light

For use on dark background

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

Body: Outfit

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.