diff --git a/ui/src/pages/Alerts/severity-utils.test.ts b/ui/src/pages/Alerts/severity-utils.test.ts
new file mode 100644
index 00000000..a4dcb3ab
--- /dev/null
+++ b/ui/src/pages/Alerts/severity-utils.test.ts
@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { severityToAccent } from './severity-utils';
+
+describe('severityToAccent', () => {
+  it('maps CRITICAL → error', () => {
+    expect(severityToAccent('CRITICAL')).toBe('error');
+  });
+
+  it('maps WARNING → warning', () => {
+    expect(severityToAccent('WARNING')).toBe('warning');
+  });
+
+  it('maps INFO → undefined (no row tint)', () => {
+    expect(severityToAccent('INFO')).toBeUndefined();
+  });
+});
diff --git a/ui/src/pages/Alerts/severity-utils.ts b/ui/src/pages/Alerts/severity-utils.ts
new file mode 100644
index 00000000..c98e176c
--- /dev/null
+++ b/ui/src/pages/Alerts/severity-utils.ts
@@ -0,0 +1,12 @@
+import type { AlertDto } from '../../api/queries/alerts';
+
+type Severity = NonNullable<AlertDto['severity']>;
+export type RowAccent = 'error' | 'warning' | undefined;
+
+export function severityToAccent(severity: Severity): RowAccent {
+  switch (severity) {
+    case 'CRITICAL': return 'error';
+    case 'WARNING':  return 'warning';
+    case 'INFO':     return undefined;
+  }
+}