From f8faa3bb2c2a23b38544a0601c41bc712449512f Mon Sep 17 00:00:00 2001
From: Srinivas Annam <annam@annam.org>
Date: Fri, 12 Jun 2026 10:59:49 -0700
Subject: [PATCH] fix: raise muted-text contrast to WCAG AA and adopt Poppins
 font
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Light --color-text-muted: #9ca3af → #6b7280 (~4.6:1 on white)
- Dark --color-text-muted: #4d5668 → #8a93a6 (~4.9:1 on dark surface)
- Re-tier dimension hints + "not detected" fallbacks to text-content-tertiary
- Add @fontsource/poppins (400/500/600/700), prepend to fontFamily.sans
- No external font requests — all woff2 served from local node_modules

Closes #46

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 package-lock.json                       | 10 ++++++++++
 package.json                            |  1 +
 src/components/Result.tsx               |  2 +-
 src/components/features/ContactCard.tsx |  4 ++--
 src/main.tsx                            |  4 ++++
 src/styles.css                          |  4 ++--
 tailwind.config.js                      |  1 +
 7 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c50e16a5..c877bbc4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0-alpha.1",
       "license": "Apache-2.0",
       "dependencies": {
+        "@fontsource/poppins": "^5.2.7",
         "pdfjs-dist": "^4.10.38",
         "posthog-js": "^1.205.0",
         "react": "^19.1.1",
@@ -763,6 +764,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fontsource/poppins": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-5.2.7.tgz",
+      "integrity": "sha512-6uQyPmseo4FgI97WIhA4yWRlNaoLk4vSDK/PyRwdqqZb5zAEuc+Kunt8JTMcsHYUEGYBtN15SNkMajMdqUSUmg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
diff --git a/package.json b/package.json
index 07539822..a5d1a59d 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "deploy": "./scripts/deploy_resumelint.sh"
   },
   "dependencies": {
+    "@fontsource/poppins": "^5.2.7",
     "pdfjs-dist": "^4.10.38",
     "posthog-js": "^1.205.0",
     "react": "^19.1.1",
diff --git a/src/components/Result.tsx b/src/components/Result.tsx
index 2a374bb8..a3a8299a 100644
--- a/src/components/Result.tsx
+++ b/src/components/Result.tsx
@@ -263,7 +263,7 @@ function Dimension({
           />
         </div>
       )}
-      <p className="text-[11px] text-content-muted">{hint}</p>
+      <p className="text-[11px] text-content-tertiary">{hint}</p>
     </div>
   );
 }
diff --git a/src/components/features/ContactCard.tsx b/src/components/features/ContactCard.tsx
index ef8dac35..75a328c5 100644
--- a/src/components/features/ContactCard.tsx
+++ b/src/components/features/ContactCard.tsx
@@ -61,10 +61,10 @@ function ContactRow({
         {label}
       </dt>
       {gated ? (
-        <dd className="flex-1 text-sm italic text-content-muted">
+        <dd className="flex-1 text-sm italic text-content-tertiary">
           — not detected
           {reason === "low_confidence" && (
-            <span className="ml-1 text-[11px] not-italic text-content-muted">
+            <span className="ml-1 text-[11px] not-italic text-content-tertiary">
               (low confidence)
             </span>
           )}
diff --git a/src/main.tsx b/src/main.tsx
index 40248faf..9a6f8490 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,6 +7,10 @@ import { GlobalWorkerOptions } from "pdfjs-dist";
 import pdfjsWorkerUrl from "pdfjs-dist/build/pdf.worker.mjs?url";
 import App from "./App";
 import { initAnalytics } from "./lib/analytics";
+import "@fontsource/poppins/400.css";
+import "@fontsource/poppins/500.css";
+import "@fontsource/poppins/600.css";
+import "@fontsource/poppins/700.css";
 import "./styles.css";
 
 GlobalWorkerOptions.workerSrc = pdfjsWorkerUrl;
diff --git a/src/styles.css b/src/styles.css
index 23b4271e..fca223ea 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -22,7 +22,7 @@ html {
   --color-text-primary: #111827;
   --color-text-secondary: #374151;
   --color-text-tertiary: #4b5563;
-  --color-text-muted: #9ca3af;
+  --color-text-muted: #6b7280;
   --color-text-inverse: #ffffff;
   --color-border-light: #e5e7eb;
   --color-border-default: #d1d5db;
@@ -64,7 +64,7 @@ html {
     --color-text-primary: #f0f2f5;
     --color-text-secondary: #b8bfcc;
     --color-text-tertiary: #8892a4;
-    --color-text-muted: #4d5668;
+    --color-text-muted: #8a93a6;
     --color-text-inverse: #0f1419;
     --color-border-light: #2c3549;
     --color-border-default: #3a4459;
diff --git a/tailwind.config.js b/tailwind.config.js
index 34ea7cf3..2d64ed4b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,7 @@ export default {
     extend: {
       fontFamily: {
         sans: [
+          "Poppins",
           "-apple-system",
           "BlinkMacSystemFont",
           '"Segoe UI"',