Colours
Primary
| Example | Name | Value | SCSS Variables |
|---|---|---|---|
| Purple 800 | #281631 | $gel-color-primary-purple-800 | |
| Purple 700 | #3c1053 | $gel-color-primary-purple-700 | |
| Purple 600 | #502252 | $gel-color-primary-purple-600 | |
| Purple 500 | #6c3078 | $gel-color-primary-purple-500 | |
| Purple 400 | #b056bc | $gel-color-primary-purple-400 | |
| Purple 300 | #cc8acf | $gel-color-primary-purple-300 | |
| Purple 200 | #e8cbea | $gel-color-primary-purple-200 | |
| Purple 100 | #ede9ed | $gel-color-primary-purple-100 |
Secondary
| Example | Name | Value | SCSS Variables |
|---|---|---|---|
| Blue 500 | #5666bc | $gel-color-secondary-blue-500 | |
| Blue 300 | #7384d2 | $gel-color-secondary-blue-300 | |
| Blue 200 | #a0abd9 | $gel-color-secondary-blue-200 | |
| Blue 100 | #f4fbfc | $gel-color-secondary-blue-100 | |
| Green 500 | #467822 | $gel-color-secondary-green-500 | |
| Green 300 | #5d9f2d | $gel-color-secondary-green-300 | |
| Green 200 | #93be74 | $gel-color-secondary-green-200 | |
| Green 100 | #ecf7e3 | $gel-color-secondary-green-100 | |
| Orange 500 | #d97008 | $gel-color-secondary-orange-500 | |
| Orange 300 | #f9b067 | $gel-color-secondary-orange-300 | |
| Orange 200 | #fee2bf | $gel-color-secondary-orange-200 | |
| Orange 100 | #fff4ec | $gel-color-secondary-orange-100 | |
| Red 500 | #d4254e | $gel-color-secondary-red-500 | |
| Red 300 | #dd4e70 | $gel-color-secondary-red-300 | |
| Red 200 | #e77892 | $gel-color-secondary-red-200 | |
| Red 100 | #feefef | $gel-color-secondary-red-100 | |
| Denim - 500 | #3379bf | $gel-color-tertiary-denim-500 | |
| Denim - 300 | #5493d1 | $gel-color-tertiary-denim-300 | |
| Teal | #34b9b3 | $gel-color-secondary-teal | |
| Yellow | #ffd565 | $gel-color-secondary-yellow | |
| Aqua | #85cee2 | $gel-color-secondary-aqua | |
| Violet - 900 | #282b3e | $gel-color-secondary-violet-900 | |
| Violet - 500 | #777da7 | $gel-color-secondary-violet-500 |
Tertiary
| Example | Name | Value | SCSS Variables |
|---|---|---|---|
| Black | #000000 | $gel-color-tertiary-black | |
| White | #ffffff | $gel-color-tertiary-white | |
| Slate 1100 | #121417 | $gel-color-tertiary-slate-1100 | |
| Slate 1000 | #1d2026 | $gel-color-tertiary-slate-1000 | |
| Slate 900 | #282c34 | $gel-color-tertiary-slate-900 | |
| Slate 800 | #333842 | $gel-color-tertiary-slate-800 | |
| Slate 700 | #434b58 | $gel-color-tertiary-slate-700 | |
| Slate 600 | #545d6e | $gel-color-tertiary-slate-600 | |
| Slate 500 | #6b778c | $gel-color-tertiary-slate-500 | |
| Slate 400 | #9ea6b5 | $gel-color-tertiary-slate-400 | |
| Slate 300 | #d2d6dd | $gel-color-tertiary-slate-300 | |
| Slate 200 | #dcdfe4 | $gel-color-tertiary-slate-200 | |
| Slate 100 | #f1f2f3 | $gel-color-tertiary-slate-100 | |
| Slate 50 | #fafafa | $gel-color-tertiary-slate-50 |
Fuel
| Example | Name | Value | SCSS Variables |
|---|---|---|---|
| Coal | #333536 | $gel-color-fuel-coal | |
| Brown Coal | #97785c | $gel-color-fuel-brown-coal | |
| Distilate | #fe5f55 | $gel-color-fuel-distilate | |
| Biomass | #a82140 | $gel-color-fuel-biomass | |
| Solar | #ffd565 | $gel-color-fuel-solar | |
| Wind | #a1d978 | $gel-color-fuel-wind | |
| Hydro | #ade0ee | $gel-color-fuel-hydro | |
| Renewables | #e1ee8e | $gel-color-fuel-renewables | |
| DemandSide | #5666bc | $gel-color-fuel-demandSide | |
| Landfill Gas | #5cdcd6 | $gel-color-fuel-landfill-gas | |
| SatPvOrSolarThermal | #ffb546 | $gel-color-fuel-sat-pv-or-solar-thermal | |
| Battery | #b056bc | $gel-color-fuel-battery | |
| Battery Load | #d77ee2 | $gel-color-fuel-battery-load | |
| Vpp Battery Load | #e2a8ea | $gel-color-fuel-vpp-battery-load | |
| Main | #333536 | $gel-color-fuel-main | |
| Load | #d4dadd | $gel-color-fuel-load |
Code
CSS Variables
.class_name {
color: var(--gel-color-primary-purple-500);
}
Sass
.class_name {
color: $gel-color-primary-purple-500;
}
Less
.class_name {
color: @gel-color-primary-purple-500;
}
JavaScript
document.getElementById(id).style.color = token.ColorPrimaryPurple500;
XML
<item android:color="@color/gel_color_primary_purple_500" />
Swift
tokens.gelColorPrimaryPurple500