diff --git a/src/const.ts b/src/const.ts
index ce67a21..942dd1f 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -1 +1,5 @@
 export const repoUrl = 'https://github.com/MarkEdit-app/MarkEdit-proofreading';
+
+export const closeSvg = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"><line x1="2" y1="2" x2="10" y2="10"/><line x1="10" y1="2" x2="2" y2="10"/></svg>';
+
+export const systemFont = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif';
diff --git a/src/panel.ts b/src/panel.ts
index 06beab3..984ff55 100644
--- a/src/panel.ts
+++ b/src/panel.ts
@@ -5,6 +5,7 @@ import type { ViewUpdate } from '@codemirror/view';
 import { diagnosticsField, setDiagnosticsEffect } from './decoration';
 import type { Diagnostic } from './decoration';
 import { setAccentColor, findDiagnostic, buildCardContent, injectCardCSS } from './card';
+import { closeSvg, systemFont } from './const';
 import { injectStyleSheet } from './styling';
 
 const paneWidth = 290;
@@ -171,7 +172,7 @@ function renderPane(dom: HTMLElement, view: EditorView) {
 
   const closeBtn = document.createElement('button');
   closeBtn.className = 'harper-pane-close';
-  closeBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="2" y1="2" x2="10" y2="10"/><line x1="10" y1="2" x2="2" y2="10"/></svg>';
+  closeBtn.innerHTML = closeSvg;
   closeBtn.title = 'Close';
   closeBtn.ariaLabel = 'Close';
   closeBtn.onclick = () => {
@@ -334,7 +335,7 @@ export function paneCSS(): string {
   right: 0;
   bottom: 0;
   width: ${paneWidth}px;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
+  font-family: ${systemFont};
   border-left: 1px solid rgba(0, 0, 0, 0.12);
   background: rgba(255, 255, 255, 0.6);
   -webkit-backdrop-filter: blur(12px);
diff --git a/src/tooltip.ts b/src/tooltip.ts
index 000e134..a69f2a6 100644
--- a/src/tooltip.ts
+++ b/src/tooltip.ts
@@ -4,6 +4,7 @@ import type { Tooltip, TooltipView } from '@codemirror/view';
 import { diagnosticsField } from './decoration';
 import type { Diagnostic } from './decoration';
 import { setAccentColor, buildCardContent, ignoreDiagnostic, injectCardCSS } from './card';
+import { closeSvg, systemFont } from './const';
 import { injectStyleSheet } from './styling';
 
 export const setClickTooltip = StateEffect.define<Diagnostic | null>();
@@ -85,7 +86,7 @@ export const tooltipCSS = `
     overflow: hidden;
     max-width: 320px;
     min-width: 220px;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
+    font-family: ${systemFont};
     user-select: none;
     -webkit-user-select: none;
     -webkit-touch-callout: none;
@@ -159,7 +160,7 @@ function createTooltip(view: EditorView, diagnostic: Diagnostic) {
   // Close button at card level (top-right corner)
   const close = document.createElement('button');
   close.className = 'harper-close';
-  close.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="2" y1="2" x2="10" y2="10"/><line x1="10" y1="2" x2="2" y2="10"/></svg>';
+  close.innerHTML = closeSvg;
   close.title = 'Close';
   close.ariaLabel = 'Close';
   close.onmousedown = (e) => e.preventDefault();