Primary colours

The primary colors represent the geometric shades and tones that a crystal can have. They should be used for text and button styles.

 
 
 
  •   Primary
    • var(--color-primary)
    • #195070
    • rgba(25, 80, 112, 1)
  •   Primary light
    • var(--color-primary-light)
    • #abdee0
    • rgba(171, 222, 224, 1)

Secondary colours

The secondary colors are more neutral and bold to bring a unique quality to the design. They should be used for the navigation, detailed text, and for the crystals information page.

 
 
 
  •   Secondary
    • var(--color-secondary)
    • #707070
    • rgba(112, 112, 112, 1)
  •   Secondary light
    • var(--color-secondary-light)
    • #ffffff
    • rgba(255, 255, 255, 1)

Accent colours

  •  
      Redgem
    • var(--color-redgem)
    • #b7312b
    • rgba(183, 49, 43, 1)
  •  
      Orangejuice
    • var(--color-orangejuice)
    • #e8830c
    • rgba(232, 131, 12, 1)
  •  
      Coldstar
    • var(--color-coldstar)
    • #ffc32e
    • rgba(255, 195, 46, 1)
  •  
      Naturalgreen
    • var(--color-naturalgreen)
    • #007369
    • rgba(0, 115, 105, 1)
  •  
      Blueoceans
    • var(--color-blueoceans)
    • #006a91
    • rgba(0, 106, 145, 1)
  •  
      Purpleofairy
    • var(--color-purpleofairy)
    • #7a4de8
    • rgba(122, 77, 232, 1)