Feedback Patterns
Toast notifications, whispers, and status feedback patterns. Small, cute, centered pills that feel like gentle whispers—not interruptions.
Toast Philosophy
Bottom-center (never corners)
Pill-shaped (fully rounded)
Text only (no icons in standard toasts)
Quick timing (in and out fast)
Unobtrusive but noticeable
Toast Types
Saved!
Toast Specifications
Position
- Placement: bottom-center
- Bottom offset: 80px
- Max width: calc(100vw - 48px)
- Transform: translateX(-50%)
Shape
- Border radius: var(--radius-full)
- Padding V: var(--space-2)
- Padding H: var(--space-4)
Typography
- Font: var(--font-body)
- Size: 13px
- Weight: 500
- White space: nowrap
Elevation
- Shadow: 0 2px 12px rgba(0,0,0,0.12)
- Z-index: 10001
Toast Colors
Info message
Info / Success
Default, neutral feedback & positive confirmation
var(--persona-primary)
Warning message
Warning
Caution, needs attention
var(--color-warning)
Error message
Error
Something went wrong
var(--color-destructive)
Toast Timing
Default
2500ms
Standard message duration
Short
2000ms
Quick confirmations
Long
4000ms
Important messages
Error
4000ms
Errors need time to read
Persistent
∞
Manual dismiss required
Toast Animation
Enter
- Duration: duration.slow
- Easing: spring
- From: opacity 0, Y +20px, scale 0.9
- To: opacity 1, Y 0, scale 1
Pop up with slight spring bounce
Exit
- Duration: duration.normal
- Easing: standard
- From: opacity 1, Y 0, scale 1
- To: opacity 0, Y -10px, scale 0.95
Fade up and out quickly
Whispers
Even subtler than toasts—status updates near the avatar.
Connecting...
Specifications
- Placement: Below avatar
- Offset: 8px
- Font size: 12px
- Font weight: 400
- Opacity: 0.7
- Duration: 2500ms
Connection Status
Connection state indicators that provide feedback through avatar and sound.
Connecting
- Avatar: pulse
- Message: none
- Sound: none
Connected
- Avatar: settle
- Message: none
- Sound: connection-success
Disconnected
- Avatar: fade
- Message: none
- Sound: none
Error
- Avatar: shake
- Message: "Connection lost"
- Sound: error-graceful
Haptic Feedback
Info
softTap
Success
success
Warning
notification
Error
error
Accessibility
Role
alert
aria-live
polite
Reduced motion
Fade only, 150ms