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
2.7 KiB
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
-
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.
-
Technical Precision: Every element has intention. No decoration. Use whitespace and alignment to create rhythm, not visual effects.
-
Dual-Context Adaptation: Field view (mobile, fast, action-focused) vs. Admin view (desktop, data-rich, decision-focused). Same visual language, different complexity.
-
Dark Mode Confidence: Dark shouldn't mean "timid." Use bold primary colors, high-contrast text, purposeful accents. Make the dark feel deliberate.
-
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.