Color palettes
Each palette consists of 10 shades ranging from 50 (lightest) to 900 (darkest). Use CSS custom properties to apply colors consistently throughout your application.
Moss Canopy
50--moss-canopy-50#E2F1E8
100--moss-canopy-100#DBF3E6
200--moss-canopy-200#C6E7D2
300--moss-canopy-300#9ED9B4
400--moss-canopy-400#77C896
500--moss-canopy-500#51B57A
600--moss-canopy-600#369D61
700--moss-canopy-700#16803D
800--moss-canopy-800#166633
900--moss-canopy-900#14532E
950--moss-canopy-950#064322
Glacial Lake
50--glacial-lake-50#F1F9FF
100--glacial-lake-100#E0F2FE
200--glacial-lake-200#BAE6FE
300--glacial-lake-300#7DD4FC
400--glacial-lake-400#32C1FF
500--glacial-lake-500#06A9F4
600--glacial-lake-600#0085CA
700--glacial-lake-700#0369A1
800--glacial-lake-800#055985
900--glacial-lake-900#0A4A6E
950--glacial-lake-950#092F49
Ion Drive
50--ion-drive-50#EFF6FF
100--ion-drive-100#DBEAFE
200--ion-drive-200#BFDBFE
300--ion-drive-300#93C5FD
400--ion-drive-400#5BA4FF
500--ion-drive-500#3380FF
600--ion-drive-600#1B5FF5
700--ion-drive-700#1D4FD8
800--ion-drive-800#1E40AF
900--ion-drive-900#1D3B8A
950--ion-drive-950#172454
Solar Flare
50--solar-flare-50#FFFBEB
100--solar-flare-100#FEF3C7
200--solar-flare-200#FEE78A
300--solar-flare-300#FCD34D
400--solar-flare-400#FFC122
500--solar-flare-500#FFA100
600--solar-flare-600#DF7801
700--solar-flare-700#B45308
800--solar-flare-800#92400E
900--solar-flare-900#78350F
950--solar-flare-950#451A03
Sienna Glow
50--sienna-glow-50#FFF7ED
100--sienna-glow-100#FFEDD5
200--sienna-glow-200#FED7AA
300--sienna-glow-300#FDBA74
400--sienna-glow-400#FF9338
500--sienna-glow-500#FF720F
600--sienna-glow-600#F55501
700--sienna-glow-700#C2410C
800--sienna-glow-800#9B3312
900--sienna-glow-900#7C2D12
950--sienna-glow-950#441406
Thermal Bloom
50--thermal-bloom-50#FEF3F2
100--thermal-bloom-100#FEE2E3
200--thermal-bloom-200#FECBCA
300--thermal-bloom-300#FDA5A6
400--thermal-bloom-400#FF6B6B
500--thermal-bloom-500#F83B3B
600--thermal-bloom-600#E61C1D
700--thermal-bloom-700#BA1B1B
800--thermal-bloom-800#9A1C1B
900--thermal-bloom-900#801D1D
950--thermal-bloom-950#45090A
Nebula Spark
50--nebula-spark-50#F5F4FF
100--nebula-spark-100#EDE9FE
200--nebula-spark-200#DDD7FE
300--nebula-spark-300#C4B5FD
400--nebula-spark-400#A686FF
500--nebula-spark-500#8855FE
600--nebula-spark-600#7A31F6
700--nebula-spark-700#6D29D9
800--nebula-spark-800#5B22B7
900--nebula-spark-900#4C1D96
950--nebula-spark-950#2E1066
Alpine Rose
50--alpine-rose-50#FEF2F8
100--alpine-rose-100#FCE7F3
200--alpine-rose-200#FBCFE8
300--alpine-rose-300#F9A9D4
400--alpine-rose-400#FB6CB7
500--alpine-rose-500#F44099
600--alpine-rose-600#E41E76
700--alpine-rose-700#BE175D
800--alpine-rose-800#9D174D
900--alpine-rose-900#831843
950--alpine-rose-950#500624
Misty Dune
50--misty-dune-50#FBF9F7
100--misty-dune-100#F7F4EE
200--misty-dune-200#EEE8DD
300--misty-dune-300#E4D9C6
400--misty-dune-400#D6C8B0
500--misty-dune-500#C2B396
600--misty-dune-600#AD9E80
700--misty-dune-700#938568
800--misty-dune-800#7A6F56
900--misty-dune-900#5D5441
950--misty-dune-950#423C2D
Volcanic Ash
50--volcanic-ash-50#F9FAFB
100--volcanic-ash-100#F3F4F6
200--volcanic-ash-200#E5E7EB
300--volcanic-ash-300#D2D5DB
400--volcanic-ash-400#9CA3AF
500--volcanic-ash-500#6B7280
600--volcanic-ash-600#4C5563
700--volcanic-ash-700#394150
800--volcanic-ash-800#212936
900--volcanic-ash-900#121826
950--volcanic-ash-950#030711
Usage
Colors are defined as CSS custom properties and can be used directly in your styles.
.button {
background-color: var(--glacial-lake-500);
color: white;
}
.button:hover {
background-color: var(--glacial-lake-600);
}
Semantic colors
Semantic color tokens map to specific use cases and adapt automatically for light and dark modes.
| Token | Value | Usage |
|---|
| --color-primary | volcanic-ash-900 | Primary actions, links, focus states |
| --color-success | moss-canopy-500 | Success states, positive feedback |
| --color-warning | solar-flare-500 | Warning states, caution indicators |
| --color-error | alpine-rose-500 | Error states, destructive actions |
| --color-info | ion-drive-500 | Informational states, highlights |