Background colours

Create powerful blocks of colour.

colour

What do they look like?

No background

Turquoise background

Lilac background

Navy background

Combine them with a full width background

<div class="full-width bg-lilac">
     <div class="container">
          <h2 class="h1">Lorem ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a class="button">Button</a>
     </div>
</div>

Add a wave at the top

<div class="full-width wave-top bg-turquoise">
     <div class="container">
          <h2 class="h1">Lorem ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a class="button">Button</a>
     </div>
</div>

Add a wave at the bottom, too, why not

<div class="full-width wave-top wave-bottom bg-navy">
     <div class="container">
          <h2 class="h1">Lorem ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a class="button">Button</a>
     </div>
</div>

List of background colours

Colour Class Example
Lilac bg-lilac 
<div class="card bg-lilac">Content</div>
Navy bg-navy 
<div class="card bg-navy">Content</div>
Navy light bg-navy-light 
<div class="card bg-navy-light">Content</div>
Turquoise bg-turquoise 
<div class="card bg-turquoise">Content</div>
Turquoise dark bg-turquoise-dark 
<div class="card bg-turquoise-dark">Content</div>
Turquoise light bg-turquoise-light 
<div class="card bg-turquoise-light">Content</div>
Yellow light bg-yellow 
<div class="card bg-yellow">Content</div>
Pink bg-pink 
<div class="card bg-pink">Content</div>
Sand bg-sand 
<div class="card bg-sand">Content</div>
White bg-white 
<div class="card bg-white">Content</div>
Published: 01 Jul 2026 11:52 Last updated: 07 Jul 2026 18:12 48 views