Design Note: As a default we use a 20% tint from the regular swatch to create dark counterparts. More detailed adjustments might be necessary depending on the individual colour and its purpose.
Text
These are specific, reserved solid colours that should only be used for the purpose indicated by their names.
text-grey#4A4A4A
Primary
There are three primary colours for use within UI design.
regular#000FF5
light#007ECC
dark#000CC4
Reserved
These are specific, reserved solid colours that should only be used for the purpose indicated by their names.
positive#007E13
positive-dark#00650F
negative#DD1717
negative-dark#B11212
attention#F15A22
attention-dark#CC3F06
environmental#1AAB31
environmental-dark#007613
Greyscale
White to black greyscale tones. Please consider accessibility when selecting a tone.
white#FFFFFF
grey-2#FAFAFA
grey-5#F2F2F2
grey-10#E5E5E5
grey-20#CCCCCC
grey-40#999999
grey-50#808080
grey-70#4D4D4D
grey-80#333333
black#000000
Products
Solid colours for the promotion of Sky Products. Note: do not use a product colour outside of the context indicated by its name.
tv#5C29F9
tv-dark#0000C5
mobile#FF4B29
mobile-dark#C40000
broadband#8E2AE6
broadband-dark#5700B3
business#0037FF
business-dark#00077A
glass#091153
Loyalty
Solid colours for use across loyalty. When used in text, loyalty-two and three are only accessible for large fonts (24px and above).
one#6E787B
one-dark#434C4F
two#C28724
two-dark#8D5A00
three#7D7CA3
three-dark#505074
four#252525
four-dark#000000
Surfaces
Additional surface colours to add depth.
sky-white-flat#FAFAFD
scrim#000000, 60%
Figma Component Colours
Colours used in the design of components, to ensure consistency across states.
hover-outline#000ff5, 20%
hover-fill-transparent#000ff5, 5%
hover-fill-opaque#f3f5ff
hover-light-fill-transparent#ffffff, 10%
Regional variants
Certain Foundation Styles are required to have regional variations and indicate the region within folder and style name, i.e. Regional-Germany/Colours-DE.
