refactor: distill AdminOverlay complexity and inject color boldness
- Replace window.prompt() for category creation with dedicated CategoryCreationModal component - Increase visual hierarchy: section headings slate-500 → slate-400 (bolder, more confident) - Standardize Add User/Category button styling with consistent hover states and focus indicators - Remove browser prompt friction; all forms now use accessible modal dialogs - Technical, precise aesthetic: reduced visual clutter, increased contrast and decision clarity
This commit is contained in:
48
.impeccable.md
Normal file
48
.impeccable.md
Normal file
@@ -0,0 +1,48 @@
|
||||
# Design Context: TFM aInventory
|
||||
|
||||
## Users
|
||||
|
||||
**Primary Users:** Field operators AND administrative staff (hybrid usage)
|
||||
- **Field Operators:** Using on-site/in-warehouse on mobile devices for real-time scanning, inventory check-in/out, offline data collection
|
||||
- **Admin Staff:** Using on desktop for user management, category management, audit logs, system settings
|
||||
- **Context:** High-stakes environment; accuracy critical; both speed (field) and comprehension (admin) matter equally
|
||||
|
||||
## Brand Personality
|
||||
|
||||
**3-Word Profile:** Technical. Precise. Decisive.
|
||||
|
||||
- **Voice:** Direct, no-nonsense, authoritative. Every element serves a clear function.
|
||||
- **Tone:** Business-focused, reliable, confident. Users trust this system with their inventory.
|
||||
- **Emotional Goal:** Confidence in accuracy; reassurance that nothing will be lost or mistyped; decisiveness in destructive actions.
|
||||
|
||||
## Aesthetic Direction
|
||||
|
||||
**Theme:** Dark mode (current), but bolder and more distinctive
|
||||
|
||||
**Why Dark:** Field operators often use devices in varying lighting (warehouse basements, outdoors). Dark mode reduces eye strain and works across contexts.
|
||||
|
||||
**Current State:** Minimal slate/blue palette. Recently removed glassmorphism (backdrop-blur). Clean but understated.
|
||||
|
||||
**Opportunity:** Inject personality and visual weight while maintaining technical precision. The current aesthetic is correct in *restraint* but lacks *boldness*. Dark mode should feel confident and intentional, not just "safe default."
|
||||
|
||||
**Aesthetic Inspiration:** Industrial + Technical
|
||||
- Precision instruments (clean lines, exact details)
|
||||
- Command center interfaces (high contrast, clear hierarchy)
|
||||
- Lab equipment (honest materials, no decoration)
|
||||
- NOT: Glassmorphism, gradients, glows, or decoration without function
|
||||
|
||||
## Design Principles
|
||||
|
||||
1. **Clarity Through Contrast:** High visual hierarchy. Field operators need to scan + act in seconds. Admins need to parse complex data quickly. Use color, size, and weight strategically.
|
||||
|
||||
2. **Technical Precision:** Every element has intention. No decoration. Use whitespace and alignment to create rhythm, not visual effects.
|
||||
|
||||
3. **Dual-Context Adaptation:** Field view (mobile, fast, action-focused) vs. Admin view (desktop, data-rich, decision-focused). Same visual language, different complexity.
|
||||
|
||||
4. **Dark Mode Confidence:** Dark shouldn't mean "timid." Use bold primary colors, high-contrast text, purposeful accents. Make the dark feel deliberate.
|
||||
|
||||
5. **Offline-First Reliability:** Suggest stability and trust. No animations that suggest pending network requests. Solid, grounded UI.
|
||||
|
||||
---
|
||||
|
||||
**Next Step:** Use these principles to guide `/distill` — systematically remove unnecessary complexity and inject bold, technical personality into the interface.
|
||||
Reference in New Issue
Block a user