Files
pokemon-inventory/docs/DESIGN.md
T
fragginwagon c728016dec feat: establish auth listing and image vertical slices
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).
2026-09-08 17:32:03 -04:00

844 B

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.