mirror of
https://github.com/Dvorinka/Containr.git
synced 2026-06-03 20:12:58 +00:00
Tomas Dvorak
48 lines
2.5 KiB
Markdown
48 lines
2.5 KiB
Markdown
# 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)
|