menu

DESIGN SYSTEM

Colours

These are the colours from the 2019 Compassion style guide. Use this page as a reference for colour names, their SASS variables, colour ratios and usage.
When updating the colours, update _colours.scss and update the CSS class from compassion.css as needed.

COLOUR PALETTE

#0F426C

Shady Navy
$shady-navy

#215EAC

Compassion Blue
$compassion-blue

#0086B8

The Neighbours Pool
$neighbours-pool

#72B1C8

Nanna's Car Blue
$nannas-car-blue

#BCDCE6

Ice Blue
$ice-blue

#435565

Gumtree Blue
$gumtree-blue

#758791

Cold Rhino Blue
$cold-rhino-blue

#2D2D2D

Slate Grey
$slate-grey

#646464

Stormy Grey
$stormy-grey

#C8C8C8

Baby Penguin Grey
$baby-penguin-grey

#FFD200

Butter Yellow
$butter-yellow

#FFB914

Toasted Canary
$toasted-canary

#00B4B4

Tiffany Teal
$tiffany-teal

#F5968C

Embarrassed Salmon
$embarrassed-salmon

#E64137

Sunburnt Watermelon
$sunburnt-watermelon

#C3141E

Critical Needs Red
$cn-red

#871F1E

African Earth
$african-earth

#AFA091

Wet Sand
$wet-sand

#D7CDB4

Dry Sand
$dry-sand

#FFFFFF

White
$white

#000000

Blacketty Black
$black

COLOUR RATIO

CDSP

CRITICAL NEEDS

SOCIAL / DIGITAL

COLOUR USAGE

All the colours from the colour palette can be used as a background colour or a text colour. There is a CSS class for each colour which is same as their SASS variable name. Here are some examples:

Use as background color: .bg-"colour-name"

.bg-compassion-blue

.bg-tiffany-teal

.bg-embarrassed-salmon

    
    <div class="bg-compassion-blue">
        <p class="txt-white">.bg-compassion-blue</p>
    </div>
    <div class="bg-tiffany-teal">
        <p class="txt-white">.bg-tiffany-teal</p>
    </div>
    <div class="bg-embarrassed-salmon">
        <p class="txt-white">.bg-embarrassed-salmon</p>
    </div>
    
    

Use as text colour: .txt-"colour-name"

Releasing children from poverty in Jesus' name

    
    <h2>
        <span class="txt-ice-blue">Releasing</span> 
        <span class="txt-butter-yellow">children</span> 
        <span class="txt-neighbours-pool">from</span> 
        <span class="txt-embarrassed-salmon">poverty</span> 
        <span class="txt-ice-blue">in</span> 
        <span class="txt-butter-yellow">Jesus'</span>
        <span class="txt-toasted-canary">name</span>
    </h2>
    
    

Use class .txt-white to create white text on colour or image background

Releasing children from poverty in Jesus' Name