Colors

The official futureproof colours are avaliable through CSS variables.

tip

Quickly customise text and background colors on any element with the text-* and bg-* color utilities. Scroll down for examples!

important

Any 2-tone colour combinations, including text/background must comprise of either both primary futureproof colour (purple or white) or 1 primary futureproof colour and 1 secondary futureproof colour.

No more than one secondary colour should be incorporated into any one element.

primary fp colours

name	hex	variable usage
purple	#3c2157	var(--purple)
white	#ffffff	var(--white)

secondary fp colours

name	hex	variable usage
violet	#b6a2ff	var(--violet)
lime	#d0e54d	var(--lime)
lemon	#ffbb36	var(--lemon)
coral	#ff7999	var(--coral)

.text-[color]

.text-purple.text-white.text-violet.text-lemon.text-lime.text-coral

<span class="text-purple">.text-purple</span>
<span class="text-white">.text-white</span>
<span class="text-violet">.text-violet</span>
<span class="text-lemon">.text-lemon</span>
<span class="text-lime">.text-lime</span>
<span class="text-coral">.text-coral</span>

.bg-[color]

.bg-purple

.bg-white

.bg-violet

.bg-lemon

.bg-lime

.bg-coral

<p class="bg-purple">.bg-purple</p>
<p class="bg-white">.bg-white</p>
<p class="bg-violet">.bg-violet</p>
<p class="bg-lemon">.bg-lemon</p>
<p class="bg-lime">.bg-lime</p>
<p class="bg-coral">.bg-coral</p>

important

An element with .bg-purple should have white text content unless it has a section background of a secondary colour. In that case, the text colour may match the section background colour.

Okay!

Okay!

Not okay!

Not okay!