diff --git a/package-lock.json b/package-lock.json
index 50cb6cf..5b04349 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "haggly",
       "version": "0.1.0",
       "dependencies": {
+        "lucide-react": "^1.12.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -2465,6 +2466,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.12.0.tgz",
+      "integrity": "sha512-rTKR3RN6HIAxdNZALoPvqxd64vjL9nTThU0JF9q1Qg8yUnmo1r+d8baN72YNVK3RGxUmzBzbd77IWJq/fkm+Xw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
diff --git a/package.json b/package.json
index fc2feb6..87b8eae 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lucide-react": "^1.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/src/components/BrandMark.jsx b/src/components/BrandMark.jsx
new file mode 100644
index 0000000..63982ab
--- /dev/null
+++ b/src/components/BrandMark.jsx
@@ -0,0 +1,19 @@
+import { MessageCircleMore } from 'lucide-react'
+
+function BrandMark({ compact = false }) {
+  return (
+    <div className="inline-flex items-center gap-3">
+      <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-700 text-white shadow-sm shadow-primary-900/20">
+        <MessageCircleMore className="h-5 w-5" aria-hidden="true" />
+      </span>
+      <span>
+        <span className="block text-2xl font-bold leading-none tracking-normal text-stone-950">Haggly</span>
+        {!compact && (
+          <span className="mt-1 block text-sm font-medium text-stone-500">AI negotiation workspace</span>
+        )}
+      </span>
+    </div>
+  )
+}
+
+export default BrandMark
diff --git a/src/components/CopyButton.jsx b/src/components/CopyButton.jsx
index 56a65b1..ee6b930 100644
--- a/src/components/CopyButton.jsx
+++ b/src/components/CopyButton.jsx
@@ -1,4 +1,6 @@
 import { useState } from 'react'
+import { Check, Copy } from 'lucide-react'
+import Button from './ui/Button'
 
 function CopyButton({ text, onCopy }) {
   const [copied, setCopied] = useState(false)
@@ -35,33 +37,23 @@ function CopyButton({ text, onCopy }) {
   }
 
   return (
-    <button
+    <Button
       onClick={handleCopy}
-      className={`
-        flex items-center gap-2 px-4 py-2 rounded-lg font-medium text-sm
-        transition-all duration-200 active:scale-95
-        ${copied 
-          ? 'bg-green-100 text-green-700 border-2 border-green-200' 
-          : 'bg-primary-100 text-primary-700 border-2 border-primary-200 hover:bg-primary-200'
-        }
-      `}
+      variant={copied ? 'primary' : 'muted'}
+      size="sm"
     >
       {copied ? (
         <>
-          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-          </svg>
+          <Check className="h-4 w-4" aria-hidden="true" />
           Copied!
         </>
       ) : (
         <>
-          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
-          </svg>
+          <Copy className="h-4 w-4" aria-hidden="true" />
           Copy
         </>
       )}
-    </button>
+    </Button>
   )
 }
 
diff --git a/src/components/InputForm.jsx b/src/components/InputForm.jsx
index c1d876d..b393f7b 100644
--- a/src/components/InputForm.jsx
+++ b/src/components/InputForm.jsx
@@ -1,4 +1,6 @@
 import { useState } from 'react'
+import { LoaderCircle, Sparkles } from 'lucide-react'
+import Button from './ui/Button'
 
 function InputForm({ onGenerate, isGenerating }) {
   const [formData, setFormData] = useState({
@@ -59,23 +61,22 @@ function InputForm({ onGenerate, isGenerating }) {
   }
 
   const inputClasses = (fieldName) => `
-    w-full px-4 py-3 rounded-xl border-2 transition-all duration-200
+    w-full rounded-lg border px-4 py-3 transition-all duration-200
     ${errors[fieldName] 
       ? 'border-red-300 bg-red-50 focus:border-red-500 focus:ring-red-500/20' 
-      : 'border-gray-200 bg-gray-50 focus:border-primary-500 focus:bg-white focus:ring-primary-500/20'
+      : 'border-stone-200 bg-stone-50 focus:border-primary-500 focus:bg-white focus:ring-primary-500/20'
     }
     focus:ring-4 focus:outline-none
-    placeholder:text-gray-400
+    placeholder:text-stone-400
   `
 
-  const labelClasses = "block text-sm font-medium text-gray-700 mb-1.5"
+  const labelClasses = "block text-sm font-semibold text-stone-700 mb-1.5"
 
   return (
     <form onSubmit={handleSubmit} className="space-y-5">
-      {/* Item Name */}
       <div>
         <label htmlFor="item" className={labelClasses}>
-          What are you selling? 📦
+          What are you selling?
         </label>
         <input
           type="text"
@@ -88,19 +89,17 @@ function InputForm({ onGenerate, isGenerating }) {
           autoComplete="off"
         />
         {errors.item && (
-          <p className="text-red-500 text-sm mt-1">{errors.item}</p>
+          <p className="text-red-600 text-sm mt-1">{errors.item}</p>
         )}
       </div>
 
-      {/* Price Inputs Grid */}
-      <div className="grid grid-cols-2 gap-4">
-        {/* Asking Price */}
+      <div className="grid gap-4 sm:grid-cols-2">
         <div>
           <label htmlFor="askingPrice" className={labelClasses}>
-            Your asking price 💰
+            Your asking price
           </label>
           <div className="relative">
-            <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 font-medium">
+            <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-stone-400 font-medium">
               $
             </span>
             <input
@@ -116,17 +115,16 @@ function InputForm({ onGenerate, isGenerating }) {
             />
           </div>
           {errors.askingPrice && (
-            <p className="text-red-500 text-sm mt-1">{errors.askingPrice}</p>
+            <p className="text-red-600 text-sm mt-1">{errors.askingPrice}</p>
           )}
         </div>
 
-        {/* Their Offer */}
         <div>
           <label htmlFor="theirOffer" className={labelClasses}>
-            Their offer 🤔
+            Their offer
           </label>
           <div className="relative">
-            <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 font-medium">
+            <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-stone-400 font-medium">
               $
             </span>
             <input
@@ -142,19 +140,18 @@ function InputForm({ onGenerate, isGenerating }) {
             />
           </div>
           {errors.theirOffer && (
-            <p className="text-red-500 text-sm mt-1">{errors.theirOffer}</p>
+            <p className="text-red-600 text-sm mt-1">{errors.theirOffer}</p>
           )}
         </div>
       </div>
 
-      {/* Minimum Price (Optional) */}
       <div>
         <label htmlFor="minimumPrice" className={labelClasses}>
           Your minimum acceptable price 
-          <span className="text-gray-400 font-normal ml-1">(optional)</span>
+          <span className="text-stone-400 font-normal ml-1">(optional)</span>
         </label>
         <div className="relative">
-          <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 font-medium">
+          <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-stone-400 font-medium">
             $
           </span>
           <input
@@ -170,41 +167,31 @@ function InputForm({ onGenerate, isGenerating }) {
           />
         </div>
         {errors.minimumPrice && (
-          <p className="text-red-500 text-sm mt-1">{errors.minimumPrice}</p>
+          <p className="text-red-600 text-sm mt-1">{errors.minimumPrice}</p>
         )}
-        <p className="text-gray-400 text-xs mt-1">
+        <p className="text-stone-400 text-xs mt-1">
           The lowest you'd go before walking away
         </p>
       </div>
 
-      {/* Submit Button */}
-      <button
+      <Button
         type="submit"
         disabled={isGenerating}
-        className={`
-          w-full py-4 px-6 rounded-xl font-semibold text-white text-lg
-          transition-all duration-200 
-          ${isGenerating 
-            ? 'bg-primary-400 cursor-not-allowed' 
-            : 'bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:scale-[0.98] shadow-lg shadow-primary-500/30 hover:shadow-xl hover:shadow-primary-500/40'
-          }
-        `}
+        size="lg"
+        className="w-full"
       >
         {isGenerating ? (
           <span className="flex items-center justify-center gap-2">
-            <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
-              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
-              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-            </svg>
+            <LoaderCircle className="h-5 w-5 animate-spin" aria-hidden="true" />
             Generating...
           </span>
         ) : (
           <span className="flex items-center justify-center gap-2">
-            <span>✨</span>
+            <Sparkles className="h-5 w-5" aria-hidden="true" />
             Generate Responses
           </span>
         )}
-      </button>
+      </Button>
     </form>
   )
 }
diff --git a/src/components/ResponseCard.jsx b/src/components/ResponseCard.jsx
index e2812bb..059c196 100644
--- a/src/components/ResponseCard.jsx
+++ b/src/components/ResponseCard.jsx
@@ -1,24 +1,27 @@
 import CopyButton from './CopyButton'
 
-function ResponseCard({ tone, emoji, message, description, onCopy, delay = 0 }) {
+function ResponseCard({ tone, message, description, onCopy, delay = 0 }) {
   const toneColors = {
     friendly: {
-      bg: 'bg-emerald-50',
-      border: 'border-emerald-200',
-      badge: 'bg-emerald-100 text-emerald-700',
-      accent: 'text-emerald-600'
+      bg: 'bg-primary-50',
+      border: 'border-primary-100',
+      badge: 'bg-primary-100 text-primary-800',
+      accent: 'text-primary-700',
+      dot: 'bg-primary-500',
     },
     firm: {
       bg: 'bg-amber-50',
-      border: 'border-amber-200',
-      badge: 'bg-amber-100 text-amber-700',
-      accent: 'text-amber-600'
+      border: 'border-amber-100',
+      badge: 'bg-amber-100 text-amber-800',
+      accent: 'text-amber-800',
+      dot: 'bg-amber-500',
     },
     casual: {
-      bg: 'bg-sky-50',
-      border: 'border-sky-200',
-      badge: 'bg-sky-100 text-sky-700',
-      accent: 'text-sky-600'
+      bg: 'bg-stone-50',
+      border: 'border-stone-200',
+      badge: 'bg-stone-200 text-stone-800',
+      accent: 'text-stone-600',
+      dot: 'bg-stone-500',
     }
   }
 
@@ -27,30 +30,27 @@ function ResponseCard({ tone, emoji, message, description, onCopy, delay = 0 })
   return (
     <div 
       className={`
-        ${colors.bg} ${colors.border} border-2 rounded-2xl p-5 
+        ${colors.bg} ${colors.border} rounded-lg border p-5
         card-hover animate-slide-up
       `}
       style={{ animationDelay: `${delay}ms` }}
     >
-      {/* Header */}
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2">
-          <span className="text-xl">{emoji}</span>
-          <span className={`px-3 py-1 rounded-full text-sm font-semibold ${colors.badge}`}>
+          <span className={`h-2.5 w-2.5 rounded-full ${colors.dot}`} />
+          <span className={`rounded-full px-3 py-1 text-sm font-semibold ${colors.badge}`}>
             {tone}
           </span>
         </div>
         <CopyButton text={message} onCopy={onCopy} />
       </div>
 
-      {/* Message */}
-      <div className="bg-white/70 rounded-xl p-4 border border-white">
-        <p className="text-gray-800 leading-relaxed whitespace-pre-wrap">
+      <div className="border-l-2 border-current/20 pl-4">
+        <p className="text-stone-800 leading-relaxed whitespace-pre-wrap">
           {message}
         </p>
       </div>
 
-      {/* Description */}
       {description && (
         <p className={`mt-3 text-sm ${colors.accent}`}>
           {description}
diff --git a/src/components/Toast.jsx b/src/components/Toast.jsx
index 438964d..7a790c8 100644
--- a/src/components/Toast.jsx
+++ b/src/components/Toast.jsx
@@ -1,3 +1,5 @@
+import { Check } from 'lucide-react'
+
 function Toast({ message }) {
   if (!message) {
     return null
@@ -5,10 +7,8 @@ function Toast({ message }) {
 
   return (
     <div className="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 animate-slide-up">
-      <div className="bg-green-600 text-white px-6 py-3 rounded-full shadow-lg flex items-center gap-2">
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-        </svg>
+      <div className="bg-primary-800 text-white px-5 py-3 rounded-full shadow-lg shadow-primary-900/20 flex items-center gap-2">
+        <Check className="h-4 w-4" aria-hidden="true" />
         {message}
       </div>
     </div>
diff --git a/src/components/ui/Button.jsx b/src/components/ui/Button.jsx
new file mode 100644
index 0000000..4f4ec8e
--- /dev/null
+++ b/src/components/ui/Button.jsx
@@ -0,0 +1,40 @@
+const variantClasses = {
+  primary: 'bg-primary-700 text-white hover:bg-primary-800 shadow-sm shadow-primary-900/15',
+  secondary: 'border border-primary-200 bg-white text-primary-900 hover:border-primary-300 hover:bg-primary-50',
+  ghost: 'text-primary-800 hover:bg-primary-50',
+  muted: 'bg-primary-50 text-primary-800 hover:bg-primary-100',
+}
+
+const sizeClasses = {
+  sm: 'h-9 px-3 text-sm',
+  md: 'h-11 px-4 text-sm',
+  lg: 'min-h-14 px-5 py-3 text-base',
+}
+
+function Button({
+  children,
+  className = '',
+  variant = 'primary',
+  size = 'md',
+  type = 'button',
+  ...props
+}) {
+  return (
+    <button
+      type={type}
+      className={[
+        'inline-flex items-center justify-center gap-2 rounded-lg font-semibold transition',
+        'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+        'disabled:cursor-not-allowed disabled:opacity-65',
+        variantClasses[variant],
+        sizeClasses[size],
+        className,
+      ].join(' ')}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default Button
diff --git a/src/components/ui/Surface.jsx b/src/components/ui/Surface.jsx
new file mode 100644
index 0000000..f332c09
--- /dev/null
+++ b/src/components/ui/Surface.jsx
@@ -0,0 +1,9 @@
+function Surface({ children, className = '' }) {
+  return (
+    <div className={`rounded-lg border border-stone-200 bg-white shadow-sm shadow-stone-900/5 ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+export default Surface
diff --git a/src/index.css b/src/index.css
index ba5cea1..0f58651 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,17 +8,17 @@
 }
 
 ::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: #f4f1ea;
   border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #c084fc;
+  background: #83d9a8;
   border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #a855f7;
+  background: #17824d;
 }
 
 /* Smooth transitions */
@@ -29,8 +29,6 @@
 /* Better focus states */
 input:focus, button:focus {
   outline: none;
-  ring: 2px;
-  ring-color: #a855f7;
 }
 
 /* Toast animation */
@@ -55,7 +53,7 @@ input:focus, button:focus {
 
 /* Gradient text helper */
 .gradient-text {
-  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
+  background: linear-gradient(135deg, #17824d 0%, #0d442c 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -68,7 +66,7 @@ input:focus, button:focus {
 
 .card-hover:hover {
   transform: translateY(-2px);
-  box-shadow: 0 10px 25px -5px rgba(147, 51, 234, 0.2);
+  box-shadow: 0 10px 25px -5px rgba(18, 103, 63, 0.18);
 }
 
 /* Input styling overrides */
diff --git a/src/pages/BuyerPage.jsx b/src/pages/BuyerPage.jsx
index ba3a7d2..6d1af91 100644
--- a/src/pages/BuyerPage.jsx
+++ b/src/pages/BuyerPage.jsx
@@ -1,56 +1,47 @@
+import { ArrowLeft, BadgeQuestionMark, Car, MessageSquareText, Search } from 'lucide-react'
+import BrandMark from '../components/BrandMark'
+import Button from '../components/ui/Button'
+
 function BuyerPage({ onBack }) {
+  const upcomingTools = [
+    { icon: Search, label: 'Question builder' },
+    { icon: MessageSquareText, label: 'Response scripts' },
+    { icon: BadgeQuestionMark, label: 'Deal check' },
+    { icon: Car, label: 'Car buying mode' },
+  ]
+
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50">
-      <header className="pt-8 pb-6 px-4">
-        <div className="max-w-lg mx-auto text-center">
-          <div className="flex items-center justify-center gap-3 mb-4">
-            <button
-              onClick={onBack}
-              className="absolute left-4 top-8 text-blue-600 hover:text-blue-700 text-sm font-medium"
-            >
-              ← Back
-            </button>
-            <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/30">
-              <span className="text-2xl">🛒</span>
-            </div>
-            <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">Haggly</h1>
-          </div>
-          <p className="text-gray-600 text-lg">
-            Buyer Tools - Coming Soon!
+    <div className="min-h-screen bg-[#f7faf5] px-4 py-6 text-stone-950 sm:px-6 lg:px-8">
+      <header className="mx-auto flex max-w-5xl items-center justify-between">
+        <BrandMark compact />
+        <Button onClick={onBack} variant="ghost" size="sm">
+          <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+          Back
+        </Button>
+      </header>
+
+      <main className="mx-auto max-w-3xl py-10">
+        <div className="mb-6">
+          <p className="text-sm font-semibold uppercase tracking-[0.18em] text-primary-700">
+            Buyer workspace
+          </p>
+          <h1 className="mt-3 text-4xl font-bold tracking-normal text-stone-950 sm:text-5xl">
+            Buyer tools are next in line.
+          </h1>
+          <p className="mt-4 max-w-2xl text-lg leading-8 text-stone-600">
+            This screen is ready for the buyer chat flow once the mock chat layer is added.
           </p>
         </div>
-      </header>
 
-      <main className="px-4 pb-12">
-        <div className="max-w-lg mx-auto">
-          <div className="bg-white rounded-2xl shadow-xl shadow-gray-200/50 p-8 text-center">
-            <div className="text-6xl mb-6">🚧</div>
-            <h2 className="text-2xl font-bold text-gray-800 mb-4">Coming Very Soon!</h2>
-            <p className="text-gray-600 mb-6">
-              We're building amazing buyer tools including:
-            </p>
-            <ul className="text-left text-gray-600 space-y-2 mb-8">
-              <li className="flex items-center gap-3">
-                <span className="text-green-500">✓</span>
-                Strategic questioning techniques
-              </li>
-              <li className="flex items-center gap-3">
-                <span className="text-green-500">✓</span>
-                Negotiation scripts for different scenarios
-              </li>
-              <li className="flex items-center gap-3">
-                <span className="text-green-500">✓</span>
-                "Guard down" moment detection
-              </li>
-              <li className="flex items-center gap-3">
-                <span className="text-green-500">✓</span>
-                Car buying specific strategies
-              </li>
-            </ul>
-            <p className="text-sm text-gray-500">
-              For now, try our seller tools or check back soon!
-            </p>
-          </div>
+        <div className="grid gap-3 sm:grid-cols-2">
+          {upcomingTools.map(({ icon: Icon, label }) => (
+            <div key={label} className="flex items-center gap-3 rounded-lg border border-stone-200 bg-white p-4 shadow-sm shadow-stone-900/5">
+              <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-primary-800">
+                <Icon className="h-5 w-5" aria-hidden="true" />
+              </span>
+              <span className="font-semibold text-stone-800">{label}</span>
+            </div>
+          ))}
         </div>
       </main>
     </div>
diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
index d5f1932..4bd01f9 100644
--- a/src/pages/LandingPage.jsx
+++ b/src/pages/LandingPage.jsx
@@ -1,36 +1,91 @@
+import { ArrowRight, ShoppingBag, Tag } from 'lucide-react'
+import BrandMark from '../components/BrandMark'
+import Button from '../components/ui/Button'
+import Surface from '../components/ui/Surface'
+
 function LandingPage({ onSelectUserType }) {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-purple-600 via-blue-600 to-purple-700 flex items-center justify-center p-4">
-      <div className="text-center max-w-2xl mx-auto">
-        <div className="mb-8">
-          <h1 className="text-6xl font-bold text-white mb-4 drop-shadow-lg">💬 Haggly</h1>
-          <p className="text-xl text-purple-100 font-light">Your AI-powered negotiation assistant</p>
-        </div>
-
-        <h2 className="text-3xl font-semibold text-white mb-12">Are you buying or selling?</h2>
-
-        <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
-          <button
-            onClick={() => onSelectUserType('seller')}
-            className="w-full sm:w-64 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-semibold py-6 px-8 rounded-2xl text-xl shadow-2xl transform hover:scale-105 transition-all duration-300 flex items-center justify-center gap-3"
-          >
-            <span className="text-2xl">📤</span>
-            I'm Selling
-          </button>
-
-          <button
-            onClick={() => onSelectUserType('buyer')}
-            className="w-full sm:w-64 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold py-6 px-8 rounded-2xl text-xl shadow-2xl transform hover:scale-105 transition-all duration-300 flex items-center justify-center gap-3"
-          >
-            <span className="text-2xl">🛒</span>
-            I'm Buying
-          </button>
-        </div>
-
-        <p className="text-purple-200 mt-12 text-lg">
-          Get personalized scripts and strategies for any negotiation
-        </p>
-      </div>
+    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,#d9f7e4_0,#f7faf5_34%,#f4f1ea_100%)] px-4 py-6 text-stone-950 sm:px-6 lg:px-8">
+      <main className="mx-auto flex min-h-[calc(100vh-3rem)] max-w-6xl flex-col">
+        <header className="flex items-center justify-between">
+          <BrandMark />
+          <span className="rounded-full border border-primary-200 bg-white/75 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-primary-800">
+            v2 preview
+          </span>
+        </header>
+
+        <section className="grid flex-1 items-center gap-8 py-10 lg:grid-cols-[1.05fr_0.95fr] lg:py-14">
+          <div className="max-w-2xl">
+            <p className="mb-4 text-sm font-semibold uppercase tracking-[0.18em] text-primary-700">
+              No-login negotiation workspace
+            </p>
+            <h1 className="text-5xl font-bold leading-[1.02] tracking-normal text-stone-950 sm:text-6xl">
+              Start the next message with a clearer plan.
+            </h1>
+            <p className="mt-5 max-w-xl text-lg leading-8 text-stone-600">
+              Pick a side, add the deal context, and draft a response you can send with confidence.
+            </p>
+
+            <div className="mt-8 grid gap-3 sm:grid-cols-2">
+              <Button
+                onClick={() => onSelectUserType('seller')}
+                size="lg"
+                className="w-full justify-between"
+              >
+                <span className="flex items-center gap-3">
+                  <Tag className="h-5 w-5" aria-hidden="true" />
+                  I'm selling
+                </span>
+                <ArrowRight className="h-5 w-5" aria-hidden="true" />
+              </Button>
+
+              <Button
+                onClick={() => onSelectUserType('buyer')}
+                variant="secondary"
+                size="lg"
+                className="w-full justify-between"
+              >
+                <span className="flex items-center gap-3">
+                  <ShoppingBag className="h-5 w-5" aria-hidden="true" />
+                  I'm buying
+                </span>
+                <ArrowRight className="h-5 w-5" aria-hidden="true" />
+              </Button>
+            </div>
+          </div>
+
+          <Surface className="p-5 sm:p-6">
+            <div className="mb-5 flex items-center justify-between border-b border-stone-200 pb-4">
+              <div>
+                <p className="text-sm font-semibold text-stone-950">Workspace preview</p>
+                <p className="mt-1 text-sm text-stone-500">Local, fast, and ready for the AI chat layer.</p>
+              </div>
+              <span className="rounded-full bg-primary-100 px-3 py-1 text-xs font-semibold text-primary-800">
+                no login
+              </span>
+            </div>
+
+            <div className="space-y-5">
+              <div className="border-l-2 border-primary-200 pl-4">
+                <p className="text-xs font-semibold uppercase tracking-[0.16em] text-stone-500">Current focus</p>
+                <p className="mt-2 text-lg font-semibold text-stone-950">Marketplace counter offer</p>
+                <p className="mt-2 text-sm leading-6 text-stone-600">
+                  Generate a firm but fair response, keep the tone calm, and move toward pickup details.
+                </p>
+              </div>
+
+              <div className="grid gap-3 border-t border-stone-200 pt-4 sm:grid-cols-3">
+                {['Context', 'Drafts', 'Outcome'].map((label) => (
+                  <div key={label}>
+                    <p className="text-sm font-semibold text-primary-900">{label}</p>
+                    <p className="mt-1 h-1.5 rounded-full bg-primary-200" />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Surface>
+        </section>
+      </main>
     </div>
   )
 }
diff --git a/src/pages/SellerPage.jsx b/src/pages/SellerPage.jsx
index 6748b17..fc51b98 100644
--- a/src/pages/SellerPage.jsx
+++ b/src/pages/SellerPage.jsx
@@ -1,58 +1,60 @@
+import { ArrowLeft, Lightbulb, RotateCcw } from 'lucide-react'
+import BrandMark from '../components/BrandMark'
 import InputForm from '../components/InputForm'
 import ResponseCard from '../components/ResponseCard'
 import Toast from '../components/Toast'
+import Button from '../components/ui/Button'
+import Surface from '../components/ui/Surface'
 
 function SellerPage({ responses, toast, isGenerating, onBack, onGenerate, onReset, onCopy }) {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-green-50">
+    <div className="min-h-screen bg-[#f7faf5] px-4 py-6 text-stone-950 sm:px-6 lg:px-8">
       <Toast message={toast} />
 
-      <header className="pt-8 pb-6 px-4">
-        <div className="max-w-lg mx-auto text-center">
-          <button
-            onClick={onBack}
-            className="absolute left-4 top-8 text-green-600 hover:text-green-700 text-sm font-medium"
-          >
-            ← Back
-          </button>
-
-          <div className="flex items-center justify-center gap-3 mb-4">
-            <div className="w-12 h-12 bg-gradient-to-br from-green-500 to-green-700 rounded-xl flex items-center justify-center shadow-lg shadow-green-500/30">
-              <span className="text-2xl">📤</span>
-            </div>
-            <h1 className="text-4xl font-bold bg-gradient-to-r from-green-600 to-green-700 bg-clip-text text-transparent">Haggly</h1>
-          </div>
+      <header className="mx-auto flex max-w-5xl items-center justify-between">
+        <BrandMark compact />
+        <Button onClick={onBack} variant="ghost" size="sm">
+          <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+          Back
+        </Button>
+      </header>
 
-          <p className="text-gray-600 text-lg">
-            Generate perfect responses for marketplace negotiations
+      <main className="mx-auto grid max-w-5xl gap-8 py-10 lg:grid-cols-[0.9fr_1.1fr]">
+        <section>
+          <p className="text-sm font-semibold uppercase tracking-[0.18em] text-primary-700">
+            Seller workspace
           </p>
-          <p className="text-gray-400 text-sm mt-1">
-            Never freeze up when someone lowballs you again
+          <h1 className="mt-3 text-4xl font-bold tracking-normal text-stone-950 sm:text-5xl">
+            Turn an offer into a clear reply.
+          </h1>
+          <p className="mt-4 text-lg leading-8 text-stone-600">
+            Add the numbers, keep the boundary, and generate three response styles.
           </p>
-        </div>
-      </header>
 
-      <main className="px-4 pb-12">
-        <div className="max-w-lg mx-auto">
-          <div className="bg-white rounded-2xl shadow-xl shadow-gray-200/50 p-6 mb-8">
+          <div className="mt-8 text-sm text-stone-500">
+            <p className="font-semibold text-stone-800">Current mode</p>
+            <p className="mt-2 leading-6">Template responses now. Chat and local dashboard are the next slices.</p>
+          </div>
+        </section>
+
+        <section>
+          <Surface className="mb-6 p-5 sm:p-6">
             <InputForm
               onGenerate={onGenerate}
               isGenerating={isGenerating}
             />
-          </div>
+          </Surface>
 
           {responses && (
             <div id="results" className="space-y-4 animate-fade-in">
-              <div className="flex items-center justify-between">
+              <div className="flex items-center justify-between gap-4">
                 <h2 className="text-xl font-semibold text-gray-800">
                   Your Responses
                 </h2>
-                <button
-                  onClick={onReset}
-                  className="text-sm text-green-600 hover:text-green-700 font-medium"
-                >
-                  ← New negotiation
-                </button>
+                <Button onClick={onReset} variant="ghost" size="sm">
+                  <RotateCcw className="h-4 w-4" aria-hidden="true" />
+                  New
+                </Button>
               </div>
 
               <p className="text-gray-500 text-sm">
@@ -63,7 +65,6 @@ function SellerPage({ responses, toast, isGenerating, onBack, onGenerate, onRese
                 <ResponseCard
                   key={index}
                   tone={response.tone}
-                  emoji={response.emoji}
                   message={response.message}
                   description={response.description}
                   onCopy={() => onCopy('Copied to clipboard!')}
@@ -71,13 +72,14 @@ function SellerPage({ responses, toast, isGenerating, onBack, onGenerate, onRese
                 />
               ))}
 
-              <div className="mt-8 p-4 bg-green-50 rounded-xl border border-green-100">
-                <h3 className="font-semibold text-green-800 mb-2 flex items-center gap-2">
-                  <span>💡</span> Quick Tips
+              <div className="mt-8 rounded-lg border border-primary-100 bg-primary-50 p-4">
+                <h3 className="font-semibold text-primary-900 mb-2 flex items-center gap-2">
+                  <Lightbulb className="h-4 w-4" aria-hidden="true" />
+                  Quick tips
                 </h3>
-                <ul className="text-sm text-green-700 space-y-1">
-                  <li>• Be polite but firm — you set the price for a reason</li>
-                  <li>• It's okay to say no — good buyers respect fair prices</li>
+                <ul className="text-sm text-primary-800 space-y-1">
+                  <li>• Be polite but firm because you set the price for a reason</li>
+                  <li>• It's okay to say no because good buyers respect fair prices</li>
                   <li>• Don't take lowballs personally, just part of the game</li>
                 </ul>
               </div>
@@ -85,16 +87,15 @@ function SellerPage({ responses, toast, isGenerating, onBack, onGenerate, onRese
           )}
 
           {!responses && (
-            <div className="text-center py-8 text-gray-400">
-              <div className="text-5xl mb-4">💬</div>
-              <p>Fill in the details above to generate responses</p>
+            <div className="rounded-lg border border-dashed border-stone-300 bg-white/60 py-10 text-center text-stone-400">
+              <p>Responses will appear here.</p>
             </div>
           )}
-        </div>
+        </section>
       </main>
 
-      <footer className="text-center py-6 text-gray-400 text-sm">
-        <p>Made with 💜 for marketplace sellers everywhere</p>
+      <footer className="mx-auto max-w-5xl pb-6 text-sm text-stone-400">
+        <p>Haggly v2 preview</p>
       </footer>
     </div>
   )
diff --git a/tailwind.config.js b/tailwind.config.js
index 54328b8..f1e6c96 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,18 +7,17 @@ export default {
   theme: {
     extend: {
       colors: {
-        // Fun purple palette
         primary: {
-          50: '#faf5ff',
-          100: '#f3e8ff',
-          200: '#e9d5ff',
-          300: '#d8b4fe',
-          400: '#c084fc',
-          500: '#a855f7',
-          600: '#9333ea',
-          700: '#7c3aed',
-          800: '#6b21a8',
-          900: '#581c87',
+          50: '#effcf4',
+          100: '#d9f7e4',
+          200: '#b7edcc',
+          300: '#83d9a8',
+          400: '#4fbe80',
+          500: '#259f5f',
+          600: '#17824d',
+          700: '#12673f',
+          800: '#105234',
+          900: '#0d442c',
         }
       },
       fontFamily: {