ss-tools/specs/033-gradio-agent-chat/contracts/ux/design-tokens.md

#region AgentChat.DesignTokens [C:2] [TYPE ADR] [SEMANTICS ux,tokens,agent-chat] @defgroup Ux Design tokens and component reuse for Gradio Agent Chat (drawer + /agent page).

Component Reuse Scan

Need	Existing Asset	Action
Primary button (send, confirm, retry)	$lib/ui/Button.svelte variant="primary"	Reuse
Secondary/ghost (cancel, delete)	$lib/ui/Button.svelte variant="ghost"	Reuse
Destructive (stop, delete confirm)	$lib/ui/Button.svelte variant="destructive"	Reuse
Empty state (new convo, no history)	$lib/ui/EmptyState.svelte	Reuse
Page header (/agent page)	$lib/ui/PageHeader.svelte	Reuse
Icons (send, stop, paperclip, expand)	$lib/ui/Icon.svelte	Reuse — name="send"/"stop"/"paperclip"/"chevron-down"
Toast notifications	addToast() from $lib/toasts	Reuse
Confirmation (convo delete)	confirm() (native browser)	Pattern
Custom confirmation (in-chat)	New ConfirmationCard inline within message	New component
Tool-call card	New ToolCallCard inline within message	New component

---

Semantic Tokens — Drawer (420px)

Chat Panel Shell

Element	Token
Drawer background	bg-surface-page
Drawer left border	border-l border-border
Header (convo switcher + expand btn)	bg-surface-card border-b border-border
Message scroll area	bg-surface-page
Input area	border-t border-border bg-surface-card

Messages

Element	Token
User bubble	bg-primary text-white rounded-2xl
Assistant bubble	bg-surface-card border border-border rounded-2xl
Streaming cursor	animate-pulse text-primary (blinking block, 0.3s)
System/info message	bg-surface-muted text-text-muted text-sm rounded-lg

Tool-Call Cards

Element	Token
Card	bg-surface-muted border border-border rounded-lg px-3 py-2
Tool name	text-text-muted text-xs font-mono
Spinner (executing)	animate-spin text-primary
Checkmark (done)	text-success
Cross (error)	text-destructive
Expanded content	text-text-muted text-xs font-mono overflow-auto max-h-32

Confirmation Cards

Element	Token
Card	bg-warning-light border border-warning-DEFAULT rounded-lg p-3
Warning icon	text-warning
Op summary	text-text font-medium
Timer	text-text-muted text-xs

Connection Status

Element	Token
Connected (green)	bg-success w-2 h-2 rounded-full
Reconnecting (yellow)	bg-warning w-2 h-2 rounded-full animate-pulse
Disconnected (red)	bg-destructive w-2 h-2 rounded-full

Input Area

Element	Token
Textarea	border border-border-strong rounded-xl focus:border-primary focus:ring-1 focus:ring-primary-ring
Send button	bg-primary text-white rounded-full
Stop button	bg-destructive text-white rounded-full

---

Semantic Tokens — /agent Page

Page Layout

Element	Token
Page background	bg-surface-page
Page shell	max-w-7xl mx-auto px-4 py-6 h-[calc(100vh-4rem)]
Two-column container	flex gap-0 h-full

Conversation Sidebar (240px)

Element	Token
Sidebar	bg-surface-card border-r border-border w-60 shrink-0
Search input	border border-border-strong rounded-lg focus:border-primary
Active convo highlight	bg-surface-muted
Convo title	text-text text-sm font-medium truncate
Convo date group header	text-text-muted text-xs font-semibold uppercase
Convo date	text-text-muted text-xs
Delete button (hover)	text-text-muted hover:text-destructive

Main Chat Area

Element	Token
Chat container	flex-1 flex flex-col
Messages area	flex-1 overflow-y-auto bg-surface-page
Input area	border-t border-border bg-surface-card p-4

Welcome / Empty

Element	Token
Welcome card (new convo)	bg-surface-card border border-border rounded-xl p-6 max-w-md mx-auto
Chip (example)	border border-border rounded-full px-3 py-1.5 text-sm text-text-muted hover:bg-surface-muted hover:text-text cursor-pointer transition

---

No Raw Tailwind Colors

All tokens reference tailwind.config.js semantic palette. Zero blue-*, gray-*, red-*, green-*, amber-*, slate-*, indigo-* in page/component code. Verification: scripts/audit-frontend-style.mjs.

#endregion AgentChat.DesignTokens