Colours
Primary​
| Example | Name | Value | SCSS Variables |
|---|---|---|---|
| Purple 700 | #360f3c | $gel-color-primary-purple-700 | |
| Purple 600 | #502252 | $gel-color-primary-purple-600 | |
| Purple 500 | #702f73 | $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 100 | #f4fbfc | $gel-color-secondary-blue-100 | |
| Green 500 | #467822 | $gel-color-secondary-green-500 | |
| Green 100 | #ecf7e3 | $gel-color-secondary-green-100 | |
| Orange 500 | #fe7355 | $gel-color-secondary-orange-500 | |
| Orange 100 | #fff4ec | $gel-color-secondary-orange-100 | |
| Red 500 | #db3259 | $gel-color-secondary-red-500 | |
| Red 100 | #feefef | $gel-color-secondary-red-100 | |
| Teal | #34b9b3 | $gel-color-secondary-teal | |
| Yellow | #ffd565 | $gel-color-secondary-yellow | |
| Aqua | #85cee2 | $gel-color-secondary-aqua | |
| Blue Violet | #777da7 | $gel-color-secondary-blue-violet |
Tertiary​
| Example | Name | Value | SCSS Variables |
|---|---|---|---|
| Link | #3379bf | $gel-color-tertiary-link | |
| Black | #000000 | $gel-color-tertiary-black | |
| White | #ffffff | $gel-color-tertiary-white | |
| Slate 700 | #434b58 | $gel-color-tertiary-slate-700 | |
| Slate 500 | #6b778c | $gel-color-tertiary-slate-500 | |
| Slate 300 | #9ea6b5 | $gel-color-tertiary-slate-300 | |
| Slate 100 | #d2d6dd | $gel-color-tertiary-slate-100 | |
| Slate 50 | #e7edf9 | $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