@supaku/agentfactory-dashboard 0.5.0 → 0.6.1

package/src/components/sessions/session-list.tsx

@@ -21,7 +21,7 @@ export function SessionList({ onSelect, className }: SessionListProps) {
 
   if (isLoading) {
     return (
-      <div className={cn('space-y-2 p-5', className)}>
+      <div className={cn('space-y-2 p-6', className)}>
         {Array.from({ length: 6 }).map((_, i) => (
           <Skeleton key={i} className="h-14 rounded-lg" />
         ))}
@@ -31,7 +31,7 @@ export function SessionList({ onSelect, className }: SessionListProps) {
 
   if (sessions.length === 0) {
     return (
-      <div className="p-5">
+      <div className="p-6">
         <EmptyState
           title="No sessions"
           description="Agent sessions will appear here once they start."
@@ -41,60 +41,76 @@ export function SessionList({ onSelect, className }: SessionListProps) {
   }
 
   return (
-    <div className={cn('p-5', className)}>
-      <div className="rounded-lg border border-af-surface-border overflow-hidden">
-        <table className="w-full text-sm">
+    <div className={cn('p-6', className)}>
+      <div className="mb-5 flex items-center gap-3">
+        <h2 className="font-display text-lg font-bold text-af-text-primary tracking-tight">
+          Sessions
+        </h2>
+        <span className="rounded-full bg-af-surface/60 px-2 py-0.5 text-2xs font-body font-medium tabular-nums text-af-text-secondary">
+          {sessions.length}
+        </span>
+      </div>
+
+      <div className="rounded-xl border border-af-surface-border/40 overflow-hidden">
+        <table className="w-full text-sm font-body">
           <thead>
-            <tr className="border-b border-af-surface-border bg-af-bg-secondary">
-              <th className="px-4 py-2.5 text-left text-xs font-medium text-af-text-secondary">Issue</th>
-              <th className="px-4 py-2.5 text-left text-xs font-medium text-af-text-secondary">Status</th>
-              <th className="px-4 py-2.5 text-left text-xs font-medium text-af-text-secondary">Type</th>
-              <th className="px-4 py-2.5 text-left text-xs font-medium text-af-text-secondary">Duration</th>
-              <th className="px-4 py-2.5 text-left text-xs font-medium text-af-text-secondary">Cost</th>
-              <th className="px-4 py-2.5 text-left text-xs font-medium text-af-text-secondary">Started</th>
+            <tr className="border-b border-af-surface-border/40 bg-af-bg-secondary/50">
+              <th className="px-4 py-3 text-left text-2xs font-semibold uppercase tracking-wider text-af-text-tertiary">Issue</th>
+              <th className="px-4 py-3 text-left text-2xs font-semibold uppercase tracking-wider text-af-text-tertiary">Status</th>
+              <th className="px-4 py-3 text-left text-2xs font-semibold uppercase tracking-wider text-af-text-tertiary">Type</th>
+              <th className="px-4 py-3 text-left text-2xs font-semibold uppercase tracking-wider text-af-text-tertiary">Duration</th>
+              <th className="px-4 py-3 text-left text-2xs font-semibold uppercase tracking-wider text-af-text-tertiary">Cost</th>
+              <th className="px-4 py-3 text-left text-2xs font-semibold uppercase tracking-wider text-af-text-tertiary">Started</th>
             </tr>
           </thead>
           <tbody>
-            {sessions.map((session) => {
+            {sessions.map((session, i) => {
               const statusConfig = getStatusConfig(session.status)
               const workTypeConfig = getWorkTypeConfig(session.workType)
               return (
                 <tr
                   key={session.id}
-                  className="border-b border-af-surface-border last:border-0 hover:bg-af-surface/50 cursor-pointer transition-colors"
+                  className={cn(
+                    'border-b border-af-surface-border/20 last:border-0 cursor-pointer transition-all duration-200',
+                    'hover:bg-af-surface/30'
+                  )}
                   onClick={() => onSelect?.(session.id)}
+                  style={{ animationDelay: `${i * 30}ms` }}
                 >
-                  <td className="px-4 py-2.5">
+                  <td className="px-4 py-3">
                     <span className="font-mono text-sm text-af-text-primary">{session.identifier}</span>
                   </td>
-                  <td className="px-4 py-2.5">
-                    <div className="flex items-center gap-1.5">
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
                       <StatusDot status={session.status} />
                       <span className={cn('text-xs', statusConfig.textColor)}>
                         {statusConfig.label}
                       </span>
                     </div>
                   </td>
-                  <td className="px-4 py-2.5">
+                  <td className="px-4 py-3">
                     <Badge
                       variant="outline"
-                      className={cn('text-xs', workTypeConfig.bgColor, workTypeConfig.color, 'border-transparent')}
+                      className={cn(
+                        'text-2xs border',
+                        workTypeConfig.bgColor, workTypeConfig.color, workTypeConfig.borderColor
+                      )}
                     >
                       {workTypeConfig.label}
                     </Badge>
                   </td>
-                  <td className="px-4 py-2.5">
+                  <td className="px-4 py-3">
                     <span className="text-xs text-af-text-secondary tabular-nums">
                       {formatDuration(session.duration)}
                     </span>
                   </td>
-                  <td className="px-4 py-2.5">
+                  <td className="px-4 py-3">
                     <span className="text-xs text-af-text-secondary tabular-nums font-mono">
                       {formatCost(session.costUsd)}
                     </span>
                   </td>
-                  <td className="px-4 py-2.5">
-                    <span className="text-xs text-af-text-secondary">
+                  <td className="px-4 py-3">
+                    <span className="text-xs text-af-text-tertiary">
                       {formatRelativeTime(session.startedAt)}
                     </span>
                   </td>

package/src/components/sessions/session-timeline.tsx

@@ -13,42 +13,64 @@ interface SessionTimelineProps {
   className?: string
 }
 
-const typeColors = {
-  info: 'bg-blue-400',
-  success: 'bg-af-status-success',
-  warning: 'bg-af-status-warning',
-  error: 'bg-af-status-error',
+const typeStyles = {
+  info: {
+    dot: 'bg-af-blue',
+    glow: 'shadow-[0_0_8px_2px_rgba(75,139,245,0.3)]',
+    line: 'bg-af-blue/20',
+  },
+  success: {
+    dot: 'bg-af-status-success',
+    glow: 'shadow-[0_0_8px_2px_rgba(34,197,94,0.3)]',
+    line: 'bg-af-status-success/20',
+  },
+  warning: {
+    dot: 'bg-af-status-warning',
+    glow: 'shadow-[0_0_8px_2px_rgba(245,158,11,0.3)]',
+    line: 'bg-af-status-warning/20',
+  },
+  error: {
+    dot: 'bg-af-status-error',
+    glow: 'shadow-[0_0_8px_2px_rgba(239,68,68,0.3)]',
+    line: 'bg-af-status-error/20',
+  },
 }
 
 export function SessionTimeline({ events, className }: SessionTimelineProps) {
   return (
     <div className={cn('relative space-y-0', className)}>
-      {/* Vertical line */}
-      <div className="absolute left-[7px] top-2 bottom-2 w-px bg-af-surface-border" />
+      {/* Vertical connector line */}
+      {events.length > 1 && (
+        <div className="absolute left-[5px] top-3 bottom-3 w-px bg-af-surface-border/40" />
+      )}
 
-      {events.map((event, i) => (
-        <div key={event.id} className="relative flex gap-3 py-2">
-          {/* Dot */}
-          <span
-            className={cn(
-              'relative z-10 mt-1 h-[14px] w-[14px] shrink-0 rounded-full border-2 border-af-bg-primary',
-              typeColors[event.type ?? 'info']
-            )}
-          />
+      {events.map((event) => {
+        const styles = typeStyles[event.type ?? 'info']
+        return (
+          <div key={event.id} className="relative flex gap-3.5 py-2.5">
+            {/* Glowing dot */}
+            <span
+              className={cn(
+                'relative z-10 mt-1.5 h-[10px] w-[10px] shrink-0 rounded-full',
+                styles.dot,
+                styles.glow
+              )}
+            />
 
-          <div className="flex-1 min-w-0">
-            <div className="flex items-baseline justify-between gap-2">
-              <span className="text-sm text-af-text-primary">{event.label}</span>
-              <span className="text-xs text-af-text-secondary whitespace-nowrap">
-                {new Date(event.timestamp).toLocaleTimeString()}
-              </span>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-baseline justify-between gap-2">
+                <span className="text-sm font-body text-af-text-primary">{event.label}</span>
+                <span className="text-2xs font-body text-af-text-tertiary whitespace-nowrap tabular-nums">
+                  {new Date(event.timestamp).toLocaleTimeString()}
+                </span>
+              </div>
+              {event.detail && (
+                <p className="mt-0.5 text-xs font-body text-af-text-tertiary">{event.detail}</p>
+              )}
             </div>
-            {event.detail && (
-              <p className="mt-0.5 text-xs text-af-text-secondary">{event.detail}</p>
-            )}
           </div>
-        </div>
-      ))}
+        )
+      })}
     </div>
   )
 }

package/src/components/sessions/token-chart.tsx

@@ -15,35 +15,35 @@ export function TokenChart({ inputTokens = 0, outputTokens = 0, className }: Tok
   const outputPct = (outputTokens / total) * 100
 
   return (
-    <div className={cn('space-y-2', className)}>
-      <div className="flex items-center justify-between text-xs text-af-text-secondary">
-        <span>Token Usage</span>
-        <span className="tabular-nums font-mono">{formatTokens(total)} total</span>
+    <div className={cn('space-y-3', className)}>
+      <div className="flex items-center justify-between text-2xs font-body">
+        <span className="uppercase tracking-wider text-af-text-tertiary">Token Usage</span>
+        <span className="tabular-nums font-mono text-af-text-secondary">{formatTokens(total)} total</span>
       </div>
 
       {/* Bar */}
-      <div className="flex h-3 w-full overflow-hidden rounded-full bg-af-bg-primary">
+      <div className="flex h-2.5 w-full overflow-hidden rounded-full bg-af-bg-primary/60">
         <div
-          className="bg-blue-400 transition-all"
+          className="bg-af-blue rounded-l-full transition-all duration-500"
           style={{ width: `${inputPct}%` }}
         />
         <div
-          className="bg-af-accent transition-all"
+          className="bg-af-accent transition-all duration-500"
           style={{ width: `${outputPct}%` }}
         />
       </div>
 
       {/* Legend */}
-      <div className="flex items-center gap-4 text-xs">
+      <div className="flex items-center gap-5 text-2xs font-body">
         <div className="flex items-center gap-1.5">
-          <span className="h-2 w-2 rounded-full bg-blue-400" />
-          <span className="text-af-text-secondary">Input</span>
-          <span className="tabular-nums font-mono text-af-text-primary">{formatTokens(inputTokens)}</span>
+          <span className="h-2 w-2 rounded-full bg-af-blue shadow-[0_0_6px_1px_rgba(75,139,245,0.3)]" />
+          <span className="text-af-text-tertiary">Input</span>
+          <span className="tabular-nums font-mono text-af-text-secondary">{formatTokens(inputTokens)}</span>
         </div>
         <div className="flex items-center gap-1.5">
-          <span className="h-2 w-2 rounded-full bg-af-accent" />
-          <span className="text-af-text-secondary">Output</span>
-          <span className="tabular-nums font-mono text-af-text-primary">{formatTokens(outputTokens)}</span>
+          <span className="h-2 w-2 rounded-full bg-af-accent shadow-[0_0_6px_1px_rgba(255,107,53,0.3)]" />
+          <span className="text-af-text-tertiary">Output</span>
+          <span className="tabular-nums font-mono text-af-text-secondary">{formatTokens(outputTokens)}</span>
         </div>
       </div>
     </div>

package/src/components/settings/settings-view.tsx

@@ -1,14 +1,13 @@
 'use client'
 
 import { cn } from '../../lib/utils'
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../../components/ui/card'
 import { Badge } from '../../components/ui/badge'
 import { Separator } from '../../components/ui/separator'
 import { useStats } from '../../hooks/use-stats'
 import { useWorkers } from '../../hooks/use-workers'
 import { ProviderIcon } from '../../components/fleet/provider-icon'
 import { StatusDot } from '../../components/fleet/status-dot'
-import { CheckCircle2, AlertCircle, Settings2 } from 'lucide-react'
+import { CheckCircle2, AlertCircle, Settings2, Webhook, Server, Shield } from 'lucide-react'
 
 interface SettingsViewProps {
   className?: string
@@ -22,97 +21,106 @@ export function SettingsView({ className }: SettingsViewProps) {
   const hasWorkerAuth = workersData !== null
 
   return (
-    <div className={cn('space-y-6 p-5 max-w-3xl', className)}>
+    <div className={cn('space-y-6 p-6 max-w-3xl', className)}>
+      {/* Page header */}
       <div>
-        <h1 className="text-lg font-semibold text-af-text-primary">Settings</h1>
-        <p className="text-sm text-af-text-secondary">
+        <h1 className="font-display text-xl font-bold text-af-text-primary tracking-tight">Settings</h1>
+        <p className="mt-1 text-sm font-body text-af-text-secondary">
           Configuration and integration status for your AgentFactory instance.
         </p>
       </div>
 
       {/* Integration Status */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Integration Status</CardTitle>
-          <CardDescription>Connected services and API endpoints</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
+      <div className="rounded-xl border border-af-surface-border/40 bg-af-surface/30 overflow-hidden">
+        <div className="px-6 py-4 border-b border-af-surface-border/30">
+          <h3 className="flex items-center gap-2 font-display text-sm font-semibold text-af-text-primary tracking-tight">
+            <Webhook className="h-4 w-4 text-af-text-tertiary" />
+            Integration Status
+          </h3>
+          <p className="mt-0.5 text-xs font-body text-af-text-tertiary">Connected services and API endpoints</p>
+        </div>
+
+        <div className="px-6 py-4 space-y-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
               <CheckCircle2 className="h-4 w-4 text-af-status-success" />
               <div>
-                <p className="text-sm text-af-text-primary">Linear Webhook</p>
-                <p className="text-xs text-af-text-secondary font-mono">/webhook</p>
+                <p className="text-sm font-body text-af-text-primary">Linear Webhook</p>
+                <p className="text-2xs font-mono text-af-text-tertiary">/webhook</p>
               </div>
             </div>
             <Badge variant="success">Connected</Badge>
           </div>
 
-          <Separator />
+          <Separator className="bg-af-surface-border/30" />
 
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
               <CheckCircle2 className="h-4 w-4 text-af-status-success" />
               <div>
-                <p className="text-sm text-af-text-primary">Public API</p>
-                <p className="text-xs text-af-text-secondary font-mono">/api/public/stats</p>
+                <p className="text-sm font-body text-af-text-primary">Public API</p>
+                <p className="text-2xs font-mono text-af-text-tertiary">/api/public/stats</p>
               </div>
             </div>
             <Badge variant="success">Active</Badge>
           </div>
 
-          <Separator />
+          <Separator className="bg-af-surface-border/30" />
 
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
               {hasWorkerAuth ? (
                 <CheckCircle2 className="h-4 w-4 text-af-status-success" />
               ) : (
-                <AlertCircle className="h-4 w-4 text-af-text-secondary" />
+                <AlertCircle className="h-4 w-4 text-af-text-tertiary" />
               )}
               <div>
-                <p className="text-sm text-af-text-primary">Worker API</p>
-                <p className="text-xs text-af-text-secondary font-mono">/api/workers</p>
+                <p className="text-sm font-body text-af-text-primary">Worker API</p>
+                <p className="text-2xs font-mono text-af-text-tertiary">/api/workers</p>
               </div>
             </div>
             <Badge variant={hasWorkerAuth ? 'success' : 'secondary'}>
               {hasWorkerAuth ? 'Authenticated' : 'No Auth Key'}
             </Badge>
           </div>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
 
       {/* Workers */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Workers</CardTitle>
-          <CardDescription>
+      <div className="rounded-xl border border-af-surface-border/40 bg-af-surface/30 overflow-hidden">
+        <div className="px-6 py-4 border-b border-af-surface-border/30">
+          <h3 className="flex items-center gap-2 font-display text-sm font-semibold text-af-text-primary tracking-tight">
+            <Server className="h-4 w-4 text-af-text-tertiary" />
+            Workers
+          </h3>
+          <p className="mt-0.5 text-xs font-body text-af-text-tertiary">
             {workers.length > 0
               ? `${workers.length} worker${workers.length !== 1 ? 's' : ''} registered`
               : 'No workers connected'}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
+          </p>
+        </div>
+
+        <div className="px-6 py-4">
           {workers.length === 0 ? (
-            <p className="text-sm text-af-text-secondary">
+            <p className="text-sm font-body text-af-text-tertiary">
               Workers will appear here once they register with the server.
             </p>
           ) : (
             <div className="space-y-3">
               {workers.map((worker) => (
-                <div key={worker.id} className="flex items-center justify-between">
+                <div key={worker.id} className="flex items-center justify-between py-1">
                   <div className="flex items-center gap-3">
                     <StatusDot status={worker.status === 'active' ? 'working' : 'stopped'} />
                     <div>
                       <p className="text-sm font-mono text-af-text-primary">
                         {worker.hostname ?? worker.id.slice(0, 8)}
                       </p>
-                      <p className="text-xs text-af-text-secondary">
+                      <p className="text-2xs font-body text-af-text-tertiary">
                         {worker.activeSessions}/{worker.capacity} slots
                       </p>
                     </div>
                   </div>
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-2.5">
                     <ProviderIcon provider={worker.provider} size={14} />
                     <Badge variant={worker.status === 'active' ? 'success' : 'secondary'}>
                       {worker.status}
@@ -122,34 +130,35 @@ export function SettingsView({ className }: SettingsViewProps) {
               ))}
             </div>
           )}
-        </CardContent>
-      </Card>
+        </div>
+      </div>
 
       {/* Fleet Stats */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Settings2 className="h-4 w-4" />
+      <div className="rounded-xl border border-af-surface-border/40 bg-af-surface/30 overflow-hidden">
+        <div className="px-6 py-4 border-b border-af-surface-border/30">
+          <h3 className="flex items-center gap-2 font-display text-sm font-semibold text-af-text-primary tracking-tight">
+            <Shield className="h-4 w-4 text-af-text-tertiary" />
             Fleet Configuration
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <dl className="grid grid-cols-2 gap-4 text-sm">
-            <div>
-              <dt className="text-af-text-secondary">Total Capacity</dt>
-              <dd className="mt-0.5 text-af-text-primary font-medium">
+          </h3>
+        </div>
+
+        <div className="px-6 py-4">
+          <div className="grid grid-cols-2 gap-6">
+            <div className="space-y-1">
+              <dt className="text-2xs font-body uppercase tracking-wider text-af-text-tertiary">Total Capacity</dt>
+              <dd className="font-display text-lg font-bold tabular-nums text-af-text-primary">
                 {stats?.availableCapacity ?? '—'}
               </dd>
             </div>
-            <div>
-              <dt className="text-af-text-secondary">Workers Online</dt>
-              <dd className="mt-0.5 text-af-text-primary font-medium">
+            <div className="space-y-1">
+              <dt className="text-2xs font-body uppercase tracking-wider text-af-text-tertiary">Workers Online</dt>
+              <dd className="font-display text-lg font-bold tabular-nums text-af-text-primary">
                 {stats?.workersOnline ?? '—'}
               </dd>
             </div>
-          </dl>
-        </CardContent>
-      </Card>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }

package/src/components/shared/empty-state.tsx

@@ -17,13 +17,18 @@ export function EmptyState({
   children,
 }: EmptyStateProps) {
   return (
-    <div className={cn('flex flex-col items-center justify-center py-12 text-center', className)}>
-      <div className="mb-4 text-af-text-secondary">
-        {icon ?? <Inbox className="h-10 w-10" />}
+    <div className={cn(
+      'flex flex-col items-center justify-center py-16 text-center',
+      className
+    )}>
+      <div className="mb-4 rounded-xl border border-af-surface-border/30 bg-af-surface/20 p-4">
+        <div className="text-af-text-tertiary">
+          {icon ?? <Inbox className="h-8 w-8" />}
+        </div>
       </div>
-      <h3 className="text-sm font-medium text-af-text-primary">{title}</h3>
-      <p className="mt-1 text-sm text-af-text-secondary">{description}</p>
-      {children && <div className="mt-4">{children}</div>}
+      <h3 className="font-display text-sm font-semibold text-af-text-primary tracking-tight">{title}</h3>
+      <p className="mt-1.5 max-w-xs text-xs font-body text-af-text-tertiary">{description}</p>
+      {children && <div className="mt-5">{children}</div>}
     </div>
   )
 }

package/src/components/ui/badge.tsx

@@ -3,17 +3,17 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/utils'
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-full border px-2 py-0.5 text-2xs font-medium font-body transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
         default: 'border-transparent bg-primary text-primary-foreground',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        secondary: 'border-af-surface-border/40 bg-af-surface/40 text-af-text-secondary',
         destructive: 'border-transparent bg-destructive text-destructive-foreground',
         outline: 'text-foreground',
-        success: 'border-transparent bg-af-status-success/10 text-af-status-success',
-        warning: 'border-transparent bg-af-status-warning/10 text-af-status-warning',
-        error: 'border-transparent bg-af-status-error/10 text-af-status-error',
+        success: 'border-af-status-success/20 bg-af-status-success/10 text-af-status-success',
+        warning: 'border-af-status-warning/20 bg-af-status-warning/10 text-af-status-warning',
+        error: 'border-af-status-error/20 bg-af-status-error/10 text-af-status-error',
       },
     },
     defaultVariants: {

package/src/components/ui/button.tsx

@@ -6,21 +6,21 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium font-body ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90 glow-soft',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        outline: 'border border-af-surface-border/50 bg-transparent hover:bg-af-surface/40 hover:text-accent-foreground',
+        secondary: 'bg-af-surface/60 text-secondary-foreground hover:bg-af-surface/80',
+        ghost: 'hover:bg-af-surface/40 hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md px-3',
-        lg: 'h-10 rounded-md px-8',
+        sm: 'h-8 rounded-lg px-3',
+        lg: 'h-10 rounded-lg px-8',
         icon: 'h-9 w-9',
       },
     },

package/src/components/ui/card.tsx

@@ -5,7 +5,10 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('rounded-lg border border-af-surface-border bg-af-surface text-card-foreground', className)}
+      className={cn(
+        'rounded-xl border border-af-surface-border/40 bg-af-surface/40 text-card-foreground',
+        className
+      )}
       {...props}
     />
   )
@@ -14,35 +17,39 @@ Card.displayName = 'Card'
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-5', className)} {...props} />
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
   )
 )
 CardHeader.displayName = 'CardHeader'
 
 const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
   ({ className, ...props }, ref) => (
-    <h3 ref={ref} className={cn('text-sm font-medium leading-none tracking-tight', className)} {...props} />
+    <h3
+      ref={ref}
+      className={cn('font-display text-sm font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
   )
 )
 CardTitle.displayName = 'CardTitle'
 
 const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
   ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+    <p ref={ref} className={cn('text-xs font-body text-muted-foreground', className)} {...props} />
   )
 )
 CardDescription.displayName = 'CardDescription'
 
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-5 pt-0', className)} {...props} />
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
   )
 )
 CardContent.displayName = 'CardContent'
 
 const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex items-center p-5 pt-0', className)} {...props} />
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
   )
 )
 CardFooter.displayName = 'CardFooter'

package/src/components/ui/skeleton.tsx

@@ -3,7 +3,10 @@ import { cn } from '../../lib/utils'
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('animate-pulse rounded-md bg-muted', className)}
+      className={cn(
+        'animate-pulse rounded-lg bg-af-surface/60',
+        className
+      )}
       {...props}
     />
   )