Logos

Brand logos are available for use in any project, the guidelines below will explain correct logo use throughout any project.

Primary Logo

Use of the main logo is required when the strapline is legible. It is recommended that the primary logo be used when the height is no lower than 60px.

                html
                <object id="main-logo" data="https://d3moonnr9fkxfg.cloudfront.net/logo--primary.svg?v=8-5-6" type="image/svg+xml" class="rc-logo-svg rc-logo--primary">
    <img src="https://d3moonnr9fkxfg.cloudfront.net/1x1.gif?v=8-5-6" style="background-image: url(https://d3moonnr9fkxfg.cloudfront.net/logo--primary.png?v=8-5-6)" width="150" height="100" alt="Royal Caninn logo" />
</object>

            

Historical Logo with no strapline

Suggested for when the logo is required to have a height of smaller than 30px. It is recommended that the height of the logo should not be lower than 20px.

                html
                <object id="main-logo" data="https://d3moonnr9fkxfg.cloudfront.net/logo--secondary.svg?v=8-5-6" type="image/svg+xml" class="rc-logo-svg rc-logo--secondary">
   <img src="https://d3moonnr9fkxfg.cloudfront.net/1x1.gif?v=8-5-6" style="background-image: url(https://d3moonnr9fkxfg.cloudfront.net/logo--secondary.png?v=8-5-6)" width="150" height="100" alt="Royal Caninn logo" />
</object>

            

Crown Logo

To only be used as a secondary option, where the main logo has previously been presented and the user has already been acquainted with the brand.

                html
                <object id="main-logo" data="https://d3moonnr9fkxfg.cloudfront.net/logo--crown.svg?v=8-5-6" type="image/svg+xml" class="rc-logo-svg rc-logo--crown">
   <img src="https://d3moonnr9fkxfg.cloudfront.net/1x1.gif?v=8-5-6" style="background-image: url(https://d3moonnr9fkxfg.cloudfront.net/logo--crown.png?v=8-5-6)" width="150" height="100" alt="Royal Caninn logo" />
</object>

            

Example Usage

The examples below show suggested use for each logo in situ.

Logo use in mobile navigation

As screen real estate is at a minimum on mobile, it is recommended that only the primary logo without the strapline be used. The suggested minimum height of the logo is 30px.

Logo replacement

An example of replacing the main logo when the user has already been presented with the brand is on mobile scroll to replace with the crown on scroll as the header pins to the top. This example would free up space in the header and also ensure the user continues to be presented with the brand logo.

Logo use in the header

The shape and symmetry of the primary logo lends itself to remaining centrally aligned on desktop giving prominence to the logo, and ensuring content placed around it is secondary.

Primary logo use with neighbouring content

The neighbouring content should not fall whithin the boundaries of the logo to ensure the logo is not disrupted. The minimum specified distance away from logo any content should fall is the relative distance of the ’o’ in the logo on any axis.

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 6th December 2017 [ui_assets/brand_identity/logos.yml]
    Refinement for the new split navigation. Added classes for navigation links. Edited paths to suit new structure. Updated hard links in content.
  • 1st December 2017 [ui_assets/brand_identity/logos.yml]
    Restructured folder order.
  • 24th October 2017 [ui_assets/brand_identity/logos.yml]
    Correct asset url.
  • 24th October 2017 [ui_assets/brand_identity/logos.yml]
    Remove redundant pages from output. Revert import link to cloudflare.
  • 17th October 2017 [ui_assets/brand_identity/logos.yml]
    Fixed Logo using old asset link
  • 16th October 2017 [ui_assets/brand_identity/logos.yml]
    Fixed missing logo - updated asset path
  • 10th October 2017 [ui_assets/brand_identity/logos.yml]
    Prevent logo from being oversized
  • 13th September 2017 [ui_assets/brand_identity/logos.yml]
    Added classes to logos for targeting specific versions.
  • 31st August 2017 [ui_assets/brand_identity/logos.yml]
    Swapped svg/image to svg/objects so fix ios issue.
  • 29th August 2017 [ui_assets/brand_identity/logos.yml]
    Added gulp replace package. Added twig filter for replacing placeholder with version number. Updated method for generating symlinks. Corrected Royal Canin typo. Updated version number.
  • 25th August 2017 [ui_assets/brand_identity/logos.yml]
    Updated logo pages to use linked svgs.
  • 1st August 2017 [ui_assets/brand_identity/logos.yml]
    Corrected error on logo minimum height description.
  • 20th July 2017 [ui_assets/brand_identity/logos.yml]
    Template improvements. Logo content additions. Added markup to prism filter.
  • 19th July 2017 [ui_assets/brand_identity/logos.yml]
    Added footer configuration to the page that need configuration. This will work on any page, but to keep things cleaner I've not added it to them. Added only child logic to footer widgets so we don't ever have a matching content/footer items.
  • 19th July 2017 [ui_assets/brand_identity/logos.yml]
    Added associated files to page config for use with git info collection.
  • 11th July 2017 [ui_assets/brand_identity/logos.yml]
    Added remaining content.
  • 10th July 2017 [ui_assets/brand_identity/logos.yml]
    Portal twig improvements. Copied image assets to new location. Started git integration.
  • 4th July 2017 [ui_assets/brand_identity/logos.yml]
    Initial content. (With tests)