diff --git a/crates/nuwiki-core/src/render/html.rs b/crates/nuwiki-core/src/render/html.rs
index 8dafd35..e449a8a 100644
--- a/crates/nuwiki-core/src/render/html.rs
+++ b/crates/nuwiki-core/src/render/html.rs
@@ -492,13 +492,16 @@ impl HtmlRenderer {
     }
 
     fn render_keyword(&self, n: &KeywordNode, w: &mut dyn Write) -> io::Result<()> {
+        // One class per keyword so stylesheets can colour them independently
+        // (e.g. red TODO/FIXME/XXX vs green DONE/FIXED/STARTED). TODO keeps the
+        // vimwiki `todo` class so stock vimwiki CSS still styles it.
         let (label, class) = match n.keyword {
-            Keyword::Todo => ("TODO", "keyword keyword-todo"),
-            Keyword::Done => ("DONE", "keyword keyword-done"),
-            Keyword::Started => ("STARTED", "keyword keyword-started"),
-            Keyword::Fixme => ("FIXME", "keyword keyword-fixme"),
-            Keyword::Fixed => ("FIXED", "keyword keyword-fixed"),
-            Keyword::Xxx => ("XXX", "keyword keyword-xxx"),
+            Keyword::Todo => ("TODO", "todo"),
+            Keyword::Done => ("DONE", "done"),
+            Keyword::Started => ("STARTED", "started"),
+            Keyword::Fixme => ("FIXME", "fixme"),
+            Keyword::Fixed => ("FIXED", "fixed"),
+            Keyword::Xxx => ("XXX", "xxx"),
         };
         write!(w, "<span class=\"{class}\">{label}</span>")
     }
diff --git a/crates/nuwiki-core/tests/html_renderer.rs b/crates/nuwiki-core/tests/html_renderer.rs
index 9f9110e..bf10fb7 100644
--- a/crates/nuwiki-core/tests/html_renderer.rs
+++ b/crates/nuwiki-core/tests/html_renderer.rs
@@ -196,8 +196,20 @@ fn inline_code_is_escaped() {
 
 #[test]
 fn keyword_spans() {
-    let out = render("TODO write tests\n");
-    assert!(out.contains("<span class=\"keyword keyword-todo\">TODO</span>"));
+    // One class per keyword so a stylesheet can colour groups differently.
+    // TODO keeps the vimwiki `todo` class.
+    let cases = [
+        ("TODO x\n", "<span class=\"todo\">TODO</span>"),
+        ("DONE x\n", "<span class=\"done\">DONE</span>"),
+        ("STARTED x\n", "<span class=\"started\">STARTED</span>"),
+        ("FIXME x\n", "<span class=\"fixme\">FIXME</span>"),
+        ("FIXED x\n", "<span class=\"fixed\">FIXED</span>"),
+        ("XXX x\n", "<span class=\"xxx\">XXX</span>"),
+    ];
+    for (src, expected) in cases {
+        let out = render(src);
+        assert!(out.contains(expected), "src {src:?} -> {out}");
+    }
 }
 
 #[test]