diff --git a/app/apple-icon.tsx b/app/apple-icon.tsx
index c91e3b3..cb56bd9 100644
--- a/app/apple-icon.tsx
+++ b/app/apple-icon.tsx
@@ -1,4 +1,5 @@
 import { ImageResponse } from "next/og";
+import { COLORS, BRAND } from "@/lib/constants";
 
 export const size = { width: 180, height: 180 };
 export const contentType = "image/png";
@@ -13,14 +14,14 @@ export default function AppleIcon() {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          background: "linear-gradient(135deg, #0a0e1a 0%, #111827 100%)",
+          background: `linear-gradient(135deg, ${COLORS.bgPrimary} 0%, ${COLORS.bgSecondary} 100%)`,
           borderRadius: "40px",
           fontSize: 120,
         }}
       >
-        🦞
+        {BRAND.emoji}
       </div>
     ),
-    { ...size }
+    size
   );
 }
diff --git a/app/icon.tsx b/app/icon.tsx
index 98d9b68..115fbe2 100644
--- a/app/icon.tsx
+++ b/app/icon.tsx
@@ -1,4 +1,5 @@
 import { ImageResponse } from "next/og";
+import { COLORS, BRAND } from "@/lib/constants";
 
 export const size = { width: 64, height: 64 };
 export const contentType = "image/png";
@@ -13,14 +14,14 @@ export default function Icon() {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          background: "#0a0e1a",
+          background: COLORS.bgPrimary,
           borderRadius: "14px",
           fontSize: 44,
         }}
       >
-        🦞
+        {BRAND.emoji}
       </div>
     ),
-    { ...size }
+    size
   );
 }
diff --git a/lib/constants/index.ts b/lib/constants/index.ts
new file mode 100644
index 0000000..3797aea
--- /dev/null
+++ b/lib/constants/index.ts
@@ -0,0 +1 @@
+export * from "./theme";
diff --git a/lib/constants/theme.ts b/lib/constants/theme.ts
new file mode 100644
index 0000000..6f38b33
--- /dev/null
+++ b/lib/constants/theme.ts
@@ -0,0 +1,10 @@
+// Theme constants shared across app (including ImageResponse which cannot use CSS variables)
+
+export const COLORS = {
+  bgPrimary: "#0a0e1a",
+  bgSecondary: "#111827",
+} as const;
+
+export const BRAND = {
+  emoji: "🦞",
+} as const;
diff --git a/middleware.ts b/middleware.ts
index fcf488a..07352c4 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -4,5 +4,5 @@ import { routing } from "./i18n/routing";
 export default createMiddleware(routing);
 
 export const config = {
-  matcher: ["/((?!api|_next|_vercel|.*\\..*).*)"],
+  matcher: ["/((?!api|_next|_vercel|icon|apple-icon|.*\\..*).*)"],
 };