The primary colors represent the geometric shades and tones that a crystal can have. They should be used for text and button styles.
var(--color-primary)
#195070
rgba(25, 80, 112, 1)
var(--color-primary-light)
#abdee0
rgba(171, 222, 224, 1)
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.
var(--color-secondary)
#707070
rgba(112, 112, 112, 1)
var(--color-secondary-light)
#ffffff
rgba(255, 255, 255, 1)
var(--color-redgem)
#b7312b
rgba(183, 49, 43, 1)
var(--color-orangejuice)
#e8830c
rgba(232, 131, 12, 1)
var(--color-coldstar)
#ffc32e
rgba(255, 195, 46, 1)
var(--color-naturalgreen)
#007369
rgba(0, 115, 105, 1)
var(--color-blueoceans)
#006a91
rgba(0, 106, 145, 1)
var(--color-purpleofairy)
#7a4de8
rgba(122, 77, 232, 1)