Includes MFA-capable authentication, session and CSRF security, password recovery, listing lifecycle and ownership rules, inventory image metadata, local ImageStorage, migrations, tests, and implementation status documentation. Verification: npm test (62 passing) and integration suite (14 passing).
44 lines
844 B
Markdown
44 lines
844 B
Markdown
# Design System Direction
|
|
|
|
## Principles
|
|
|
|
- Minimal
|
|
- Clean
|
|
- Information-dense without clutter
|
|
- Accessible
|
|
- Responsive
|
|
- Consistent
|
|
- Component-driven
|
|
|
|
## Component architecture
|
|
|
|
Build atomic/reusable Vue components.
|
|
|
|
Examples:
|
|
- SearchBar
|
|
- ProductCard
|
|
- InventoryGroup
|
|
- InventoryCopyRow
|
|
- PriceDisplay
|
|
- ConditionBadge
|
|
- StatusBadge
|
|
- ImageGallery
|
|
- FilterPanel
|
|
- SortControl
|
|
- Modal/Dialog
|
|
- FormField
|
|
- ValidationMessage
|
|
- DataTable
|
|
- EmptyState
|
|
- LoadingState
|
|
- ErrorState
|
|
- ActivityTimeline
|
|
|
|
Components should have clear responsibilities and avoid embedding domain business rules.
|
|
|
|
## Visual decisions
|
|
|
|
Exact color palette, typography, spacing tokens, and final visual styling can evolve during implementation, but must preserve accessibility and the documented information hierarchy.
|
|
|
|
No color-only indication of state or condition.
|