diff --git a/frontend/src/app/components/Onboarding/welcomeScreen/preview.html b/frontend/src/app/components/Onboarding/welcomeScreen/preview.html
new file mode 100644
index 00000000..054c34d6
--- /dev/null
+++ b/frontend/src/app/components/Onboarding/welcomeScreen/preview.html
@@ -0,0 +1,139 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>OpenSwarm welcome screen (premium skin mock)</title>
+<!--
+  Static mock of the first onboarding screen in the premium skin:
+  Claude's aesthetic (warm near-black, serif display heading, off-white text, huge whitespace,
+  one centered focal area) + Apple HIG polish (generous rhythm, clean hierarchy, one accent),
+  ending on OUR tiles ("Tap one and watch"), never a blank box.
+  Warm palette from claudeTokens (darkTokens). Real headline font is "Anthropic Sans";
+  the serif display here is a stand-in for Claude's serif display face.
+-->
+<style>
+  :root {
+    --bg: #1A1918;            /* darkTokens bg.page (warm near-black) */
+    --surface: rgba(250,249,245,0.045);
+    --border: rgba(250,249,245,0.09);
+    --border-hover: rgba(196,99,58,0.55);
+    --white: #FAF9F5;         /* text.primary */
+    --muted: #9C9A92;         /* text.tertiary */
+    --ghost: rgba(156,154,146,0.6);
+    --accent: #C4633A;        /* accent.primary (dark) */
+    --accent-soft: rgba(196,99,58,0.12);
+    --serif: "Tiempos Headline", "Anthropic Serif", Georgia, "Times New Roman", serif;
+    --sans: "Anthropic Sans", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+    --ease: cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body { height: 100%; }
+  body {
+    background: var(--bg);
+    /* subtle warm depth glow, Apple-ish hero lighting */
+    background-image: radial-gradient(60% 50% at 50% 0%, rgba(196,99,58,0.10) 0%, transparent 70%);
+    font-family: var(--sans);
+    -webkit-font-smoothing: antialiased;
+    color: var(--white);
+    display: flex; align-items: center; justify-content: center;
+    overflow: hidden;
+  }
+
+  .wrap {
+    width: min(680px, 88vw);
+    text-align: center;
+    display: flex; flex-direction: column; align-items: center;
+  }
+
+  .brand {
+    font-size: 22px; color: var(--accent); margin-bottom: 56px;
+    opacity: 0; animation: rise 700ms var(--ease) 120ms forwards;
+  }
+
+  h1 {
+    font-family: var(--serif);
+    font-weight: 500; font-size: 42px; line-height: 1.12; letter-spacing: -0.01em;
+    color: var(--white);
+    opacity: 0; animation: rise 800ms var(--ease) 260ms forwards;
+  }
+  .sub {
+    margin-top: 16px; font-size: 17px; color: var(--muted); font-weight: 400;
+    letter-spacing: 0.005em;
+    opacity: 0; animation: rise 800ms var(--ease) 400ms forwards;
+  }
+
+  .grid {
+    margin-top: 48px;
+    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
+    width: 100%;
+  }
+  .tile {
+    text-align: left; padding: 22px 22px; border-radius: 16px;
+    background: var(--surface); border: 1px solid var(--border);
+    cursor: pointer;
+    transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
+    opacity: 0; animation: rise 760ms var(--ease) forwards;
+  }
+  .tile:nth-child(1) { animation-delay: 560ms; }
+  .tile:nth-child(2) { animation-delay: 640ms; }
+  .tile:nth-child(3) { animation-delay: 720ms; }
+  .tile:nth-child(4) { animation-delay: 800ms; }
+  .tile:hover {
+    background: var(--accent-soft);
+    border-color: var(--border-hover);
+    transform: translateY(-2px);
+  }
+  .tile .ic { font-size: 24px; display: block; margin-bottom: 12px; }
+  .tile .t { font-size: 17px; font-weight: 550; color: var(--white); letter-spacing: -0.005em; }
+  .tile .d { margin-top: 5px; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
+
+  .surprise {
+    margin-top: 34px; font-size: 15px; color: var(--ghost); cursor: pointer;
+    transition: color 180ms var(--ease);
+    opacity: 0; animation: rise 760ms var(--ease) 940ms forwards;
+  }
+  .surprise:hover { color: var(--white); }
+
+  @keyframes rise {
+    from { opacity: 0; transform: translateY(12px); filter: blur(2px); }
+    to   { opacity: 1; transform: translateY(0);    filter: blur(0);  }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    * { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
+  }
+</style>
+</head>
+<body>
+  <div class="wrap">
+    <div class="brand">✳</div>
+    <h1>Good evening, Eric.<br/>What should I take off your plate?</h1>
+    <div class="sub">Tap one and watch. I go and do it, not just talk about it.</div>
+
+    <div class="grid">
+      <div class="tile">
+        <span class="ic">🔎</span>
+        <div class="t">Find something</div>
+        <div class="d">Prices, options, the best pick, pulled together for you.</div>
+      </div>
+      <div class="tile">
+        <span class="ic">🧩</span>
+        <div class="t">Build something</div>
+        <div class="d">A tool, a tracker, a little page, built and running.</div>
+      </div>
+      <div class="tile">
+        <span class="ic">🗂️</span>
+        <div class="t">Handle busywork</div>
+        <div class="d">Messy sheets, inboxes, cleanup, off your plate.</div>
+      </div>
+      <div class="tile">
+        <span class="ic">🌐</span>
+        <div class="t">Do something online</div>
+        <div class="d">A real browser, going and doing the task for you.</div>
+      </div>
+    </div>
+
+    <div class="surprise">✨ or surprise me</div>
+  </div>
+</body>
+</html>
