Signal pop

Loud, saturated magenta and sunshine yellow on clean white, for brands that want to be noticed in a crowded feed and sound confident doing it.

bold
playful

The colours

7 colours, each with a role, then the palette at work on a small page.

Clean whitebackground#ffffff
Pale sunsurface#fff3d1
Night inktext#15121f
Dusk greymuted#4a4659
Hot magentaaccent#c8104f
Sunshineaccent-2#ffd21f
Bold outlineborder#15121f

Text on background: 18.45:1 — passes AA

Spring open days

A garden worth the walk

Paths, ponds and a glasshouse full of ferns, open every weekend from April to June.

Plan a visit

New

The late tulip border

Two hundred bulbs, planted by volunteers last autumn.

A made-up page in this palette. Every text colour reaches at least 4.5:1 on its background; the heading, at 28px, may use a 3:1 pair.

Copy the idea

Take the palette with you as a brief for a person, as instructions for an AI assistant, or as design tokens: the colours, their roles and the pairs that are safe for text.

# Signal pop — palette recipe

## The idea

- Loud, saturated magenta and sunshine yellow on clean white, for brands that want to be noticed in a crowded feed and sound confident doing it.
- Mood: bold, playful

## Use it for

- Event and festival sites
- Launches and campaigns
- Products aimed at a young audience

## Avoid it when

- The subject is serious, such as health or money worries
- People need to read for a long time

## Colours

- Clean white (background): #ffffff
- Pale sun (surface): #fff3d1
- Night ink (text): #15121f
- Dusk grey (muted): #4a4659
- Hot magenta (accent): #c8104f
- Sunshine (accent-2): #ffd21f
- Bold outline (border): #15121f

## Accessible pairs

- Bold outline on Clean white — 18.5:1 (AA)
- Clean white on Bold outline — 18.5:1 (AA)
- Clean white on Night ink — 18.5:1 (AA)
- Night ink on Clean white — 18.5:1 (AA)
- Bold outline on Pale sun — 16.7:1 (AA)
- Night ink on Pale sun — 16.7:1 (AA)
- Pale sun on Bold outline — 16.7:1 (AA)
- Pale sun on Night ink — 16.7:1 (AA)
- Bold outline on Sunshine — 12.7:1 (AA)
- Night ink on Sunshine — 12.7:1 (AA)
- Sunshine on Bold outline — 12.7:1 (AA)
- Sunshine on Night ink — 12.7:1 (AA)
- Clean white on Dusk grey — 9.1:1 (AA)
- Dusk grey on Clean white — 9.1:1 (AA)
- Dusk grey on Pale sun — 8.2:1 (AA)
- Pale sun on Dusk grey — 8.2:1 (AA)
- Dusk grey on Sunshine — 6.3:1 (AA)
- Sunshine on Dusk grey — 6.3:1 (AA)
- Clean white on Hot magenta — 5.8:1 (AA)
- Hot magenta on Clean white — 5.8:1 (AA)
- Hot magenta on Pale sun — 5.2:1 (AA)
- Pale sun on Hot magenta — 5.2:1 (AA)
- Hot magenta on Sunshine — 4.0:1 (AA large)
- Sunshine on Hot magenta — 4.0:1 (AA large)
- Bold outline on Hot magenta — 3.2:1 (AA large)
- Hot magenta on Bold outline — 3.2:1 (AA large)
- Hot magenta on Night ink — 3.2:1 (AA large)
- Night ink on Hot magenta — 3.2:1 (AA large)

## Principles

- Clean white is about 60% of the page so the two loud colours have room
- Hot magenta for headlines, buttons and big shapes, up to 20% of the page
- Sunshine for stickers, tags and highlights, about 10%, always with night ink text on it
- Never set body text in magenta, and never set magenta and sunshine on each other as text
- Bold outline draws thick borders around cards and buttons for a graphic edge

Design with the "Signal pop" palette.

The idea: Loud, saturated magenta and sunshine yellow on clean white, for brands that want to be noticed in a crowded feed and sound confident doing it.
The mood: bold, playful.

It suits:
- Event and festival sites
- Launches and campaigns
- Products aimed at a young audience
It is a poor fit when:
- The subject is serious, such as health or money worries
- People need to read for a long time

Use these colours, each in its role:
- Clean white (background): #ffffff
- Pale sun (surface): #fff3d1
- Night ink (text): #15121f
- Dusk grey (muted): #4a4659
- Hot magenta (accent): #c8104f
- Sunshine (accent-2): #ffd21f
- Bold outline (border): #15121f

