Style guide for GM Site

01. Colour palette

This section showcases the key colors chosen for your website. From primary colors that define your brand to complementary shades that add visual appeal, these colors create a consistent and engaging look across the site.

Primary Colour

#000000

Main action color, used for primary buttons and main calls to action.

Secondary Colour

#000000

Complementary color for secondary actions.

Hover Color 1

#000000

Hover state color for primary buttons and key elements.

Hover Color 2

#000000

Darker shade for secondary hover elements.

Text Color

#000000

Primary color for all body text.

Link Highlight

#000000

Used for icons, small details, and unique elements.

Background Color 1

#000000

Primary background color for section backgrounds.

Background Color 2

#000000

Secondary background color for alternate sections.

02. Text styles

Typography is more than just text; it’s a design element that balances clarity with style. Below, you’ll see the main text styles your website will use to keep information organized and easy to read. Each style has a purpose, creating a clear hierarchy that guides the reader’s attention.

 

  • Heading 1 (H1): The main title for each page, designed to capture attention.
  • Heading 2 (H2): Subheadings that divide sections under the main title.
  • Heading 3 (H3): Smaller subheadings for further organization within sections.
  • Body Text: The main content text, optimized for readability

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6

    Body Text/Paragraphs

    • List item 1
    • List item 2
    • List item 3
    • List item 4

     

    H1 – The Importance of Web Design

    Body text:
    In an increasingly digital landscape, a well-designed website is no longer optional; it’s a necessity. A user-friendly design ensures that visitors can easily navigate your site and find the information they need, improving their overall experience.

    H2 – Why Responsive Design Matters

    Body text:
    Responsive design allows your website to adapt to different devices, providing an optimal viewing experience on ˆ, tablets, and desktops. As mobile traffic continues to rise, ensuring your site works flawlessly on all screen sizes is crucial.

    H3 – Key Elements of Effective Web Design

    Body text:
    From layout to color schemes, several elements contribute to effective web design. These include clean navigation, compelling visuals, and clear calls-to-action that guide users through the site.

    H4 – Typography and Readability

    Body text:
    Choosing the right fonts and maintaining a consistent typography hierarchy enhances readability and overall aesthetic appeal. Pairing serif and sans-serif fonts can create visual contrast while keeping the content accessible.

    • List item 1
    • List item 2
    • List item 3
    H5 – Importance of Loading Speed

    Body text:
    A slow-loading website can drive visitors away before they even explore your content. Optimizing images, using efficient code, and leveraging caching techniques help ensure your site loads quickly, enhancing user experience and search engine rankings.

    H6 – User-Centered Design Approach

    Body text:
    The best web designs prioritize the user’s needs. By understanding your target audience’s goals and behaviors, you can create an intuitive, enjoyable experience that leads to higher engagement and conversions.

     

      Heading 1

      Heading 2

      Heading 3

      Heading 4

      Heading 5
      Heading 6

      Body Text/Paragraphs

      • List item 1
      • List item 2
      • List item 3
      • List item 4

       

      H1 – The Importance of Web Design

      Body text:
      In an increasingly digital landscape, a well-designed website is no longer optional; it’s a necessity. A user-friendly design ensures that visitors can easily navigate your site and find the information they need, improving their overall experience.

      H2 – Why Responsive Design Matters

      Body text:
      Responsive design allows your website to adapt to different devices, providing an optimal viewing experience on ˆ, tablets, and desktops. As mobile traffic continues to rise, ensuring your site works flawlessly on all screen sizes is crucial.

      H3 – Key Elements of Effective Web Design

      Body text:
      From layout to color schemes, several elements contribute to effective web design. These include clean navigation, compelling visuals, and clear calls-to-action that guide users through the site.

      H4 – Typography and Readability

      Body text:
      Choosing the right fonts and maintaining a consistent typography hierarchy enhances readability and overall aesthetic appeal. Pairing serif and sans-serif fonts can create visual contrast while keeping the content accessible.

      • List item 1
      • List item 2
      • List item 3
      H5 – Importance of Loading Speed

      Body text:
      A slow-loading website can drive visitors away before they even explore your content. Optimizing images, using efficient code, and leveraging caching techniques help ensure your site loads quickly, enhancing user experience and search engine rankings.

      H6 – User-Centered Design Approach

      Body text:
      The best web designs prioritize the user’s needs. By understanding your target audience’s goals and behaviors, you can create an intuitive, enjoyable experience that leads to higher engagement and conversions.

       

        Heading 1

        Heading 2

        Heading 3

        Heading 4

        Heading 5
        Heading 6

        Body Text/Paragraphs

        • List item 1
        • List item 2
        • List item 3
        • List item 4

         

        H1 – The Importance of Web Design

        Body text:
        In an increasingly digital landscape, a well-designed website is no longer optional; it’s a necessity. A user-friendly design ensures that visitors can easily navigate your site and find the information they need, improving their overall experience.

        H2 – Why Responsive Design Matters

        Body text:
        Responsive design allows your website to adapt to different devices, providing an optimal viewing experience on ˆ, tablets, and desktops. As mobile traffic continues to rise, ensuring your site works flawlessly on all screen sizes is crucial.

        H3 – Key Elements of Effective Web Design

        Body text:
        From layout to color schemes, several elements contribute to effective web design. These include clean navigation, compelling visuals, and clear calls-to-action that guide users through the site.

        H4 – Typography and Readability

        Body text:
        Choosing the right fonts and maintaining a consistent typography hierarchy enhances readability and overall aesthetic appeal. Pairing serif and sans-serif fonts can create visual contrast while keeping the content accessible.

        • List item 1
        • List item 2
        • List item 3
        H5 – Importance of Loading Speed

        Body text:
        A slow-loading website can drive visitors away before they even explore your content. Optimizing images, using efficient code, and leveraging caching techniques help ensure your site loads quickly, enhancing user experience and search engine rankings.

        H6 – User-Centered Design Approach

        Body text:
        The best web designs prioritize the user’s needs. By understanding your target audience’s goals and behaviors, you can create an intuitive, enjoyable experience that leads to higher engagement and conversions.

         

        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

        Button Name
        Button Name

        (Hover)

        Button Name
        Button Name
        Blurb (Image)

        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.

        Your Title Goes Here

        In a two-column layout, blurbs appear side by side, allowing you to present information in a compact, organized way that’s easy to scan. The text below each image gives additional details and can be customized to fit your message.

        Your Title (Centered)

        In a two-column layout, blurbs appear side by side, allowing you to present information in a compact, organized way that’s easy to scan. The text below each image gives additional details and can be customized to fit your message.

        Blurb (Icon)

        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.

        Number Counter
        (For Statistics)

        %

        Your Title Goes Here

        %

        Your Title Goes Here

        %

        Your Title Goes Here

        Form

        Please enable JavaScript in your browser to complete this form.
        Divider
        Person
        Name Goes Here

        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

        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

        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.

        Testimonials

        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

        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

        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

        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.