# Product

<!-- impeccable:product-schema 1 -->

## Platform

web

## Stack

Nuxt 3 + Nuxt UI + Vue 3 + Tailwind CSS + Axios + TypeScript + Bun

## Users

B2B wholesale buyers, procurement officers, and retail store managers ordering bulk goods, managing corporate procurement, checking customer-specific pricing, tracking orders, and handling credit terms.

## Product Purpose

High-speed, dense B2B purchasing platform and storefront for KeluargaMart business customers. Enables seamless catalog browsing, tier/contract pricing, MOQ enforcement, structured checkout, multi-address shipping, and order management without ERP clutter.

## Positioning

Predictable, dense, performance-focused B2B ordering interface. Authoritative backend integration via REST API for pricing, discounts, credit terms, and order lifecycle while keeping complex internal ERP/HR/accounting workflows completely out of scope.

## Operating Context

Web browser interface optimized for high-volume purchasing, quick reordering, search filtering, batch cart updates, and multi-step B2B checkout on desktop and mobile web.

## Capabilities and Constraints

- **Capabilities**: Catalog browsing, search/filtering, tiered/customer pricing, MOQ validation, cart management, checkout with payment/credit terms, shipping tracking, order cancellation/reordering, notification system.
- **Constraints**: Client must not calculate authoritative prices or statuses. Internal ERP/accounting/payroll modules strictly out of scope. Nuxt UI is default component system.

## Brand Commitments

- **Palette**:
  - Primary: Deep Royal Blue (`#142B80`)
  - Primary Dark: Navy Blue (`#071F68`)
  - Primary Light: Blue (`#28459A`)
  - Accent: Sky Blue (`#80C8F0`)
  - Accent Light: Pale Cyan (`#D8F5FF`)
  - Background: White (`#FFFFFF`)
  - Background Soft: Very Light Blue (`#F5F8FF`)
  - Surface: Light Gray/Blue (`#EEF3FA`)
  - Text: Dark Navy (`#14213D`)
  - Text Muted: Slate Blue-Gray (`#64748B`)
  - Border: Light Blue-Gray (`#D9E2F0`)
- **Design Style**: High-density, professional B2B purchasing interface, clean typography, responsive layout, clear status badges, minimal decor.

## Evidence on Hand

- `AGENTS.md` - Core architecture guidelines and scope boundaries.
- `README.md` - Overview and agent specification instructions.
- `docs/FEATURES.md` - Complete feature inventory.
- `docs/FEATURE-MATRIX.md` - Traceability matrix.
- `docs/ACCEPTANCE-CRITERIA.md` - Detailed acceptance criteria per feature.
- `docs/UI-RULES.md` - Component selection & usage guidelines.
- `docs/keluargamart-openapi.yaml` - REST API specification contract.

## Product Principles

1. **Nuxt UI First**: Compose views with Nuxt UI primitives; build domain components only when primitives are insufficient.
2. **Dense & Frictionless**: Optimize layouts for speed, quick order entry, tabular scanning, and clear visual hierarchy.
3. **Backend Authority**: Treat API responses as sole source of truth for pricing, availability, discounts, and order statuses.
4. **Restrained Elegance**: Avoid decorative clutter, unnecessary card nesting, or generic dashboard anti-patterns.

## Accessibility & Inclusion

- Keyboard navigable interactive elements.
- WCAG AA color contrast compliance (light theme only — the app ships light mode exclusively; there is no dark theme).
- Clear error states, field validation feedback, and screen reader labels.