# 14. Branding & Design System

## Visual Identity

Sasha Studio uses a modern, professional aesthetic with a dark-first design approach. The UI is inspired by developer tools (VS Code, Claude Code) but adapted for non-technical business users.

## Color System

### Theme Support

Dark and light themes supported, toggled via `DarkModeToggle` component. Theme state managed in `ThemeContext.jsx`.

### Workflow Editor Colors (Step Types)

| Step Type | Color | Usage |
|-----------|-------|-------|
| Transform | Blue | Data transformation steps |
| Skill | Purple | Skill reference nodes |
| Tool | Green | Tool execution nodes |
| Decision | Amber | Decision/branching points |
| Gate | Red | Approval gates |
| Parallel / Subagent | Teal | Parallel execution groups |
| End | Gray | Terminal nodes |
| Artifact | (to right of step) | Output file indicators |
| Audit | Amber | Audit output paths |
| Error | Red | Error conditions |

### System Health Dashboard Colors

| Status | Color | Threshold |
|--------|-------|-----------|
| Green | Success | Disk < 70%, healthy |
| Yellow | Warning | Disk 70-85% |
| Red | Critical | Disk > 85% |

## Typography

| Element | Current Implementation |
|---------|----------------------|
| Font family | System font stack (inherited from browser) |
| Code font | Monospace (CodeMirror default) |
| Heading hierarchy | Standard HTML h1-h6 |
| Body text | Default sizing |

**Note:** No custom font or explicit typography system observed in the codebase. Uses browser defaults and component library defaults.

## Component Library

### UI Primitives (Shadcn-style)

Located in `src/components/ui/`:

| Component | File | Purpose |
|-----------|------|---------|
| Badge | `badge.jsx` | Status indicators, labels |
| Button | `button.jsx` | Action buttons |
| Input | `input.jsx` | Text inputs |
| ScrollArea | `scroll-area.jsx` | Scrollable containers |

### Icon System

| Library | Usage |
|---------|-------|
| Phosphor Icons (`@phosphor-icons/react`) | Primary icon set |
| Lucide React (`lucide-react`) | Secondary icons |
| Custom icons | `src/components/icons/index.jsx` (Check, CheckCircle, etc.) |
| Emoji-to-icon | `rehypeEmojiToPhosphor.js` converts emoji in markdown to Phosphor icons |

### Layout Patterns

| Pattern | Implementation |
|---------|---------------|
| Sidebar + content | Main app layout |
| Modal dialogs | Settings, create forms, confirmations |
| Toast notifications | `ToastContainer` + `ToastContext` |
| Expandable sections | Analytics reports |
| Card grid | Skills, personas, integrations |
| Tab navigation | File downloads, settings panels |
| Floating action bar | `FloatingIconBar` for quick actions |

### Animation & Motion

| Library | Usage |
|---------|-------|
| Framer Motion | UI transitions, component animations |
| CSS transitions | Hover states, theme switching |
| `WaveText` | Animated text during loading/streaming |
| `TrackmakerRaw/Prose` | Response rendering animations |

## Responsive Design

| Breakpoint | Behavior |
|-----------|----------|
| Desktop (>1024px) | Full sidebar + content layout |
| Tablet (768-1024px) | Collapsed sidebar (icons only) |
| Mobile (<768px) | `MobileNav` bottom navigation, stacked layout |

## Content Style

| Element | Convention |
|---------|-----------|
| Product name | "Sasha Studio" or "Sasha" |
| Onboarding metaphor | "New team member" / "employee" framing |
| Error messages | Direct, actionable (e.g., "Invalid credentials", "File exceeds maximum size") |
| Button labels | Action verbs ("Save", "Create", "Delete", "Run") |
| Empty states | Descriptive message + CTA button |
| Confirmation dialogs | Warning message + destructive action button (red) |