Learning Centre
Are you looking to add your organizational branding to your Govstack website? We can help! Learn all the tips, tricks and best practices for using the Govstack Design node.
Please contact your Govstack Account Executive to upgrade to Govstack Premium and get access to the Design node.
Before you add a logo or favicon to your website, you'll need to prepare the file to ensure it is the proper format and size. You will also need to upload the files to Govstack and ensure the Logo size and padding is correct.
When creating a logo file, please save the logo in a PNG or SVG format. We recommend using an SVG if the logo is a true vector file. This will improve scalability and resolution independence.
Ensure there is no padding around the logo. The logo should be as closely cropped as possible. Always use a transparent background.
Design considerations
A favicon is typically derived from the icon part of a logo. Avoid using the entire logo, as it won’t appear clear at the small size of 16x16 pixels.
Generating a favicon
To generate a favicon, we recommend following these best practices:
SVG is the preferred format if the favicon is a true vector file for scalability and resolution independence.
Uploading logo and favicon files
To upload your logo and favicon to Govstack, you need to navigate to the “logo” tab in the design node. Then, upload the prepared logo and favicon files.
Always make sure your logo and favicon have alternate text assigned to them by clicking on the edit button or by navigating to the media tab and accessing the image through the folder structure.
Logo size can be managed by adjusting the height of the logo. For most header layouts, the logo height will be determined by subtracting the logo top and bottom padding from the header height for both small and large device sizes.
For header layouts #5, #9 and #18, the logo height will be determined by subtracting the logo top and bottom padding from half the header height for large device sizes.
To adjust the header height, navigate to the header section under the spacing tab in the design node of CMS. Update the Small Height and Large Height as needed.
To adjust the logo padding, navigate to the logo section under the spacing tab in the design node of CMS. Update the Logo Padding (Small Header) and Logo Padding (Large Header) as needed.
To adjust the colours used throughout your Govstack website, you need to access the colour settings which are located in the "colours" tab of the design node.
There are five sections within the colour tab. Review each section to learn more.
You can use the colour palette to create a custom colour palette for your design. These colours will be available in the colour picker for easy selection.
This section is optional.
This is where you choose the overall colours for your website, including:
For the content colours, this area will be used as the default colour scheme for components with the colour styles for:
Always make sure that the highlight background and highlight text pass colour contrast requirements.
Here, you can choose colour combinations for additional content elements. This includes defining colours for:
You can add as many combinations as needed, but ensure you maintain the following order for background colours:
Try to limit the number of options so the brand does not become diluted.
You can create a variety of button colour combinations for calls to action across your website. Add as many combinations as desired, but ensure you maintain the following order:
This section can be ignored as these colours are used for products within the Shop pages.
It is important that content and button colours are set up correctly before content is populated on the site. Any changes to colours after content population may result in changes to the intended design. If changes need to be made after content population, it is important to note that deleting a content colour or button colour will result in a change of class name for the colours appearing after the deleted colour in the list. It is better to replace a colour instead of deleting a colour to ensure other colours are not affected.
For example, if the order of your additional content colours is as follows:
If you delete C2 (black) and C2 was used on all your pages for the banner overlay, your banner overlay will now be light grey because it is using C2 and C2 is now light grey. Any component using light grey will become "shade brand 1".
When you are choosing the colour of the text and background for your website, it is important to consider the colour contrast ratio. For users with low vision or colour blindness, it can be difficult to read website content if there is not enough contrast between the colour of the text and the background colour.
Not sure if your colours are accessible? Try this colour contrast accessibility checker.
For more information, you can review the WCAG 2.1 AA accessibility guidelines for optimal readability and inclusivity.
You can control the fonts of your website under the "fonts" tab in the design node. Learn how to set the fonts and typography for your site.
Govstack provides access to all Google fonts, and if you have an active Adobe licence, the Adobe Fonts library.
Here are some tips for font selection:
Once you've selected your fonts, you can move onto the typography section. From here, you'll be able to define various text styles, including, font, line height, letter spacing, text transform and responsive sizing style for each style in Govstack:
It can be difficult for users to read fonts with serifs. This can cause accessibility issues for some users. We recommend always using a font that is sans serif.
You can customize the corner styles of buttons in the design node under the "spacing" tab by navigating to:
To create a button with square edges, you need to set the radius to "0."
To create a button with rounded corners, set the radius between 1 and 10.
If you'd like to create a fully-rounded, pill-shaped button, you need to set the radius above 20.
To help with content navigation, we recommend choosing one button style and using that style across the entire website. This creates a more consistent look and feel.
You can customize the corner styles of certain content components in the design node under the "spacing" tab by navigating to:
If you'd like to create content components with square edges, set the radius to "0".
If you'd like content components to have rounded corners, set the radius between 1 and 10.
It is best to choose one style for content corners and use that across your entire site. This will give your website a more consistent design.
You can batch upload all files under the Media folder. Learn how to optimize photographs and icons.
We recommend saving icons in SVG format to maintain scalability and clarity at any size.
To match the provided icon library, you need to:
Contact Us
GHD Digital Support
Primary +1-866-691-5528
Secondary +1-519-884-2476
Submit Online
Need Help?
