Get startedFoundationsPatternsComponentsTokensContentGet support
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.
FoundationsDesign at GoAAccessibilityBrand guidelinesStyle GuideColorIconographyPhotographyLogoTypographyLayout

Logo

Our logo is an important part of our brand identity and serves as a symbol that distinguishes our digital products from others. To keep our brand consistent and recognizable, we encourage following the guidelines for proper usage.

Anatomy

The Alberta logo consists of two elements — the wordmark and symbol.

Primary usage

The primary Alberta logo is the preferred choice for all our digital products. The default color combination for the signature is the grey (stone) and blue (sky) color.

The Alberta logo should be prominently displayed in the interface, particularly in the header and footer. As a product team utilizing our design system, you will find that the Alberta logo is already integrated into our design components and readily available for your use.

Alternate usage

Alternate versions of the logo may be used in contexts where the default version isn't suitable. These are the only alternate usage allowed:

Reverse version (Dark)
When the logo is placed on a darker background, the reversed version of the wordmark can be used while still retaining the blue (sky) color of the symbol.
White version
This version can be used in cases where simplicity is needed. The chosen background color must be one of the official brand colors.
Black version
For cases where color usage is limited, such as lo-fi prototyping, the black version of the logo can be used.

When the Alberta Logo is accompanied by a service name, a protective space is applied around it to enhance its impact. This space indicated by x below is equal to the height and the width of the period symbol. When adding text or other elements, it is important to stay outside of this space.

Circular symbol

The circular symbol is used in place of our primary logo when space is limited, such as on mobile devices. This ensures that our products are branded and remain identifiable. It also acts as a favicon, an icon that is commonly used in browser tabs to help users easily identify our product when multiple tabs are open.

For accuracy and consistency, refer to our logo components in the Figma Asset library.

Logo usage guidelines

  • Avoid modifying the logo and always use the appropriate version from our asset library.
  • Do not alter the spacing around the 'wordmark' and the 'wordmark and service name'. This spacing ensures that sufficient protective space is kept around them to maintain their impact.
  • Use the provided logo variations only for their specific purposes.
  • Do not use the logo for commercial purposes unless granted permission. For more information, please review the Government Identity Policy.
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsDesign tokensContentSubmit an issue#design-system-supportContribute to the design systemRoadmapRelease notes