Visual System

Colour

Our colour palette is built around deep purples, ocean teals, and vibrant accents. It conveys premium quality and technical sophistication while remaining accessible across dark and light modes.

Primary Palette — Dark Mode

Dark mode is our default brand context. These deep purple tones form the foundation of our visual identity.

Deep Purple

#1d0b33

Primary background, brand anchor

Mid Purple

#2a1444

Secondary background, cards

Rich Purple

#3d1e5f

Tertiary background, depth

Accent Colours — Ocean

Our signature ocean teal-to-cyan range is used for interactive elements, CTAs, and the primary brand gradient. This is the colour people associate most with Airship in action.

Ocean Teal

#0a7393

Primary accent, CTA start

Cyan

#31d0d8

Primary accent, CTA end

Focus Blue

#2ec7e6

Focus state, links

Secondary Colours

Vibrant magentas, violets, and pinks add energy and depth. Use sparingly for decorative highlights and secondary emphasis.

Magenta

#f455ff

Secondary gradient start

Violet

#b048ff

Secondary gradient end

Pink

#d15cc7

Secondary brand colour

Bright Purple

#575fff

Tertiary brand colour

Text Colours

Text colours are optimised for readability and accessibility across both theme modes.

White

#ffffff

Primary text (dark mode)

Soft Lavender

#b0a8c0

Secondary text (dark mode)

Deep Purple

#1d0b33

Primary text (light mode)

Medium Purple

#4a3a5a

Secondary text (light mode)

Light Mode Backgrounds

Our light mode uses a warm cream palette rather than sterile whites, maintaining the premium feel of the brand.

Warm Cream

#faf8f5

Primary background (light)

Stone

#f5f2ed

Secondary background (light)

Sand

#ebe6df

Tertiary background (light)

Pure White

#ffffff

Card backgrounds (light)

Gradients

Gradients add dimension and energy to the brand. Use them deliberately — they should enhance, not overwhelm.

Ocean Gradient

linear-gradient(80deg, #0a7393 2.25%, #31d0d8 78.37%)

Primary CTA buttons, key accent elements, emblem colouring

Secondary Gradient

linear-gradient(270deg, #f455ff 40.06%, #b048ff 64.34%)

Secondary highlights, decorative elements

Tertiary Gradient

linear-gradient(90deg, #6dceff 8.53%, #ee57ff 99.66%)

Accent details, progress indicators, decorative flourishes

Colour Usage Rules

Dark mode is the default brand context. Light mode is an accessibility alternative, not a separate brand.
The ocean gradient is reserved for primary CTAs, the logo emblem, and key interactive elements. Do not overuse it.
Secondary colours (magenta, violet) should be used sparingly for decorative accents, never for body text or primary UI.
Always ensure text meets WCAG AA contrast requirements against its background colour.
When placing brand colours on photography, ensure sufficient contrast. Use overlays where needed.
Do not introduce new colours outside this palette without brand team approval.