CivicTheme
  • Docs
  • Changelog
  • Getting started
    • Introduction
    • Installation
    • Getting help
    • Security policy
    • Partnerships
  • Installation
    • Drupal theme
  • Contributing
    • Contribution model
    • Contribution basics
    • Small contribution spec
    • Medium contribution spec
    • Major (RFC-level) contribution spec
    • Code of conduct
    • Figma contributions
  • Components
    • Component list
    • Atoms
      • Button
      • Chip
      • Content link
      • Check box
      • Field description
      • Field message
      • Fieldset
      • Label
      • Radio
      • Select
      • Textarea
      • Text field
      • Heading
      • Link
      • Paragraph
      • Popover
      • Quote
      • Table
      • Tag
      • Text list
    • Molecules
      • Accordion
      • Attachment
      • Breadcrumb
      • Callout
      • Event Card
      • Field
      • Figure
      • Group filter
      • Logo
      • Map
      • Navigation card
      • Next step
      • Pagination
      • Promo card
      • Search
      • Service card
      • Single filter
      • Snippet
      • Subject Card
      • Table of Contents
      • Tabs
      • Tag List
      • Tooltip
      • Video Player
    • Organisms
      • Alert
      • Banner
      • Campaign
      • Footer
      • Header
      • List
      • Message
      • Mobile Navigation
      • Navigation
      • Promo
      • Side Navigation
      • Skip link
      • Slider
      • Social links
  • Content Authoring
    • Overview
    • Global settings
      • Favicon
      • Header
        • Site slogan
        • Header logos
        • Primary navigation
        • Secondary navigation
      • Banner
      • Search
      • Link
      • Skip link
      • Side navigation
      • Signup
      • Footer
        • Footer logo
        • Social links
        • Footer navigation
        • Acknowledgement of Country
        • Copyright
      • Colours
    • Content types
      • Page
        • Configure the banner
      • Event
      • Alert
    • Content components
      • Accordion
      • Automated list
      • Attachment
      • Callout
      • Campaign
      • Content
        • Quote
      • iFrame
      • Manual List
        • Event card
        • Event reference card
        • Navigation card
        • Navigation reference card
        • Promo card
        • Promo reference card
        • Publication card
        • Service card
        • Subject card
        • Subject reference card
        • Snippet
      • Map
      • Next step
      • Promo
      • Slider
      • Webform
    • Vocabularies
      • Topics
      • Site sections
    • User accounts & roles
Powered by GitBook
On this page
  • When to use
  • When not to use
  • Best practice guidelines
  • Variations
  • Accessibility
  • Security
  • Component inspiration and uplift
  • User research on this component
  • Known issues
  • More research needed
  • Help improve this component
  • Resources
  • References
  • Changelog
  • Contact us

Was this helpful?

Edit on GitHub
Export as PDF
  1. Components
  2. Molecules

Logo

A logo component displays an agency's brand identity, creating recognition and establishing trust with users.

When to use

Use the logo component when:

  • You need to display an organisation's brand identity across a digital service

  • You want to establish a consistent brand presence across different screens

  • You need to link back to the homepage from any page (the logo typically serves as a home link)

  • You need to comply with government branding guidelines

When not to use

Do not use the logo component when:

  • The logo would compete with or distract from critical user tasks

  • Space is extremely limited and the logo would make essential content inaccessible

  • You're creating a third-party service that shouldn't appear to be officially associated with the government organisation (use appropriate attribution instead)

  • You need a simplified icon version for very small spaces like favicons (use a dedicated icon instead)


Best practice guidelines

  • Placement consistency: Place the logo in a consistent location across all pages, typically in the top-left corner of the header, to meet user expectations and aid navigation.

  • Responsive scaling: Ensure the logo scales appropriately across different screen sizes without losing legibility or becoming pixelated.

  • Clear space: Maintain adequate clear space around the logo to preserve its visual integrity and impact.

  • Accessibility: Ensure the logo has appropriate alternative text for screen readers and meets contrast requirements when used against different backgrounds.

  • Logo as home link: When using the logo as a navigation element to return to the homepage, ensure it has appropriate accessibility attributes and follows navigation patterns.

  • Format and quality: Use SVG format wherever possible to ensure the logo remains crisp across all display resolutions.

  • Brand guidelines compliance: Adhere to the organisation's specific brand guidelines regarding logo usage, minimum size, and positioning.

  • Loading performance: Optimise logo file size to minimise impact on page loading speed.

