[tiagov8]

Closes #1609

Removes the blue-tinted colours Tailwind adds to the site, so the CSS only uses Design System colour tokens, plus third-party brand colours.

What changed

• Prose colours now use Design System tokens. The @tailwindcss/typography plugin brings its own cool greys and ignores our gray palette. That made links, bold text, h1/h3/h4, bullets, captions and table borders blue-tinted (e.g. links were #111827). Every --tw-prose-* variable now maps to a Design System token:
  • Secondary (#333333) for links, bold text, headings, body text, quotes and code, so links and bold match the body text.
  • muted-foreground for lead text, list counters and captions.
  • border and input for rules and table borders.
  • The prose-invert variables use the dark tokens.
• The default focus ring is brand red. Tailwind's default ring colour is blue-500, so any ring without its own colour drew a blue outline. It now falls back to the Design System's --ring (#cc4141).
• Leftover blues are gone:
  • Hero and Actions came from the Tina starter. They always rendered Tailwind blue, because their per-colour maps were only ever read with .blue. They now use SSW red, and the unused maps are gone. No content uses the Hero block today.
  • Editor-only UI used blue for focus and selected states: the colour and icon pickers, the SEO and event booking inputs, and the breadcrumbs tip link. These now use SSW red.
  • components/fields/color.tsx (unused) is deleted.
  • The unused bluish greys gray-550 (#6C757D) and gray-1000 (#1c1b2e) are removed from tailwind.config.js.

With these changes, the only blue-tinted colours left in the compiled CSS are the LinkedIn, Facebook, Bluesky, Azure, SharePoint and Xamarin brand colours.

Risky areas

• Every prose page changes. tailwind.config.js sets the colours for all rich-text content, so links, bold, h3/h4, bullets, captions, blockquotes and tables shift slightly on most pages. On staging, check /company/about-us, a consulting page, /company/news and an event page.
• Focus rings. Any component that uses ring / focus:ring without a colour now shows a red ring instead of a blue one. Check keyboard focus on forms.

---

🤖 Changes made by Claude Opus 5.5 via Claude Code

[tiagov8]

/deploy

---

🤖 Comment written by Claude Opus 5.5 via Claude Code

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🔴	Statements	6.74%	3589/53257
🔴	Branches	41%	392/956
🔴	Functions	16.72%	100/598
🔴	Lines	6.74%	3589/53257

Test suite run success

134 tests passing in 17 suites.

Report generated by 🧪jest coverage report action from 296fe8c

[Copilot]

🔵 Needs a closer look

Global typography and focus-ring changes require staging visual and keyboard-focus checks across representative pages and both themes, since source inspection cannot confirm rendered contrast, focus visibility, or visual regressions.

No open issues 🎉

What changed in this PR

Replaces Tailwind’s blue-tinted defaults with SSW Design System colours across rich-text content, starter components, and CMS controls, addressing the colour-standardisation work in #1609.

Changes:

• Maps prose colours, including inverted styles, to Design System values and sets the default focus ring to brand red.
• Replaces blue styling in Hero, Actions, and editor controls with SSW red.
• Removes unused colour maps, the legacy colour picker, and two bluish-grey palette entries.

File	Description
tailwind.config.js	Updates prose and focus-ring colours; removes unused greys.
components/​util/​actions.tsx	Replaces blue button and link maps with SSW colours.
components/​training/​eventBooking.schema.tsx	Uses SSW red for time-input focus borders.
components/​textInputWithCount/​textInputWithCount.tsx	Uses SSW red for input and textarea focus borders.
components/​fields/​color.tsx	Deletes the unused legacy colour picker.
components/​blocksSubtemplates/​tinaFormElements/​iconSelector.tsx	Replaces blue icon-picker states with SSW red.
components/​blocksSubtemplates/​tinaFormElements/​colourSelector.tsx	Uses SSW red for the selected-colour ring.
components/​blocks/​hero.tsx	Replaces the unused headline colour map with an SSW gradient.
components/​blocks/​breadcrumbs/​breadcrumbs.schema.tsx	Uses SSW red for the CMS settings tip link.

_{Review effort: Balanced}

[github-actions]

Deployed changes to https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net

ℹ️ Staging slots are no longer created automatically - comment /deploy to deploy new commits.

[github-actions]

🚀 Lighthouse Report

🌐 URL	⚡ Performance	♿ Accessibility	✅ Best Practices	🔍 SEO	📦 Bundle Size	🗑️ Unused Bundle
⭐ https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net/	27	100	78	69	0.00 MB	0.00 MB
https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net/articles	96	97	78	61	0.00 MB	0.00 MB
https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net/company/about-us	69	100	78	69	0.00 MB	0.00 MB
https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net/company/clients	81	100	78	69	0.00 MB	0.00 MB
https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net/company/contact-us	81	92	78	61	0.00 MB	0.00 MB
https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net/consulting	86	97	78	69	0.00 MB	0.00 MB
⭐ https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net/consulting/net-upgrade	75	100	74	61	0.00 MB	0.00 MB
⭐ https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net/consulting/web-applications	79	100	78	61	0.00 MB	0.00 MB
https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net/employment	66	95	78	69	0.00 MB	0.00 MB
https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net/events/angular-superpowers-tour	60	97	74	69	0.00 MB	0.00 MB
https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net/events/ai-workshop	57	94	74	69	0.00 MB	0.00 MB
https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net/events/ai-workshop-essentials	70	97	78	69	0.00 MB	0.00 MB
https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net/netug/sydney	87	94	74	61	0.00 MB	0.00 MB
https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net/products/sophiebot	95	100	78	69	0.00 MB	0.00 MB
https://app-sswwebsite-9eb3-pr-5152.azurewebsites.net/training/internship-fullstack	81	91	78	61	0.00 MB	0.00 MB