Foundations

Colour

The Kuoni palette — how every colour is assigned a role, and the rules that keep it purposeful, impactful and accessible.

Colour is our fastest signal. Before a traveller reads a word, they have already felt warmth, confidence or urgency from the palette on screen. That immediacy is exactly why colour demands discipline: used without intention it creates noise; used with precision it guides, reassures and delights.

The Kuoni palette has four layers — Primary, Neutral, Accent and Semantic. Each colour is assigned exactly one role. That assignment is the contract: when Wow Yellow appears, it means most important action here. When terracotta appears, it means warmth and secondary interest. Breaking those contracts erodes trust over repeated visits.

Colour has purpose

Every colour use must answer a single question: what does this communicate to the person looking at it?

Reserve Wow Yellow for the single highest-emphasis action on a screen.

One primary action per view stays unambiguous.

Don't

Apply Wow Yellow to headings, borders and decorative elements alongside CTAs.

Competing yellows cancel each other out.

Colour has impact

Vivid colour draws the eye before any content is read. That is a tool, not a problem — but only when the vivid colour points somewhere worth going. Subdue everything around the thing that matters.

Pair Wow Yellow buttons with neutral white or light-grey page surfaces.

High contrast between action and context keeps hierarchy clear.

Don't

Place Wow Yellow buttons on terracotta or patterned backgrounds.

Saturated backgrounds compete with the CTA and exhaust the eye.

Colour is accessible

No colour in this palette should be the only carrier of meaning. Pair every colour signal with a text label, icon or pattern so that people who cannot distinguish colours receive the same information. All pairings recommended in this page meet WCAG 2.1 AA as a minimum; those marked AAA exceed it.

Primary

The primary duo is Wow Yellow and Dark. Together they carry every high-emphasis action in the product. They are the only two colours that should ever appear together on a primary button.

color.yellow#F5C518

Wow Yellow

The brand's defining colour. Use for primary CTA buttons, active sidebar states, focus rings and key highlights. Never use as a text colour on white — the 1.63:1 contrast ratio fails all WCAG levels.

color.dark#1A1A1A

Dark

Primary text, navigation backgrounds and the label on every Wow Yellow button. Achieves 17.39:1 against white and 10.67:1 against Wow Yellow — both exceed AAA.

When to use Primary colours

Situation	Colour to use
Single highest-emphasis action	Wow Yellow background + Dark text
Page and section headings	Dark
Primary navigation text	Dark
Active/selected sidebar item	Wow Yellow tint background
Focus rings (keyboard)	Wow Yellow

Neutral

The neutral scale carries every structural element: page backgrounds, card surfaces, dividers and secondary text. It is intentionally quiet so that the primary and accent colours can do their jobs.

color.white#FFFFFF

White

Default card and page background. All text must clear 4.5:1 against white for normal body copy.

color.grey50#F5F5F5

Light Grey

Alternating section backgrounds, holiday-type card hover, table header fills. Never use as a text colour.

color.grey500#767676

Mid Grey

Secondary text: descriptions, metadata, board basis labels, form help text. Achieves exactly 4.54:1 on white — the WCAG AA minimum for body text.

color.grey700#3D3D3D

Dark Grey

Body text alternative where slightly lighter than Dark is preferred. 10.87:1 on white, well above AAA.

Neutral usage rules

Light Grey is a surface colour only — never a text colour.
Mid Grey is the minimum for secondary body text on white. Do not go lighter for readable copy.
Dark Grey suits long-form body copy, form labels and tooltip text where the stark contrast of Dark feels heavy.
Reserve White as the canonical card background; use Light Grey sparingly for differentiation between adjacent sections.

Accent

Terracotta brings warmth — the feeling of sun-baked destinations, spiced markets and rich earth tones that anchor the Kuoni brand in physical, sensory travel. It is a secondary-emphasis colour: it appears after Wow Yellow has claimed the most important job on the view.

color.terracotta#C96742

Terracotta

Secondary CTA buttons, editorial accent text (must be at least 18px), link underlines in long-form articles, category badges. Achieves 3.82:1 on white (AA for large text only) and 4.56:1 on Dark (AA for all text).

Terracotta scale

terracotta50#FBEEE8

Terracotta 50

Tinted backgrounds, alert fills.

terracotta100#F2D2C4

Terracotta 100

Hover background on terracotta surfaces.

terracotta300#DD9376

