Style Guide
How to use this guide:
This guide was created to help you maintain consistency throughout your site if and when you decide to add to your site. It will let you know all the fonts, colors, custom sections, logos and icons that were used to build this site.
All this information is also stored within the appropriate squarespace element like “Site Styles” and your uploads folder.
Typography
Heading 1
Heading 2
Heading 3
Heading 4
This is in paragraph 1 style. It is useful for short chunks of important, attention grabbing text like in the hero.
This is in paragraph 2 style. It is useful for longer blocks of text. Like details about services and digital products.
This is in paragraph 3 style. It is useful for introductory text, captions, or other areas where a slightly different style than the main body text is desired
Colors
Blacker Berry
#0A1819
Peacock Fabulous
#0F504A
Light Peacock
#129389
Old Money Gold
#836C4C
Light Blue-Grey
#D4DDDA
Warm Beige
#E4E4E4
Notes:
These colors can be applied to sections individually or in a predetermined way by clicking on Edit Section -> Colors -> then choosing a new color theme such as Dark 1.
If you go into Site Styles to edit one of these themes (i.e. Dark 1), it will change those colors wherever that theme is use across your website.
Saved Sections
There are two saved sections to make adding them to each page easy.
Page Heading- you will need to manually add this when you create a new page.
Instructions: Click on Add Section -> Saved Sections -> click on the one that says “about us”
Footer/Newsletter - this is a global section so it will automatically be added when you create a new page.
Buttons
Primary Button
Use- Main thing you want visitors to do on the page (Get Started).
Secondary Button
Use- Second priority for visitors to the page, such as getting returning users to login
Tertiary Button
Use- other things you want users to do but not as important as the primary or secondary. Example is to get more information about a product or service
Logos
CUSTOM CODE
Custom code and code injection were used to add your second button in the header. Should it ever disappear, this is what you will need to restore.
/*code to get the second nav button*/
a.second-button {
display: none;
}
header#header a.second-button {
margin-left: 1.2vw;
display: inline-block !important;
}
/*code to get the service icons animation effect*/
.page-section[data-section-id= "683da63e3398330565a7e51d"] .image-block{
border-radius: 1rem;
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
transition: transform 1s ease 0s;
&:hover {
transform: scale(1.1) !important;
transition: all ease-in-out 0.8s !important;
background-color:#30837d;
}}
Custom CSS
Code Injection
<a class="btn btn--border theme-btn--primary-inverse sqs-button-element--secondary second-button" href="https://app.smartwiz.io/62cbecbcb3/login" target="_blank" rel="noopener">LOGIN</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('a.second-button').insertAfter('a.btn');
});
</script>