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)
#195070rgba(25, 80, 112, 1)var(--color-primary-light)
#abdee0rgba(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)
#707070rgba(112, 112, 112, 1)var(--color-secondary-light)
#ffffffrgba(255, 255, 255, 1)var(--color-redgem)
#b7312brgba(183, 49, 43, 1)var(--color-orangejuice)
#e8830crgba(232, 131, 12, 1)var(--color-coldstar)
#ffc32ergba(255, 195, 46, 1)var(--color-naturalgreen)
#007369rgba(0, 115, 105, 1)var(--color-blueoceans)
#006a91rgba(0, 106, 145, 1)var(--color-purpleofairy)
#7a4de8rgba(122, 77, 232, 1)