Foundations

Colour

Every Wordnerds colour, shown on black and on white, with what it is for and what to avoid. Contrast figures are worked out from the colour values themselves, so they are always current.

The rules

Seven rules, each shown both ways

Most colour mistakes are one of these. The left example is right; the right one is the mistake.

One yellow thing per surface

Plan your next reportBook a demo

DoYellow marks the one action

PricingBook a demoRead more

Don'tThree yellow things compete

Off-black text on yellow and on blue

Log inOff-black on blue 6.9

DoReadable

Log inWhite on blue 2.3

Don'tToo faint to read

On white, yellow is a filled block

The one thing that matters

DoOff-black text on yellow, 8.7

Yellow heading

Don'tYellow text or a thin line, 1.8

On white, blue goes deeper

DoBlue deep for bars and edges, 3.8

Don'tBrand blue fades on white, 2.3

Eyebrows on light slides are off-black

Phase 1Hours saved grew every month

DoSection colour on the bar

Phase 1Hours saved grew every month

Don'tColoured small text on light

No blue on yellow

WebinarJoin us live

DoOff-black on yellow, 8.7

WebinarJoin us live

Don'tBlue on yellow, 1.2

Green and red only mean something

On trackOff track

DoA status with its label

Our new feature

Don'tGreen as decoration

Brand colours

Yellow, blue and off-black

Each card shows the colour on off-black and on white. 4.5 or more is fine for small text; 3 or more for bars, edges and large headings.

Brand yellow

--wn-brand-yellow#FAB316

The one thing that matters: the main button, the active state, the top strip and closing section of a deck. One yellow thing per surface.

No second shade. A darker yellow turns mustard and drifts towards the sentiment orange. The yellow strip across the top of every slide is house chrome and is the one thin yellow line allowed on white.

On off-blackSection eyebrow

Yellow on off-black8.7Text

On white

Filled block, off-black text

Off-black on yellow8.7TextYellow on white1.8No

Brand blue

--wn-brand-blue#39B8E1

--wn-brand-blue-deep#328BA8

Second accent: secondary buttons, information, the first section of a deck, and value highlights in copy. Never competes with yellow.

Blue deep is the brand blue mixed 70:30 with off-black. It is for bars, edges and large text on white or light grey, not for small text.

On off-blackSection eyebrow

Blue on off-black6.9Text

On whiteLarge heading in blue deep

Blue deep on white3.8Bars onlyBrand blue on white2.3No

Off-black

--wn-off-black#222222

Navigation, footers, dark slides, and the text colour on yellow and blue. Never pure black.

On dark slides, muted text is off-black muted, never mid grey.

On off-blackWhite text on off-blackMuted text in off-black mutedWhite15.9TextOff-black muted8.6Text

On whiteOff-black on whiteEyebrow on a light slideOff-black on white15.9Text

Deck sections

Each section of a deck takes the next colour

Blue opens, yellow closes. Each colour has a lighter shade for dark slides and a deeper shade for light slides. On light slides the eyebrow stays off-black whatever the section; the section colour goes on bars, edges and dividers. On dark grey boxes and slides, an eyebrow in a section colour that scores under 4.5 there turns off-black muted instead.

1. Blue2. Periwinkle3. Orchid4. Dusty roseClose Yellow

The run through colour-blind eyes

As seen

1234C

Protanopia (no red)

1234C

Deuteranopia (no green)

1234C

Tritanopia (no blue)

1234C

Section 1: Blue

Blue sectionHours saved grew

--wn-brand-blue#39B8E1

Dark slides, on off-black6.9TextOn dark grey4.2Bars only On dark grey, eyebrows in off-black muted (5.2).

--wn-brand-blue-deep#328BA8

Light slides, on white3.8Bars onlyOn light grey3.3Bars only

Section 2: Periwinkle

Periwinkle sectionHours saved grew

--wn-deck-periwinkle#8285EB

Dark slides, on off-black4.9TextOn dark grey3.0Bars only On dark grey, eyebrows in off-black muted (5.2).

--wn-deck-periwinkle-deep#5554B6

Light slides, on white6.3TextOn light grey5.4Text

Section 3: Orchid

Orchid sectionHours saved grew

--wn-deck-orchid#E495F0

Dark slides, on off-black7.4TextOn dark grey4.5Text

--wn-deck-orchid-deep#9B2D8C

Light slides, on white6.6TextOn light grey5.7Text

Section 4: Dusty rose

Dusty rose sectionHours saved grew

--wn-deck-rose#BD8C94

Dark slides, on off-black5.5TextOn dark grey3.4Bars only On dark grey, eyebrows in off-black muted (5.2).

--wn-deck-rose-deep#A0555B

Light slides, on white5.3TextOn light grey4.5Text

Closing: Yellow

Yellow sectionHours saved grew

Block only on light

--wn-brand-yellow#FAB316

Dark slides, on off-black8.7TextOn dark grey5.3Text

on light: filled block only

Off-black text on it8.7Text

These colours are for decks. On the website, accents stay yellow and blue.

Greys

Greys do the structural work

Use a grey rather than a tint of yellow or blue. Each card shows the figure for what that grey is used for: text on white and on the page grey, text on dark, or a surface that carries off-black text.

Aa#444444

Dark grey--wn-dark-greyBody text, icons; boxes on dark slides.As text on white9.7TextOn page grey8.3Text

Aa#555555

Menu grey--wn-menu-greySeparators in the product sidebar.As text on white7.4TextOn page grey6.4Text

Aa#707070

Mid grey--wn-mid-greySecondary text on white.As text on white4.9TextOn page grey4.2Bars only

Aa#7A7A7A

Light mid grey--wn-light-mid-greyMuted labels, placeholder text.As text on white4.2Bars onlyOn page grey3.6Bars only

