From 39e5c1127470716e1bad9e470edb3e7adfa915f1 Mon Sep 17 00:00:00 2001 From: Tudor Date: Fri, 7 Aug 2026 18:33:30 +0100 Subject: [PATCH] fix(brand): match the below-average tint to its own hue, and finish the casing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three review findings. --status-below-bg carried the raw --coral tuple (249,115,96) instead of the hue it belongs to (#A9481F → 169,72,31), so "below average" chips rendered a coral-pink wash behind terracotta text — the one solid/tint pair in the file whose hues disagreed. Alpha drops 0.15 → 0.12 to match --status-above-bg, so the two chips read as equal weight; left at 0.15 the darker terracotta tint takes the label to 4.45:1 on Warm White, under the 4.5 floor. At 0.12 it is 4.86:1 on cards and 4.67:1 on Warm White. Auditing the whole file for the same class of error turned up one more: --action-bg was also a --coral tint while --action is the darkened #BE3C27. It is unused today and the dark-theme value was already correct, but it is aligned so a future coral ghost button gets a matching label and ground. The five phase pairs also "mismatch" by the same test and are deliberately left alone: those pair a pastel ground (sage, sky, mustard, lavender) with a deeper text hue, which is exactly what the guideline's Chips/Tags show. The lowercase wordmark had only reached the visual chrome. Every user-visible occurrence now matches: page title and template, appleWebApp title, authors, OpenGraph and Twitter titles and siteName, the school page's siteName, the PWA manifest name and short_name, the footer copyright line, the nav's aria-label, the Web Share API strings, and the editorial paragraph. Comments in lib/*.ts and AdmissionsView still say "SchoolCompare"; they describe the codebase rather than the mark, so they are left to keep this diff to the reported problem. The comment explaining why the font classes belong on still described --font-schibsted, which no longer exists. It now names --font-manrope and --font-inter, and records that the e2e typeface assertion is the only guard — this failure mode throws nothing and fails no unit test. Verified: tsc clean, 159/159 tests, build green, and the rendered title is now "School Admissions Guide | schoolcompare". Status and phase labels re-checked on their own composited tints over both light grounds — all clear AA. --- nextjs-app/app/globals.css | 14 ++++++++--- nextjs-app/app/layout.tsx | 27 +++++++++++----------- nextjs-app/app/school/[slug]/page.tsx | 2 +- nextjs-app/components/ComparisonView.tsx | 6 ++--- nextjs-app/components/EditorialSection.tsx | 2 +- nextjs-app/components/Footer.tsx | 2 +- nextjs-app/components/Navigation.tsx | 2 +- nextjs-app/public/manifest.json | 4 ++-- 8 files changed, 34 insertions(+), 25 deletions(-) diff --git a/nextjs-app/app/globals.css b/nextjs-app/app/globals.css index cda0c37..cdbbb61 100644 --- a/nextjs-app/app/globals.css +++ b/nextjs-app/app/globals.css @@ -1,5 +1,5 @@ /* - * SchoolCompare — "Find the right school. For their future." + * schoolcompare — "Find the right school. For their future." * * Implements the schoolcompare brand guideline. Colour has four jobs and they * never borrow each other's hues: @@ -51,7 +51,9 @@ --action: #BE3C27; /* darkened coral — 5.4:1 under a white label */ --action-strong: #A33320; --action-stronger: #8C2B1B; - --action-bg: rgba(249, 115, 96, 0.14); + /* Tint of --action, not of --coral, so a coral ghost button's label and + ground share a hue. Unused today; the dark value was already correct. */ + --action-bg: rgba(190, 60, 39, 0.14); --action-on: #FFFFFF; /* ── Palette accents: exact brand values, for fills and tints only ── */ @@ -67,7 +69,13 @@ --status-above: #36743F; --status-above-bg: rgba(54, 116, 63, 0.12); --status-below: #A9481F; - --status-below-bg: rgba(249, 115, 96, 0.15); + /* The tint is the solid hue at low alpha, exactly as every other pair in + this file is. It briefly carried the raw --coral tuple instead, which + put a coral-pink wash behind terracotta text — the one mismatched pair + in the palette. Alpha matches --status-above-bg so the two chips read + as equal weight; at 0.15 the darker terracotta tint drops the label to + 4.45:1 on Warm White. */ + --status-below-bg: rgba(169, 72, 31, 0.12); --status-at: #5F6A75; --status-at-bg: rgba(95, 106, 117, 0.10); diff --git a/nextjs-app/app/layout.tsx b/nextjs-app/app/layout.tsx index 1b44f55..ebf9b67 100644 --- a/nextjs-app/app/layout.tsx +++ b/nextjs-app/app/layout.tsx @@ -43,16 +43,16 @@ export const viewport: Viewport = { export const metadata: Metadata = { appleWebApp: { capable: true, - title: 'SchoolCompare', + title: 'schoolcompare', statusBarStyle: 'default', }, title: { - default: 'SchoolCompare | Compare School Performance', - template: '%s | SchoolCompare', + default: 'schoolcompare | Compare School Performance', + template: '%s | schoolcompare', }, description: 'Compare primary and secondary school SATs and GCSE performance across England', keywords: 'school comparison, KS2 results, KS4 results, primary school, secondary school, England schools, SATs results, GCSE results', - authors: [{ name: 'SchoolCompare' }], + authors: [{ name: 'schoolcompare' }], manifest: '/manifest.json', // No `icons` key on purpose: setting it here would override the file // conventions. app/icon.svg and app/apple-icon.tsx are the source, and @@ -60,15 +60,15 @@ export const metadata: Metadata = { metadataBase: new URL('https://schoolcompare.co.uk'), openGraph: { type: 'website', - title: 'SchoolCompare | Compare School Performance', + title: 'schoolcompare | Compare School Performance', description: 'Compare primary and secondary school SATs and GCSE performance across England', url: 'https://schoolcompare.co.uk', - siteName: 'SchoolCompare', + siteName: 'schoolcompare', }, twitter: { // summary_large_image now that there is an image worth showing. card: 'summary_large_image', - title: 'SchoolCompare | Compare School Performance', + title: 'schoolcompare | Compare School Performance', description: 'Compare primary and secondary school SATs and GCSE performance across England', }, }; @@ -80,12 +80,13 @@ export default function RootLayout({ }>) { return ( // The font variable classes must sit on , not . globals.css - // declares --font-display/--font-ui on :root as var(--font-schibsted), - // and a custom property's var() references resolve on the element that - // declares it. With the classes on , --font-schibsted was undefined - // at :root, so --font-display computed to the guaranteed-invalid value and - // every font-family that referenced it silently fell back — the whole site - // rendered in Times. + // declares --font-display on :root as var(--font-manrope) and --font-ui as + // var(--font-inter), and a custom property's var() references resolve on + // the element that declares it. With the classes on , those two are + // undefined at :root, so --font-display computes to the guaranteed-invalid + // value and every font-family referencing it silently falls back — which + // once shipped the whole site in Times. Nothing throws and no unit test + // fails, so the e2e typeface assertion is the only guard. diff --git a/nextjs-app/app/school/[slug]/page.tsx b/nextjs-app/app/school/[slug]/page.tsx index 56a3daf..538ee3d 100644 --- a/nextjs-app/app/school/[slug]/page.tsx +++ b/nextjs-app/app/school/[slug]/page.tsx @@ -98,7 +98,7 @@ export async function generateMetadata({ params }: SchoolPageProps): Promise 0 - ? `Comparing ${count} school${count === 1 ? '' : 's'} on SchoolCompare` - : 'SchoolCompare', + ? `Comparing ${count} school${count === 1 ? '' : 's'} on schoolcompare` + : 'schoolcompare', url, }; if ( diff --git a/nextjs-app/components/EditorialSection.tsx b/nextjs-app/components/EditorialSection.tsx index 0cbc4af..f875e99 100644 --- a/nextjs-app/components/EditorialSection.tsx +++ b/nextjs-app/components/EditorialSection.tsx @@ -20,7 +20,7 @@ export function EditorialSection({ totalSchools, localAuthorityCount }: Editoria and demographics — each in its own table, each with its own jargon.

- SchoolCompare brings it all into one place. Every school page shows performance against the national + schoolcompare brings it all into one place. Every school page shows performance against the national average, explains what the numbers mean, and lets you shortlist schools side by side. Built for parents, governors, journalists, and anyone who wants to understand a school without reading a full inspection report. diff --git a/nextjs-app/components/Footer.tsx b/nextjs-app/components/Footer.tsx index 741fa22..55ff700 100644 --- a/nextjs-app/components/Footer.tsx +++ b/nextjs-app/components/Footer.tsx @@ -87,7 +87,7 @@ export function Footer() {

- © {currentYear} SchoolCompare.co.uk + © {currentYear} schoolcompare.co.uk

diff --git a/nextjs-app/components/Navigation.tsx b/nextjs-app/components/Navigation.tsx index 1b00fae..62107a9 100644 --- a/nextjs-app/components/Navigation.tsx +++ b/nextjs-app/components/Navigation.tsx @@ -100,7 +100,7 @@ export function Navigation() { <>
- + {/* LogoMark's defaults are already correct for this ground: the pin takes var(--brand) and the leaf is knocked out in var(--bg-card), diff --git a/nextjs-app/public/manifest.json b/nextjs-app/public/manifest.json index d6a4c81..7bfef57 100644 --- a/nextjs-app/public/manifest.json +++ b/nextjs-app/public/manifest.json @@ -1,6 +1,6 @@ { - "name": "SchoolCompare", - "short_name": "SchoolCompare", + "name": "schoolcompare", + "short_name": "schoolcompare", "description": "Compare primary and secondary school performance across England", "start_url": "/", "display": "standalone",