Variations

  • Default: Agency logo/wordmark displayed on its own

  • Inline: Agency logo/wordmark paired inline with the nation's identity (such as the Australian Coat of Arms)

  • Stacked: Agency logo/wordmark stacked underneath the nation's identity (such as the Australian Coat of Arms)

Each variation is available for both desktop and mobile views with appropriate spacing and sizing adjustments.


Accessibility

This component meets WCAG 2.2 accessibility guidelines with the following summary of test results:

Based on the 'CivicTheme v1.7.0 Accessibility Assessments' document, the Logo component has been tested against the following standards:

WCAG Criterion
Level
Result

1.3.1 Info and Relationships

A

Pass

1.4.1 Use of Colour

A

Pass

1.4.3 Contrast (Minimum)

AA

Pass

1.4.11 Non-text Contrast

AA

Pass

1.4.12 Text Spacing

AA

Pass

2.1.1 Keyboard

A

Pass

2.4.3 Focus Order

A

Pass

2.4.7 Focus Visible

AA

Pass

3.2.4 Consistent Identification

AA

Pass

4.1.2 Name, Role, Value

A

Pass

Security

No specific security considerations are documented for this component. Standard web security practices should be followed when implementing the logo component, such as ensuring image assets are served from secure sources.

Component inspiration and uplift

This component has been modelled after the Header component from the Australian Government Design System (AGDS). It has been uplifted by Salsa Digital, the custodian of the CivicTheme Design System, in the following ways:

  • CivicTheme provides three layout configurations for the logo:

    • Default: Agency logo/wordmark only

    • Inline: Agency logo/wordmark paired inline with the nation's identity

    • Stacked: Agency logo/wordmark stacked underneath the nation's identity

These layout options provide flexibility to meet different agency branding requirements, allowing organisations to follow their specific brand guidelines while maintaining consistent user experience patterns.


User research on this component

★★★★☆ Confidence rating = High (Based on external research with quantitative data)

Research on the logo component has been conducted by various design system teams, including Salsa Digital. The high confidence rating is based on:

  • Extensive user testing across multiple government websites

  • Observation of user behaviour demonstrating how logos serve as a primary navigation element

  • Heatmap and eye-tracking studies showing how users interact with website headers

  • A/B testing of different logo placements and sizes

Key findings show that:

  • Users expect logos to link back to the homepage

  • Logo placement in the top left corner meets user expectations for English-language sites

  • Logo visibility and recognisability are critical for building user trust

  • Responsive logo design significantly impacts mobile user experience

Known issues

  • Mobile responsiveness: On very small mobile screens, the stacked logo variant may take up excessive vertical space, potentially pushing important content below the fold

  • Loading performance: Some implementations have experienced performance issues with unoptimised logo files, especially when using large PNG files instead of optimised SVGs

  • Brand consistency: Organisations occasionally struggle to maintain consistent logo implementation across different digital properties, leading to fragmented brand experiences

More research needed

More research is needed in the following areas:

  • Cultural considerations: How logo placement and interaction patterns may need to adapt for right-to-left languages and different cultural contexts

  • Micro-interactions: Effectiveness of subtle animations or hover states when users interact with logos

  • Logo scaling: Determining optimal logo sizes across the full spectrum of device sizes, particularly for complex logos with detailed elements

  • Cognitive load: Understanding how different logo implementations may affect users' cognitive load, especially for users with cognitive impairments

If you have conducted user research that addresses these gaps, you can submit your research findings to help improve this component.

Help improve this component

To help make this component useful and up-to-date, you can:

  • Contribute to our logo component discussion on GitHub

  • Submit your user research findings to help improve the logo component

  • Propose a change to the logo component


Resources

  • Storybook

  • GitHub

References

  • Lynch, P. J., & Horton, S. (2016). Web Style Guide: Foundations of User Experience Design. Yale University Press.

Changelog

Version
Date
Changes

1.8.0

23/07/2024

Updated component naming conventions and documentation structure

1.7.0

20/03/2024

Added WCAG 2.2 compliance testing and documentation

1.6.0

15/01/2024

Added new responsive behaviour for mobile views

1.5.0

30/10/2023

Introduced stacked logo variant

Contact us

PreviousGroup filterNextMap

Last updated 1 month ago

Was this helpful?

Check out our to learn more.

If you have a question about the CivicTheme design system or need our help, visit the page for guidance.

contributing section
Figma
Nielsen Norman Group. (2019). Top 10 Website Navigation and Wayfinding Principles
Australian Government Design System. (2021). Header Component Guidelines
W3C Web Accessibility Initiative. (2023). WCAG 2.2 Understanding Documents
Getting Help