Across digital experiences, we use 'semantic' colour tokens to display colours. These semantic colours are derived from OVO core colours. The semantic colours assign meaning to colour.
For example, the semantic colour 'ovo-semantic-message-link' is derived from the forest green core colour and is used to apply an intent to that colour. The semantic colour name explains that it is intended to be used as a colour for text links. Sometimes there are multiple semantic colours derived from the same core colour token. For example, we also use the forest green core colour to create an 'ovo-semantic-inverted-surface-alt' semantic colour. This semantic colour gets used to display a dark green background.
Always use the semantic colours, rather than core colours where possible. This makes it easy to control and update how colour is used.
Semantic tokens
Tokens are organised by use, with Base providing the largest and most useful set of colours then auxiliary palettes for Tones (e.g. success, warning) and Fuels (e.g. electricity, gas).
Each collection provides surfaces (e.g. backgrounds), messages (text and functional iconography with accessibility requirements) and borders at a minimum. Some also provide relevant extras, e.g. focus highlights, link or error messages.
Base
Tokens are organised by use, with Base providing the largest and most useful set of colours organised by surfaces (e.g. backgrounds), messages (text and functional iconography with accessibility requirements), borders and focus highlights.
Surfaces
We use surface colour tokens to provide a background colour for pages, sections and cards.
surface
#ffffff
ovo-semantic-surface-elevated
The background colour of any page elements that are meant to look elevated above the surface of page background.
Collection
Semantic colours
#f9f6f3
ovo-semantic-surface-base
The background colour of any page or screen
Collection
Semantic colours
#ebe7e3
ovo-semantic-surface-cutout
The background colour of any page elements that are meant to look like they are cut out of the page background.
Collection
Semantic colours
Messages
We use message colour tokens to render all text that's placed onto one of the above surface background colours.
message
#00261c
ovo-semantic-message-base
The color of body text and icons.
Collection
Semantic colours
#635e58
ovo-semantic-message-secondary
A subtle, knocked back text colour for secondary text.
Collection
Semantic colours
#044d29
ovo-semantic-message-link
The color of text links and selected interactive elements.
Collection
Semantic colours
#ae072c
ovo-semantic-message-error
The color of error text and destructive actions when used outside of an error component.
Collection
Semantic colours
#0a9828
ovo-semantic-message-branded
The color of all headings and the OVO Logo.
Collection
Semantic colours
The ovo-semantic-message-branded token is strictly for use at sizes considered 'large text'. That's the Element headings and the lead type size only. This colour token will fail to pass the AA standard when used on any surface background colour at small type sizes.
Inverted
We use inverted colour tokens to create sections of content that adopt dark, inverted colour styling. These inverted sections use dark surface background colours with lighter message colours. We use these colour tokens sparingly to create a visual breakout in a page design.
inverted
#00261c
ovo-semantic-inverted-surface
The background colour of dark backgrounds.
Collection
Semantic colours
Token set
-
#044d29
ovo-semantic-inverted-surface-alt
An alternative dark background
Collection
Semantic colours
Token set
-
#ffffff
ovo-semantic-inverted-message-base
The colour of text and icons that appears on a dark, inverted background
Collection
Semantic colours
Token set
-
#d4cfcb
ovo-semantic-inverted-message-secondary
Knocked back, less prominent body text that appears on a dark background.
Collection
Semantic colours
Token set
-
#3be44c
ovo-semantic-inverted-message-heading
The colour of headings that appears on a dark, inverted background
Collection
Semantic colours
Token set
-
#3be44c
ovo-semantic-inverted-message-link
The color of text links that appears on a dark, inverted background.
Collection
Semantic colours
Token set
-
#044d29
ovo-semantic-inverted-border
The color borders that appear on a dark inverted surface.
Collection
Semantic colours
Token set
-
#0a9828
ovo-semantic-inverted-border-alt
Collection
Semantic colours
Token set
-
Borders
To create dividing lines between pages elements, and to outline form inputs and other components we use border tokens.
border
#ffffff
ovo-semantic-border-graphic
The colour of divider lines between components in the UI.
Collection
Semantic colours
#ebe7e3
ovo-semantic-border-differentiated
A defined border colour used within components. Also used as an inactive icon colour.
Collection
Semantic colours
#635e58
ovo-semantic-border-functional
High contrast border colour used to show the boundary area of interactive elements like form fields.
Collection
Semantic colours
Focus indicators
To show a focus state and the hover/selected state of certain elements like radio buttons and checkboxes, we use focus indicator colours.
focus
#4f66de
ovo-semantic-focus-outline
The colour of the focus ring that appears around selected elements.
Collection
Semantic colours
#aebafb
ovo-semantic-focus-hover
The colour of the hover ring that appears around fields
Collection
Semantic colours
#ebefff
ovo-semantic-focus-surface
A surface background colour for focused items
Collection
Semantic colours
Tones
For alert-type components like notifications, banners, badges, we use a consistent hue with tokens for a standard message and surface colour to pair together. There's also an emphasised message and surface colour to pair together for greater visual impact. Use the white border token in either pairing.
Neutral
neutral
#3f3b36
ovo-semantic-neutral-message
The color of text and icons used in warning messaging on a neutral surface background
Collection
Semantic colours
Token set
-
#ebe7e3
ovo-semantic-neutral-surface
The color of text used on an emphasised neutral background
Collection
Semantic colours
Token set
-
#ffffff
ovo-semantic-neutral-border
The surface background colour of an emphasised neutral message
Collection
Semantic colours
Token set
-
#ffffff
ovo-semantic-neutral-message-on-emphasis
The color of dividers and borders used in neutral messaging.
Collection
Semantic colours
Token set
-
#635e58
ovo-semantic-neutral-surface-emphasis
The background colour of neutral messaging.
Collection
Semantic colours
Token set
-
Info
info
#1f3bcd
ovo-semantic-info-message
The color of text and icons used in info messaging on an info blue surface background.
Collection
Semantic colours
#ebefff
ovo-semantic-info-surface
The background colour of info messaging.
Collection
Semantic colours
#ffffff
ovo-semantic-info-border
The color of dividers and borders used in info messaging.
Collection
Semantic colours
#ffffff
ovo-semantic-info-message-on-emphasis
The color of text used on an emphasised blue info background
Collection
Semantic colours
#001166
ovo-semantic-info-surface-emphasis
The surface background colour of an emphasised blue info message
Collection
Semantic colours
Success
success
#044d29
ovo-semantic-success-message
The color of text and icons used in success messaging on a success green surface background.
Collection
Semantic colours
Token set
-
#adeaa6
ovo-semantic-success-surface
The background colour of success messaging.
Collection
Semantic colours
Token set
-
#ffffff
ovo-semantic-success-border
The color of dividers and borders used in success messaging.
Collection
Semantic colours
Token set
-
#ffffff
ovo-semantic-success-message-on-emphasis
The color of text used on an emphasised green success background
Collection
Semantic colours
Token set
-
#044d29
ovo-semantic-success-surface-emphasis
The surface background colour of an emphasised green success message
Collection
Semantic colours
Token set
-
Warning
warning
#c13e06
ovo-semantic-warning-message
The color of text and icons used in warning messaging on a warning orange surface background.
Collection
Semantic colours
Token set
-
#ffede5
ovo-semantic-warning-surface
The background colour of warning messaging.
Collection
Semantic colours
Token set
-
#ffffff
ovo-semantic-warning-border
The color of dividers and borders used in warning messaging.
Collection
Semantic colours
Token set
-
#ffffff
ovo-semantic-warning-message-on-emphasis
The color of text used on an emphasised orange wanring background
Collection
Semantic colours
Token set
-
#802600
ovo-semantic-warning-surface-emphasis
The surface background colour of an emphasised orange warning message
Collection
Semantic colours
Token set
-
Error
error
#ae072c
ovo-semantic-error-message
The color of text and icons used in error messaging on an error red surface background.
Collection
Semantic colours
Token set
-
#ffedf1
ovo-semantic-error-surface
The background colour of error messaging.
Collection
Semantic colours
Token set
-
#ffffff
ovo-semantic-error-border
The color of dividers and borders used in error messaging.
Collection
Semantic colours
Token set
-
#ffffff
ovo-semantic-error-message-on-emphasis
The color of text used on an emphasised red error background
Collection
Semantic colours
Token set
-
#730019
ovo-semantic-error-surface-emphasis
The surface background colour of an emphasised red error message
Collection
Semantic colours
Token set
-
Data
When visualising fuel types, we use 3 distinct hues. We use yellow for electricity and blue for gas. When showing gas and electricity combined, we use green to render the data.
We always show electricity before gas
data
#0a9828
ovo-semantic-data-branded-1
The primary colour to visualise branded data
Collection
Semantic colours
Token set
-
#00261c
ovo-semantic-data-branded-2
The secondary color to visualise branded data. Pair this with the primary branded data color when a second branded data color is required.
Collection
Semantic colours
Token set
-
#007226
ovo-semantic-data-branded-3
The tertiary color to visualise branded data. Use this with the primary and secondary branded data colors when a third branded data color is required.
Collection
Semantic colours
Token set
-
#adeaa6
ovo-semantic-data-branded-4
The quaternary color to visualise branded data. Use this with the primary, secondary and tertiary branded data colors when a fourth branded data color is required.
Collection
Semantic colours
Token set
-
#cb7d07
ovo-semantic-data-electric-1
The primary colour to visualise electricity data
Collection
Semantic colours
Token set
-
#00261c
ovo-semantic-data-electric-2
The secondary color to visualise electricity data. Pair this with the primary electricity data color when a second electricity data color is required.
Collection
Semantic colours
Token set
-
#8f5600
ovo-semantic-data-electric-3
The tertiary color to visualise electricity data. Use this with the primary and secondary electricity data colors when a third electricity data color is required.
Collection
Semantic colours
Token set
-
#ffd494
ovo-semantic-data-electric-4
The quaternary color to visualise electricity data. Use this with the primary, secondary and tertiary electricity data colors when a fourth electricity data color is required.
Collection
Semantic colours
Token set
-
#4f66de
ovo-semantic-data-gas-1
The primary colour to visualise gas data
Collection
Semantic colours
Token set
-
#00261c
ovo-semantic-data-gas-2
The secondary color to visualise gas data. Pair this with the primary gas data color when a second gas data color is required.
Collection
Semantic colours
Token set
-
#001eb2
ovo-semantic-data-gas-3
The tertiary color to visualise gas data. Use this with the primary and secondary gas data colors when a third gas data color is required.
Collection
Semantic colours
Token set
-
#aebafb
ovo-semantic-data-gas-4
The quaternary color to visualise gas data. Use this with the primary, secondary and tertiary gas data colors when a fourth gas data color is required.
