# Containr Design System

## Design Context

### Users
- **Primary**: DevOps engineers, system administrators, and developers managing container infrastructure
- **Secondary**: Small team leads and solo developers looking for self-hosted container management
- **Context**: Users access the dashboard to deploy, monitor, and manage containers. They need quick access to critical information, real-time metrics, and intuitive workflows.
- **Job to be done**: "I want to deploy and manage containers without the complexity of Kubernetes or expensive cloud platforms."

### Brand Personality
- **Voice**: Professional yet approachable, technical but not intimidating
- **Three words**: Modern, reliable, empowering
- **Emotional goals**: Users should feel in control, confident, and efficient. The interface should reduce anxiety around infrastructure management.

### Aesthetic Direction
- **Visual tone**: Dark mode SaaS dashboard with subtle gradients and refined details
- **References**: Railway (primary inspiration) - clean, modern, professional; Vercel - polished developer experience; Linear - refined typography and spacing
- **Anti-references**: Avoid cluttered interfaces, overly bright colors, generic Bootstrap aesthetics
- **Theme**: Dark mode with accent colors for status indicators (emerald for success, amber for warning, rose for errors)

### Design Principles
1. **Clarity over density** - Every element serves a purpose, generous whitespace reduces cognitive load
2. **Progressive disclosure** - Surface critical information first, details available on interaction
3. **Consistent visual language** - Reusable patterns for cards, buttons, forms, and status indicators
4. **Performance perception** - Loading states and transitions that feel snappy and responsive
5. **Accessibility by default** - WCAG 2.1 AA compliance, readable contrast ratios, keyboard navigation

### Typography
- **Headlines**: Geist (modern, technical, distinctive)
- **Body**: Inter (highly readable at all sizes)
- **Code/Mono**: JetBrains Mono (developer-friendly)

### Color System
- **Background**: #0a0a0a (near-black with subtle warmth)
- **Surface**: #141414 (elevated cards and containers)
- **Border**: #1f1f1f (subtle separation)
- **Primary accent**: #6366f1 (indigo - modern tech feel)
- **Success**: #10b981 (emerald)
- **Warning**: #f59e0b (amber)
- **Danger**: #f43f5e (rose)

### Spacing Scale
- Use 4px base unit
- Component padding: 16px-24px
- Section gaps: 32px-48px
- Page padding: 24px-48px (responsive)