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) |
