diff --git a/index.html b/index.html
index d0daaa7..a5183fd 100644
--- a/index.html
+++ b/index.html
@@ -82,7 +82,7 @@
           <a class="card" href="https://nothing-modes.vercel.app" target="_blank" rel="noopener">
             <figure><img src="images/projects/nothing-modes.png" alt="Nothing Modes landing page" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>Nothing Modes</h3><span class="tag">Kotlin · Android</span></div>
+              <div class="card-head"><h3>Nothing Modes</h3><span class="tag tag-nothing">Kotlin · Android</span></div>
               <p>Open-source automation for Nothing phones — Modes, Routines and Glyph integration. No cloud, no telemetry.</p>
             </div>
           </a>
@@ -90,7 +90,7 @@
           <a class="card" href="https://calhq.vercel.app" target="_blank" rel="noopener">
             <figure><img src="images/projects/cal.png" alt="Cal landing page" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>Cal</h3><span class="tag">Self-hosted</span></div>
+              <div class="card-head"><h3>Cal</h3><span class="tag tag-cal">Self-hosted</span></div>
               <p>Daily toolkit — calendar, tasks, notes, links, files, kanban, time tracking and GitHub inbox. One Docker container.</p>
             </div>
           </a>
@@ -106,7 +106,7 @@
           <a class="card" href="https://timespent.tdvorak.dev" target="_blank" rel="noopener">
             <figure><img src="images/projects/timespent.png" alt="TimeSpent" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>TimeSpent</h3><span class="tag">React · Vite</span></div>
+              <div class="card-head"><h3>TimeSpent</h3><span class="tag tag-silver">React · Vite</span></div>
               <p>Time-tracking CSV exports turned into branded, invoice-style PDF reports — with ink-saving print modes.</p>
             </div>
           </a>
@@ -114,7 +114,7 @@
           <a class="card" href="https://github.com/Dvorinka/PulseMonitor" target="_blank" rel="noopener">
             <figure><img src="images/projects/pulsemonitor.png" alt="PulseMonitor" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>PulseMonitor</h3><span class="tag">TypeScript</span></div>
+              <div class="card-head"><h3>PulseMonitor</h3><span class="tag tag-pulse">TypeScript</span></div>
               <p>Real-time web dashboard for monitoring remote AI agent sessions over SSH — activity feed, todos, metrics.</p>
             </div>
           </a>
@@ -122,7 +122,7 @@
           <a class="card" href="https://bookra.eu" target="_blank" rel="noopener">
             <figure><img src="images/projects/bookra.png" alt="Bookra" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>Bookra</h3><span class="tag">SaaS</span></div>
+              <div class="card-head"><h3>Bookra</h3><span class="tag tag-bookra">SaaS</span></div>
               <p>Simple booking software for salons, clinics and local services — reservations, customers and team in one place.</p>
             </div>
           </a>
@@ -130,7 +130,7 @@
           <a class="card" href="https://vibly-5m7g.vercel.app" target="_blank" rel="noopener">
             <figure><img src="images/projects/vibly.png" alt="Vibly" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>Vibly</h3><span class="tag">Studio</span></div>
+              <div class="card-head"><h3>Vibly</h3><span class="tag tag-vibly">Studio</span></div>
               <p>AI-driven product &amp; growth studio — from idea to production. My own studio's public site.</p>
             </div>
           </a>
@@ -200,28 +200,28 @@
           <a class="card" href="https://www.sportcreative.eu" target="_blank" rel="noopener">
             <figure><img src="images/projects/sportcreative.png" alt="SportCreative" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>SportCreative</h3><span class="tag">Agency</span></div>
+              <div class="card-head"><h3>SportCreative</h3><span class="tag tag-sportcreative">Agency</span></div>
               <p>Full-service digital marketing for sports clubs — websites, content, social systems.</p>
             </div>
           </a>
           <a class="card" href="https://www.zeusport.cz" target="_blank" rel="noopener">
             <figure><img src="images/projects/zeus.cz.png" alt="ZEUS CZ e-shop" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>ZEUS Sport</h3><span class="tag">E-commerce</span></div>
+              <div class="card-head"><h3>ZEUS Sport</h3><span class="tag tag-zeus">E-commerce</span></div>
               <p>Professional sports equipment e-shop — Czech market entry, CZ and EU storefronts.</p>
             </div>
           </a>
           <a class="card" href="https://www.reklik.net" target="_blank" rel="noopener">
             <figure><img src="images/projects/reklik.png" alt="ReKlik" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>ReKlik</h3><span class="tag">Photography</span></div>
+              <div class="card-head"><h3>ReKlik</h3><span class="tag tag-reklik">Photography</span></div>
               <p>Real-estate photography brand — landing site plus portfolio at foto.reklik.net.</p>
             </div>
           </a>
           <a class="card" href="https://www.bizoniuh.cz" target="_blank" rel="noopener">
             <figure><img src="images/projects/bizoni.png" alt="Bizoni UH" loading="lazy"></figure>
             <div class="card-body">
-              <div class="card-head"><h3>FC Bizoni UH</h3><span class="tag">Club site</span></div>
+              <div class="card-head"><h3>FC Bizoni UH</h3><span class="tag tag-bizoni">Club site</span></div>
               <p>Football club website — UX, fan engagement, match photography and video content.</p>
             </div>
           </a>
diff --git a/style.css b/style.css
index 26330c7..68adbed 100644
--- a/style.css
+++ b/style.css
@@ -208,7 +208,20 @@ a { color: inherit; text-decoration: none; }
   font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim);
   padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px;
 }
-.tag-lime { color: #a3e635; border-color: rgba(163, 230, 53, 0.35); }
+/* brand accent tags — color sampled from each product's own UI */
+.tag-lime { --acc: #a3e635; }            /* containr */
+.tag-nothing { --acc: #f04e55; }         /* nothing red */
+.tag-cal { --acc: #7da88b; }             /* sage */
+.tag-pulse { --acc: #5eb3ff; }           /* monitor blue */
+.tag-bookra { --acc: #d8b98a; }          /* warm tan */
+.tag-vibly { --acc: #b8ff2e; }           /* chartreuse */
+.tag-silver { --acc: #c9cdd3; }          /* timespent mono */
+.tag-sportcreative { --acc: #9a7ae0; }   /* purple */
+.tag-zeus { --acc: #e05a52; }            /* red */
+.tag-reklik { --acc: #58aed8; }          /* blue */
+.tag-bizoni { --acc: #c05b50; }          /* maroon */
+.tag[class*="tag-"] { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 35%, transparent); }
+[data-theme="light"] .tag[class*="tag-"] { color: color-mix(in srgb, var(--acc) 45%, #000); border-color: color-mix(in srgb, var(--acc) 50%, transparent); }
 .card-body > p { margin-top: 8px; font-size: 14px; color: var(--fg-dim); line-height: 1.55; }
 
 /* ============ Row lists ============ */