From 06f31cc20255110c18abf23c5ffdaca18b942a61 Mon Sep 17 00:00:00 2001
From: Madeleine Charity <madeleine@privy.io>
Date: Mon, 23 Feb 2026 12:10:21 -0500
Subject: [PATCH] Update x402 agent demo to use Privy design language

Migrate the x402 agent demo from ad-hoc violet/offblack color scheme to
the canonical Privy design system extracted from privy-next-starter.

- Replace violet (#8B5CF6) with Privy primary (#5B4FFF)
- Replace offblack (#0f0f10) buttons with #5B4FFF/#4A3EE6
- Standardize borders to #E2E3F0, highlight bgs to #E0E7FF
- Add .button-primary, .button-outline, .button classes to globals.css
- Load Inter font via next/font/google
- Update CLAUDE.md styling conventions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Committed-By-Agent: claude
---
 examples/privy-next-x402-agent-demo/CLAUDE.md |   9 +-
 .../app/agent/[id]/fund/page.tsx              |  78 ++++----
 .../app/agent/[id]/page.tsx                   |  26 +--
 .../app/agent/[id]/policy/page.tsx            |  36 ++--
 .../app/globals.css                           | 175 +++++++-----------
 .../privy-next-x402-agent-demo/app/layout.tsx |   9 +-
 .../privy-next-x402-agent-demo/app/page.tsx   |  69 ++++---
 .../components/ActionCard.tsx                 |   8 +-
 .../components/AgentCard.tsx                  |  12 +-
 .../components/StepIndicator.tsx              |  10 +-
 10 files changed, 198 insertions(+), 234 deletions(-)

diff --git a/examples/privy-next-x402-agent-demo/CLAUDE.md b/examples/privy-next-x402-agent-demo/CLAUDE.md
index 81b7401..99f7a19 100644
--- a/examples/privy-next-x402-agent-demo/CLAUDE.md
+++ b/examples/privy-next-x402-agent-demo/CLAUDE.md
@@ -163,9 +163,12 @@ NEXT_PUBLIC_BASE_URL=http://localhost:3000
 
 ## Styling Conventions
 
-- Uses Privy brand colors: violet (`#8B5CF6`), offblack (`#0f0f10`)
-- Tailwind for layout and spacing
-- Card-based UI with subtle shadows and hover effects
+- Uses Privy brand colors: primary (`#5B4FFF`), hover (`#4A3EE6`), active (`#3F35D9`)
+- Borders: `#E2E3F0`, highlight backgrounds: `#E0E7FF`, code/info backgrounds: `#F1F2F9`
+- Three button classes defined in globals.css: `.button-primary`, `.button-outline`, `.button`
+- Font: Inter via `next/font/google`
+- Tailwind CSS v4 for layout and spacing
+- Card-based UI with rounded-2xl corners and subtle hover effects
 
 ## API Route Patterns
 
diff --git a/examples/privy-next-x402-agent-demo/app/agent/[id]/fund/page.tsx b/examples/privy-next-x402-agent-demo/app/agent/[id]/fund/page.tsx
index cf197d1..dda66d5 100644
--- a/examples/privy-next-x402-agent-demo/app/agent/[id]/fund/page.tsx
+++ b/examples/privy-next-x402-agent-demo/app/agent/[id]/fund/page.tsx
@@ -1,9 +1,9 @@
-'use client';
+"use client";
 
-import { useEffect, useState } from 'react';
-import { useRouter, useParams } from 'next/navigation';
-import { Logo } from '@/components/Logo';
-import { StepIndicator, WIZARD_STEPS } from '@/components/StepIndicator';
+import { useEffect, useState } from "react";
+import { useRouter, useParams } from "next/navigation";
+import { Logo } from "@/components/Logo";
+import { StepIndicator, WIZARD_STEPS } from "@/components/StepIndicator";
 
 interface Agent {
   id: string;
@@ -20,9 +20,9 @@ interface Agent {
 }
 
 const FUNDING_OPTIONS = [
-  { amount: 0.10, label: '$0.10', description: 'Light usage' },
-  { amount: 0.50, label: '$0.50', description: 'Recommended' },
-  { amount: 1, label: '$1', description: 'Heavy usage' },
+  { amount: 0.1, label: "$0.10", description: "Light usage" },
+  { amount: 0.5, label: "$0.50", description: "Recommended" },
+  { amount: 1, label: "$1", description: "Heavy usage" },
 ];
 
 export default function FundStep() {
@@ -34,14 +34,14 @@ export default function FundStep() {
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    const storedAgent = sessionStorage.getItem('agent');
+    const storedAgent = sessionStorage.getItem("agent");
     if (!storedAgent) {
-      router.push('/');
+      router.push("/");
       return;
     }
     const parsedAgent = JSON.parse(storedAgent);
     if (parsedAgent.id !== params.id) {
-      router.push('/');
+      router.push("/");
       return;
     }
     setAgent(parsedAgent);
@@ -54,9 +54,9 @@ export default function FundStep() {
     setError(null);
 
     try {
-      const response = await fetch('/api/agent/fund', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+      const response = await fetch("/api/agent/fund", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           walletAddress: agent.wallet.address,
           amount: selectedAmount,
@@ -66,7 +66,7 @@ export default function FundStep() {
       const data = await response.json();
 
       if (!data.success) {
-        throw new Error(data.error || 'Failed to fund wallet');
+        throw new Error(data.error || "Failed to fund wallet");
       }
 
       // Update agent balance (convert USD to cents)
@@ -74,12 +74,12 @@ export default function FundStep() {
         ...agent,
         balance: agent.balance + selectedAmount * 100,
       };
-      sessionStorage.setItem('agent', JSON.stringify(updatedAgent));
+      sessionStorage.setItem("agent", JSON.stringify(updatedAgent));
 
       // Navigate to policy step
       router.push(`/agent/${agent.id}/policy`);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fund wallet');
+      setError(err instanceof Error ? err.message : "Failed to fund wallet");
       setIsLoading(false);
     }
   };
@@ -87,7 +87,7 @@ export default function FundStep() {
   if (!agent) {
     return (
       <div className="flex min-h-screen items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-slate-200 border-t-violet-500" />
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-[#E2E3F0] border-t-[#5B4FFF]" />
       </div>
     );
   }
@@ -95,7 +95,7 @@ export default function FundStep() {
   return (
     <div className="min-h-screen">
       {/* Header */}
-      <header className="border-b border-slate-200 bg-white/80 backdrop-blur-sm">
+      <header className="border-b border-[#E2E3F0] bg-white">
         <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
           <Logo className="text-slate-900" />
           <div className="flex items-center gap-4">
@@ -103,7 +103,7 @@ export default function FundStep() {
               href="https://docs.privy.io"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm text-slate-600 hover:text-slate-900"
+              className="text-sm text-[#5B4FFF]"
             >
               Docs
             </a>
@@ -111,7 +111,7 @@ export default function FundStep() {
               href="https://docs.privy.io/recipes/x402"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm text-slate-600 hover:text-slate-900"
+              className="text-sm text-[#5B4FFF]"
             >
               x402 →
             </a>
@@ -124,7 +124,7 @@ export default function FundStep() {
         <StepIndicator currentStep={2} steps={WIZARD_STEPS} />
 
         <div className="text-center">
-          <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-violet-500">
+          <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-[#5B4FFF]">
             <svg
               className="h-8 w-8 text-white"
               fill="none"
@@ -147,9 +147,9 @@ export default function FundStep() {
         </div>
 
         {/* Wallet info */}
-        <div className="mt-8 rounded-2xl border border-slate-200 bg-white p-6">
+        <div className="mt-8 rounded-2xl border border-[#E2E3F0] bg-white p-6">
           <div className="flex items-center gap-4">
-            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-slate-800">
+            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[#5B4FFF]">
               <svg
                 className="h-6 w-6 text-white"
                 fill="none"
@@ -167,7 +167,8 @@ export default function FundStep() {
             <div>
               <div className="font-semibold text-slate-900">Agent Wallet</div>
               <div className="font-mono text-sm text-slate-500">
-                {agent.wallet.address.slice(0, 6)}...{agent.wallet.address.slice(-4)}
+                {agent.wallet.address.slice(0, 6)}...
+                {agent.wallet.address.slice(-4)}
               </div>
             </div>
           </div>
@@ -185,18 +186,22 @@ export default function FundStep() {
                 onClick={() => setSelectedAmount(option.amount)}
                 className={`relative rounded-2xl border-2 p-6 text-center transition-all ${
                   selectedAmount === option.amount
-                    ? 'border-violet-500 bg-violet-50 shadow-lg'
-                    : 'border-slate-200 bg-white hover:border-slate-300 hover:shadow-md'
+                    ? "border-[#5B4FFF] bg-[#E0E7FF] shadow-lg"
+                    : "border-[#E2E3F0] bg-white hover:border-gray-300 hover:shadow-md"
                 }`}
               >
-                {option.description === 'Recommended' && (
-                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-violet-500 px-3 py-1 text-xs font-semibold text-white">
+                {option.description === "Recommended" && (
+                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-[#5B4FFF] px-3 py-1 text-xs font-semibold text-white">
                     Popular
                   </div>
                 )}
-                <div className="text-3xl font-bold text-slate-900">{option.label}</div>
+                <div className="text-3xl font-bold text-slate-900">
+                  {option.label}
+                </div>
                 <div className="mt-1 text-sm text-slate-500">USDC</div>
-                <div className="mt-2 text-xs text-slate-400">{option.description}</div>
+                <div className="mt-2 text-xs text-slate-400">
+                  {option.description}
+                </div>
               </button>
             ))}
           </div>
@@ -211,15 +216,15 @@ export default function FundStep() {
         {/* Actions */}
         <div className="mt-8 flex gap-4">
           <button
-            onClick={() => router.push('/')}
-            className="flex-1 rounded-xl border border-slate-200 px-6 py-4 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
+            onClick={() => router.push("/")}
+            className="flex-1 rounded-xl border border-[#E2E3F0] px-6 py-4 text-sm font-medium text-slate-700 transition-colors hover:bg-gray-50"
           >
             Back
           </button>
           <button
             onClick={handleFund}
             disabled={!selectedAmount || isLoading}
-            className="flex-1 rounded-xl bg-offblack px-6 py-4 text-sm font-medium text-white transition-all hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-50"
+            className="flex-1 rounded-xl bg-[#5B4FFF] px-6 py-4 text-sm font-medium text-white transition-all hover:bg-[#4A3EE6] disabled:cursor-not-allowed disabled:opacity-50"
           >
             {isLoading ? (
               <span className="flex items-center justify-center gap-2">
@@ -249,11 +254,6 @@ export default function FundStep() {
             )}
           </button>
         </div>
-
-        {/* Info note */}
-        <p className="mt-6 text-center text-xs text-slate-500">
-          Funds are transferred from a demo treasury. No real USDC is involved.
-        </p>
       </main>
     </div>
   );
diff --git a/examples/privy-next-x402-agent-demo/app/agent/[id]/page.tsx b/examples/privy-next-x402-agent-demo/app/agent/[id]/page.tsx
index 87c2c5c..a9b09d7 100644
--- a/examples/privy-next-x402-agent-demo/app/agent/[id]/page.tsx
+++ b/examples/privy-next-x402-agent-demo/app/agent/[id]/page.tsx
@@ -113,7 +113,7 @@ export default function ActionsStep() {
   if (!agent) {
     return (
       <div className="flex min-h-screen items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-slate-200 border-t-violet-500" />
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-[#E2E3F0] border-t-[#5B4FFF]" />
       </div>
     );
   }
@@ -121,7 +121,7 @@ export default function ActionsStep() {
   return (
     <div className="min-h-screen">
       {/* Header */}
-      <header className="border-b border-slate-200 bg-white/80 backdrop-blur-sm">
+      <header className="border-b border-[#E2E3F0] bg-white">
         <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
           <button
             onClick={() => router.push('/')}
@@ -134,7 +134,7 @@ export default function ActionsStep() {
               href="https://docs.privy.io"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm text-slate-600 hover:text-slate-900"
+              className="text-sm text-[#5B4FFF]"
             >
               Docs
             </a>
@@ -142,7 +142,7 @@ export default function ActionsStep() {
               href="https://docs.privy.io/recipes/x402"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm text-slate-600 hover:text-slate-900"
+              className="text-sm text-[#5B4FFF]"
             >
               x402 →
             </a>
@@ -197,13 +197,13 @@ export default function ActionsStep() {
           )}
 
           {/* How it works */}
-          <div className="rounded-2xl border border-slate-200 bg-white p-6">
+          <div className="rounded-2xl border border-[#E2E3F0] bg-white p-6">
             <h2 className="mb-4 text-lg font-semibold text-slate-900">
               How it works
             </h2>
             <div className="space-y-3 text-sm text-slate-600">
               <div className="flex gap-3">
-                <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-violet-500 text-xs font-bold text-white">
+                <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-[#5B4FFF] text-xs font-bold text-white">
                   1
                 </div>
                 <p>
@@ -221,7 +221,7 @@ export default function ActionsStep() {
                 </p>
               </div>
               <div className="flex gap-3">
-                <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-violet-500 text-xs font-bold text-white">
+                <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-[#5B4FFF] text-xs font-bold text-white">
                   2
                 </div>
                 <p>
@@ -238,14 +238,14 @@ export default function ActionsStep() {
                 </p>
               </div>
               <div className="flex gap-3">
-                <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-violet-500 text-xs font-bold text-white">
+                <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-[#5B4FFF] text-xs font-bold text-white">
                   3
                 </div>
                 <p>
                   Payments use the{' '}
                   <a
                     href="https://x402.org"
-                    className="font-medium text-violet-600 hover:underline"
+                    className="font-medium text-[#5B4FFF] hover:underline"
                   >
                     x402 protocol
                   </a>{' '}
@@ -263,7 +263,7 @@ export default function ActionsStep() {
                 sessionStorage.removeItem('agent');
                 router.push('/');
               }}
-              className="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-6 py-3 text-sm font-medium text-slate-700 shadow-sm transition-all hover:border-slate-300 hover:shadow-md"
+              className="inline-flex items-center gap-2 rounded-xl border border-[#E2E3F0] bg-white px-6 py-3 text-sm font-medium text-slate-700 transition-all hover:border-gray-300 hover:shadow-md"
             >
               <svg
                 className="h-4 w-4"
@@ -285,19 +285,19 @@ export default function ActionsStep() {
       </main>
 
       {/* Footer */}
-      <footer className="border-t border-slate-200 bg-white/50 py-6 mt-12">
+      <footer className="border-t border-[#E2E3F0] bg-white/50 py-6 mt-12">
         <div className="mx-auto max-w-6xl px-6 text-center text-sm text-slate-500">
           Built with{' '}
           <a
             href="https://privy.io"
-            className="font-medium text-violet-600 hover:underline"
+            className="font-medium text-[#5B4FFF] hover:underline"
           >
             Privy
           </a>{' '}
           and{' '}
           <a
             href="https://x402.org"
-            className="font-medium text-violet-600 hover:underline"
+            className="font-medium text-[#5B4FFF] hover:underline"
           >
             x402
           </a>
diff --git a/examples/privy-next-x402-agent-demo/app/agent/[id]/policy/page.tsx b/examples/privy-next-x402-agent-demo/app/agent/[id]/policy/page.tsx
index 0cedb8d..5a03e57 100644
--- a/examples/privy-next-x402-agent-demo/app/agent/[id]/policy/page.tsx
+++ b/examples/privy-next-x402-agent-demo/app/agent/[id]/policy/page.tsx
@@ -97,14 +97,14 @@ export default function PolicyStep() {
     }
   };
 
-  const currentLimit = useCustom 
+  const currentLimit = useCustom
     ? Math.round(parseFloat(customLimit) * 100) || 0
     : selectedLimit;
 
   if (!agent) {
     return (
       <div className="flex min-h-screen items-center justify-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-slate-200 border-t-violet-500" />
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-[#E2E3F0] border-t-[#5B4FFF]" />
       </div>
     );
   }
@@ -112,7 +112,7 @@ export default function PolicyStep() {
   return (
     <div className="min-h-screen">
       {/* Header */}
-      <header className="border-b border-slate-200 bg-white/80 backdrop-blur-sm">
+      <header className="border-b border-[#E2E3F0] bg-white">
         <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
           <Logo className="text-slate-900" />
           <div className="flex items-center gap-4">
@@ -120,7 +120,7 @@ export default function PolicyStep() {
               href="https://docs.privy.io"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm text-slate-600 hover:text-slate-900"
+              className="text-sm text-[#5B4FFF]"
             >
               Docs
             </a>
@@ -128,7 +128,7 @@ export default function PolicyStep() {
               href="https://docs.privy.io/recipes/x402"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm text-slate-600 hover:text-slate-900"
+              className="text-sm text-[#5B4FFF]"
             >
               x402 →
             </a>
@@ -141,7 +141,7 @@ export default function PolicyStep() {
         <StepIndicator currentStep={3} steps={WIZARD_STEPS} />
 
         <div className="text-center">
-          <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-violet-500">
+          <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-[#5B4FFF]">
             <svg
               className="h-8 w-8 text-white"
               fill="none"
@@ -201,7 +201,7 @@ export default function PolicyStep() {
           <label className="mb-4 block text-sm font-medium text-slate-700">
             Maximum spending per transaction
           </label>
-          
+
           <div className="grid grid-cols-2 gap-4">
             {SPENDING_LIMITS.map((limit) => (
               <button
@@ -212,12 +212,12 @@ export default function PolicyStep() {
                 }}
                 className={`relative rounded-2xl border-2 p-5 text-left transition-all ${
                   !useCustom && selectedLimit === limit.cents
-                    ? 'border-violet-500 bg-violet-50 shadow-lg'
-                    : 'border-slate-200 bg-white hover:border-slate-300 hover:shadow-md'
+                    ? 'border-[#5B4FFF] bg-[#E0E7FF] shadow-lg'
+                    : 'border-[#E2E3F0] bg-white hover:border-gray-300 hover:shadow-md'
                 }`}
               >
                 {limit.description === 'Recommended' && (
-                  <div className="absolute -top-3 right-4 rounded-full bg-violet-500 px-3 py-1 text-xs font-semibold text-white">
+                  <div className="absolute -top-3 right-4 rounded-full bg-[#5B4FFF] px-3 py-1 text-xs font-semibold text-white">
                     Default
                   </div>
                 )}
@@ -233,8 +233,8 @@ export default function PolicyStep() {
               onClick={() => setUseCustom(!useCustom)}
               className={`w-full rounded-2xl border-2 p-5 text-left transition-all ${
                 useCustom
-                  ? 'border-violet-500 bg-violet-50 shadow-lg'
-                  : 'border-slate-200 bg-white hover:border-slate-300'
+                  ? 'border-[#5B4FFF] bg-[#E0E7FF] shadow-lg'
+                  : 'border-[#E2E3F0] bg-white hover:border-gray-300'
               }`}
             >
               <div className="flex items-center justify-between">
@@ -259,7 +259,7 @@ export default function PolicyStep() {
             </button>
 
             {useCustom && (
-              <div className="mt-4 rounded-xl border border-slate-200 bg-white p-4">
+              <div className="mt-4 rounded-xl border border-[#E2E3F0] bg-white p-4">
                 <label className="block text-sm font-medium text-slate-700">
                   Enter amount in USD
                 </label>
@@ -274,7 +274,7 @@ export default function PolicyStep() {
                     placeholder="0.00"
                     min="0.01"
                     step="0.01"
-                    className="w-full rounded-xl border border-slate-200 py-3 pl-8 pr-4 text-lg focus:border-violet-500 focus:outline-none focus:ring-2 focus:ring-violet-500/20"
+                    className="w-full rounded-xl border border-[#E2E3F0] py-3 pl-8 pr-4 text-lg focus:border-[#5B4FFF] focus:outline-none focus:ring-2 focus:ring-[#5B4FFF]/20"
                   />
                 </div>
               </div>
@@ -283,7 +283,7 @@ export default function PolicyStep() {
         </div>
 
         {/* Policy preview */}
-        <div className="mt-8 rounded-2xl border border-slate-200 bg-slate-50 p-6">
+        <div className="mt-8 rounded-2xl border border-[#E2E3F0] bg-[#F1F2F9] p-6">
           <h3 className="font-semibold text-slate-900">Policy summary</h3>
           <div className="mt-4 space-y-3">
             <div className="flex items-center gap-3 text-sm">
@@ -360,14 +360,14 @@ export default function PolicyStep() {
           <button
             onClick={() => router.push(`/agent/${agent.id}/fund`)}
             disabled={isUpdating}
-            className="flex-1 rounded-xl border border-slate-200 px-6 py-4 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
+            className="flex-1 rounded-xl border border-[#E2E3F0] px-6 py-4 text-sm font-medium text-slate-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
           >
             Back
           </button>
           <button
             onClick={handleContinue}
             disabled={currentLimit <= 0 || isUpdating}
-            className="flex-1 rounded-xl bg-offblack px-6 py-4 text-sm font-medium text-white transition-all hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-50"
+            className="flex-1 rounded-xl bg-[#5B4FFF] px-6 py-4 text-sm font-medium text-white transition-all hover:bg-[#4A3EE6] disabled:cursor-not-allowed disabled:opacity-50"
           >
             {isUpdating ? (
               <span className="flex items-center justify-center gap-2">
@@ -390,7 +390,7 @@ export default function PolicyStep() {
         <p className="mt-6 text-center text-xs text-slate-500">
           By continuing, you accept the spending policy for your agent.
           {agent.policy.privyPolicyId && (
-            <span className="block mt-1 text-violet-500">
+            <span className="block mt-1 text-[#5B4FFF]">
               Policy enforced by Privy secure enclave
             </span>
           )}
diff --git a/examples/privy-next-x402-agent-demo/app/globals.css b/examples/privy-next-x402-agent-demo/app/globals.css
index f4ebd11..9039b85 100644
--- a/examples/privy-next-x402-agent-demo/app/globals.css
+++ b/examples/privy-next-x402-agent-demo/app/globals.css
@@ -1,68 +1,90 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 :root {
-  /* Primary accent color */
-  --color-primary: #8B5CF6; /* violet-500 */
-  --color-offblack: #0f0f10;
+  --background: #ffffff;
+  --foreground: #171717;
+}
 
-  /* Background colors */
-  --color-background: #ffffff;
-  --color-background-elevated: #f8fafc;
-  
-  /* Text colors */
-  --color-text: #0f172a;
-  --color-text-muted: #64748b;
-  
-  /* Status colors */
-  --color-success: #10b981;
-  --color-warning: #f59e0b;
-  --color-error: #ef4444;
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-inter);
 }
 
 body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, sans-serif;
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
-  min-height: 100vh;
-  color: var(--color-text);
-}
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-inter), Arial, Helvetica, sans-serif;
+}
+
+@layer components {
+  .button-primary {
+    @apply bg-[#5B4FFF] hover:bg-[#4A3EE6] focus:bg-[#4A3EE6] active:bg-[#3F35D9]
+           disabled:bg-gray-300 disabled:cursor-not-allowed
+           text-white font-medium
+           px-4 py-2 rounded-md
+           border border-transparent
+           transition-colors duration-200 ease-in-out
+           focus:outline-none focus:ring-2 focus:ring-[#5B4FFF] focus:ring-offset-2
+           inline-flex items-center justify-center
+           text-sm leading-5 cursor-pointer;
+  }
+
+  .button-outline {
+    @apply flex flex-row items-center
+           px-4 py-2 gap-1 cursor-pointer
+           h-9 rounded-full
+           bg-transparent border border-[#5B4FFF]
+           text-[#5B4FFF] font-medium text-sm leading-tight
+           hover:bg-[#5B4FFF] hover:text-white
+           focus:bg-[#5B4FFF] focus:text-white
+           active:bg-[#4A3EE6]
+           focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2
+           transition-all duration-200 ease-in-out
+           disabled:opacity-50 disabled:cursor-not-allowed;
+  }
 
-/* Custom utility classes */
-@layer utilities {
-  .bg-offblack {
-    background-color: var(--color-offblack);
+  .button {
+    @apply flex flex-row items-center
+           px-3 py-2 gap-3 cursor-pointer
+           bg-white border border-[#E2E3F0] rounded-xl
+           text-[#040217] font-normal text-base leading-6
+           hover:bg-gray-50 hover:border-gray-300
+           focus:bg-gray-50 focus:border-gray-300
+           active:bg-gray-100
+           focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2
+           transition-all duration-200 ease-in-out
+           disabled:opacity-50 disabled:cursor-not-allowed
+           box-border;
   }
 
-  .text-offblack {
-    color: var(--color-offblack);
+  .text-primary {
+    @apply text-[#5B4FFF];
+  }
+  .border-primary {
+    @apply border-[#5B4FFF];
   }
 
-  .gradient-card {
-    background: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 1) 0%,
-      rgba(248, 250, 252, 1) 100%
-    );
+  .loader-overlay {
+    @apply absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center bg-white/30;
+    animation: fade-in 150ms ease-in forwards;
   }
 }
 
 /* Animations */
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
 @keyframes float {
-  0%, 100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
 }
 
 @keyframes pulse-slow {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.7;
-  }
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
 }
 
 .animate-float {
@@ -72,64 +94,3 @@ body {
 .animate-pulse-slow {
   animation: pulse-slow 2s ease-in-out infinite;
 }
-
-/* Card styles */
-.card {
-  background: white;
-  border-radius: 1rem;
-  border: 1px solid #e2e8f0;
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-}
-
-.card-hover {
-  transition: all 0.2s ease;
-}
-
-.card-hover:hover {
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  transform: translateY(-2px);
-}
-
-/* Button base styles */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.75rem 1.5rem;
-  font-weight: 500;
-  font-size: 0.875rem;
-  border-radius: 0.75rem;
-  transition: all 0.15s ease;
-  cursor: pointer;
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn-primary {
-  background-color: var(--color-offblack);
-  color: white;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background-color: #1e1e20;
-}
-
-.btn-secondary {
-  background-color: white;
-  color: var(--color-text);
-  border: 1px solid #e2e8f0;
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background-color: #f8fafc;
-  border-color: #cbd5e1;
-}
-
-/* Focus states */
-*:focus-visible {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-}
diff --git a/examples/privy-next-x402-agent-demo/app/layout.tsx b/examples/privy-next-x402-agent-demo/app/layout.tsx
index 2a87241..4fd143c 100644
--- a/examples/privy-next-x402-agent-demo/app/layout.tsx
+++ b/examples/privy-next-x402-agent-demo/app/layout.tsx
@@ -1,6 +1,13 @@
 import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
 import './globals.css';
 
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  display: 'swap',
+});
+
 export const metadata: Metadata = {
   title: 'x402 Agent Demo | Privy',
   description:
@@ -20,7 +27,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className="antialiased">{children}</body>
+      <body className={`${inter.variable} antialiased`}>{children}</body>
     </html>
   );
 }
diff --git a/examples/privy-next-x402-agent-demo/app/page.tsx b/examples/privy-next-x402-agent-demo/app/page.tsx
index 860ad8e..77d5917 100644
--- a/examples/privy-next-x402-agent-demo/app/page.tsx
+++ b/examples/privy-next-x402-agent-demo/app/page.tsx
@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Logo } from '@/components/Logo';
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Logo } from "@/components/Logo";
 
 export default function Home() {
   const router = useRouter();
@@ -14,23 +14,23 @@ export default function Home() {
     setError(null);
 
     try {
-      const response = await fetch('/api/agent/create', {
-        method: 'POST',
+      const response = await fetch("/api/agent/create", {
+        method: "POST",
       });
 
       const data = await response.json();
 
       if (!data.success) {
-        throw new Error(data.error || 'Failed to create agent');
+        throw new Error(data.error || "Failed to create agent");
       }
 
       // Store agent data in sessionStorage for the wizard
-      sessionStorage.setItem('agent', JSON.stringify(data.agent));
+      sessionStorage.setItem("agent", JSON.stringify(data.agent));
 
       // Navigate to the fund step (step 2 of wizard)
       router.push(`/agent/${data.agent.id}/fund`);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Something went wrong');
+      setError(err instanceof Error ? err.message : "Something went wrong");
       setIsCreating(false);
     }
   };
@@ -38,7 +38,7 @@ export default function Home() {
   return (
     <div className="flex min-h-screen flex-col">
       {/* Header */}
-      <header className="border-b border-slate-200 bg-white/80 backdrop-blur-sm">
+      <header className="border-b border-[#E2E3F0] bg-white">
         <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
           <Logo className="text-slate-900" />
           <div className="flex items-center gap-4">
@@ -46,7 +46,7 @@ export default function Home() {
               href="https://docs.privy.io"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm text-slate-600 hover:text-slate-900"
+              className="text-sm text-[#5B4FFF]"
             >
               Docs
             </a>
@@ -54,7 +54,7 @@ export default function Home() {
               href="https://docs.privy.io/recipes/x402"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm text-slate-600 hover:text-slate-900"
+              className="text-sm text-[#5B4FFF]"
             >
               x402 →
             </a>
@@ -67,7 +67,7 @@ export default function Home() {
         <div className="w-full max-w-2xl text-center">
           {/* Floating Privy icon */}
           <div className="mb-8 flex justify-center">
-            <div className="animate-float rounded-3xl bg-violet-100 p-8">
+            <div className="animate-float rounded-3xl bg-[#E0E7FF] p-8">
               <svg
                 width="80"
                 height="100"
@@ -90,7 +90,7 @@ export default function Home() {
           {/* Title */}
           <h1 className="text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl">
             Agentic wallets
-            <span className="block text-violet-600">protected by Privy</span>
+            <span className="block text-[#5B4FFF]">protected by Privy</span>
           </h1>
 
           {/* Description */}
@@ -102,10 +102,10 @@ export default function Home() {
 
           {/* Features */}
           <div className="mx-auto mt-10 grid max-w-lg grid-cols-3 gap-4 text-center">
-            <div className="rounded-xl bg-white p-4 shadow-sm">
-              <div className="mx-auto mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-violet-100">
+            <div className="rounded-xl bg-white border border-[#E2E3F0] p-4">
+              <div className="mx-auto mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-[#E0E7FF]">
                 <svg
-                  className="h-5 w-5 text-violet-600"
+                  className="h-5 w-5 text-[#5B4FFF]"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -122,10 +122,10 @@ export default function Home() {
                 Secure wallets
               </div>
             </div>
-            <div className="rounded-xl bg-white p-4 shadow-sm">
-              <div className="mx-auto mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-violet-100">
+            <div className="rounded-xl bg-white border border-[#E2E3F0] p-4">
+              <div className="mx-auto mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-[#E0E7FF]">
                 <svg
-                  className="h-5 w-5 text-violet-600"
+                  className="h-5 w-5 text-[#5B4FFF]"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -142,10 +142,10 @@ export default function Home() {
                 Policy controls
               </div>
             </div>
-            <div className="rounded-xl bg-white p-4 shadow-sm">
-              <div className="mx-auto mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-violet-100">
+            <div className="rounded-xl bg-white border border-[#E2E3F0] p-4">
+              <div className="mx-auto mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-[#E0E7FF]">
                 <svg
-                  className="h-5 w-5 text-violet-600"
+                  className="h-5 w-5 text-[#5B4FFF]"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -169,7 +169,7 @@ export default function Home() {
             <button
               onClick={handleCreateAgent}
               disabled={isCreating}
-              className="inline-flex items-center gap-2 rounded-xl bg-offblack px-8 py-4 text-lg font-semibold text-white transition-all hover:bg-slate-800 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-50"
+              className="button-primary rounded-xl px-8 py-4 text-lg font-semibold gap-2"
             >
               {isCreating ? (
                 <>
@@ -211,32 +211,25 @@ export default function Home() {
               )}
             </button>
 
-            {error && (
-              <p className="mt-4 text-sm text-red-600">{error}</p>
-            )}
+            {error && <p className="mt-4 text-sm text-red-600">{error}</p>}
           </div>
-
-          {/* Demo note */}
-          <p className="mt-8 text-xs text-slate-500">
-            This is a demo using testnet USDC. No real funds are involved.
-          </p>
         </div>
       </main>
 
       {/* Footer */}
-      <footer className="border-t border-slate-200 bg-white/50 py-6">
+      <footer className="border-t border-[#E2E3F0] bg-white/50 py-6">
         <div className="mx-auto max-w-6xl px-6 text-center text-sm text-slate-500">
-          Built with{' '}
+          Built with{" "}
           <a
             href="https://privy.io"
-            className="font-medium text-violet-600 hover:underline"
+            className="font-medium text-[#5B4FFF] hover:underline"
           >
             Privy
-          </a>{' '}
-          and{' '}
+          </a>{" "}
+          and{" "}
           <a
             href="https://x402.org"
-            className="font-medium text-violet-600 hover:underline"
+            className="font-medium text-[#5B4FFF] hover:underline"
           >
             x402
           </a>
diff --git a/examples/privy-next-x402-agent-demo/components/ActionCard.tsx b/examples/privy-next-x402-agent-demo/components/ActionCard.tsx
index 8181d61..7097b2f 100644
--- a/examples/privy-next-x402-agent-demo/components/ActionCard.tsx
+++ b/examples/privy-next-x402-agent-demo/components/ActionCard.tsx
@@ -25,7 +25,7 @@ const ACTION_CONFIG: Record<
   weather: {
     title: 'Fetch weather',
     description: 'Get current weather data for your location',
-    bgClass: 'bg-slate-700',
+    bgClass: 'bg-[#5B4FFF]',
     icon: (
       <svg
         className="h-6 w-6"
@@ -45,7 +45,7 @@ const ACTION_CONFIG: Record<
   sweater: {
     title: 'Buy a sweater',
     description: 'Purchase a cozy wool sweater',
-    bgClass: 'bg-slate-500',
+    bgClass: 'bg-[#4A3EE6]',
     icon: (
       <svg
         className="h-6 w-6"
@@ -91,7 +91,7 @@ export function ActionCard({
       className={`rounded-2xl border p-6 transition-all ${
         exceedsLimit
           ? 'border-red-200 bg-red-50'
-          : 'border-slate-200 bg-white hover:border-slate-300 hover:shadow-md'
+          : 'border-[#E2E3F0] bg-white hover:border-gray-300 hover:shadow-md'
       }`}
     >
       <div className="flex items-start justify-between">
@@ -134,7 +134,7 @@ export function ActionCard({
         className={`mt-4 w-full rounded-xl px-4 py-3 text-sm font-medium transition-all ${
           exceedsLimit
             ? 'bg-red-500 text-white hover:bg-red-600'
-            : 'bg-offblack text-white hover:bg-slate-800'
+            : 'bg-[#5B4FFF] text-white hover:bg-[#4A3EE6]'
         } disabled:cursor-not-allowed disabled:opacity-50`}
       >
         {isLoading ? (
diff --git a/examples/privy-next-x402-agent-demo/components/AgentCard.tsx b/examples/privy-next-x402-agent-demo/components/AgentCard.tsx
index 77ba2c9..a5a3f59 100644
--- a/examples/privy-next-x402-agent-demo/components/AgentCard.tsx
+++ b/examples/privy-next-x402-agent-demo/components/AgentCard.tsx
@@ -21,11 +21,11 @@ export function AgentCard({ agent }: AgentCardProps) {
   const truncatedAddress = `${agent.wallet.address.slice(0, 6)}...${agent.wallet.address.slice(-4)}`;
 
   return (
-    <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+    <div className="rounded-2xl border border-[#E2E3F0] bg-white p-6">
       <div className="flex items-start justify-between">
         <div>
           <div className="flex items-center gap-2">
-            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-slate-800">
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#5B4FFF]">
               <svg
                 className="h-5 w-5 text-white"
                 fill="none"
@@ -52,7 +52,7 @@ export function AgentCard({ agent }: AgentCardProps) {
       </div>
 
       <div className="mt-6 space-y-4">
-        <div className="rounded-xl bg-slate-50 p-4">
+        <div className="rounded-xl bg-[#F1F2F9] p-4">
           <div className="text-xs font-medium uppercase tracking-wide text-slate-500">
             Wallet Address
           </div>
@@ -62,7 +62,7 @@ export function AgentCard({ agent }: AgentCardProps) {
         </div>
 
         <div className="grid grid-cols-2 gap-4">
-          <div className="rounded-xl bg-slate-50 p-4">
+          <div className="rounded-xl bg-[#F1F2F9] p-4">
             <div className="text-xs font-medium uppercase tracking-wide text-slate-500">
               Balance
             </div>
@@ -72,7 +72,7 @@ export function AgentCard({ agent }: AgentCardProps) {
             <div className="text-xs text-slate-500">USDC</div>
           </div>
 
-          <div className="rounded-xl bg-slate-50 p-4">
+          <div className="rounded-xl bg-[#F1F2F9] p-4">
             <div className="text-xs font-medium uppercase tracking-wide text-slate-500">
               Spending Limit
             </div>
@@ -82,7 +82,7 @@ export function AgentCard({ agent }: AgentCardProps) {
             <div className="flex items-center gap-1 text-xs text-slate-500">
               per transaction
               {agent.policy.privyPolicyId && (
-                <span className="ml-1 inline-flex items-center gap-1 rounded-full bg-violet-100 px-2 py-0.5 text-[10px] font-medium text-violet-700">
+                <span className="ml-1 inline-flex items-center gap-1 rounded-full bg-[#E0E7FF] px-2 py-0.5 text-[10px] font-medium text-[#5B4FFF]">
                   <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                   </svg>
diff --git a/examples/privy-next-x402-agent-demo/components/StepIndicator.tsx b/examples/privy-next-x402-agent-demo/components/StepIndicator.tsx
index 0e4e3a1..b0cda10 100644
--- a/examples/privy-next-x402-agent-demo/components/StepIndicator.tsx
+++ b/examples/privy-next-x402-agent-demo/components/StepIndicator.tsx
@@ -21,10 +21,10 @@ export function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
                 <div
                   className={`flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold transition-all ${
                     isCompleted
-                      ? 'bg-violet-500 text-white'
+                      ? 'bg-[#5B4FFF] text-white'
                       : isCurrent
-                        ? 'bg-violet-600 text-white ring-4 ring-violet-600/20'
-                        : 'bg-slate-200 text-slate-500'
+                        ? 'bg-[#5B4FFF] text-white ring-4 ring-[#5B4FFF]/20'
+                        : 'bg-[#E2E3F0] text-slate-500'
                   }`}
                 >
                   {isCompleted ? (
@@ -48,7 +48,7 @@ export function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
                 <div className="mt-2 text-center">
                   <div
                     className={`text-xs font-medium ${
-                      isCurrent ? 'text-violet-600' : isCompleted ? 'text-violet-600' : 'text-slate-500'
+                      isCurrent ? 'text-[#5B4FFF]' : isCompleted ? 'text-[#5B4FFF]' : 'text-slate-500'
                     }`}
                   >
                     {step.label}
@@ -60,7 +60,7 @@ export function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
               {index < steps.length - 1 && (
                 <div
                   className={`mx-2 h-0.5 w-12 sm:w-16 transition-all ${
-                    stepNumber < currentStep ? 'bg-violet-500' : 'bg-slate-200'
+                    stepNumber < currentStep ? 'bg-[#5B4FFF]' : 'bg-[#E2E3F0]'
                   }`}
                 />
               )}