Colour
Since some boxes may be coloured and solid headers may also be used, the different ways of using links and buttons have to be planned. Here are the different applications, in relation to the background colour on which they appear. For more details on how links are used, refer to the Links section, and to Buttons for how to use buttons.
Neutral light theme
Background colours that are part of this theme:
#ffffffneutral (Grayscale 7)
#f7f6f6neutral-light (website background)
#ebebeb
neutral-subtle
Elements (texts and icons)
#1f384bneutral-alternate(Primary 1)
Used for main text and primary elements.
# 627280neutral-alternate-light(Grayscale 3)
Used whenever you want an element to appear less visible.
#d82c26alternate-accent-medium(Primary 2)
Used on buttons and navigation links.
#0072ceaccent(Secondary 1)
Used on content links and Secondary call-to-actions.
#fff076alternate-accent-subtle(Secondary 4)
Usually reserved for Client Space call-to-actions.
Buttons
The following button styles can be used on neutral light theme backgrounds.
The following button styles are deprecated, and cannot be used on neutral light theme backgrounds.
Links
The following link styles can be used on neutral light theme backgrounds.
Sample text with a normal link inside.
Sample text with a hover/focus link inside.
*This icon must be used in a clickable block, and should not, in itself, be used as a link.
The following link styles cannot be used on neutral light theme backgrounds.
*If text must accompany an icon, the "Standalone" link style must be used.
Neutral dark theme
Background colours that are part of this theme:
#1f384bneutral-alternate(Primary 1)
# 3a5870neutral-alternate-medium
# 627280neutral-alternate-light(Grayscale 3)
Elements (texts and icons)
#ffffffneutral
Used for main text and primary elements.
# c9c7c5neutral-alternate-subtle
Used whenever you want an element to appear less visible.
#d82c26alternate-accent-medium(Primary 2)
Used on buttons and navigation links. Use on neutral-alternate only.
#fff076alternate-accent-subtle(Secondary 4)
Usually reserved for Client Space call-to-actions.
Buttons
The following button styles can be used on neutral dark theme backgrounds.
The following button styles are deprecated, and cannot be used on neutral dark theme backgrounds.
Links
The following link styles can be used on neutral dark theme backgrounds.
*This icon must be used in a clickable block, and should not, in itself, be used as a link.
The following link styles cannot be used on neutral dark theme backgrounds.
Sample text with a normal link inside.
Sample text with a hover/focus link inside.
*Content should be supplied so that links are either "standalone" or "list" style.
*If text must accompany an icon, the "standalone" link style must be used.
Coloured light theme
Background colours that are part of this theme:
#4bc5e2accent-light(Secondary 5)
#00bfb3accent-medium(Secondary 2)
# f08a3aalternate-accent-light(Secondary 3)
Elements (texts and icons)
#1f384bneutral-alternate(Primary 1)
Used for main text and primary elements.
Buttons
The following button styles can be used on coloured light theme backgrounds.
Links
The following link styles can be used on coloured light theme backgrounds.
*This icon must be used in a clickable block, and should not, in itself, be used as a link.
The following link styles cannot be used on coloured light theme backgrounds.
Sample text with a normal link inside.
Sample text with a hover/focus link inside.
*Content should be supplied so that links are either "standalone" or "list" style.
*If text must accompany an icon, the "standalone" link style must be used.
Coloured dark theme
Background colours that are part of this theme:
#a8162calternate-accent(Primary 3)
#d82c26alternate-accent-medium(Primary 2)
#0072ceaccent(Secondary 1)
Elements (texts and icons)
#ffffffneutral
Used for main text and primary elements.
Buttons
The following button styles can be used on coloured dark theme backgrounds.
Links
The following link styles can be used on coloured dark theme backgrounds.
*This icon must be used in a clickable block, and should not, in itself, be used as a link.
The following link styles cannot be used on coloured dark theme backgrounds.
Sample text with a normal link inside.
Sample text with a hover/focus link inside.
*Content should be supplied so that links are either "standalone" or "list" style.
*If text must accompany an icon, the "standalone" link style must be used.