diff --git a/nextjs-app/app/globals.css b/nextjs-app/app/globals.css
index bf97e41..19cca8a 100644
--- a/nextjs-app/app/globals.css
+++ b/nextjs-app/app/globals.css
@@ -12,7 +12,7 @@
     
     --text-primary: #1a1612;
     --text-secondary: #5c564d;
-    --text-muted: #8a847a;
+    --text-muted: #6d685f;  /* Darkened for WCAG AA (4.6:1 on cream) */
     --text-inverse: #faf7f2;
     
     --accent-coral: #e07256;
@@ -20,8 +20,19 @@
     --accent-teal: #2d7d7d;
     --accent-teal-light: #3a9e9e;
     --accent-gold: #c9a227;
+    --accent-gold-text: #7a6800;  /* WCAG AA safe for text on white/cream */
     --accent-navy: #2c3e50;
 
+    /* Semantic background tints (replaces hardcoded rgba values) */
+    --accent-coral-bg: rgba(224, 114, 86, 0.12);
+    --accent-teal-bg: rgba(45, 125, 125, 0.12);
+    --accent-gold-bg: rgba(201, 162, 39, 0.12);
+
+    /* Trend colours */
+    --trend-up: #16a34a;
+    --trend-down: var(--accent-coral);
+    --trend-stable: var(--text-muted);
+
     /* Button/Action colors */
     --primary: #e07256;
     --primary-dark: #c45a3f;
@@ -67,6 +78,107 @@ body {
     min-height: 100vh;
 }
 
