912075cd43
- Remove GreetingStatStrip (duplicated PerformanceCards data) - Strip left-border accent from stat cards (AI slop pattern) - Redesign KnowledgeBaseCards: icon grid → compact row list with icon badges - Redesign TeamSummary: distinct inline-row layout, no longer identical twin - Differentiate hover: stat cards use subtle border-hover, sessions keep springy lift - Add loading skeletons to PerformanceCards, KnowledgeBaseCards, TeamSummary - Add error state to PerformanceCards - Extract timeAgo() to shared lib/timeAgo.ts (replaced 4 duplicates) - Fix Skeleton bg-brand-border (undefined CSS var) → border-default - Fix double text-xs text-[0.5625rem] class conflicts across dashboard Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
4.5 KiB
Design Context — ResolutionFlow
Persistent design guidance for all AI sessions. Source of truth for design intent and principles. For component specs, tokens, and implementation details, see DESIGN-SYSTEM.md.
Users
MSP engineers — IT professionals at Managed Service Providers who troubleshoot infrastructure and support issues for multiple client companies. They work under ticket pressure, juggling PSA tools (ConnectWise, Autotask, HaloPSA) and need to resolve issues fast while producing clean documentation.
Context of use: Mid-ticket, often stressed, switching between tools. They need the interface to get out of their way and help them think clearly. Documentation is a pain point — it should feel automatic, not like extra work.
Job to be done: Describe an issue, get guided through resolution, and walk away with professional ticket notes — without manual writeup.
Brand Personality
Three words: Professional, Modern, SaaS
Voice: Direct, competent, no fluff. Built by MSP engineers, for MSP engineers. The product speaks like a senior colleague — helpful without being patronizing, technical without being dense.
Emotional goals: Confidence, competence, clarity, focus. The interface should make engineers feel like they have a reliable system backing them up. Every interaction should reinforce trust and reduce cognitive load.
Aesthetic Direction
Visual tone: Flat, high-contrast dark theme. Premium and clean — Sentry/PostHog DNA. Minimal decoration, maximum signal. Information density without clutter.
References:
- Notion — clarity of layout, whitespace discipline, typography hierarchy
- Stripe — polish, professional confidence, attention to micro-detail
- Figma — functional density done right, tool-like precision, dark mode execution
Anti-references:
- Microsoft Teams — cluttered, inconsistent spacing, overwhelming chrome, unclear hierarchy
- Kaseya VSA 9 — dated UI patterns, poor information density, legacy enterprise feel
Theme: Dark mode primary (charcoal palette). Light mode planned but not yet implemented.
Accent: Electric blue (#60a5fa dark / #2563eb light) — conveys trust, precision, and reliability fitting a troubleshooting tool MSP engineers depend on during outages. Used sparingly (max 5% of UI). Warning uses amber (#fbbf24), info uses cyan (#67e8f9).
Hard rules: No glassmorphism, no gradient surfaces, no ambient orbs, no backdrop blur, no decorative shadows at rest. Elevation = lighter surface + border, not shadow.
Accessibility
Target: WCAG 2.2 AA as baseline, with two enhanced commitments:
- Enhanced focus appearance — all interactive elements must have visible, high-contrast focus indicators (not just inputs). Keyboard navigation must be obvious and consistent.
- 7:1 contrast ratio for data visualization — chart colors, graph elements, and any data-bearing color must meet AAA contrast against their background. Standard text follows AA (4.5:1 body, 3:1 large).
Already implemented:
prefers-reduced-motionfully handled (animations collapse to 0.01ms)- Mobile responsive (app shell collapses below 768px)
- Bottom-sheet modals on mobile
- Styled scrollbars (6px, subtle)
Considerations for future work:
- Color blindness: avoid relying on red/green distinction alone for status — always pair with icons or text labels
- Screen reader: ensure all interactive elements have accessible names
- Keyboard: all flows must be completable without a mouse
Design Principles
-
Clarity over decoration. Every pixel should communicate. If an element doesn't help the user understand or act, remove it. No ornamental gradients, glows, or effects.
-
Density without clutter. MSP engineers work with lots of data. Show what matters, hide what doesn't. Use typography hierarchy and spacing — not chrome — to create structure.
-
Confidence through consistency. Same patterns, same tokens, same behavior everywhere. Predictability builds trust. Reference DESIGN-SYSTEM.md for every component decision.
-
Speed is a feature. The interface should feel instant. Minimize clicks to action. Auto-generate what can be auto-generated. The copilot-first UX means the primary interaction is typing, not navigating.
-
Accessible by default. WCAG 2.2 compliance isn't a checklist item — it's a design constraint. Enhanced focus, high-contrast data viz, and motion sensitivity are built in, not bolted on.