Aa#B9B9B9

Border grey--wn-border-greyBorders and dividers.Off-black text on it8.1Text

Aa#BFBFBF

Off-black muted--wn-off-black-mutedDividers and muted text on dark.As text on off-black8.6TextOn dark grey5.2Text

Aa#EEEEEE

Background grey--wn-background-greyPage background; light-grey slides.Off-black text on it13.7Text

Aa#EAF0F4

Light grey--wn-light-greyCard footers, form backgrounds.Off-black text on it13.8Text

Aa#F8F8F8

Lighter grey--wn-lighter-greyCard backgrounds; boxes on light slides.Off-black text on it14.9Text

Aa#FAFAFA

Lightest grey--wn-lightest-greyRaised surfaces, pop-ups.Off-black text on it15.2Text

Aa#FFFFFF

White--wn-whiteCard bodies, inputs, light slides.Off-black text on it15.9Text

Sentiment

Green to red means customer sentiment

Use these only for sentiment data, or for a status that carries a text label. Always green on the left and red on the right.

28%22%24%15%11%

CompletedStatus with a text label

DoLabelled status

Don'tRed on the left: the scale reversed

The scale through colour-blind eyes

As seen

28%22%24%15%11%

Protanopia (no red)

28%22%24%15%11%

Deuteranopia (no green)

28%22%24%15%11%

Tritanopia (no blue)

28%22%24%15%11%

Green and red can look alike, which is why a status always carries its text label.

Aa#6BB32D

Very happy--wn-sent-very-happyVery positive customer sentiment.Off-black text on it6.1TextWhite text on it2.5No

Aa#95C11F

Happy--wn-sent-happyMildly positive customer sentiment.Off-black text on it7.5TextWhite text on it2.1No

Aa#CFD9DF

Neutral--wn-sent-neutralNeutral customer sentiment.Off-black text on it11.0TextWhite text on it1.4No

Aa#EA752B

Sad--wn-sent-sadMildly negative customer sentiment.Off-black text on it5.3TextWhite text on it2.9No

Aa#E94C1E

Angry--wn-sent-angryVery negative customer sentiment.Off-black text on it4.1Bars onlyWhite text on it3.8Bars only

Tints and ramps

Two section tints and one blue ramp

The tints are for full-width website sections only, never for cards. The blue ramp is for heat maps and volume.

Yellow tint sectionA full-width band--wn-section-yellow-tint #FEF4DC

Blue tint sectionA full-width band--wn-section-blue-tint #E1F4FB

0 · #EEEEEE

1 · #A1E2F8

2 · #39B8E1

3 · #2B59C3

4 · #001545

Illustration yellow

The one exception: the cartoon backdrop

Cartoon yellow

--wn-cartoon-yellow#FDCD01

The panel behind a yellow cartoon, matched to the illustrations. It is not a second brand yellow.

Cartoon sits here

DoBackdrop of a yellow cartoon

Book a demo

Don'tA button, line or text

Contrast table

Every colour on every background

The four backgrounds are the ones slides and pages use. Each cell shows the colour as text on that background.

Text 4.5 or moreBars only 3 to 4.5: bars, edges, large headingsNo under 3: do not use it this way

Colour	On off-black	On dark grey	On page grey	On white	Text on it
Brand yellow `#FAB316`	Aa8.7Text	Aa5.3Text	Aa1.5No	Aa1.8No	Aa8.7off-black
Brand blue `#39B8E1`	Aa6.9Text	Aa4.2Bars only	Aa1.9No	Aa2.3No	Aa6.9off-black
Blue deep `#328BA8`	Aa4.0Bars only	Aa2.5No	Aa3.3Bars only	Aa3.8Bars only	Aa4.0off-black
Periwinkle `#8285EB`	Aa4.9Text	Aa3.0Bars only	Aa2.7No	Aa3.2Bars only	Aa4.9off-black
Periwinkle deep `#5554B6`	Aa2.5No	Aa1.5No	Aa5.4Text	Aa6.3Text	Aa6.3white
Orchid `#E495F0`	Aa7.4Text	Aa4.5Text	Aa1.8No	Aa2.1No	Aa7.4off-black
Orchid deep `#9B2D8C`	Aa2.3No	Aa1.4No	Aa5.7Text	Aa6.6Text	Aa6.6white
Dusty rose `#BD8C94`	Aa5.5Text	Aa3.4Bars only	Aa2.4No	Aa2.8No	Aa5.5off-black
Dusty rose deep `#A0555B`	Aa2.9No	Aa1.8No	Aa4.5Text	Aa5.3Text	Aa5.3white
Very happy `#6BB32D`	Aa6.1Text	Aa3.7Bars only	Aa2.2No	Aa2.5No	Aa6.1off-black
Happy `#95C11F`	Aa7.5Text	Aa4.6Text	Aa1.8No	Aa2.1No	Aa7.5off-black
Neutral `#CFD9DF`	Aa11.0Text	Aa6.7Text	Aa1.2No	Aa1.4No	Aa11.0off-black
Sad `#EA752B`	Aa5.3Text	Aa3.2Bars only	Aa2.5No	Aa2.9No	Aa5.3off-black
Angry `#E94C1E`	Aa4.1Bars only	Aa2.5No	Aa3.2Bars only	Aa3.8Bars only	Aa4.1off-black
Mid grey `#707070`	Aa3.2Bars only	Aa1.9No	Aa4.2Bars only	Aa4.9Text	Aa4.9white
Off-black muted `#BFBFBF`	Aa8.6Text	Aa5.2Text	Aa1.5No	Aa1.8No	Aa8.6off-black
Cartoon yellow `#FDCD01`	Aa10.5Text	Aa6.4Text	Aa1.3No	Aa1.5No	Aa10.5off-black