+/* Skip link — visible only on focus for keyboard users */
+.skip-link {
+    position: absolute;
+    top: -100px;
+    left: 1rem;
+    z-index: 10000;
+    padding: 0.5rem 1rem;
+    background: var(--bg-accent);
+    color: var(--text-inverse);
+    font-size: 0.875rem;
+    font-weight: 600;
+    border-radius: var(--radius-md);
+    text-decoration: none;
+    transition: top 0.15s ease;
+}
+.skip-link:focus {
+    top: 0.5rem;
+}
+
+/* Focus indicators — branded and visible on cream background */
+:focus-visible {
+    outline: 2px solid var(--accent-coral);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+}
+
+/* ================================================================
+   Shared button classes — use these across all components
+   ================================================================ */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    padding: 0.5rem 1rem;
+    font-family: inherit;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1;
+    border-radius: 6px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all var(--transition);
+    text-decoration: none;
+    white-space: nowrap;
+}
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Primary: coral background — main CTAs (Search, Compare Now) */
+.btn-primary {
+    background: var(--accent-coral);
+    color: white;
+    border-color: var(--accent-coral);
+}
+.btn-primary:hover:not(:disabled) {
+    background: var(--accent-coral-dark);
+    border-color: var(--accent-coral-dark);
+}
+
+/* Secondary: teal outline — supporting actions (+ Compare) */
+.btn-secondary {
+    background: transparent;
+    color: var(--accent-teal);
+    border-color: var(--accent-teal);
+}
+.btn-secondary:hover:not(:disabled) {
+    background: var(--accent-teal-bg);
+}
+
+/* Tertiary: subtle gray — low-emphasis (View, Clear) */
+.btn-tertiary {
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    border-color: var(--border-color);
+}
+.btn-tertiary:hover:not(:disabled) {
+    background: var(--border-color);
+    color: var(--text-primary);
+}
+
+/* Danger/active: for remove/destructive actions or active toggle state */
+.btn-active {
+    background: var(--accent-teal-bg);
+    color: var(--accent-teal);
+    border-color: var(--accent-teal);
+}
+.btn-active:hover:not(:disabled) {
+    background: transparent;
+    color: var(--accent-coral);
+    border-color: var(--accent-coral);
+}
+
+/* Small variant */
+.btn-sm {
+    padding: 0.3rem 0.625rem;
+    font-size: 0.8125rem;
+}
+
 /* Subtle noise texture overlay - editorial paper feel */
 .noise-overlay {
     position: fixed;
diff --git a/nextjs-app/app/layout.tsx b/nextjs-app/app/layout.tsx
index 264b450..7ba5770 100644
--- a/nextjs-app/app/layout.tsx
+++ b/nextjs-app/app/layout.tsx
@@ -67,8 +67,9 @@ export default function RootLayout({
       <body className={`${dmSans.variable} ${playfairDisplay.variable}`}>
         <div className="noise-overlay" />
         <ComparisonProvider>
+          <a href="#main-content" className="skip-link">Skip to main content</a>
           <Navigation />
-          <main className="main">
+          <main id="main-content" className="main">
             {children}
           </main>
           <ComparisonToast />
diff --git a/nextjs-app/components/ComparisonToast.module.css b/nextjs-app/components/ComparisonToast.module.css
index ac14f1f..0cf4a6a 100644
--- a/nextjs-app/components/ComparisonToast.module.css
+++ b/nextjs-app/components/ComparisonToast.module.css
@@ -64,20 +64,6 @@
   border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.btnClear {
-  background: transparent;
-  border: none;
-  color: rgba(250, 247, 242, 0.7);
-  font-size: 0.85rem;
-  font-weight: 500;
-  cursor: pointer;
-  padding: 0.5rem;
-  transition: color 0.2s ease;
-}
-
-.btnClear:hover {
-  color: var(--text-inverse, #faf7f2);
-}
 
 .btnCompare {
   background: white;
@@ -99,9 +85,31 @@
 .toastHeader {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: 0.5rem;
 }
 
+.toastCollapsed .toastHeader {
+  margin-bottom: 0;
+}
+
+.collapseBtn {
+  background: none;
+  border: none;
+  color: rgba(250, 247, 242, 0.6);
+  cursor: pointer;
+  padding: 0.25rem;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s ease;
+}
+
+.collapseBtn:hover {
+  color: var(--text-inverse, #faf7f2);
+}
+
 .toastTitle {
   display: flex;
   align-items: center;
diff --git a/nextjs-app/components/ComparisonToast.tsx b/nextjs-app/components/ComparisonToast.tsx
index 5e55d8e..b7325d9 100644
--- a/nextjs-app/components/ComparisonToast.tsx
+++ b/nextjs-app/components/ComparisonToast.tsx
@@ -9,6 +9,7 @@ import styles from './ComparisonToast.module.css';
 export function ComparisonToast() {
   const { selectedSchools, clearAll, removeSchool } = useComparison();
   const [mounted, setMounted] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
   const pathname = usePathname();
 
   useEffect(() => {
@@ -24,31 +25,48 @@ export function ComparisonToast() {
 
   return (
     <div className={styles.toastContainer}>
-      <div className={styles.toastContent}>
+      <div className={`${styles.toastContent} ${collapsed ? styles.toastCollapsed : ''}`}>
         <div className={styles.toastHeader}>
           <span className={styles.toastTitle}>
             <span className={styles.toastBadge}>{selectedSchools.length}</span>
             {selectedSchools.length === 1 ? 'school' : 'schools'} selected
           </span>
+          <button
+            onClick={() => setCollapsed(!collapsed)}
+            className={styles.collapseBtn}
+            aria-label={collapsed ? 'Expand comparison panel' : 'Minimize comparison panel'}
+          >
+            <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+              {collapsed ? (
+                <path d="M4 10L8 6L12 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+              ) : (
+                <path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+              )}
+            </svg>
+          </button>
         </div>
-        <div className={styles.schoolList}>
-          {selectedSchools.map(school => (
-            <div key={school.urn} className={styles.schoolItem}>
-              <span className={styles.schoolName} title={school.school_name}>
-                {school.school_name.length > 28 ? school.school_name.slice(0, 28) + '…' : school.school_name}
-              </span>
-              <button
-                onClick={() => removeSchool(school.urn)}
-                className={styles.removeSchoolBtn}
-                aria-label={`Remove ${school.school_name}`}
-              >×</button>
+        {!collapsed && (
+          <>
+            <div className={styles.schoolList}>
+              {selectedSchools.map(school => (
+                <div key={school.urn} className={styles.schoolItem}>
+                  <span className={styles.schoolName} title={school.school_name}>
+                    {school.school_name.length > 28 ? school.school_name.slice(0, 28) + '…' : school.school_name}
+                  </span>
+                  <button
+                    onClick={() => removeSchool(school.urn)}
+                    className={styles.removeSchoolBtn}
+                    aria-label={`Remove ${school.school_name}`}
+                  >×</button>
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
-        <div className={styles.toastActions}>
-          <button onClick={clearAll} className={styles.btnClear}>Clear all</button>
-          <Link href="/compare" className={styles.btnCompare}>Compare Now</Link>
-        </div>
+            <div className={styles.toastActions}>
+              <button onClick={clearAll} className="btn btn-tertiary btn-sm" style={{ color: 'rgba(250,247,242,0.7)', borderColor: 'rgba(255,255,255,0.15)' }}>Clear all</button>
+              <Link href="/compare" className={styles.btnCompare}>Compare Now</Link>
+            </div>
+          </>
+        )}
       </div>
     </div>
   );
diff --git a/nextjs-app/components/ComparisonView.module.css b/nextjs-app/components/ComparisonView.module.css
index 442638a..7e32309 100644
--- a/nextjs-app/components/ComparisonView.module.css
+++ b/nextjs-app/components/ComparisonView.module.css
@@ -30,24 +30,6 @@
   line-height: 1.6;
 }
 
-.addButton {
-  padding: 0.625rem 1.25rem;
-  font-size: 0.9rem;
-  font-weight: 600;
-  background: var(--accent-coral, #e07256);
-  color: white;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-}
-
-.addButton:hover {
-  background: var(--accent-coral-dark, #c45a3f);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(224, 114, 86, 0.3);
-}
 
 /* Metric Selector */
 .metricSelector {
@@ -90,7 +72,7 @@
 .metricSelect:focus {
   outline: none;
   border-color: var(--accent-coral, #e07256);
-  box-shadow: 0 0 0 3px rgba(224, 114, 86, 0.15);
+  box-shadow: 0 0 0 3px var(--accent-coral-bg);
 }
 
 .metricSelect optgroup {
@@ -366,25 +348,6 @@
   border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 }
 
-.shareButton {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.625rem 1.25rem;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color, #e0ddd8);
-  border-radius: 8px;
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all var(--transition);
-}
-
-.shareButton:hover {
-  background: var(--bg-primary);
-  color: var(--text-primary);
-}
 
 /* Responsive Design */
 @media (max-width: 768px) {
@@ -393,10 +356,6 @@
     align-items: stretch;
   }
 
-  .addButton {
-    width: 100%;
-  }
-
   .header h1 {
     font-size: 1.75rem;
   }
diff --git a/nextjs-app/components/ComparisonView.tsx b/nextjs-app/components/ComparisonView.tsx
index ae55b79..a5dc667 100644
--- a/nextjs-app/components/ComparisonView.tsx
+++ b/nextjs-app/components/ComparisonView.tsx
@@ -147,10 +147,10 @@ export function ComparisonView({
             </p>
           </div>
           <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
-            <button onClick={() => setIsModalOpen(true)} className={styles.addButton}>
+            <button onClick={() => setIsModalOpen(true)} className="btn btn-primary">
               + Add School
             </button>
-            <button onClick={handleShare} className={styles.shareButton} title="Copy comparison link">
+            <button onClick={handleShare} className="btn btn-tertiary" title="Copy comparison link">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
               {shareConfirm ? 'Copied!' : 'Share'}
             </button>
@@ -234,14 +234,14 @@ export function ComparisonView({
               <button
                 onClick={() => handleRemoveSchool(school.urn)}
                 className={styles.removeButton}
-                aria-label="Remove school"
+                aria-label={`Remove ${school.school_name}`}
                 title="Remove from comparison"
               >
                 ×
               </button>
-              <h3 className={styles.schoolName}>
+              <h2 className={styles.schoolName}>
                 <a href={`/school/${school.urn}`}>{school.school_name}</a>
-              </h3>
+              </h2>
               <div className={styles.schoolMeta}>
                 {school.local_authority && (
                   <span className={styles.metaItem}>{school.local_authority}</span>
diff --git a/nextjs-app/components/FilterBar.module.css b/nextjs-app/components/FilterBar.module.css
index faf7758..fb1a7df 100644
--- a/nextjs-app/components/FilterBar.module.css
+++ b/nextjs-app/components/FilterBar.module.css
@@ -55,7 +55,7 @@
 
 .omniInput:focus {
   border-color: var(--accent-coral, #e07256);
-  box-shadow: 0 0 0 3px rgba(224, 114, 86, 0.15);
+  box-shadow: 0 0 0 3px var(--accent-coral-bg);
 }
 
 .omniInput::placeholder {
@@ -65,30 +65,10 @@
 .searchButton {
   padding: 0.875rem 2rem;
   font-size: 1.05rem;
-  font-weight: 600;
-  background: var(--accent-coral, #e07256);
-  color: white;
-  border: none;
   border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   min-width: 120px;
 }
 
-.searchButton:hover:not(:disabled) {
-  background: var(--accent-coral-dark, #c45a3f);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(224, 114, 86, 0.3);
-}
-
-.searchButton:disabled {
-  opacity: 0.8;
-  cursor: not-allowed;
-}
-
 .spinner {
   width: 20px;
   height: 20px;
@@ -128,18 +108,6 @@
 .clearButton {
   padding: 0.75rem 1.25rem;
   font-size: 0.95rem;
-  font-weight: 500;
-  background: var(--bg-secondary, #f3ede4);
-  color: var(--text-secondary, #5c564d);
-  border: 1px solid var(--border-color, #e5dfd5);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.clearButton:hover:not(:disabled) {
-  background: var(--border-color, #e5dfd5);
-  color: var(--text-primary, #1a1612);
 }
 
 @media (max-width: 768px) {
diff --git a/nextjs-app/components/FilterBar.tsx b/nextjs-app/components/FilterBar.tsx
index 6c08b94..401525e 100644
--- a/nextjs-app/components/FilterBar.tsx
+++ b/nextjs-app/components/FilterBar.tsx
@@ -100,7 +100,7 @@ export function FilterBar({ filters, isHero }: FilterBarProps) {
             placeholder="Search by school name or postcode (e.g., SW1A 1AA)..."
             className={styles.omniInput}
           />
-          <button type="submit" className={styles.searchButton} disabled={isPending}>
+          <button type="submit" className={`btn btn-primary ${styles.searchButton}`} disabled={isPending}>
             {isPending ? <div className={styles.spinner}></div> : 'Search'}
           </button>
         </div>
@@ -153,7 +153,7 @@ export function FilterBar({ filters, isHero }: FilterBarProps) {
         </select>
 
         {hasActiveFilters && (
-          <button onClick={handleClearFilters} className={styles.clearButton} type="button" disabled={isPending}>
+          <button onClick={handleClearFilters} className={`btn btn-tertiary ${styles.clearButton}`} type="button" disabled={isPending}>
             Clear Filters
           </button>
         )}
diff --git a/nextjs-app/components/Footer.module.css b/nextjs-app/components/Footer.module.css
index 9411417..2386e91 100644
--- a/nextjs-app/components/Footer.module.css
+++ b/nextjs-app/components/Footer.module.css
@@ -5,14 +5,14 @@
 }
 
 .container {
-  max-width: 1280px;
+  max-width: 1400px;
   margin: 0 auto;
   padding: 3rem 1.5rem 2rem;
 }
 
 .content {
   display: grid;
-  grid-template-columns: 2fr 1fr 1fr;
+  grid-template-columns: 2fr 1fr;
   gap: 3rem;
   margin-bottom: 3rem;
 }
diff --git a/nextjs-app/components/Footer.tsx b/nextjs-app/components/Footer.tsx
index f0713b3..666cad6 100644
--- a/nextjs-app/components/Footer.tsx
+++ b/nextjs-app/components/Footer.tsx
@@ -19,14 +19,6 @@ export function Footer() {
             </p>
           </div>
 
-          <div className={styles.section}>
-            <h4 className={styles.sectionTitle}>About</h4>
-            <ul className={styles.links}>
-              <li>
-              </li>
-            </ul>
-          </div>
-
           <div className={styles.section}>
             <h4 className={styles.sectionTitle}>Resources</h4>
             <ul className={styles.links}>
diff --git a/nextjs-app/components/HomeView.module.css b/nextjs-app/components/HomeView.module.css
index 49e518e..7a25735 100644
--- a/nextjs-app/components/HomeView.module.css
+++ b/nextjs-app/components/HomeView.module.css
@@ -47,8 +47,8 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 1rem;
-  background: rgba(45, 125, 125, 0.1);
-  border: 1px solid rgba(45, 125, 125, 0.3);
+  background: var(--accent-teal-bg);
+  border: 1px solid rgba(45, 125, 125, 0.25);
   border-radius: 8px;
   font-size: 0.875rem;
   color: var(--accent-teal, #2d7d7d);
@@ -234,52 +234,6 @@
   flex-shrink: 0;
 }
 
-.compactBtn {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  background: var(--accent-coral, #e07256);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  text-align: center;
-}
-
-.compactBtn:hover {
-  background: var(--accent-coral-dark, #c45a3f);
-}
-
-.compactBtn.compactBtnActive {
-  background: var(--bg-secondary, #f3ede4);
-  color: var(--text-secondary, #5c564d);
-  border: 1px solid var(--border-color, #e5dfd5);
-}
-
-.compactBtn.compactBtnActive:hover {
-  background: var(--border-color, #e5dfd5);
-  color: var(--text-primary, #1a1612);
-}
-
-.compactBtnSecondary {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.6875rem;
-  font-weight: 500;
-  background: transparent;
-  color: var(--text-secondary, #5c564d);
-  border: 1px solid var(--border-color, #e5dfd5);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  text-decoration: none;
-  text-align: center;
-}
-
-.compactBtnSecondary:hover {
-  background: var(--bg-secondary, #f3ede4);
-  color: var(--text-primary, #1a1612);
-}
 
 .sectionHeader {
   margin-bottom: 1rem;
diff --git a/nextjs-app/components/HomeView.tsx b/nextjs-app/components/HomeView.tsx
index e0e9040..5166e73 100644
--- a/nextjs-app/components/HomeView.tsx
+++ b/nextjs-app/components/HomeView.tsx
@@ -128,7 +128,7 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
 
         {hasSearch && resultsView === 'list' && (
           <div className={styles.resultsHeader}>
-            <h2>
+            <h2 aria-live="polite" aria-atomic="true">
               {initialSchools.total.toLocaleString()} school
               {initialSchools.total !== 1 ? 's' : ''} found
             </h2>
@@ -267,13 +267,13 @@ function CompactSchoolItem({ school, onAddToCompare, isInCompare }: CompactSchoo
       </div>
       <div className={styles.compactItemActions}>
         <button
-          className={`${styles.compactBtn} ${isInCompare ? styles.compactBtnActive : ''}`}
+          className={isInCompare ? 'btn btn-active btn-sm' : 'btn btn-secondary btn-sm'}
           onClick={() => onAddToCompare(school)}
         >
-          {isInCompare ? 'Remove' : 'Compare'}
+          {isInCompare ? '✓ Comparing' : '+ Compare'}
         </button>
-        <a href={`/school/${school.urn}`} className={styles.compactBtnSecondary}>
-          Details
+        <a href={`/school/${school.urn}`} className="btn btn-tertiary btn-sm">
+          View
         </a>
       </div>
     </div>
diff --git a/nextjs-app/components/Navigation.module.css b/nextjs-app/components/Navigation.module.css
index c7941cf..104fd0f 100644
--- a/nextjs-app/components/Navigation.module.css
+++ b/nextjs-app/components/Navigation.module.css
@@ -8,7 +8,7 @@
 }
 
 .container {
-  max-width: 1280px;
+  max-width: 1400px;
   margin: 0 auto;
   padding: 0 1.5rem;
   display: flex;
@@ -89,7 +89,7 @@
 
 .navLink.active {
   color: var(--accent-coral, #e07256);
-  background: rgba(224, 114, 86, 0.1);
+  background: var(--accent-coral-bg);
 }
 
 .navLink.active::after {
diff --git a/nextjs-app/components/Navigation.tsx b/nextjs-app/components/Navigation.tsx
index 46a9737..4c33a8c 100644
--- a/nextjs-app/components/Navigation.tsx
+++ b/nextjs-app/components/Navigation.tsx
@@ -35,7 +35,13 @@ export function Navigation() {
           <span className={styles.logoText}>SchoolCompare</span>
         </Link>
 
-        <nav className={styles.nav}>
+        <nav className={styles.nav} aria-label="Main navigation">
+          <Link
+            href="/"
+            className={isActive('/') ? `${styles.navLink} ${styles.active}` : styles.navLink}
+          >
+            Search
+          </Link>
           <Link
             href="/compare"
             className={isActive('/compare') ? `${styles.navLink} ${styles.active}` : styles.navLink}
diff --git a/nextjs-app/components/RankingsView.module.css b/nextjs-app/components/RankingsView.module.css
index 6862ead..104fc72 100644
--- a/nextjs-app/components/RankingsView.module.css
+++ b/nextjs-app/components/RankingsView.module.css
@@ -69,7 +69,7 @@
 .filterSelect:focus {
   outline: none;
   border-color: var(--accent-coral, #e07256);
-  box-shadow: 0 0 0 3px rgba(224, 114, 86, 0.15);
+  box-shadow: 0 0 0 3px var(--accent-coral-bg);
 }
 
 .filterSelect optgroup {
@@ -275,32 +275,6 @@
   vertical-align: middle;
 }
 
-.addButton {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  background: var(--accent-coral, #e07256);
-  color: white;
-  box-sizing: border-box;
-}
-
-.addButton:hover:not(:disabled) {
-  background: var(--accent-coral-dark, #c45a3f);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(224, 114, 86, 0.3);
-}
-
-.addButton:disabled {
-  background: var(--bg-secondary, #f3ede4);
-  color: var(--text-muted, #8a847a);
-  cursor: not-allowed;
-}
 
 /* No Results */
 .noResults {
@@ -382,22 +356,3 @@
   font-style: italic;
 }
 
-.viewButton {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-  border: 1px solid var(--border-color, #e0ddd8);
-  border-radius: 6px;
-  text-decoration: none;
-  margin-right: 0.375rem;
-  transition: all var(--transition, 0.2s ease);
-  box-sizing: border-box;
-}
-
-.viewButton:hover {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-}
diff --git a/nextjs-app/components/RankingsView.tsx b/nextjs-app/components/RankingsView.tsx
index 68802da..baa7068 100644
--- a/nextjs-app/components/RankingsView.tsx
+++ b/nextjs-app/components/RankingsView.tsx
@@ -258,13 +258,13 @@ export function RankingsView({
                         <strong>{displayValue}</strong>
                       </td>
                       <td className={styles.actionCell}>
-                        <a href={`/school/${ranking.urn}`} className={styles.viewButton}>View</a>
+                        <a href={`/school/${ranking.urn}`} className="btn btn-tertiary btn-sm">View</a>
                         <button
                           onClick={() => handleAddToCompare(ranking)}
                           disabled={alreadyInComparison}
-                          className={styles.addButton}
+                          className={alreadyInComparison ? 'btn btn-active btn-sm' : 'btn btn-secondary btn-sm'}
                         >
-                          {alreadyInComparison ? '✓ Added' : '+ Add'}
+                          {alreadyInComparison ? '✓ Comparing' : '+ Compare'}
                         </button>
                       </td>
                     </tr>
diff --git a/nextjs-app/components/SchoolCard.module.css b/nextjs-app/components/SchoolCard.module.css
index f3cb21b..d4f1f12 100644
--- a/nextjs-app/components/SchoolCard.module.css
+++ b/nextjs-app/components/SchoolCard.module.css
@@ -48,7 +48,7 @@
   font-size: 0.75rem;
   color: var(--accent-teal, #2d7d7d);
   white-space: nowrap;
-  background: rgba(45, 125, 125, 0.1);
+  background: var(--accent-teal-bg);
   padding: 0.125rem 0.5rem;
   border-radius: 12px;
   font-weight: 500;
@@ -127,12 +127,12 @@
 
 .trendUp {
   color: var(--accent-teal, #2d7d7d);
-  background: rgba(45, 125, 125, 0.15);
+  background: var(--accent-teal-bg);
 }
 
 .trendDown {
   color: var(--accent-coral, #e07256);
-  background: rgba(224, 114, 86, 0.15);
+  background: var(--accent-coral-bg);
 }
 
 .trendStable {
@@ -153,75 +153,6 @@
   box-sizing: border-box;
 }
 
-.btnSecondary,
-.btnPrimary {
-  flex: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border-radius: 6px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  text-decoration: none;
-  transition: all 0.2s ease;
-  box-sizing: border-box;
-}
-
-.btnSecondary {
-  background: var(--bg-card, white);
-  color: var(--accent-teal, #2d7d7d);
-  border: 1.5px solid var(--accent-teal, #2d7d7d);
-}
-
-.btnSecondary:hover {
-  background: var(--accent-teal, #2d7d7d);
-  color: white;
-  transform: translateY(-1px);
-  box-shadow: 0 3px 8px rgba(45, 125, 125, 0.25);
-}
-
-.btnPrimary {
-  background: var(--accent-coral, #e07256);
-  color: white;
-}
-
-.btnPrimary:hover:not(:disabled) {
-  background: var(--accent-coral-dark, #c45a3f);
-  transform: translateY(-1px);
-  box-shadow: 0 3px 8px rgba(224, 114, 86, 0.25);
-}
-
-.btnPrimary:active:not(:disabled) {
-  transform: translateY(0);
-}
-
-
-.btnRemove {
-  flex: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  border-radius: 6px;
-  cursor: pointer;
-  text-decoration: none;
-  transition: all 0.2s ease;
-  box-sizing: border-box;
-  background: var(--bg-secondary, #f3ede4);
-  color: var(--text-secondary, #5c564d);
-  border: 1px solid var(--border-color, #e0ddd8);
-}
-
-.btnRemove:hover {
-  background: var(--border-color, #e0ddd8);
-  color: var(--text-primary, #1a1612);
-  transform: translateY(-1px);
-}
 
 .metricHint {
   font-size: 0.7rem;
diff --git a/nextjs-app/components/SchoolCard.tsx b/nextjs-app/components/SchoolCard.tsx
index 4c52a83..8658466 100644
--- a/nextjs-app/components/SchoolCard.tsx
+++ b/nextjs-app/components/SchoolCard.tsx
@@ -64,7 +64,7 @@ export function SchoolCard({ school, onAddToCompare, onRemoveFromCompare, showDi
                     title={`Previous year: ${formatPercentage(school.prev_rwm_expected_pct)}`}
                   >
                     {trend === 'up' && (
-                      <svg viewBox="0 0 16 16" fill="none" className={styles.trendIcon}>
+                      <svg viewBox="0 0 16 16" fill="none" className={styles.trendIcon} aria-label="Trend up">
                         <path
                           d="M8 3L14 10H2L8 3Z"
                           fill="currentColor"
@@ -72,7 +72,7 @@ export function SchoolCard({ school, onAddToCompare, onRemoveFromCompare, showDi
                       </svg>
                     )}
                     {trend === 'down' && (
-                      <svg viewBox="0 0 16 16" fill="none" className={styles.trendIcon}>
+                      <svg viewBox="0 0 16 16" fill="none" className={styles.trendIcon} aria-label="Trend down">
                         <path
                           d="M8 13L2 6H14L8 13Z"
                           fill="currentColor"
@@ -80,7 +80,7 @@ export function SchoolCard({ school, onAddToCompare, onRemoveFromCompare, showDi
                       </svg>
                     )}
                     {trend === 'stable' && (
-                      <svg viewBox="0 0 16 16" fill="none" className={styles.trendIcon}>
+                      <svg viewBox="0 0 16 16" fill="none" className={styles.trendIcon} aria-label="Trend stable">
                         <rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor" />
                       </svg>
                     )}
@@ -123,15 +123,15 @@ export function SchoolCard({ school, onAddToCompare, onRemoveFromCompare, showDi
       )}
 
       <div className={styles.actions}>
-        <Link href={`/school/${school.urn}`} className={styles.btnPrimary}>
+        <Link href={`/school/${school.urn}`} className="btn btn-primary">
           View Details
         </Link>
         {onAddToCompare && (
           <button
             onClick={() => isInCompare ? onRemoveFromCompare?.(school.urn) : onAddToCompare(school)}
-            className={isInCompare ? styles.btnRemove : styles.btnSecondary}
+            className={isInCompare ? 'btn btn-active' : 'btn btn-secondary'}
           >
-            {isInCompare ? '✓ Remove' : 'Add to Compare'}
+            {isInCompare ? '✓ Comparing' : '+ Compare'}
           </button>
         )}
       </div>
diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css
index 0d6b963..b060fb4 100644
--- a/nextjs-app/components/SchoolDetailView.module.css
+++ b/nextjs-app/components/SchoolDetailView.module.css
@@ -318,17 +318,17 @@
 
 /* ── Semantic status colours (unified) ────────────── */
 .statusGood {
-  background: rgba(45, 125, 125, 0.10);
+  background: var(--accent-teal-bg);
   color: var(--accent-teal, #2d7d7d);
 }
 
 .statusWarn {
-  background: rgba(201, 162, 39, 0.12);
+  background: var(--accent-gold-bg);
   color: #b8920e;
 }
 
 .statusBad {
-  background: rgba(224, 114, 86, 0.12);
+  background: var(--accent-coral-bg);
   color: var(--accent-coral, #e07256);
 }
 
@@ -470,17 +470,17 @@
   white-space: nowrap;
 }
 
-.ofstedGrade1 { background: rgba(45, 125, 125, 0.12); color: var(--accent-teal, #2d7d7d); }
+.ofstedGrade1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); }
 .ofstedGrade2 { background: rgba(60, 140, 60, 0.12);  color: #3c8c3c; }
-.ofstedGrade3 { background: rgba(201, 162, 39, 0.15); color: #b8920e; }
-.ofstedGrade4 { background: rgba(224, 114, 86, 0.15); color: var(--accent-coral, #e07256); }
+.ofstedGrade3 { background: var(--accent-gold-bg); color: #b8920e; }
+.ofstedGrade4 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); }
 
 /* Report Card grade colours (5-level scale, lower = better) */
-.rcGrade1 { background: rgba(45, 125, 125, 0.12); color: var(--accent-teal, #2d7d7d); }   /* Exceptional */
+.rcGrade1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); }   /* Exceptional */
 .rcGrade2 { background: rgba(60, 140, 60, 0.12);  color: #3c8c3c; }                        /* Strong */
-.rcGrade3 { background: rgba(201, 162, 39, 0.15); color: #b8920e; }                        /* Expected standard */
+.rcGrade3 { background: var(--accent-gold-bg); color: #b8920e; }                        /* Expected standard */
 .rcGrade4 { background: rgba(249, 115, 22, 0.12); color: #c2410c; }                        /* Needs attention */
-.rcGrade5 { background: rgba(224, 114, 86, 0.15); color: var(--accent-coral, #e07256); }   /* Urgent improvement */
+.rcGrade5 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); }   /* Urgent improvement */
 
 /* Safeguarding value (used inside a standard metricCard) */
 .safeguardingMet {
@@ -489,7 +489,7 @@
   border-radius: 4px;
   font-size: 0.8125rem;
   font-weight: 600;
-  background: rgba(45, 125, 125, 0.12);
+  background: var(--accent-teal-bg);
   color: var(--accent-teal, #2d7d7d);
 }
 .safeguardingNotMet {
@@ -498,7 +498,7 @@
   border-radius: 4px;
   font-size: 0.8125rem;
   font-weight: 700;
-  background: rgba(224, 114, 86, 0.15);
+  background: var(--accent-coral-bg);
   color: var(--accent-coral, #e07256);
 }
 
diff --git a/nextjs-app/components/SchoolRow.module.css b/nextjs-app/components/SchoolRow.module.css
index 73b1591..d210f12 100644
--- a/nextjs-app/components/SchoolRow.module.css
+++ b/nextjs-app/components/SchoolRow.module.css
@@ -149,67 +149,6 @@
   box-sizing: border-box;
 }
 
-.btnView {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-secondary, #5c564d);
-  border: 1px solid var(--border-color, #e5dfd5);
-  border-radius: 6px;
-  text-decoration: none;
-  transition: all 0.15s ease;
-  white-space: nowrap;
-  box-sizing: border-box;
-}
-
-.btnView:hover {
-  background: var(--bg-secondary, #f3ede4);
-  color: var(--text-primary, #1a1612);
-  border-color: var(--text-muted, #8a847a);
-}
-
-.btnCompare {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: white;
-  background: var(--accent-coral, #e07256);
-  border: 1px solid transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: background 0.15s ease;
-  white-space: nowrap;
-  box-sizing: border-box;
-}
-
-.btnCompare:hover {
-  background: var(--accent-coral-dark, #c45a3f);
-}
-
-.btnRemove {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-secondary, #5c564d);
-  background: var(--bg-secondary, #f3ede4);
-  border: 1px solid var(--border-color, #e5dfd5);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  white-space: nowrap;
-  box-sizing: border-box;
-}
-
-.btnRemove:hover {
-  background: var(--border-color, #e5dfd5);
-  color: var(--text-primary, #1a1612);
-}
 
 /* ── Ofsted badge ────────────────────────────────────── */
 .ofstedBadge {
@@ -223,10 +162,10 @@
   line-height: 1.4;
 }
 
-.ofsted1 { background: rgba(45, 125, 125, 0.12); color: var(--accent-teal, #2d7d7d); }
+.ofsted1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); }
 .ofsted2 { background: rgba(60, 140, 60, 0.12); color: #3c8c3c; }
-.ofsted3 { background: rgba(201, 162, 39, 0.15); color: #b8920e; }
-.ofsted4 { background: rgba(224, 114, 86, 0.15); color: var(--accent-coral, #e07256); }
+.ofsted3 { background: var(--accent-gold-bg); color: #b8920e; }
+.ofsted4 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); }
 
 /* ── Mobile ──────────────────────────────────────────── */
 @media (max-width: 640px) {
diff --git a/nextjs-app/components/SchoolRow.tsx b/nextjs-app/components/SchoolRow.tsx
index e266aeb..863286d 100644
--- a/nextjs-app/components/SchoolRow.tsx
+++ b/nextjs-app/components/SchoolRow.tsx
@@ -81,17 +81,17 @@ export function SchoolRow({
                   title={`Previous year: ${formatPercentage(school.prev_rwm_expected_pct)}`}
                 >
                   {trend === 'up' && (
-                    <svg viewBox="0 0 16 16" fill="none" width="9" height="9">
+                    <svg viewBox="0 0 16 16" fill="none" width="9" height="9" aria-label="Trend up">
                       <path d="M8 3L14 10H2L8 3Z" fill="currentColor" />
                     </svg>
                   )}
                   {trend === 'down' && (
-                    <svg viewBox="0 0 16 16" fill="none" width="9" height="9">
+                    <svg viewBox="0 0 16 16" fill="none" width="9" height="9" aria-label="Trend down">
                       <path d="M8 13L2 6H14L8 13Z" fill="currentColor" />
                     </svg>
                   )}
                   {trend === 'stable' && (
-                    <svg viewBox="0 0 16 16" fill="none" width="9" height="9">
+                    <svg viewBox="0 0 16 16" fill="none" width="9" height="9" aria-label="Trend stable">
                       <rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor" />
                     </svg>
                   )}
@@ -144,15 +144,15 @@ export function SchoolRow({
 
       {/* Right: actions, vertically centred */}
       <div className={styles.rowActions}>
-        <a href={`/school/${school.urn}`} className={styles.btnView}>
+        <a href={`/school/${school.urn}`} className="btn btn-tertiary btn-sm">
           View
         </a>
         {(onAddToCompare || onRemoveFromCompare) && (
           <button
             onClick={handleCompareClick}
-            className={isInCompare ? styles.btnRemove : styles.btnCompare}
+            className={isInCompare ? 'btn btn-active btn-sm' : 'btn btn-secondary btn-sm'}
           >
-            {isInCompare ? '✓ Remove' : '+ Add'}
+            {isInCompare ? '✓ Comparing' : '+ Compare'}
           </button>
         )}
       </div>
diff --git a/nextjs-app/components/SchoolSearchModal.module.css b/nextjs-app/components/SchoolSearchModal.module.css
index e780dc8..c00e8c3 100644
--- a/nextjs-app/components/SchoolSearchModal.module.css
+++ b/nextjs-app/components/SchoolSearchModal.module.css
@@ -11,7 +11,7 @@
 }
 
 .warning {
-  background: rgba(201, 162, 39, 0.15);
+  background: var(--accent-gold-bg);
   border: 1px solid var(--accent-gold, #c9a227);
   color: var(--text-primary, #1a1612);
   padding: 1rem;
@@ -43,7 +43,7 @@
 .searchInput:focus {
   outline: none;
   border-color: var(--accent-coral, #e07256);
-  box-shadow: 0 0 0 3px rgba(224, 114, 86, 0.15);
+  box-shadow: 0 0 0 3px var(--accent-coral-bg);
 }
 
 .searchSpinner {
@@ -138,30 +138,6 @@
   gap: 0.25rem;
 }
 
-.addButton {
-  padding: 0.625rem 1.25rem;
-  font-size: 0.9rem;
-  font-weight: 600;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-  background: var(--accent-coral, #e07256);
-  color: white;
-}
-
-.addButton:hover:not(:disabled) {
-  background: var(--accent-coral-dark, #c45a3f);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(224, 114, 86, 0.3);
-}
-
-.addButton:disabled {
-  background: var(--bg-secondary, #f3ede4);
-  color: var(--text-muted, #8a847a);
-  cursor: not-allowed;
-}
 
 .noResults {
   text-align: center;
diff --git a/nextjs-app/components/SchoolSearchModal.tsx b/nextjs-app/components/SchoolSearchModal.tsx
index fef23a2..d5d2185 100644
--- a/nextjs-app/components/SchoolSearchModal.tsx
+++ b/nextjs-app/components/SchoolSearchModal.tsx
@@ -122,9 +122,9 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
                 <button
                   onClick={() => handleAddSchool(school)}
                   disabled={alreadySelected || !canAddMore}
-                  className={styles.addButton}
+                  className={alreadySelected ? 'btn btn-active' : 'btn btn-secondary'}
                 >
-                  {alreadySelected ? '✓ Added' : '+ Add'}
+                  {alreadySelected ? '✓ Comparing' : '+ Compare'}
                 </button>
               </div>
             );