Style guide

Brand colours

.bg-ei-autumn

.bg-ei-black

.bg-ei-brand

.bg-ei-fog

.bg-ei-green

.bg-ei-khaki

.bg-ei-lemongrass

.bg-ei-light-brand

.bg-ei-light-grey

.bg-ei-light-taupe

.bg-ei-mauve

.bg-ei-pink

.bg-ei-sand

.bg-ei-taupe

.bg-ei-teal

.bg-ei-terracotta

.bg-ei-yellow

.bg-ei-highlights

<div class="bg-ei-autumn">
</div> 
<div class="bg-ei-black">
</div> 
<div class="bg-ei-brand">
</div> 
<div class="bg-ei-fog">
</div> 
<div class="bg-ei-green">
</div> 
<div class="bg-ei-khaki">
</div> 
<div class="bg-ei-lemongrass">
</div> 
<div class="bg-ei-light-brand">
</div> 
<div class="bg-ei-light-grey">
</div> 
<div class="bg-ei-light-taupe">
</div> 
<div class="bg-ei-mauve">
</div> 
<div class="bg-ei-pink">
</div> 
<div class="bg-ei-sand">
</div> 
<div class="bg-ei-taupe">
</div> 
<div class="bg-ei-teal">
</div> 
<div class="bg-ei-terracotta">
</div> 
<div class="bg-ei-yellow">
</div>

Main colours

.bg-primary

.bg-secondary

.bg-danger

.bg-warning

.bg-success

.bg-light

<div class="bg-primary">
</div> 
<div class="bg-secondary">
</div> 
<div class="bg-danger">
</div> 
<div class="bg-warning">
</div> 
<div class="bg-success">
</div> 
<div class="bg-light">
</div>

Additional colours

.bg-blue

.bg-indigo

.bg-purple

.bg-pink

.bg-red

.bg-orange

.bg-yellow

.bg-green

.bg-teal

.bg-cyan

.bg-black

.bg-white

<div class="bg-blue">
</div> 
<div class="bg-indigo">
</div> 
<div class="bg-purple">
</div> 
<div class="bg-pink">
</div> 
<div class="bg-red">
</div> 
<div class="bg-orange">
</div> 
<div class="bg-yellow">
</div> 
<div class="bg-green">
</div> 
<div class="bg-teal">
</div> 
<div class="bg-cyan">
</div> 
<div class="bg-black">
</div> 
<div class="bg-white">
</div>

Grey colours

.bg-gray-100

.bg-gray-200

.bg-gray-300

.bg-gray-400

.bg-gray-500

.bg-gray-600

.bg-gray-700

.bg-gray-800

.bg-gray-900

<div class="bg-gray-100">
</div> 
<div class="bg-gray-200">
</div> 
<div class="bg-gray-300">
</div> 
<div class="bg-gray-400">
</div> 
<div class="bg-gray-500">
</div> 
<div class="bg-gray-600">
</div> 
<div class="bg-gray-700">
</div> 
<div class="bg-gray-800">
</div> 
<div class="bg-gray-900">
</div>

Opacity

.opacity-0

.opacity-5

.opacity-10

.opacity-20

.opacity-30

.opacity-40

.opacity-50

.opacity-60

.opacity-70

.opacity-80

.opacity-90

.opacity-95

.opacity-100

<div class="bg-secondary opacity-0">
</div> 
<div class="bg-secondary opacity-5">
</div> 
<div class="bg-secondary opacity-10">
</div> 
<div class="bg-secondary opacity-20">
</div> 
<div class="bg-secondary opacity-30">
</div> 
<div class="bg-secondary opacity-40">
</div> 
<div class="bg-secondary opacity-50">
</div> 
<div class="bg-secondary opacity-60">
</div> 
<div class="bg-secondary opacity-70">
</div> 
<div class="bg-secondary opacity-80">
</div> 
<div class="bg-secondary opacity-90">
</div> 
<div class="bg-secondary opacity-95">
</div> 
<div class="bg-secondary opacity-100">
</div>

Text

Example text.

.text-ei-autumn

Example text.

.text-black

Example text.

.text-ei-brand

Example text.

.text-ei-fog

Example text.

.text-green

Example text.

.text-ei-khaki

Example text.

.text-ei-lemongrass

Example text.

.text-ei-light-brand

Example text.

.text-ei-light-grey

Example text.

.text-ei-light-taupe

Example text.

.text-ei-mauve

Example text.

.text-pink

Example text.

.text-ei-sand

Example text.

.text-ei-taupe

Example text.

.text-teal

Example text.

.text-ei-terracotta

Example text.

.text-yellow

Example text.

.text-primary

Example text.

.text-secondary

Example text.

.text-danger

Example text.

.text-warning

Example text.

.text-success

Example text.

.text-light

Example text.

.text-blue

Example text.

.text-indigo

Example text.

.text-purple

Example text.

.text-red

Example text.

.text-orange

Example text.

.text-cyan

Example text.

.text-white

Example text.

.text-gray-100

Example text.

.text-gray-200

Example text.

.text-gray-300

Example text.

.text-gray-400

Example text.

.text-gray-500

Example text.

.text-gray-600

Example text.

.text-gray-700

Example text.

.text-gray-800

Example text.

.text-gray-900

Example text.

.text-ei-highlights

<p class="text-ei-autumn">...
</p> 
<p class="text-black">...
</p> 
<p class="text-ei-brand">...
</p> 
<p class="text-ei-fog">...
</p> 
<p class="text-green">...
</p> 
<p class="text-ei-khaki">...
</p> 
<p class="text-ei-lemongrass">...
</p> 
<p class="text-ei-light-brand">...
</p> 
<p class="text-ei-light-grey">...
</p> 
<p class="text-ei-light-taupe">...
</p> 
<p class="text-ei-mauve">...
</p> 
<p class="text-pink">...
</p> 
<p class="text-ei-sand">...
</p> 
<p class="text-ei-taupe">...
</p> 
<p class="text-teal">...
</p> 
<p class="text-ei-terracotta">...
</p> 
<p class="text-yellow">...
</p> 
<p class="text-primary">...
</p> 
<p class="text-secondary">...
</p> 
<p class="text-danger">...
</p> 
<p class="text-warning">...
</p> 
<p class="text-success">...
</p> 
<p class="text-light">...
</p> 
<p class="text-blue">...
</p> 
<p class="text-indigo">...
</p> 
<p class="text-purple">...
</p> 
<p class="text-red">...
</p> 
<p class="text-orange">...
</p> 
<p class="text-cyan">...
</p> 
<p class="text-white">...
</p> 
<p class="text-gray-100">...
</p> 
<p class="text-gray-200">...
</p> 
<p class="text-gray-300">...
</p> 
<p class="text-gray-400">...
</p> 
<p class="text-gray-500">...
</p> 
<p class="text-gray-600">...
</p> 
<p class="text-gray-700">...
</p> 
<p class="text-gray-800">...
</p> 
<p class="text-gray-900">...
</p>

Colours