Containr Design System

Design Context

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."

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.

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)

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