Colour

PRIMARY

Deep Purple

hsl(265, 97%, 15%)

#20014b

Flash Turk

hsl(181, 58%, 53%)

#42cacd

ACCENTS

Cracked Yolk

hsl(34, 99%, 66%)

#feb452

Salmon Rouge

hsl(351, 98%, 78%)

#fe90a0

UTILITY

Murky Night

hsl(208, 42%, 6%)

#091016

Thunder Cloud

hsl(208, 42%, 69%)

#8fb2d1

Faded Ming

hsl(208, 42%, 80%)

#b7cde1

Pearly Coke

hsl(208, 42%, 97%)

#f4f8fb

Dart Red

hsl(0, 84%, 64%)

#f05656

Peel Orange

hsl(30, 92%, 60%)

#f7993b

Knoll Green

hsl(148, 50%, 42%)

#36a168

Azure Blue

hsl(208, 42%, 6%)

#1482ff

Usage

Deep Purple

A sombre, subdued purple. For dark backgrounds and highlighted section on the page. Use sparingly, for its regality stems from exclusivity.

Flash Turk

A vibrant, saturated teal. For all buttons, and also in renders and illustrations. One any given page, this should ideally be the dominant colour.

Cracked Yolk

A similarly saturated yellow tending towards amber. For primarily in illustration and highlighting accents on some elements. Use sparingly.

Salmon Rouge

A cousin of the Yolk, but from the pink family. Again, mostly for illustrations and accents, goes best with Deep Purple. Use with increased prudence.

Murky Night

A dark pigment for ink. For all text and heading elements on light backgrounds, try and avoid on other elements. Is our alternate for black.

Thunder Cloud

A muted slate grey. For illustrations and backgrounds, avoid as a dominant colour. Pair with primaries or accents for the best outcome.

Faded Ming

An even more muted TC. Similar use, and can be used in along with TC to show depth and light. Avoid as dominant colour, it’d be quite dull.

Pearly Coke

An extremely desaturated version of MN. Use to signify negative space, and use as an alternate for white. Great for backgrounds and show empty states.

Dart Red

A loud, yet mildly muted red. For drawing attention, like an error popup. Use with extreme caution, unless you’re a brutalist, and hate people.

Peel Orange

Similar to red, but a less dangerous version. Use for warnings and quick callouts, but with some prudence. Sprinkle, don’t splash.

Knoll Green

A calm, ever-so-slightly desaturated chlorophyll green. Best for showing success states and those satisfying green ticks that soothe the soul.

Azure Blue

A deep tropical blue of the ocean. Use for quick info-laden popups. Water is a scarce resource, so take care not to spill too much, please.

Pick any colour above, and you can use it for text, backgrounds, borders, and even SVG fills and strokes, as described below—



<Heading textColour="dart-red">Your heading here</Heading>
    
<Text textColour="flash-turk">Your text here</Text>
    
<Card bgColour="faded-ming" borderColour="azure-blue">
    Content goes here
</Card>

SVG stoke and fill works only via CSS/Styled-Components, so bear with us while we add support.



.some-element {
    fill   : ${setuColours.deepPurple};
    stroke : ${setuColours.fadedMing};
}