feat: rebrand to Slate (logo, palette, copy, Launch button)

- Wordmark SVG + favicon (#FF1F8F → #00D4FF gradient)
- Page title: Slate — AI App Builder
- Header logo via inline component (no external font deps)
- Deploy button label -> Launch
- Chat placeholder + example prompt rebranded
- Replace upstream accent palette with magenta primary, add cyan2 for accents
- Settings tab notes upstream remains stackblitz-labs/bolt.diy

app/components/@settings/tabs/update/UpdateTab.tsx

@@ -455,7 +455,7 @@ const UpdateTab = () => {
             <div className="flex items-center justify-between">
               <div>
                 <p>
-                  Updates are fetched from: <span className="font-mono">stackblitz-labs/bolt.diy</span> (
+                  Updates are fetched from: <span className="font-mono">stackblitz-labs/bolt.diy</span> (Slate upstream) (
                   {isLatestBranch ? 'main' : 'stable'} branch)
                 </p>
                 <p className="mt-1">
@@ -553,7 +553,7 @@ const UpdateTab = () => {
           <DialogDescription>
             <div className="mt-4">
               <p className="text-sm text-bolt-elements-textSecondary mb-4">
-                A new version is available from <span className="font-mono">stackblitz-labs/bolt.diy</span> (
+                A new version is available from <span className="font-mono">stackblitz-labs/bolt.diy</span> (Slate upstream) (
                 {isLatestBranch ? 'main' : 'stable'} branch)
               </p>
 

app/components/chat/BaseChat.tsx

@@ -563,7 +563,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                         minHeight: TEXTAREA_MIN_HEIGHT,
                         maxHeight: TEXTAREA_MAX_HEIGHT,
                       }}
-                      placeholder="How can Bolt help you today?"
+                      placeholder="How can Slate help you today?"
                       translate="no"
                     />
                     <ClientOnly>

app/components/chat/ExamplePrompts.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const EXAMPLE_PROMPTS = [
-  { text: 'Create a mobile app about bolt.diy' },
+  { text: 'Create a mobile app idea generator' },
   { text: 'Build a todo app in React using Tailwind' },
   { text: 'Build a simple blog using Astro' },
   { text: 'Create a cookie consent form using Material UI' },

app/components/header/Header.tsx

@@ -4,6 +4,7 @@ import { chatStore } from '~/lib/stores/chat';
 import { classNames } from '~/utils/classNames';
 import { HeaderActionButtons } from './HeaderActionButtons.client';
 import { ChatDescription } from '~/lib/persistence/ChatDescription.client';
+import { SlateWordmark } from './SlateWordmark';
 
 export function Header() {
   const chat = useStore(chatStore);
@@ -17,10 +18,8 @@ export function Header() {
     >
       <div className="flex items-center gap-2 z-logo text-bolt-elements-textPrimary cursor-pointer">
         <div className="i-ph:sidebar-simple-duotone text-xl" />
-        <a href="/" className="text-2xl font-semibold text-accent flex items-center">
-          {/* <span className="i-bolt:logo-text?mask w-[46px] inline-block" /> */}
-          <img src="/logo-light-styled.png" alt="logo" className="w-[90px] inline-block dark:hidden" />
-          <img src="/logo-dark-styled.png" alt="logo" className="w-[90px] inline-block hidden dark:block" />
+        <a href="/" className="text-2xl font-semibold flex items-center text-bolt-elements-textPrimary">
+          <SlateWordmark className="h-8 w-auto" />
         </a>
       </div>
       {chat.started && ( // Display ChatDescription and HeaderActionButtons only when the chat has started.

app/components/header/HeaderActionButtons.client.tsx

@@ -77,7 +77,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
             onClick={() => setIsDropdownOpen(!isDropdownOpen)}
             className="px-4 hover:bg-bolt-elements-item-backgroundActive flex items-center gap-2"
           >
-            {isDeploying ? `Deploying to ${deployingTo}...` : 'Deploy'}
+            {isDeploying ? `Launching to ${deployingTo}...` : 'Launch'}
             <div
               className={classNames('i-ph:caret-down w-4 h-4 transition-transform', isDropdownOpen ? 'rotate-180' : '')}
             />

app/components/header/SlateWordmark.tsx

@@ -0,0 +1,20 @@
+export function SlateWordmark({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 132 28"
+      aria-label="Slate"
+      className={className}
+    >
+      <defs>
+        <linearGradient id="slate-mark-grad" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0%" stopColor="#FF1F8F" />
+          <stop offset="100%" stopColor="#00D4FF" />
+        </linearGradient>
+      </defs>
+      <rect x="0" y="2" width="24" height="24" rx="6" fill="url(#slate-mark-grad)" />
+      <path d="M7.5 18.2c0 1.6 1.4 2.6 3.4 2.6 1.9 0 3.3-.9 3.3-2.4 0-1.4-1-2-2.7-2.4l-1.3-.3c-2-.4-3.5-1.5-3.5-3.6 0-2.4 2-4.1 4.9-4.1 2.8 0 4.7 1.5 4.8 3.9h-2.2c-.1-1.3-1.1-2-2.6-2-1.5 0-2.5.7-2.5 1.9 0 1.1.9 1.7 2.5 2l1.3.3c2.3.5 3.7 1.6 3.7 3.8 0 2.6-2 4.3-5.2 4.3-3 0-5.1-1.5-5.2-4z" fill="#FFFFFF"/>
+      <text x="32" y="22" font-family="Inter, system-ui, -apple-system, Segoe UI, sans-serif" font-weight="700" font-size="22" fill="currentColor" letter-spacing="-0.5">Slate</text>
+    </svg>
+  );
+}

app/routes/_index.tsx

@@ -6,13 +6,13 @@ import { Header } from '~/components/header/Header';
 import BackgroundRays from '~/components/ui/BackgroundRays';
 
 export const meta: MetaFunction = () => {
-  return [{ title: 'Bolt' }, { name: 'description', content: 'Talk with Bolt, an AI assistant from StackBlitz' }];
+  return [{ title: 'Slate — AI App Builder' }, { name: 'description', content: 'Slate — build and launch apps with AI.' }];
 };
 
 export const loader = () => json({});
 
 /**
- * Landing page component for Bolt
+ * Landing page component for Slate
  * Note: Settings functionality should ONLY be accessed through the sidebar menu.
  * Do not add settings button/panel to this landing page as it was intentionally removed
  * to keep the UI clean and consistent with the design system.

app/routes/git.tsx

@@ -7,7 +7,7 @@ import { Header } from '~/components/header/Header';
 import BackgroundRays from '~/components/ui/BackgroundRays';
 
 export const meta: MetaFunction = () => {
-  return [{ title: 'Bolt' }, { name: 'description', content: 'Talk with Bolt, an AI assistant from StackBlitz' }];
+  return [{ title: 'Bolt' }, { name: 'description', content: 'Talk with Slate, an AI assistant from StackBlitz' }];
 };
 
 export async function loader(args: LoaderFunctionArgs) {