Colour
Royal Canin brand colours have long been established within the Brand Book for print use, the Design Language aims to adhere to these references but translate for digital. The colours set out below will form the base colours for all components, with a secondary palette introduced to complement primary colours where an alternate colour is required. Colours are presented here by their name and Hex value.
Primary colours
Use of the primary brand colours helps to emphasise our brand throughout our digital assets. ‘Brand1’ is used for reinforcing our brand where required. There is no set rule on use but it should not be overused on each page or screen view as this will lose its impact. ‘Brand2’, ‘Brand3’’ and ‘Brand4’ are to be used to complement 'Brand1'. ‘Brand3’ and ‘Brand4’ should remain a background colour or can be used as a text colour if placed on 'Brand1' or a dark background theme.
Brand1
Brand2
Brand3
Brand4
Secondary colours
Secondary colours are used to assist with content. ‘Text’ should be used throughout designs and implementation and represents the best colour contrast for use on ‘Brand3’ and ‘Brand4’.
‘Text’ is colour compliant to an AA standard at any type size and to an AAA standard at 18pt and above. When on a dark ‘Brand2’ background all text should use ‘Brand3’.
‘Interface’ helps with horizontal rules, borders and any other use where a line may be required. ’Brand4’ can be used as a light grey alternative to our standard ‘Brand3’ white page colour and can also help to break up or band various pieces of content.
‘InterfaceDark’ has minimal use and is for when ‘Brand2’ potentially doesnt give a dark enough contrast to a page. A use for ‘InterfaceDark’ as an example could be the footer on a webpage where it’s required to not clash with other elements on a page that use darker colours from the palette such as ‘Brand2’.
‘Iconography’ creates a difference in contrast colour between text and icons on a light background. Although it’s not immediately noticeable to the eye this this allows a slight visual separation between text and icons for users, particularly when placed together. When on a ‘Brand1’ or ‘Brand2’ background all icons should be filled using ‘Brand3’.
Text
Iconography
Hyperlink
Interface
Interface Dark
Tertiary colours
The tertiary colour palette describes a collection of colours to assist either with functional elements or messaging. They should be used sparingly and only where relevant, as described in relevant sections on the Design Language. Please let us know about any cases where further colours have been required specifically for interface design in your projects.
Shades of red are normally expected to be used for error messages, however due to the use of red as part of our primary brand palette, the confusion around normal brand colour use and error states could be problematic, to combat this we use a shade of orange to indicate errors. ‘Error’ is a warm colour that not only makes error fields visible, but makes users feel less alarmed when they see it. This colour does not have as long a wavelength as red does, and is less intense. Users are less likely to panic when they see an error message in ‘Error’ as it’s not as physically stimulating as red.
Success is a shade of green that is colour compliant when used with Brand3 for body copy and so can be used with success messaging, such as a successful form submission. It can also be used to colour iconography that can inform a user of success in progression through a form submission such as when tabbing from one completed field to the next field.
Function
Success
Warning
Error
Inactive
Exceptional uses
Exceptional use cases for colour may be used only in specified cases. The ‘Hover’ colour is used exclusively as a 15% darken attribute on our High Impact and General Use buttons.
Hover (85% of Brand 1)
Colour contrast
Traditionally the brand colour Medium Grey has been used for text on Royal Canin products. This scores very low on the WC3 guidelines on contrast legibility. ‘Text’ is now treated with a darker colour reference to ensure design and digital projects meet requirements on accessibility.
Hover state
The Design Language can use a darken attribute for button hover states. See buttons to learn more about hover states and button animations. Hover (85% of Brand1). List (15% of Function) for form select.
Hover transitions
Where hover transitions occur in place such as text links. We use a 0.3 second linear transition. This occurs, for example, on hover of a primary navigation text link that has a 0.3s linear transitions from ‘Text’ to ‘Brand1’. You will find relevant information described where necessary throughout this site.
Active state
Button active states will be handled as part of the css. SASS enables a ‘darken’ attribute to be applied to a default brand colour reference to ensure the correct active reference is always applied. In the active instance, as the click will only be briefly active, a darken attribute of 15% will ensure the user is aware of the change to represent button click.
Darken attribute
It is possible to use a 15% darken attribute on buttons to indicate that the user has clicked. This can be handled as part of the CSS and in instances of darken, active state is described further in the buttons section. Use cases are specifically described where relevant and we do not encourage using these attributes outside the recommended use cases unless necessary. If you need to use an attribute that is not documented, please let us know.
Opacity attribute
It is possible to use a 15% opacity attribute on certain colours to assist with UI elements. Use cases are specifically described where relevant and we do not encourage using these attributes outside the recommended use cases unless necessary. If you need to use an attribute that is not documented, please let us know.
Gradient backgrounds
Gradients are used for more than decoration and are used to give separation to content components and to help with more complex image crops as they can give a start and end to a component section. The gradient always runs from left to right or bottom to top using colours ‘Brand3’ to ‘Brand4’. The change point in the background should always be at halfway to help with visual balance.
When using a gradient background, it’s important to alternate between a gradient background and a white background to help break up the white space. Gradient backgrounds should never be adjacent and should only use the colours described. If two gradients are used for a 50/50 layout then on smaller devices when stacking this layout the gradient can alternate from left to right to right to left to keep the consistency of the gradient background application but still helps to define where each of the blocks end in this particular instance.