WEBSITE COLOUR STYLE GUIDE – Kadence Test Site

This guide documents the colors used across the website, their purpose, and suggested usage. All choices are designed to balance accessibility, readability, and brand personality.

1. Text Colors

Role	Color	Name	Usage / Notes
Strongest Text	`#000000`	Anchor	Headings, key statements, emphasis.
Strong Text	`#302E2D`	Ink	Body copy, primary reading text.
Medium Text	`#665F5A`	Stone	Secondary info: captions, metadata, form labels.
Subtle Text	`#E4DFDA`	Chalk	Dividers, borders, disabled states, placeholders.

2. Accent Colors

Role	Color	Name	Usage / Notes
Accent (main)	`#FFB400`	Sun	Primary buttons, links, highlights. Text on this: Ink.
Accent – Alt	`#E6A500`	Sun Dark	Hover / active for Sun buttons or highlighted elements.
Accent – Complement	`#E84F2D`	Ember	Secondary buttons, supporting highlights. Text: White.
Hover (Ember)	`#D63D21`	Ember Dark	Hover / active for Ember buttons. Text: White.
Secondary Accent	`#2EC4B6`	Wave	Optional for secondary interactive elements. Text: Ink.

3. Base / Background Colors

Role	Color	Name	Usage / Notes
Site background	`#F9F9F9`	Paper	Primary page background.
Content background	`#FAF9F7`	Linen	Slightly off-white for section cards or content blocks.
Title above content overlay	`#FFFFFF`	Paper Light	For headings on images or colored overlays.
Subtle background	`#F4F2EE`	Sand	Gentle contrast for cards or section backgrounds.

4. Notices / System Feedback Colors

Role	Color	Text Color	Name	Usage / Notes
Success	`#38A169`	`#FFFFFF`	Forest	Positive confirmation, success messages.
Info	`#3182CE`	`#FFFFFF`	Ocean	Informative notifications or neutral messages.
Alert	`#E53E3E`	`#FFFFFF`	Ember Alert	Critical or error messages.
Warning	`#DD6B20`	`#FFFFFF`	Sun Warning	Cautionary messages.
Rating	`#ECC94B`	`#302E2D`	Gold Star	Positive highlights, e.g., star ratings.

5. Headings & Links

Element	Color	Text Decoration	Notes / Usage
Title above content background	`#302E2D`	none	Section titles on content blocks.
Title above content overlay	`#FFFFFF`	none	Section titles on colored overlays or images.
Links – standard	`#302E2D`	underline	Matches body text; clearly indicated as clickable.
Links – hover / active	`#FFB400`	underline	Uses main brand accent (Sun) for interaction feedback.

Notes

Always use Ink or Stone for meaningful text; Chalk is only decorative.
Hover and active states for buttons should subtly shift within the same color (Sun → Sun Dark, Ember → Ember Dark) for consistency and brand cohesion.
Base backgrounds (Paper, Linen, Sand) provide visual separation and help focus content without harsh contrast.
All colors are tested for WCAG accessibility standards, keeping text legible on their respective backgrounds.