Style Guide
Having a cohesive and visually appealing website has a lot to do with consistency.
The style guide for this website (below) is a set of guidelines for how elements are displayed on your website. It includes the colours, the fonts, and the styling that has been used through your site. It also includes any .classes that further enhance the appearance of certain elements.
This page is intended to display most of the elements on your website in one place. This does two things. Firstly, it means that any changes to the global settings of your site can be viewed live in one location. And secondly, it gives you an easy reference page when adding to your website down the the track (hint, have you ever forgotten the hex code for one of your colours 🤔).
Logo and Brand Mark
Brand Colours
These are the primary colours used throughout the website.
Prussian Blue
#032F54
Light Sea Green
#00B0AD
Ghost White
#F7F7FF
Honey Yellow
#FFBA35
Orange Red Crayola
#FF5F55
The text is treated this way.
Headings are this colour.
Normal text is this colour.
Typefaces or Fonts
Montserrat
The old posters and signs in the traditional Montserrat neighborhood of Buenos Aires inspired Julieta Ulanovsky to design this typeface and rescue the beauty of urban typography that emerged in the first half of the twentieth century. As urban development changes that place, it will never return to its original form and loses forever the designs that are so special and unique. The letters that inspired this project have work, dedication, care, color, contrast, light and life, day and night! These are the types that make the city look so beautiful. The Montserrat Project began with the idea to rescue what is in Montserrat and set it free under a libre license, the SIL Open Font License.
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Typography
This is a H1 Heading
This is a H2 Heading
This is a H3 Heading
This is a H4 Heading
This is a H5 Heading
This is a H6 Heading
And this is some paragraph text. Here is some in bold. And here is some more in italics. Of course you can also underline some sections, or even strike some out. Some more would read as lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
An example of bullet points:
- Point 1
- Point 2
- Point 3
- ...
An example of a numbered list:
- Point 1
- Point 2
- Point 3
- ..
A heading in reversed colours
And some paragraph text that's reversed too... in a variety of styles. Here is some in bold. And here is some more in italics. Of course you can also underline some sections, or even strike some out. Some more would read as lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Buttons and Links
On a light background:
And this is some paragraph text with a text link within the paragraph. This is a great way of ensuring that your links have context.
And on a dark background:
And this is some paragraph text with a text link within the paragraph. This is a great way of ensuring that your links have context.
Post Grid
Sorry, we couldn't find any posts. Please try a different search.