dbe66a0568
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>
33 lines
1.7 KiB
Markdown
33 lines
1.7 KiB
Markdown
# Copilot Instructions — ResolutionFlow
|
|
|
|
## Design Context
|
|
|
|
### Users
|
|
MSP engineers — IT professionals at Managed Service Providers who troubleshoot infrastructure and support issues for multiple client companies. They work under ticket pressure, need to resolve issues fast, and produce clean documentation automatically.
|
|
|
|
### Brand Personality
|
|
**Three words:** Professional, Modern, SaaS
|
|
**Voice:** Direct, competent, no fluff. Built by MSP engineers, for MSP engineers.
|
|
**Emotional goals:** Confidence, competence, clarity, focus.
|
|
|
|
### Aesthetic Direction
|
|
- Flat, high-contrast dark theme (Sentry/PostHog-inspired). Premium and clean.
|
|
- **References:** Notion (clarity), Stripe (polish), Figma (functional density)
|
|
- **Anti-references:** Microsoft Teams (clutter), Kaseya VSA 9 (dated patterns)
|
|
- Accent: ember orange (#f97316), max 5% of UI. No glassmorphism, no gradient surfaces, no ambient effects.
|
|
- See `DESIGN-SYSTEM.md` for full token and component specs.
|
|
|
|
### Accessibility
|
|
- WCAG 2.2 AA baseline
|
|
- Enhanced focus appearance on all interactive elements
|
|
- 7:1 contrast ratio for data visualization colors
|
|
- `prefers-reduced-motion` fully supported
|
|
- Never rely on color alone for status — pair with icons or text
|
|
|
|
### Design Principles
|
|
1. **Clarity over decoration.** Every pixel should communicate. No ornamental effects.
|
|
2. **Density without clutter.** Use typography hierarchy and spacing to create structure, not chrome.
|
|
3. **Confidence through consistency.** Same patterns, same tokens, same behavior everywhere.
|
|
4. **Speed is a feature.** Minimize clicks. Copilot-first — primary interaction is typing.
|
|
5. **Accessible by default.** WCAG 2.2, enhanced focus, high-contrast data viz, motion sensitivity.
|