diff --git a/src/renderer/src/MagicNoteEditor.test.tsx b/src/renderer/src/MagicNoteEditor.test.tsx
index 0f33eea6..42bd8928 100644
--- a/src/renderer/src/MagicNoteEditor.test.tsx
+++ b/src/renderer/src/MagicNoteEditor.test.tsx
@@ -1,9 +1,24 @@
+/// <reference types="node" />
+
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
 import { describe, expect, it, vi } from 'vitest'
 import type { MagicNoteRichContent } from '../../shared/magic-notes-contracts'
 import { MagicNoteEditor } from './MagicNoteEditor'
 
+const stylesheet = readFileSync(
+  join(process.cwd(), 'src', 'renderer', 'src', 'styles.css'),
+  'utf8'
+)
+
 describe('MagicNoteEditor', () => {
+  it('uses the themed muted text color for its placeholder', () => {
+    expect(stylesheet).toMatch(
+      /\.magic-note-editor__content\s+\.ql-editor\.ql-blank::before\s*\{\s*color:\s*var\(--text-muted\);\s*\}/
+    )
+  })
+
   it('exposes numeric font sizes, text color, and attachment controls', () => {
     const { container } = render(
       <MagicNoteEditor
diff --git a/src/renderer/src/styles.css b/src/renderer/src/styles.css
index 98aeebe5..58b46e64 100644
--- a/src/renderer/src/styles.css
+++ b/src/renderer/src/styles.css
@@ -1965,6 +1965,10 @@
   line-height: 1.65;
 }
 
+.magic-note-editor__content .ql-editor.ql-blank::before {
+  color: var(--text-muted);
+}
+
 .magic-note-editor .ql-size-small,
 .magic-note-content .ql-size-small {
   font-size: 12px;