Colours

Understand colour meaning, emotion and brand usage.

Neutral

Selected #000000

The foundation of every palette. Neutrals create structure, clarity, and visual hierarchy, allowing stronger colours to shine without distraction.

Colour variations

Best usage for

backgrounds
borders & dividers
text hierarchy

Avoid usage with

high-energy call-to-action buttons (CTAs)
brand-defining accents
emotional messaging

Pair with

Charcoal Warm white Soft grey

Red

Selected #000000

Red is bold, urgent, and emotionally charged. It commands attention and triggers action, making it ideal for moments that matter.

Colour variations

Best usage for

call-to-action buttons (CTAs)
promotions & alerts
high-contrast highlights

Avoid usage with

large background areas
long-form reading
subtle UI elements

Pair with

Charcoal Warm white Soft grey

Orange

Selected #000000

Orange is energetic and approachable. It blends the urgency of red with the optimism of yellow, creating warmth without aggression.

Colour variations

Best usage for

secondary call-to-actions (CTAs)
feature highlights
onboarding moments

Avoid usage with

error states
long text sections
premium branding

Pair with

Deep navy Charcoal Warm neutral

Amber

Selected #000000

Amber signals confidence, momentum, and clarity. It’s eye-catching without feeling rushed, making it ideal for guidance and emphasis.

Colour variations

Best usage for

notifications
progress indicators
attention cues

Avoid usage with

destructive actions
large backgrounds
muted brand systems

Pair with

Graphite Soft white Forest green

Yellow

Selected #000000

Yellow represents optimism, creativity, and clarity. Used carefully, it brings warmth and intelligence to modern interfaces.

Colour variations

Best usage for

highlights & emphasis
badges & indicators
creative brands

Avoid usage with

body text
accessibility-critical UI
large background blocks

Pair with

Charcoal Navy Cool grey

Volt

Selected #000000

Volt (Chartreuse) is bold, modern, and disruptive. It signals innovation and confidence, perfect for brands that want to stand out instantly.

Colour variations

Best usage for

primary call-to-action buttons (CTAs)
product highlights
brand accents

Avoid usage with

light background areas
long reading experiences
traditional brand tones

Pair with

Black Dark grey Midnight blue

Green

Selected #000000

Green conveys balance, growth, and trust. It’s calming yet confident, making it ideal for sustainability and long-term value.

Colour variations

Best usage for

success states
finance & growth metrics
eco-focused messaging

Avoid usage with

urgency messaging
destructive actions
high-contrast alerts

Pair with

Warm grey Cream Deep navy

Teal

Selected #000000

Teal blends the stability of blue with the freshness of green. It feels modern, composed, and quietly confident.

Colour variations

Best usage for

dashboards & infomational screens
SaaS interfaces
professional branding

Avoid usage with

emergency alerts
playful UI moments
ultra-minimal palettes

Pair with

Slate Soft white Muted gold

Blue

Selected #000000

Blue represents trust, logic, and reliability. It’s a cornerstone of technology and finance brands for a reason.

Colour variations

Best usage for

navigation
primary UI elements
informational content

Avoid usage with

emotional call-to-action buttons (CTAs)
urgency-driven actions
overly playful branding

Pair with

Cool grey White Soft cyan

Indigo

Selected #000000

Indigo feels intelligent, deep, and refined. It bridges creativity and logic, making it ideal for thoughtful, premium brands.

Colour variations

Best usage for

main hero sections
feature panels & sections
premium UI layers

Avoid usage with

small text & copy
accessibility-critical elements
low-contrast layouts

Pair with

Silver Soft lavender Off-white

Purple

Selected #000000

Purple signals creativity, imagination, and originality. It’s expressive without being chaotic when used with restraint.

Colour variations

Best usage for

creative tools & products
innovation messaging
standout features

Avoid usage with

financial data
error messaging
ultra-minimal UIs

Pair with

Charcoal Soft pink Light grey

Pink

Selected #000000

Pink is expressive, human, and emotionally engaging. It adds warmth and personality while remaining modern and confident.

Colour variations

Best usage for

brand personality
highlights & primary accents
lifestyle products

Avoid usage with

enterprise dashboards
data-heavy layouts
aggressive call-to-action sections (CTAs)

Pair with

Charcoal Cream Soft mauve

Click here

Build. Run. Grow.

Start for free

Colours

Build. Run. Grow.

Install on macOS

Install on iOS