diff --git a/CLAUDE.md b/CLAUDE.md
index 8c6960bb2..9ded672a1 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -172,6 +172,10 @@ export function TaskDetail({ task: initialTask }: TaskDetailProps) {
}
```
+### Tailwind over inline styles
+
+Always write Tailwind classes for styling wherever possible.
+
### Store / Service Boundary
Stores and services have a strict separation of concerns:
diff --git a/apps/code/src/renderer/assets/logo.tsx b/apps/code/src/renderer/assets/logo.tsx
new file mode 100644
index 000000000..9f5727f47
--- /dev/null
+++ b/apps/code/src/renderer/assets/logo.tsx
@@ -0,0 +1,286 @@
+// landscape, no "code": 160 x 28
+// landscape, w/ "code": 229 x 28
+// stacked, no "code": 52 x 47
+// stacked, w/ "code": 52 x 59
+// no wordmark (logo only): 52 x 47
+
+export default function LogosLandscape({
+ code = true,
+ stacked = false,
+ wordmark = true,
+}) {
+ const width = !wordmark ? 52 : stacked ? 52 : code ? 229 : 160;
+ const height = !wordmark ? 47 : stacked ? (code ? 59 : 47) : 28;
+ return (
+
+ );
+}
diff --git a/apps/code/src/renderer/features/onboarding/components/WelcomeScreen.tsx b/apps/code/src/renderer/features/onboarding/components/WelcomeScreen.tsx
index 0438932de..41801e9d7 100644
--- a/apps/code/src/renderer/features/onboarding/components/WelcomeScreen.tsx
+++ b/apps/code/src/renderer/features/onboarding/components/WelcomeScreen.tsx
@@ -8,6 +8,7 @@ import {
} from "@phosphor-icons/react";
import { Button, Flex, Text } from "@radix-ui/themes";
import explorerHog from "@renderer/assets/images/hedgehogs/explorer-hog.png";
+import Logo from "@renderer/assets/logo";
import { useCallback, useEffect, useRef, useState } from "react";
import { FeatureListItem } from "./FeatureListItem";
import { OnboardingHogTip } from "./OnboardingHogTip";
@@ -113,14 +114,22 @@ export function WelcomeScreen({ onNext }: WelcomeScreenProps) {
}}
>
+
+
+ Welcome to
+
+
+
+
- Welcome to PostHog Code
-
-
Your product workbench.
diff --git a/apps/code/src/renderer/styles/globals.css b/apps/code/src/renderer/styles/globals.css
index 3cceea59b..3d88833f0 100644
--- a/apps/code/src/renderer/styles/globals.css
+++ b/apps/code/src/renderer/styles/globals.css
@@ -15,6 +15,14 @@
@import "@radix-ui/themes/styles.css" layer(radix);
@import "tailwindcss";
+/*
+ * Tailwind v4 ignores `darkMode: "class"` from the legacy v3 config loaded
+ * via @config, so we re-declare the dark variant here. This tracks the
+ * `.dark` class that themeStore syncs onto , keeping `dark:` utilities
+ * in sync with the in-app theme toggle (rather than just OS preference).
+ */
+@custom-variant dark (&:where(.dark, .dark *));
+
/*
* @posthog/quill — shadcn-style integration.
*
diff --git a/apps/code/tests/e2e/tests/smoke.spec.ts b/apps/code/tests/e2e/tests/smoke.spec.ts
index b442cbe65..73607ccec 100644
--- a/apps/code/tests/e2e/tests/smoke.spec.ts
+++ b/apps/code/tests/e2e/tests/smoke.spec.ts
@@ -21,7 +21,7 @@ test.describe("Smoke Tests", () => {
.catch(() => {});
const hasOnboarding = await window
- .locator("text=Welcome to PostHog Code")
+ .locator("text=Welcome to")
.first()
.isVisible()
.catch(() => false);