Style guide for G2G Projects
01. Colour palette
These are your main brand colours, carefully selected to ensure visual consistency across your website. They include your button states, text colour, and two background options. Once you’ve selected a final font pairing, we’ll combine these elements into your site design.
Primary
The main click-able hue for buttons, links and calls to action
Secondary
Accent for secondary buttons, icons or small highlights
Headings
Colour for all H1–H6 headings to ensure clear hierarchy
Body Text
Standard tone for paragraphs, captions and list text
Accent
Third pop of colour for badges, alerts and decorative details
Sections
Subtle fill for key sections that sit against your white or grey canvas
Hover (P)
Hover/active tint for anything using your Brand Primary colour
Hover (S)
Hover/active tint for elements using your Brand Secondary colour
Additional Colour
For section colours
Additional Colour
For section colours
02. Text styles
This section shows how text will appear across your website — including headings (H1 to H6), paragraphs, links, bold, italic, full caps, and lists. It helps you see the overall style and make sure everything feels consistent, readable, and on-brand.
H1 – Main Page Heading
Welcome to Your New Website
(Used for the biggest, most important headline on a page)
H2 – Section Heading
What We Offer
(Introduces key sections on a page)
H3 – Subsection Title
Our Core Services
(Breaks content into smaller parts)
H4 – Feature Highlight
Fast Turnaround
(Used in feature blocks or callouts)
H5 – Supporting Label
Step 1: Consultation
(Used in steps, tabs, etc.)
H6 – Fine Print Label
Terms & Conditions Apply
(Used for disclaimers or captions)
Paragraph Text Preview:
Your website will be bold, user-friendly, and mobile-ready and will help you stand out.
Click here to get in touch or view our full portfolio.
SOMETIMES YOU NEED FULL CAPS TO MAKE A POINT.
Inline Text Styles:
– This is italic text
– This is bold text
– This is a hyperlink
– THIS IS FULL CAPS TEXT
Unordered List (Bullets):
-
Testimonials
-
Images for staff
-
Built-in SEO
-
Monthly support plan
Ordered List (Steps):
- Call now
- Approve your layout
- I build your site
- You go live 🚀
03. Modules
Each component on your website, from buttons to blurbs, plays an essential role in guiding and engaging visitors. This section showcases the various modules that will be part of your site. Whether it’s a call to action encouraging the next step or a testimonial building trust, each element is designed to fit seamlessly with the website’s look and enhance user experience.
Primary
Secondary
Button
Number Counter
(For Statistics)
%
Your Title Goes Here
Your Title Goes Here
Your Title Goes Here
Circle Counter
%
Your Title Goes Here
%
Your Title Goes Here
%
Your Title Goes Here
CTA
Call to Action
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Person
Name Goes Here
Position
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Name Goes Here
Position
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Social
Testimonial
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Blurb
(Images)
Your Title Goes Here
In this layout, each blurb has an image at the top with descriptive text underneath. With three blurbs side by side, this layout is perfect for highlighting multiple features, services, or products in a compact, visually appealing way. The text below each image can be customized to provide brief, clear descriptions.
Your Title Goes Here
In this layout, each blurb has an image at the top with descriptive text underneath. With three blurbs side by side, this layout is perfect for highlighting multiple features, services, or products in a compact, visually appealing way. The text below each image can be customized to provide brief, clear descriptions.
Your Title Goes Here
In this layout, each blurb has an image at the top with descriptive text underneath. With three blurbs side by side, this layout is perfect for highlighting multiple features, services, or products in a compact, visually appealing way. The text below each image can be customized to provide brief, clear descriptions.
Blurb
(Icons)
Your Title Goes Here
In this layout, each icon sits above a title and a brief description, with three icons placed side by side. This setup is ideal for highlighting key features or services, giving each one its own space to stand out. The text below each icon can be customized to provide clear, concise details that explain what each icon represents.
Your Title Goes Here
In this layout, each icon sits above a title and a brief description, with three icons placed side by side. This setup is ideal for highlighting key features or services, giving each one its own space to stand out. The text below each icon can be customized to provide clear, concise details that explain what each icon represents.
Your Title Goes Here
In this layout, each icon sits above a title and a brief description, with three icons placed side by side. This setup is ideal for highlighting key features or services, giving each one its own space to stand out. The text below each icon can be customized to provide clear, concise details that explain what each icon represents.
Form
Divider
FAQ’s
Your Question Goes Here?
Your detailed answer goes here. This works like an accordion when you click on a question, the bar will open with the answer.
Your Question Goes Here?
Your detailed answer goes here. This works like an accordion when you click on a question, the bar will open with the answer.
Your Question Goes Here?
Your detailed answer goes here. This works like an accordion when you click on a question, the bar will open with the answer.
Tabs
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Toggle
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Bar Counter
- Title 130%
- YouTitle 260%
- Title 390%