This style guide has been created for you, the viewer, to better understand and navigate our website - but, we hope that it is also a helpful tool for other creators that are looking for inspiration when designing their own websites!
Color Scheme
As we are a website that has a primary focus on migrant and refugee integration in Germany we try to keep a color scheme consistent with German national colors and close variants. The main colors used on our website are black, red, yellow and white.
Red - #d91717: This is a red that has brightness which makes it stand out and easy to read but is darker in tint to match the red of the German Flag. Yellow - #ebb615: This is a mustard gold color that has been approved as being a proper color code representative of the yellow on the traditional German Flag.
Light Black - #433f3f: This black is considered "Light" Black and is used to texturize the website and create differentiation between body text and the true black headings and information .
True Black - #020000: This black is true black and stands out very clearly on the site, this is the black that matches the proper black of the German Flag and is used for important information and headings on the site; as well as the title.
White - #fdfafa: This is a standard white that is mostly used for text that appears on photos as a clear stand out type color that matches the color scheme while not detracting from the appearance of the website.
By consistently using these colors and keeping them within the same family we create a uniformity that is easy to understand, interpret and navigate. We hope you think so too!
Typography and Text
We created this website because we believe the information on it is valuable - therefore being able to read what we are writing is very important to us! Our website wants to create user friendly webpages and infographics that are able to be easily read, interpreted and put into action; therefore we have employed typography and text sizes that are accessible for all!
Site Title - Font: Merriweather 50pt (Regular) Spacing: 5 Color Code: #020000
Navigation Menu - Font: Aller 12pt (Main) and 14pt (Sub-Navigation) Spacing: 2 (Main) and no spacing on Sub-Navigation Color Code: N/A