Set text only in these colour pairs (text on background); use the ones marked (AA large) only for text at least 24px, or 18.66px bold:
- Bold outline on Clean white — 18.5:1 (AA)
- Clean white on Bold outline — 18.5:1 (AA)
- Clean white on Night ink — 18.5:1 (AA)
- Night ink on Clean white — 18.5:1 (AA)
- Bold outline on Pale sun — 16.7:1 (AA)
- Night ink on Pale sun — 16.7:1 (AA)
- Pale sun on Bold outline — 16.7:1 (AA)
- Pale sun on Night ink — 16.7:1 (AA)
- Bold outline on Sunshine — 12.7:1 (AA)
- Night ink on Sunshine — 12.7:1 (AA)
- Sunshine on Bold outline — 12.7:1 (AA)
- Sunshine on Night ink — 12.7:1 (AA)
- Clean white on Dusk grey — 9.1:1 (AA)
- Dusk grey on Clean white — 9.1:1 (AA)
- Dusk grey on Pale sun — 8.2:1 (AA)
- Pale sun on Dusk grey — 8.2:1 (AA)
- Dusk grey on Sunshine — 6.3:1 (AA)
- Sunshine on Dusk grey — 6.3:1 (AA)
- Clean white on Hot magenta — 5.8:1 (AA)
- Hot magenta on Clean white — 5.8:1 (AA)
- Hot magenta on Pale sun — 5.2:1 (AA)
- Pale sun on Hot magenta — 5.2:1 (AA)
- Hot magenta on Sunshine — 4.0:1 (AA large)
- Sunshine on Hot magenta — 4.0:1 (AA large)
- Bold outline on Hot magenta — 3.2:1 (AA large)
- Hot magenta on Bold outline — 3.2:1 (AA large)
- Hot magenta on Night ink — 3.2:1 (AA large)
- Night ink on Hot magenta — 3.2:1 (AA large)

Follow these principles:
- Clean white is about 60% of the page so the two loud colours have room
- Hot magenta for headlines, buttons and big shapes, up to 20% of the page
- Sunshine for stickers, tags and highlights, about 10%, always with night ink text on it
- Never set body text in magenta, and never set magenta and sunshine on each other as text
- Bold outline draws thick borders around cards and buttons for a graphic edge

Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #ffffff;
  --color-surface: #fff3d1;
  --color-text: #15121f;
  --color-muted: #4a4659;
  --color-accent: #c8104f;
  --color-accent-2: #ffd21f;
  --color-border: #15121f;
}

Download brief (.md)

Accessible pairs

Every pair of colours that is readable as text, strongest first. AA pairs (4.5:1 or more) work at any size; AA large pairs (3:1 or more) only for text of 24px, or 18.66px bold.

Text on background	Contrast	Level
Bold outline on Clean white	18.5:1	AA
Clean white on Bold outline	18.5:1	AA
Clean white on Night ink	18.5:1	AA
Night ink on Clean white	18.5:1	AA
Bold outline on Pale sun	16.7:1	AA
Night ink on Pale sun	16.7:1	AA
Pale sun on Bold outline	16.7:1	AA
Pale sun on Night ink	16.7:1	AA
Bold outline on Sunshine	12.7:1	AA
Night ink on Sunshine	12.7:1	AA
Sunshine on Bold outline	12.7:1	AA
Sunshine on Night ink	12.7:1	AA
Clean white on Dusk grey	9.1:1	AA
Dusk grey on Clean white	9.1:1	AA
Dusk grey on Pale sun	8.2:1	AA
Pale sun on Dusk grey	8.2:1	AA
Dusk grey on Sunshine	6.3:1	AA
Sunshine on Dusk grey	6.3:1	AA
Clean white on Hot magenta	5.8:1	AA
Hot magenta on Clean white	5.8:1	AA
Hot magenta on Pale sun	5.2:1	AA
Pale sun on Hot magenta	5.2:1	AA
Hot magenta on Sunshine	4.0:1	AA large
Sunshine on Hot magenta	4.0:1	AA large
Bold outline on Hot magenta	3.2:1	AA large
Hot magenta on Bold outline	3.2:1	AA large
Hot magenta on Night ink	3.2:1	AA large
Night ink on Hot magenta	3.2:1	AA large

Where it fits

Use it for

Event and festival sites
Launches and campaigns
Products aimed at a young audience

Avoid it when

The subject is serious, such as health or money worries
People need to read for a long time

Principles

How much of each colour to use, and where.

Clean white is about 60% of the page so the two loud colours have room
Hot magenta for headlines, buttons and big shapes, up to 20% of the page
Sunshine for stickers, tags and highlights, about 10%, always with night ink text on it
Never set body text in magenta, and never set magenta and sunshine on each other as text
Bold outline draws thick borders around cards and buttons for a graphic edge