Brief: Logo v. 0.1 [Variant]

Component type	Logo
Document status	IN REVIEW
Design source (in Figma)	Logo foundation
Author	@nathan.mckean@reckitt.com (Unlicensed)
Responsible	@Julia Boyarshchikova (Deactivated)

The header logo provides global branding with the option of additional navigation.

Use When

You have a branded experience

Don’t Use When

You need an unbranded experience (due to legal, regulatory or logistical reasons)

Related/Similar Components

Images and Pictograms are similar visually to logos, however logos have the ability to reversion across different images responsively.
Note that this documentation specifically relates to the brand logo usage in the header component. Other logos for other reasons may exist elsewhere in content.

Key Content

Item	Type	Notes
Logo	img (ideally svg)
Simplified Logo	img (ideally svg)

Visual Style

The base system allows for two logo types which may or may not require alternative versions for light and dark palettes (in theory, the header background should be locked - but “themes” may necessitate the need to support both.

(default) logo - is the more complex of the two and will often include the logo wordmark. This is used in larger viewports where there is more space.

Simplified logo - gives the opportunity to replace the (default) logo at smaller breakpoints where space is more constrained.

It is entirely possible for a brand to use the same logo across all breakpoints if it does not create any space concerns.
It is expected that in order to fit different sized logos from the brands that will use the default chameleon theme, the logo will be constrained with a combination of maximum heights and widths to ensure effective sizing and positioning.
Please note that the logo must be relatively free for positioning. Whilst the Chameleon template positions a logo safely, we are already seeing a request from Harpic to overlap the logo over the bottom of the header.

Behaviour

It is general practice for the logo to be linked to the home page.
If the logo is linked, hover, focus and active states will be available however it is likely that only focus would show a visible difference. This does however offer brands the opportunity to adjust logo behaviour based on these states should they want to.

Editorial

Ensure that logos are clearly viewable at minimum sizes
Where possible use vector images to ensure crispness across all sizes

Accessibility

Where the image is linked, the alt tag should take the link destination (e.g. Home)
Where the image is linked AND the main navigation has a “Home” text link, the logo should be hidden from screen readers with aria-hidden.
Where there is no visible home link in the navigation, the logo should take the place of that link within the navigation flow (e.g. as the first list item).

Analytics & Data

Not expected

Future Expansion

The design system is likely in future to support co-branding such as a competition website in partnership with retailers or an alternative navigation headers that includes a partner logo (e.g. Finish + WWF. As a result, expect that multiple logos may require support in future, linking to different places. (If not linking to different places, the multiple brands can form one image).
There has been discussion around animated logos (e.g. CSS animation) and other style ‘surprise and delights’ such as alternative imagery on hover, etc.
Logos in the footer will be a potential expansion in the future.
In future, logo positioning may also allow centre-alignment, where it does it will normally require a separate “Home” text-based label in the navigation so as not to have to adjust the focus order or have the “home” link (the logo) midway through the link list.
For logo position, Harpic design already wants to overlap it over the visible nav bar. Kind of like it is now - https://www.harpic.co.uk/ (so the logo within the context of the header, need to be quite ‘moveable’ positionally. That doesn’t need to be in MVP, but may play into the need to put the logo in a positionable div etc in the HTML.

Wider Conversations that may impact this

Branding: Brand design guidelines are notorious for applying style guidance around how much clear space is needed around a logo, so it might be that variable padding controls for brands.

Design System