// Subtle container
```
### Frosted Glass (Auth/Splash Screens)
```tsx
// Blue gradient background
style={{ background: 'linear-gradient(to bottom, rgb(56, 189, 248), rgb(37, 99, 235))' }}
// Frosted glass card
```
### Toast Notifications
Current implementation uses Radix UI `@radix-ui/react-toast` with CVA variants:
```tsx
// Variants: default, destructive, success, error, warning, info
// Base style:
"rounded-lg border-2 p-5 pr-7 shadow-xl backdrop-blur-sm"
// Each variant has light/dark mode colors:
// success: border-green-300 bg-green-50/95 text-green-900
// error: border-red-300 bg-red-50/95 text-red-900
// warning: border-amber-300 bg-amber-50/95 text-amber-900
// info: border-blue-300 bg-blue-50/95 text-blue-900
// Viewport: bottom-right on desktop, top on mobile
// Max width: 420px
// Animations: slide-in-from-top (mobile), slide-in-from-bottom (desktop)
// Hover: shadow-2xl + translate-y-0.5 lift
// Icons: Lucide (CheckCircle2, AlertCircle, AlertTriangle, Info) in rounded-full bg
// Close: absolute top-right, visible on hover
```
### Form Controls
```tsx
// Input
"h-10 rounded-md border border-border/60 bg-card px-3 text-sm focus:ring-2 focus:ring-ring/40"
// Textarea
"rounded-md border border-border/60 bg-card p-3 text-sm min-h-[80px] focus:ring-2 focus:ring-ring/40"
```
## Animation System
### Tailwind Keyframes
| Name | Duration | Usage |
|------|----------|-------|
| `wiggle` | 1s infinite | Playful attention |
| `fade-in` | 0.5s ease-out | Element entrance (translateY 10px) |
| `spin-slow` | 3s linear infinite | Loading states |
| `pulse-subtle` | 2s infinite | Gentle pulse (opacity 1→0.9) |
| `shimmer` | 2s linear infinite | Loading skeleton |
| `bounce-once` | 1s ease | Single bounce |
### Framer Motion (Auth/Splash)
```tsx
// Container: stagger children by 0.1s
const containerVariants = {
hidden: { opacity: 0 },
visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
}
// Items: spring up from 20px below
const itemVariants = {
hidden: { y: 20, opacity: 0 },
visible: { y: 0, opacity: 1, transition: { type: 'spring', stiffness: 50 } },
}
```
### Task Completion
- Wavy green SVG strikethrough line + text fade
- 2s animation duration
- Do NOT modify sort logic in `sortTasksAndEvents.js`
## Design Principles
1. **Neutral Over Saturated** -- Use muted backgrounds, subtle borders. No saturated gradients for secondary elements.
2. **Elevation Hierarchy** -- Primary content gets `shadow-md`, secondary gets `shadow-sm`.
3. **Progressive Disclosure** -- Hide secondary actions until hover/focus.
4. **Density Over Chrome** -- Tight padding, compact buttons, reduce visual noise.
## Tech Stack
- **Framework**: React 19, Vite 7, TypeScript
- **State**: Jotai (client) + TanStack Query (server)
- **UI**: shadcn/ui (new-york style) + Material-UI (legacy, migrating away)
- **Styling**: Tailwind CSS with custom design tokens
- **Icons**: Lucide (primary), FontAwesome (legacy, GettingStarted only)
- **Animation**: Framer Motion (auth flows), Tailwind keyframes (in-app)
- **Mobile**: Capacitor for iOS/Android
- **Dark Mode**: `class` strategy via Tailwind `darkMode: 'class'`
## File Structure
```
src/
styles/
design-tokens.css CSS custom properties (brand, semantic, priority, task type)
notification-animations.css Toast animation keyframes
globals.css shadcn/ui CSS variables
components/
ui/ shadcn/ui base components (toast, card, button, etc.)
auth/ Auth flows (GettingStarted, EmailForm)
notifications/ NotificationItem, notification panels
lib/
utils.ts cn() helper (clsx + tailwind-merge)
```
## Key Files
- `tailwind.config.js` -- All design tokens, type scale, colors, animations
- `src/styles/design-tokens.css` -- CSS custom properties with dark mode overrides
- `docs/technical/frontend/UI-DESIGN-SYSTEM.md` -- Full design system documentation