Terracotta 300

Decorative — not for text.

terracotta500#C96742

Terracotta 500

Default accent value.

terracotta700#9E4D2F

Terracotta 700

Links and text on white. 5.80:1 on white — AA for all sizes.

When using terracotta as a text colour on white, always use Terracotta 700 (#9E4D2F) or darker, never the default 500. Terracotta 500 on white is 3.82:1 — sufficient only for text at 18px+ or bold at 14px+.

Use Terracotta 700 (#9E4D2F) for article link text on white backgrounds.

Terracotta 700 at 5.80:1 passes AA for all text on white.

Don't

Use the default Terracotta 500 (#C96742) for 16px body copy on white.

Terracotta 500 at 3.82:1 fails AA for body text.

Semantic

Semantic colours communicate system state. They are not decorative; each tone is a promise that the same meaning is delivered consistently across the product.

color.success#2E7D52

Success

Booking confirmations, available dates, positive validation. 5.03:1 on white — AA for all text.

color.warning#B7791F

Warning

Limited availability, price change alerts, expiring offers. 3.64:1 on white — AA large text only; use Dark text on Warning backgrounds.

color.danger#C0392B

Danger / Error

Payment failures, invalid fields, cancellation states. 5.44:1 on white — AA for all text.

color.info#2C5DAE

Info

Informational callouts, pricing footnotes, policy notices. 6.39:1 on white — AA for all text.

Semantic background tints

Each semantic colour pairs with a tinted background for use inside alert components. Always pair the foreground colour with its matching tint, never mix tones across different semantic meanings.

color.successBg#E8F3ED

Success Bg

Success alert fill.

color.warningBg#FDF6E3

Warning Bg

Warning alert fill.

color.dangerBg#FBEAE8

Danger Bg

Error alert fill.

color.infoBg#E8EFFA

Info Bg

Info alert fill.

Semantic usage rules

Always pair with text. Never rely on colour alone to indicate an error — the error message itself must explain the problem.
Warning needs special care. Warning (#B7791F) achieves only 3.64:1 against white. Place the Warning foreground colour on its tinted background (Warning Bg) or use Dark text on a Warning-tinted surface.
Semantic colours are not brand colours. Success green is not an alternative for teal or yellow CTA buttons; Danger red is not a terracotta substitute.

Colour pairings

The table below lists every recommended foreground + background combination in the Kuoni palette with precise WCAG 2.1 contrast ratios. Ratios are computed from the IEC 61966-2-1 sRGB linearisation formula.

Pass criteria:

AA — ≥ 4.5:1 for normal text (< 18px regular, < 14px bold)
AA lg — ≥ 3:1 for large text (≥ 18px regular or ≥ 14px bold)
AAA — ≥ 7:1 for normal text
AAA lg — ≥ 4.5:1 for large text

Primary pairings

The quick brown fox

Normal body text at 16px

DarkonWow Yellow

10.67:1AA lgAAAAA lgAAA

Primary button — recommended pairing. The canonical Kuoni CTA.

The quick brown fox

Normal body text at 16px

DarkonWhite

17.39:1AA lgAAAAA lgAAA

Body text on page background. The baseline text combination.

The quick brown fox

Normal body text at 16px

DarkonLight Grey

15.95:1AA lgAAAAA lgAAA

Dark text on section background — section headings, card titles.

The quick brown fox

Normal body text at 16px

WhiteonDark

17.39:1AA lgAAAAA lgAAA

Inverse surface — secondary button, dark hero sections, nav bar.

Neutral text pairings

The quick brown fox

Normal body text at 16px

Dark GreyonWhite

10.87:1AA lgAAAAA lgAAA

Preferred for long-form body copy where full Dark feels too heavy.

The quick brown fox

Normal body text at 16px

Dark GreyonLight Grey

9.97:1AA lgAAAAA lgAAA

Body text on alternating section backgrounds.

The quick brown fox

Normal body text at 16px

Mid GreyonWhite

4.54:1AA lgAAAAA lgAAA

Secondary text, captions, help text. Just meets AA — do not go lighter.

The quick brown fox

Normal body text at 16px

Mid GreyonLight Grey

4.17:1AA lgAAAAA lgAAA

Captions on section backgrounds. AA large text only — limit to 18px+.

Accent pairings

The quick brown fox

Normal body text at 16px

Terracotta 700onWhite

5.80:1AA lgAAAAA lgAAA

Article links, editorial accent text on white. AA for all sizes.

The quick brown fox

Normal body text at 16px

TerracottaonDark

4.56:1AA lgAAAAA lgAAA

Terracotta on dark surfaces — secondary CTA on dark hero.

The quick brown fox

Normal body text at 16px

TerracottaonWhite

3.82:1AA lgAAAAA lgAAA

Terracotta on white — large text (18px+) only. Not for body copy.

The quick brown fox

Normal body text at 16px

DarkonDark Grey

1.93:1AA lgAAAAA lgAAA

Fails all levels — never layer these two together.

Semantic pairings

The quick brown fox

Normal body text at 16px

SuccessonWhite

5.03:1AA lgAAAAA lgAAA

Success text on page background — AA for all text sizes.

The quick brown fox

Normal body text at 16px

SuccessonSuccess Bg

3.46:1AA lgAAAAA lgAAA

Success alert foreground on tinted bg — AA large text only.

The quick brown fox

Normal body text at 16px

WarningonWhite

3.64:1AA lgAAAAA lgAAA

Warning on white — AA large text only. Use Dark text for normal sizes.

The quick brown fox

Normal body text at 16px

DarkonWarning Bg

14.27:1AA lgAAAAA lgAAA

Recommended: Dark text on Warning tinted bg — AAA for all text.

The quick brown fox

Normal body text at 16px

DangeronWhite

5.44:1AA lgAAAAA lgAAA

Error text on page background — AA for all text sizes.

The quick brown fox

Normal body text at 16px

InfoonWhite

6.39:1AA lgAAAAA lgAAA

Info text on white — AA for all text sizes. Nears AAA.

Pairings to avoid

These combinations fail all WCAG levels and must not be used for text, icons or meaningful UI elements. They may be observed in purely decorative contexts (e.g. a gradient fill that carries no information) but even there they should be avoided to set a consistent precedent.

The quick brown fox

Normal body text at 16px

Wow YellowonWhite

1.63:1AA lgAAAAA lgAAA

Never use Wow Yellow as a text or icon colour on white.

The quick brown fox

Normal body text at 16px

Light GreyonWhite

1.09:1AA lgAAAAA lgAAA

Indistinguishable. Light Grey is a surface colour, never text.

Colour and contrast: a quick-reference card

Foreground	Background	Ratio	AA	AA lg	AAA	AAA lg
Dark `#1A1A1A`	Wow Yellow `#F5C518`	10.67	✅	✅	✅	✅
Dark `#1A1A1A`	White `#FFFFFF`	17.39	✅	✅	✅	✅
Dark `#1A1A1A`	Light Grey `#F5F5F5`	15.95	✅	✅	✅	✅
White `#FFFFFF`	Dark `#1A1A1A`	17.39	✅	✅	✅	✅
Dark Grey `#3D3D3D`	White `#FFFFFF`	10.87	✅	✅	✅	✅
Mid Grey `#767676`	White `#FFFFFF`	4.54	✅	✅	❌	✅
Mid Grey `#767676`	Light Grey `#F5F5F5`	4.17	❌	✅	❌	❌
Terracotta 700 `#9E4D2F`	White `#FFFFFF`	5.80	✅	✅	❌	✅
Terracotta `#C96742`	Dark `#1A1A1A`	4.56	✅	✅	❌	✅
Terracotta `#C96742`	White `#FFFFFF`	3.82	❌	✅	❌	❌
Success `#2E7D52`	White `#FFFFFF`	5.03	✅	✅	❌	✅
Warning `#B7791F`	White `#FFFFFF`	3.64	❌	✅	❌	❌
Dark `#1A1A1A`	Warning Bg `#FDF6E3`	14.27	✅	✅	✅	✅
Danger `#C0392B`	White `#FFFFFF`	5.44	✅	✅	❌	✅
Info `#2C5DAE`	White `#FFFFFF`	6.39	✅	✅	❌	✅
Wow Yellow `#F5C518`	White `#FFFFFF`	1.63	❌	❌	❌	❌

All ratios calculated using the IEC 61966-2-1 sRGB linearisation:
L = 0.2126·R + 0.7152·G + 0.0722·B where each channel c is linearised as c/12.92 if c ≤ 0.04045, otherwise ((c + 0.055) / 1.055)^2.4.
Ratio = (L_lighter + 0.05) / (L_darker + 0.05).