style(ui): align screens with design-system anti-boilerplate

Replace raw zinc/indigo/violet Tailwind with semantic tokens. Remove
rounded-full from builder toolbar, badges, and icon buttons; keep
flow handles circular. Use pointer-scoped hover classes for cards,
bento reveals, and canvas node chrome. Auth/canvas fallback gradients
use background and primary mix.

Co-authored-by: Adrianno Esnarriaga <adriannoes@users.noreply.github.com>

Author: cursoragent

src/app/login/login-client.tsx

@@ -15,7 +15,7 @@ export function LoginClient() {
     <div className="bg-background relative flex min-h-screen items-center justify-center overflow-hidden p-4">
       <Suspense
         fallback={
-          <div className="absolute inset-0 bg-gradient-to-br from-zinc-950 via-indigo-950/20 to-zinc-950" />
+          <div className="from-background via-primary/10 to-background absolute inset-0 bg-gradient-to-br" />
         }
       >
         <CanvasBg />

src/app/signup/signup-client.tsx

@@ -15,7 +15,7 @@ export function SignupClient() {
     <div className="bg-background relative flex min-h-screen items-center justify-center overflow-hidden p-4">
       <Suspense
         fallback={
-          <div className="absolute inset-0 bg-gradient-to-br from-zinc-950 via-indigo-950/20 to-zinc-950" />
+          <div className="from-background via-primary/10 to-background absolute inset-0 bg-gradient-to-br" />
         }
       >
         <CanvasBg />

src/components/agents-dashboard.tsx

@@ -106,20 +106,20 @@ export function AgentsDashboard() {
             {agents.map((agent) => (
               <Card
                 key={agent.id}
-                className="group border-border/80 hover:border-primary/20 hover-lift transition-all duration-300"
+                className="group border-border/80 hover-border-primary-soft hover-lift transition-all duration-300"
               >
                 <CardHeader className="pb-3">
                   <div className="flex items-start justify-between">
                     <div className="flex items-center gap-3">
-                      <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-indigo-500/20 bg-indigo-500/10">
-                        <Bot className="h-5 w-5 text-indigo-300" />
+                      <div className="border-primary/20 bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg border">
+                        <Bot className="text-primary h-5 w-5" />
                       </div>
                       <div>
                         <CardTitle className="text-lg">{agent.name}</CardTitle>
                         <p className="text-muted-foreground mt-0.5 text-xs">{agent.model}</p>
                       </div>
                     </div>
-                    <div className="flex items-center gap-1 opacity-100 transition-opacity duration-300 md:opacity-0 md:group-hover:opacity-100">
+                    <div className="flex items-center gap-1 opacity-100 transition-opacity duration-300 md:opacity-0 md-group-hover-reveal-if-pointer">
                       <Button variant="ghost" size="icon" asChild title="Run Agent">
                         <Link href={`/runs?agentId=${agent.id}`}>
                           <Play className="h-4 w-4" />

src/components/builder/builder-canvas.tsx

@@ -805,12 +805,12 @@ function BuilderCanvasInner() {
               <h1 className="truncate text-sm font-semibold tracking-tight">
                 {workflow?.name || "Untitled Workflow"}
               </h1>
-              <span className="border-border/80 bg-muted/40 text-muted-foreground rounded-full border px-2 py-0.5 text-[10px] font-medium">
+              <span className="border-border/80 bg-muted/40 text-muted-foreground rounded-md border px-2 py-0.5 text-[10px] font-medium">
                 v{workflow?.version || 1}
               </span>
             </div>
 
-            <div className="border-border/80 bg-background/70 ml-auto flex max-w-full items-center gap-1.5 overflow-x-auto rounded-full border p-1">
+            <div className="border-border/80 bg-background/70 ml-auto flex max-w-full items-center gap-1.5 overflow-x-auto rounded-xl border p-1">
               <ExportImportDialog
                 workflowId={workflowId}
                 onImportSuccess={(newWorkflow) => {
@@ -827,7 +827,7 @@ function BuilderCanvasInner() {
               <Button
                 variant="ghost"
                 size="icon"
-                className="hover:bg-accent h-8 w-8 rounded-full"
+                className="hover:bg-accent h-8 w-8 rounded-md"
                 onClick={handleUndo}
                 disabled={!historyStatus?.canUndo}
                 aria-label="Undo"
@@ -838,7 +838,7 @@ function BuilderCanvasInner() {
               <Button
                 variant="ghost"
                 size="icon"
-                className="hover:bg-accent h-8 w-8 rounded-full"
+                className="hover:bg-accent h-8 w-8 rounded-md"
                 onClick={handleRedo}
                 disabled={!historyStatus?.canRedo}
                 aria-label="Redo"
@@ -850,7 +850,7 @@ function BuilderCanvasInner() {
               <Button
                 variant="ghost"
                 size="icon"
-                className="hover:bg-accent h-8 w-8 rounded-full"
+                className="hover:bg-accent h-8 w-8 rounded-md"
                 onClick={handleAutoLayout}
                 title="Auto Layout"
                 aria-label="Auto Layout"
@@ -860,7 +860,7 @@ function BuilderCanvasInner() {
               <Button
                 variant="ghost"
                 size="icon"
-                className="hover:bg-accent h-8 w-8 rounded-full"
+                className="hover:bg-accent h-8 w-8 rounded-md"
                 onClick={handleZoomOut}
                 aria-label="Zoom out"
                 title="Zoom out"
@@ -876,7 +876,7 @@ function BuilderCanvasInner() {
               <Button
                 variant="ghost"
                 size="icon"
-                className="hover:bg-accent h-8 w-8 rounded-full"
+                className="hover:bg-accent h-8 w-8 rounded-md"
                 onClick={handleZoomIn}
                 aria-label="Zoom in"
                 title="Zoom in"
@@ -886,7 +886,7 @@ function BuilderCanvasInner() {
               <Button
                 variant="ghost"
                 size="icon"
-                className="hover:bg-accent h-8 w-8 rounded-full"
+                className="hover:bg-accent h-8 w-8 rounded-md"
                 onClick={handleResetView}
                 aria-label="Fit view"
                 title="Fit view"
@@ -897,7 +897,7 @@ function BuilderCanvasInner() {
               <Button
                 variant="ghost"
                 size="icon"
-                className="hover:bg-accent h-8 w-8 rounded-full"
+                className="hover:bg-accent h-8 w-8 rounded-md"
                 onClick={() => setShowVersionHistory(!showVersionHistory)}
                 aria-label="Version history"
                 title="Version history"
@@ -907,13 +907,13 @@ function BuilderCanvasInner() {
               <Button
                 variant="outline"
                 size="sm"
-                className="ml-1 h-8 gap-2 rounded-full border-indigo-500/20 bg-indigo-500/10 text-indigo-300 hover:bg-indigo-500/20"
+                className="border-primary/20 bg-primary/10 text-primary hover:bg-primary/20 ml-1 h-8 gap-2 rounded-md"
                 onClick={() => setShowExecutionMonitor(!showExecutionMonitor)}
               >
                 <Play className="h-3.5 w-3.5" />
                 {showExecutionMonitor ? "Close" : "Run"}
               </Button>
-              <Button size="sm" className="h-8 gap-2 rounded-full" onClick={handleSaveVersion}>
+              <Button size="sm" className="h-8 gap-2 rounded-md" onClick={handleSaveVersion}>
                 <Save className="h-3.5 w-3.5" />
                 Save
               </Button>

src/components/builder/canvas-node.tsx

@@ -40,57 +40,57 @@ const NODE_COLORS: Record<NodeType, { bg: string; iconBg: string; border: string
   {
     start: {
       bg: "bg-card/95",
-      iconBg: "bg-indigo-500/10",
+      iconBg: "bg-primary/10",
       border: "border-border/80",
-      icon: "text-indigo-300",
+      icon: "text-primary",
     },
     end: {
       bg: "bg-card/95",
-      iconBg: "bg-violet-500/10",
+      iconBg: "bg-primary/15",
       border: "border-border/80",
-      icon: "text-violet-300",
+      icon: "text-primary",
     },
     agent: {
       bg: "bg-card/95",
-      iconBg: "bg-indigo-400/15",
+      iconBg: "bg-primary/15",
       border: "border-border/80",
-      icon: "text-indigo-200",
+      icon: "text-primary",
     },
     guardrail: {
       bg: "bg-card/95",
-      iconBg: "bg-zinc-500/10",
+      iconBg: "bg-muted/50",
       border: "border-border/80",
-      icon: "text-zinc-300",
+      icon: "text-muted-foreground",
     },
     condition: {
       bg: "bg-card/95",
-      iconBg: "bg-violet-500/10",
+      iconBg: "bg-primary/15",
       border: "border-border/80",
-      icon: "text-violet-300",
+      icon: "text-primary",
     },
     mcp: {
       bg: "bg-card/95",
-      iconBg: "bg-violet-400/15",
+      iconBg: "bg-primary/15",
       border: "border-border/80",
-      icon: "text-violet-200",
+      icon: "text-primary",
     },
     "user-approval": {
       bg: "bg-card/95",
-      iconBg: "bg-zinc-500/10",
+      iconBg: "bg-muted/50",
       border: "border-border/80",
-      icon: "text-zinc-300",
+      icon: "text-muted-foreground",
     },
     "file-search": {
       bg: "bg-card/95",
-      iconBg: "bg-indigo-400/15",
+      iconBg: "bg-primary/15",
       border: "border-border/80",
-      icon: "text-indigo-200",
+      icon: "text-primary",
     },
     frame: {
       bg: "bg-card/95",
-      iconBg: "bg-zinc-500/10",
+      iconBg: "bg-muted/50",
       border: "border-border/80",
-      icon: "text-zinc-300",
+      icon: "text-muted-foreground",
     },
   }
 
@@ -122,7 +122,7 @@ export function CanvasNode({ data, selected, type: nodeTypeProp }: WorkflowNodeP
         "border",
         colors.bg,
         colors.border,
-        "hover:border-primary/40",
+        "hover-border-primary-medium",
         selected ? "ring-primary/40 z-10 ring-2" : "",
         isHighlighted && "ring-primary/60 ring-2",
         "cursor-grab active:cursor-grabbing",
@@ -149,15 +149,15 @@ export function CanvasNode({ data, selected, type: nodeTypeProp }: WorkflowNodeP
               "relative flex-shrink-0 rounded-xl p-2.5 transition-all duration-500 ease-out",
               colors.iconBg,
               "ring-border/80 ring-1 ring-inset",
-              selected ? "scale-105" : "group-hover:scale-105",
+              selected ? "scale-105" : "group-hover-scale-105-if-pointer",
             )}
           >
             {Icon && (
               <Icon
                 className={cn(
                   "h-5 w-5 transition-transform duration-500",
                   colors.icon,
-                  selected ? "scale-110" : "group-hover:scale-110",
+                  selected ? "scale-110" : "group-hover-scale-110-if-pointer",
                 )}
               />
             )}
@@ -184,7 +184,7 @@ export function CanvasNode({ data, selected, type: nodeTypeProp }: WorkflowNodeP
               <Button
                 variant="ghost"
                 size="icon"
-                className="nodrag nopan border-border/80 bg-background/80 text-muted-foreground hover:border-destructive hover:bg-destructive/80 h-7 w-7 rounded-full border transition-all duration-200 hover:scale-105 hover:text-white"
+                className="nodrag nopan border-border/80 bg-background/80 text-muted-foreground hover:border-destructive hover:bg-destructive/80 h-7 w-7 rounded-md border transition-all duration-200 hover-scale-105-if-pointer hover:text-white"
                 onClick={(e) => {
                   e.stopPropagation()
                   handleDelete()
@@ -200,11 +200,11 @@ export function CanvasNode({ data, selected, type: nodeTypeProp }: WorkflowNodeP
 
         {nodeType === "agent" && data?.model && (
           <div className="mt-4 flex items-center gap-2 pt-1">
-            <span className="rounded-full border border-indigo-500/20 bg-indigo-500/10 px-2.5 py-1 text-[11px] font-medium text-indigo-300">
+            <span className="border-primary/20 bg-primary/10 text-primary rounded-md border px-2.5 py-1 text-[11px] font-medium">
               {data.model}
             </span>
             {data.tools && data.tools.length > 0 && (
-              <span className="border-border/80 bg-muted/30 text-muted-foreground/80 rounded-full border px-2.5 py-1 text-[11px] font-medium">
+              <span className="border-border/80 bg-muted/30 text-muted-foreground/80 rounded-md border px-2.5 py-1 text-[11px] font-medium">
                 {data.tools.length} tool{data.tools.length !== 1 ? "s" : ""}
               </span>
             )}
@@ -213,7 +213,7 @@ export function CanvasNode({ data, selected, type: nodeTypeProp }: WorkflowNodeP
 
         {nodeType === "guardrail" && data?.guardrailType && (
           <div className="mt-4 pt-1">
-            <span className="inline-block rounded-full border border-zinc-500/20 bg-zinc-500/10 px-2.5 py-1 text-[11px] font-medium text-zinc-300">
+            <span className="border-border bg-muted/40 text-muted-foreground inline-block rounded-md border px-2.5 py-1 text-[11px] font-medium">
               {data.guardrailType}
             </span>
           </div>

src/components/builder/execution-monitor.tsx

@@ -47,12 +47,12 @@ function JsonViewer({ data }: { data: unknown }) {
         title="Copy JSON"
       >
         {copied ? (
-          <CheckCircle2 className="h-3 w-3 text-emerald-500" />
+          <CheckCircle2 className="text-chart-2 h-3 w-3" />
         ) : (
           <Copy className="h-3 w-3" />
         )}
       </Button>
-      <pre className="bg-muted overflow-x-auto rounded p-2 text-xs text-indigo-900 dark:text-indigo-200">
+      <pre className="bg-muted text-foreground overflow-x-auto rounded p-2 text-xs">
         {jsonStr}
       </pre>
     </div>
@@ -96,30 +96,30 @@ export function ExecutionMonitor({
   const getLogIcon = (type: ExecutionLog["type"]) => {
     switch (type) {
       case "success":
-        return <CheckCircle2 className="h-4 w-4 text-emerald-500" />
+        return <CheckCircle2 className="text-chart-2 h-4 w-4" />
       case "error":
-        return <XCircle className="h-4 w-4 text-rose-500" />
+        return <XCircle className="text-destructive h-4 w-4" />
       case "info":
-        return <ChevronRight className="h-4 w-4 text-indigo-300" />
+        return <ChevronRight className="text-primary h-4 w-4" />
       case "tool-call":
-        return <Play className="h-4 w-4 text-violet-300" />
+        return <Play className="text-primary h-4 w-4" />
       case "tool-result":
-        return <CheckCircle2 className="h-4 w-4 text-indigo-300" />
+        return <CheckCircle2 className="text-primary h-4 w-4" />
     }
   }
 
   const getStatusBadge = (status: WorkflowExecution["status"]) => {
     switch (status) {
       case "running":
         return (
-          <div className="flex items-center gap-1.5 rounded border border-violet-500/20 bg-violet-500/10 px-2 py-1 text-xs font-medium text-violet-300">
+          <div className="border-primary/30 bg-primary/15 text-primary flex items-center gap-1.5 rounded border px-2 py-1 text-xs font-medium">
             <Loader2 className="h-3 w-3 animate-spin" />
             Running
           </div>
         )
       case "completed":
         return (
-          <div className="flex items-center gap-1.5 rounded border border-indigo-500/20 bg-indigo-500/10 px-2 py-1 text-xs font-medium text-indigo-300">
+          <div className="border-primary/20 bg-primary/10 text-primary flex items-center gap-1.5 rounded border px-2 py-1 text-xs font-medium">
             <CheckCircle2 className="h-3 w-3" />
             Completed
           </div>
@@ -133,7 +133,7 @@ export function ExecutionMonitor({
         )
       case "paused":
         return (
-          <div className="flex items-center gap-1.5 rounded border border-violet-500/20 bg-violet-500/10 px-2 py-1 text-xs font-medium text-violet-300">
+          <div className="border-primary/30 bg-primary/15 text-primary flex items-center gap-1.5 rounded border px-2 py-1 text-xs font-medium">
             <Pause className="h-3 w-3" />
             Paused
           </div>

src/components/builder/node-properties-panel.tsx

@@ -105,8 +105,8 @@ export function NodePropertiesPanel({
         variant="outline"
         size="icon"
         className={cn(
-          "border-border/80 bg-card text-muted-foreground absolute top-4 -left-4 z-50 h-8 w-8 rounded-full border",
-          "hover:text-foreground transition-all duration-300 hover:scale-110",
+          "border-border/80 bg-card text-muted-foreground absolute top-4 -left-4 z-50 h-8 w-8 rounded-md border",
+          "hover:text-foreground transition-all duration-300 hover-scale-110-if-pointer",
         )}
         onClick={onToggle}
         aria-label={isOpen ? "Close properties panel" : "Open properties panel"}
@@ -310,7 +310,7 @@ export function NodePropertiesPanel({
             </>
           ) : (
             <div className="flex flex-1 flex-col items-center justify-center p-6 text-center">
-              <div className="border-border/80 bg-muted/30 mb-4 rounded-full border p-4">
+              <div className="border-border/80 bg-muted/30 mb-4 rounded-xl border p-4">
                 <Settings2 className="text-muted-foreground/40 h-8 w-8" />
               </div>
               <h3 className="text-foreground mb-1 font-medium tracking-tight">No Node Selected</h3>