diff --git a/frontend/src/pages/EngagementsListPage.tsx b/frontend/src/pages/EngagementsListPage.tsx
index 0c3fdb4..1f3f05b 100644
--- a/frontend/src/pages/EngagementsListPage.tsx
+++ b/frontend/src/pages/EngagementsListPage.tsx
@@ -42,7 +42,7 @@ export function EngagementsListPage(): JSX.Element {
         </div>
         {canEditEngagements ? (
           <Link to="/engagements/new" className="btn-primary">
-            <Plus size={14} aria-hidden /> New
+            <Plus size={14} aria-hidden /> New engagement
           </Link>
         ) : null}
       </header>
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 1a4cc43..4155cb9 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -80,11 +80,10 @@
 
   /* btn-ink uses fixed dark slab so it doesn't invert in dark mode */
   .btn-ink {
-    @apply inline-flex items-center justify-center gap-xs text-white uppercase tracking-[0.7px] font-semibold text-[14px] leading-[1.4] rounded-md px-xl py-sm h-11 transition-colors;
-    background-color: #111827;
+    @apply inline-flex items-center justify-center gap-xs bg-slab text-white uppercase tracking-[0.7px] font-semibold text-[14px] leading-[1.4] rounded-md px-xl py-sm h-11 transition-colors;
   }
   .btn-ink:hover {
-    background-color: #1f2937;
+    @apply bg-slab-hover;
   }
   .btn-ink:disabled {
     @apply bg-steel cursor-not-allowed;
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 2fee123..56a10b1 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -36,6 +36,7 @@ const config: Config = {
         graphite: 'var(--color-graphite)',
         // Fixed dark slab — never inverts in dark mode (utility strip, footer, dark bands)
         slab: '#111827',
+        'slab-hover': '#1f2937',
         'slab-text': '#f9fafb',
         'slab-muted': '#6b7280',
         // Semantic / decorative — fixed (not themeable)