diff --git a/src/components/MaintainerCard.tsx b/src/components/MaintainerCard.tsx
index b294fbf4a..217f4690c 100644
--- a/src/components/MaintainerCard.tsx
+++ b/src/components/MaintainerCard.tsx
@@ -91,14 +91,14 @@ function SpecialtyChip({ specialty }: { specialty: string }) {
 }
 
 function LibraryBadge({ library }: { library: Library }) {
-  const bgClass = `${library.bgStyle ?? 'bg-gray-500'}/40`
+  const bgClass = `${library.bgStyle ?? 'bg-category-tooling'}/40`
   if (library.to) {
     return (
       <Link
         to="/$libraryId/$version/docs/contributors"
         params={{ libraryId: library.id, version: 'latest' }}
         className={twMerge(
-          `inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold text-green-900 dark:text-green-200 capitalize hover:underline focus:outline-none focus:ring-2 focus:ring-blue-400 transition-colors`,
+          `inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold text-text-primary capitalize hover:underline focus:outline-none focus:ring-2 focus:ring-blue-400 transition-colors`,
           bgClass,
         )}
         aria-label={`View contributors for ${library.name}`}
@@ -113,7 +113,7 @@ function LibraryBadge({ library }: { library: Library }) {
   return (
     <span
       className={twMerge(
-        `inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold text-green-900 dark:text-green-200 capitalize`,
+        `inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold text-text-primary capitalize`,
         bgClass,
       )}
       aria-label={`View contributors for ${library.name}`}
diff --git a/src/routes/maintainers.tsx b/src/routes/maintainers.tsx
index be032e82e..563931085 100644
--- a/src/routes/maintainers.tsx
+++ b/src/routes/maintainers.tsx
@@ -306,12 +306,12 @@ function MaintainersFilter({
             const library = availableLibraries.find(
               (lib) => lib.id === libraryId,
             )
-            const bgStyle = library?.bgStyle ?? 'bg-gray-500'
+            const bgStyle = library?.bgStyle ?? 'bg-category-tooling'
 
             return (
               <span
                 key={libraryId}
-                className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold text-green-900 dark:text-green-200 ${bgStyle}/40`}
+                className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold text-text-primary ${bgStyle}/40`}
               >
                 {library?.name || libraryId}
                 <button
diff --git a/src/styles/app.css b/src/styles/app.css
index e8dda3dbb..e3f98c2ce 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -1095,6 +1095,9 @@ html.dark {
 /* Safelist for dynamic colors */
 @source inline('{bg-blue-{4,5,6}00,bg-emerald-500,bg-purple-500,bg-pink-500,bg-cyan-500,bg-slate-{4,5}00,bg-twine-700,bg-orange-{5,6,7}00,bg-yellow-500,bg-lime-700,bg-red-500,bg-green-500}/{20,30,40,80}');
 @source inline('{hover:{bg-blue-{4,5,6}00,bg-emerald-500,bg-purple-500,bg-pink-500,bg-cyan-500,bg-slate-{4,5}00,bg-twine-700,bg-orange-{5,6,7}00,bg-yellow-500,bg-lime-700,bg-red-500,bg-green-500}/40}');
+/* Library `bgStyle` values, tinted via template strings in library chips */
+@source inline('{bg-category-{framework,data,ui,performance,tooling},bg-fuchsia-500,bg-amber-500}/{30,40}');
+@source inline('{hover:{bg-category-{framework,data,ui,performance,tooling},bg-fuchsia-500,bg-amber-500}/40}');
 /* Black/gray-100 theme colors for ranger, config, devtools, mcp */
 @source inline('dark:text-gray-100 dark:bg-gray-100 dark:border-gray-100/50 dark:from-gray-100 dark:via-gray-400/50 text-black bg-black border-black/50 from-black via-gray-600/50 to-gray-600 to-gray-400 dark:text-gray-900');
 /* Accent colors for docs UI (sidebar, TOC, prev/next) */