Colour Swatches
-
- Base Black
- Base
- #0a0a0a
- rgb(10, 10, 10)
-
- Blue
- Primary / Info
- #1c3968
- rgb(28, 57, 104)
-
- Blue Green
- Secondary / Success
- #4ea0aa
- rgb(78, 160, 170)
-
- ENTSO-E Cool Blue
- Secondary Content
- #23618e
- rgb(35, 97, 142)
-
- Red
- Danger
- #ce202c
- rgb(206, 32, 44)
-
- Orange
- Warning
- #e65c25
- rgb(230, 92, 37)
-
- ENTSO-E Yellow
- Super Highlights
- #fcc40f
- rgb(252, 196, 15)
Fill Colours
Foreground
By default text, links, icons, and other elements render as a dark foreground against a light background. To invert this behavior and display light foreground elements use the dark class.
.fill-cream #e8e4d1
.fill-blue #1c3968
.fill-green-blue #4ea0aa
.fill-green #473050
.fill-purple #473050
.fill-dark-grey #666868
fill-orange #e65c25
fill-red #ce202c
fill-brown #301710
.fill-light #e9e9ea
<div class="p2 fill-cream">.fill-cream</div>
<div class="p2 fill-blue dark">.fill-blue</div>
<div class="p2 fill-green-blue">.fill-green-blue</div>
<div class="p2 fill-green">.fill-green</div>
<div class="p2 fill-purple dark">.fill-purple</div>
<div class="p2 fill-dark-grey dark">.fill-dark-grey</div>
<div class="p2 fill-orange dark">.fill-orange</div>
<div class="p2 fill-red dark">.fill-red</div>
<div class="p2 fill-brown dark">.fill-brown</div>
<div class="p2 fill-light">.fill-light</div>