Typography / Styles

Heading 1 on white in indigo

Heading 2 style here in brand blue

Heading 3 style here

Heading 4 in orange Here

Heading 5 Style Here

Heading 6 is an all caps Heading

The site carries four near-duplicate indigos – #1e196a (the workhorse: body, buttons, most headings), #2e3192 (brighter brand blue), plus #2a286c and #1a1a80. My thinking is stick with the main indigo for text and headings.

Paragraph text is OK in blue but the accent orange (#f7914e) fails accessibility standards (WCAG AA at 2.3:1) – both as a link/text colour on white and as a button with white text. So the current orange links and any white-on-orange CTAs are technically inaccessible.

So I am thinking we might just ditch the orange and replace with a gold. The logo gold (#AB9536) doesn’t pass accessibility tests on a white background.

But we can use a draker tint: This (#807028) is a text safe gold we can use for links and I have included examples using as a heading. The only issue moving away from the orange is there is a lot of imagery that uses it.

So either these need replacing or we accept it as is (or stick with orange and forget the gold).

Prue, let me know your thoughts – examples below

Note also, I rebuilt your logo and mark in SVG. But it isn’t exactly the same; the wordmark is fully outlined from Playfair Display – the closest match to the original serif.

Everything is true vector geometry. The mark is one path with the dot knocked out.

Prue: Let me know if these are ok to use:

Indigo Gold · Brand

Colour Usage Guide

How the brand colours are used across the new site — so everything stays consistent, on-brand, and readable for every visitor. Ratios shown are WCAG AA contrast (needs 4.5 for normal text).

The palette

#1E196A

Deep Indigo

Primary — headings, body, buttons, links

#2E3192

Brand Blue

Surface — hero / section backgrounds, gradients, hovers

#AB9536

Logo Gold

Brand accent — logo, decorative fills, accents on indigo

#807028

Text-safe Gold

Readable gold — gold text / links on white

#F7914E

Orange

Warm accent — decorative fills only

#666666

Muted Grey

Secondary text, captions

What goes on what

On white

Grant writing

Headings & text in deep indigo

Body in indigo or grey. Links use the text-safe gold. Buttons are deep indigo.

Book a chat

✓ indigo 15:1✓ gold-text 4.9:1

On deep indigo

Global Grant Day

White headings, gold accents

White body text, with orange or gold highlights. The home for the warm colours.

✓ white 15:1✓ gold 5:1✓ orange 6.5:1

On brand blue

Hero & feature sections

Brighter — great for a hero. Keep text white here (indigo would disappear).

Learn more

✓ white 10.7:1

On gold

Short gold accent bands

Gold as a small band or highlight with indigo text — not for long paragraphs.

Get the checklist

✓ indigo 5:1✗ white 2.96:1

Don’t do this

Gold heading

✗ 2.96 — gold text on white fails AA. Use deep indigo, or text-safe gold.

White on gold

✗ 2.96 — white on gold fails. Gold backgrounds need indigo text.

Orange link

✗ 2.30 — orange as text / link on white fails.

Indigo on brand blue

✗ 1.41 — the two blues are too close. On brand blue, use white.

Two rules of thumb

Warm colours live on dark, or stay small. Gold and orange fail on white — put them on deep-indigo sections or use as small accents. Never as text on a white page.
Don’t colour-code heading levels. Size and weight already show the hierarchy — recolouring every heading reads as busy. One heading colour per section; accent sparingly.

Headings — recommended treatment

Heading 1 — one clear colour

Heading 2 — size & weight carry hierarchy

Heading 3 — no need to switch colour

Heading 4

Heading 5

Heading 6 — all caps eyebrow

All one indigo. Gold does its work as an accent elsewhere.

One decision for Prue: two warm accents exist — orange and the logo gold. Choose one to lead: keep orange as the call-to-action colour, or retire it and let the gold be the single warm accent.