Files

chihlasm dbe66a0568 feat: bold dashboard redesign with inline stats, section labels, and chip icons

Restructure QuickStartPage for a more professional, informative layout:
- Left-aligned hero greeting (text-4xl) with date context and inline stat strip
- GreetingStatStrip shows resolved/active/MTTR at a glance
- Remove collapsible toggle — dashboard stats always visible
- Section labels with trailing border lines for visual hierarchy
- Suggestion chips with category icons, card-style hover, press feedback
- Fix cyan focus ring and icon color to ember orange design system
- Session cards: line-clamp-2 descriptions, font-medium text, problem_domain metadata
- Widen container max-w-3xl → max-w-4xl for breathing room
- Add .impeccable.md and .github/copilot-instructions.md design context
- CLAUDE.md audit: fix stale references, remove duplication, update counts

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-03-27 05:04:20 +00:00

4.4 KiB

Raw Blame History

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: Ember orange (#f97316) — conveys urgency fitting a troubleshooting context. Used sparingly (max 5% of UI). Warning uses yellow (#eab308), not amber, to stay distinct.

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-motion fully 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.

4.4 KiB Raw Blame History