Primary colours

The primary colours represent the galaxy above. They should be used for the text and in backgrounds.

 
 
 
 
  •   Primary
    • var(--color-primary)
    • #000000
    • rgba(0, 0, 0, 1)
  •   Primary light
    • var(--color-primary-light)
    • #454545
    • rgba(69, 69, 69, 1)
  •   Primary opposite
    • var(--color-primary-opposite)
    • #ffffff
    • rgba(255, 255, 255, 1)

Secondary colours

The secondary colour is more vibrant and bright, and should be used for buttons and in some hover situations.

 
 
  •   Secondary
    • var(--color-secondary)
    • #0792bc
    • rgba(7, 146, 188, 1)

Accent colours

The accent colour is another vibrant and bright colour, and should be used in most hover situations.

The colours, alert, alert-light, and alert-dark, are used only in the error message and should not be used anywhere else.

  •  
      Accent
    • var(--color-accent)
    • #f86363
    • rgba(248, 99, 99, 1)
  •  
      Alert
    • var(--color-alert)
    • #dd2233
    • rgba(221, 34, 51, 1)
  •  
      Alert light
    • var(--color-alert-light)
    • #ffdddd
    • rgba(255, 221, 221, 1)
  •  
      Alert dark
    • var(--color-alert-dark)
    • #c3000f
    • rgba(195, 0, 15, 1)

Neutral colours

The neutral colours should be used to accent cards and other elements.

  •  
      Neutral grey
    • var(--color-neutral-grey)
    • #c1c1c1
    • rgba(193, 193, 193, 1)
  •  
      Neutral light grey
    • var(--color-neutral-light-grey)
    • #e2e2e2
    • rgba(226, 226, 226, 1)