Daniel Bedeleanu
ab43256aa0
- 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
49 lines
2.7 KiB
Markdown
49 lines
2.7 KiB
Markdown
# 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.
|