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#333333
Primary
There are three primary colours for use within UI design.
regular#000FF5
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
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.
business#0037FF
business-dark#00077A
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.
surface-blue#0C1B87
sky-white-flat#FAFAFD
scrim#000000, 60%
Interaction
These are specific, reserved solid colours that are used for interactive states and should only be used for their intended purpose.
interaction-focus#007ECC
interaction-focus-light#FFFFFF
interaction-disabled-background#808080
interaction-disabled-background-light#808080
interaction-disabled-foreground#4D4D4D
interaction-disabled-foreground-light#4D4D4D
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.
