diff --git a/frontend/src/lib/components/ArticleCard.svelte b/frontend/src/lib/components/ArticleCard.svelte
index 4809952..c729bb6 100644
--- a/frontend/src/lib/components/ArticleCard.svelte
+++ b/frontend/src/lib/components/ArticleCard.svelte
@@ -8,6 +8,20 @@
     (article.tags?.length ? article.tags : article.topic ? [article.topic] : []).slice(0, 3)
   );
 
+  // The accent line is color-coded by primary topic — a quiet bit of variety
+  // across the grid. Muted tones in the sand/sea/sun family; calm, not loud.
+  const TOPIC_COLOR = {
+    science: '#0083ad',     // azure (sea)
+    technology: '#5f72a8',  // muted indigo
+    environment: '#3f9070', // soft green
+    health: '#3aa6a0',      // calm teal
+    community: '#c79a3a',   // warm gold
+    culture: '#c4795a',     // terracotta
+    animals: '#9a8246',     // earthy tan
+    learning: '#8a6da3',    // soft violet
+  };
+  let accentColor = $derived(TOPIC_COLOR[article.topic] ?? 'var(--accent)');
+
   // Reset image-failure when the article changes (cards swap in place).
   let failed = $state(false);
   $effect(() => {
@@ -41,7 +55,7 @@
 
   <div class="body">
     <div class="cardhead">
-      <span class="accent"></span>
+      <span class="accent" style="background:{accentColor}"></span>
       <div class="pillrow">
         {#each pills as t, i (t)}
           {#if ontag}
@@ -112,7 +126,7 @@
      divider). The accent is the top grid row; the pill row centers in the rest,
      giving even margins for 1-, 2-, and 3-pill cards with everything aligned. */
   .tile .cardhead {
-    display: grid; grid-template-rows: 3px 1fr; height: 84px;
+    display: grid; grid-template-rows: 3px 1fr; height: 94px;
     padding-top: 18px; border-bottom: 1px solid var(--line);
   }
   .tile .accent {