---
name: KeluargaMart B2B E-Commerce Frontend
description: Tokopedia-inspired high-density B2B purchasing platform with Nuxt UI and KeluargaMart brand tokens
colors:
  primary: "#142B80"
  primary-hover: "#102268"
  primary-soft: "#DCE7FC"
  accent: "#00A6F4"
  accent-soft: "#E0F2FE"
  promo: "#D61F3F"
  promo-soft: "#FCE4E9"
  rating-star: "#F59E0B"
  neutral-bg: "#F5F8FF"
  surface-elevated: "#FFFFFF"
  surface-muted: "#EEF3FA"
  text-default: "#14213D"
  text-muted: "#64748B"
  text-toned: "#475569"
  text-faint: "#94A3B8"
  border-default: "#D9E2F0"
  border-muted: "#E7EDF7"
typography:
  # Shipped page-title step. The build renders storefront H1s at text-2xl
  # (1.5rem); the earlier 1.875rem "headline" and a `display` clamp step were
  # never used in code, so the scale below records what actually ships.
  page-title:
    fontFamily: "'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: "-0.01em"
  title:
    fontFamily: "'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: "normal"
  body:
    fontFamily: "'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif"
    fontSize: "0.875rem"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "normal"
  label:
    fontFamily: "'IBM Plex Mono', ui-monospace, 'SF Mono', monospace"
    fontSize: "0.75rem"
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: "0.05em"
rounded:
  # Nuxt UI v4 remaps `.rounded-*` to `calc(var(--ui-radius) * N)` and never
  # reads `--radius-*` vars; main.css sets `--ui-radius: 0.5rem` (badge 8px)
  # and re-declares `.rounded-md` / `.rounded-lg` / `.rounded-xl` unlayered
  # for the family values below.
  badge: "8px"
  control: "8px"    # UButton / UInput (was 12px, now matches ERP/POS)
  card: "12px"      # UCard (was 16px, now matches ERP/POS)
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-elevated}"
    rounded: "{rounded.control}"
    padding: "8px 16px"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
  button-secondary:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.text-default}"
    rounded: "{rounded.control}"
    padding: "8px 16px"
  card-elevated:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.text-default}"
    rounded: "{rounded.card}"
    padding: "16px 24px"
  input-field:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.text-default}"
    rounded: "{rounded.control}"
    padding: "8px 12px"
---

> **Family contract:** shared tokens, per-app deltas, and the sync protocol live in `UNIFORMITY.md` — byte-identical across B2B, ERP, and POS. Edit the B2B copy, then run `bash scripts/sync-design.sh`.

# Design System: KeluargaMart B2B E-Commerce Frontend

## Overview

**Creative North Star: "Tokopedia Commerce Precision with KeluargaMart Brand Authority"**

The KeluargaMart B2B E-Commerce Frontend adapts Tokopedia's industry-leading marketplace interaction patterns (sticky prominent search bar, category dropdown, trending keyword pills, 8-icon quick service grid, Kejar Diskon countdown flash sales, and Tokopedia product card anatomy) while maintaining KeluargaMart's signature deep royal blue branding (`#142B80`) and soft blue-tinted enterprise surfaces (`#F5F8FF`).

**Key Characteristics:**
- **KeluargaMart Royal Blue Brand Anchor**: Signature `#142B80` primary with sky blue accents (`#80C8F0`) and soft-blue neutrals.
- **Tokopedia Navigation Architecture**: Sticky top utility bar, prominent rounded search bar with trending tags, category dropdown, cart counter badge, and user profile menu.
- **Tokopedia Product Card Anatomy**: 1:1 aspect image with hover zoom, Official/New badge, 2-line title, bold IDR price without zero decimal clutter, discount percentage pill (`-20%`), and MOQ pill. (Store location and star rating are omitted until API-backed.)
- **Storefront Sections**: Hero promo banner slider in brand royal blue gradients, 8-icon service grid, Kejar Diskon promo rail, category pills, and dynamic product recommendations. Promo/discount elements use the single promo token; the 8-icon grid uses a defined, AA-checked soft-tint set (primary, sky, indigo, amber, teal, blue, slate, promo — each `bg-*-50`/`text-*-700`).
- **Backend Authority**: Strict presentation of API-provided figures without client calculation or fake precision.

## Colors

### Primary & Brand
- **Deep Royal Blue** (`#142B80`): Primary brand anchor, primary action buttons, active navigation states, verified store badges.
- **Primary Hover** (`#102268`): Hover state for primary buttons.
- **Primary Soft** (`#DCE7FC`): Soft background tint for selected tags, active tabs, and category icons.

### Secondary & Accent
- **Sky Accent** (Nuxt UI `sky` scale, wired via `secondary`/`info` in `app.config.ts`): the *real* accent shipped in the build. The originally declared `#80C8F0`/`#D8F5FF` are soft sky tints; the accent scale's mid step is `sky-500 #00A6F4`. **Contrast rule:** `#00A6F4` is only 2.71:1 with white, so the accent is used as a **soft tint only** (`sky-100`/`sky-50` fill with `sky-700`/`sky-800` text, e.g. the "New" badge) — never as a solid fill under white text.
- **Promo Accent** (`#D61F3F` solid / `#B01834` soft-text on `#FCE4E9`): the single promo color for every discount pill, promo rail element, and cart-count badge (token `--color-promo-*` in `main.css`). The originally reserved coral `#FA591D` (3.23:1) and crimson `#EF144A` (4.32:1) both fail white AA at the 10–11px pill sizes, so the solid step is darkened to `#D61F3F` which clears 4.5:1 with white (5.09:1). Do not reintroduce `red-500`/`rose-600`.
- **Rating Star** (`amber` / `warning`): amber is reserved for the `warning` semantic (low-stock dots, alerts). Star ratings are **not shipped** — the previous hardcoded "4.9" was fabricated and removed until the API provides real review data.

### Neutral Surfaces
- **Page Background** (`#F5F8FF`): soft blue-tinted neutral page backdrop.
- **Surface Elevated** (`#FFFFFF`): pure white background for product cards, drawers, and modal surfaces.
- **Surface Muted** (`#EEF3FA`): light blue-gray tint for hover rows, input backgrounds, and secondary tags.
- **Text Dark Navy** (`#14213D`): high-contrast primary body and price text.
- **Text Slate** (`#64748B`, `text-muted`): secondary text. **AA on white only** (4.48:1). Do NOT place it on the `#F5F8FF` page or `#EEF3FA` muted surfaces — use Text Toned there.
- **Text Toned** (`#475569`, `text-toned`): muted copy that sits on a tinted/muted background (7.1:1 on the page, 6.8:1 on muted).
- **Text Dimmed** (`#94A3B8`, `text-dimmed`): **decorative / non-text only** (never the sole carrier of content).
- **Border Default** (`#D9E2F0`): crisp light border for cards and dividers.

## Layout & Components

- **Border Radius**: family contract (see `UNIFORMITY.md`) — badge 8px, control 8px, card 12px. Nuxt UI v4 derives every `.rounded-*` utility from `--ui-radius` via `calc(var(--ui-radius) * N)` (sm=1x, md=1.5x, lg=2x, xl=3x) and ignores `--radius-*` vars, so `main.css` sets `--ui-radius: 0.5rem` and re-declares `.rounded-md` (controls 8px), `.rounded-lg` / `.rounded-xl` (cards 12px) unlayered to beat the Tailwind utilities layer.
- **Elevation**: Subtle `shadow-xs` / `shadow-sm` on elevated cards, transitioning to `shadow-md` on hover.
- **Header**: Sticky top bar with KeluargaMart B2B logo, category dropdown menu, wide search bar, cart item badge, and auth dropdown.
- **Product Card**: Clean 1:1 image (with intrinsic `width`/`height` to avoid layout shift), Official/New badge, 2-line title, bold price, discount tag, and MOQ pill. Store location and star rating are **not shown** until the API supplies them (no fabricated `Jakarta Pusat`/`4.9`).
- **Focus**: Shared 2px `#142B80` focus-visible ring (`outline`, 2px offset) — a zero-specificity `:where()` rule in `main.css` covers raw `<button>`/`<a>` controls; Nuxt UI components keep their own ring.
- **Motion**: The home hero carousel auto-advances every 5s but pauses on `prefers-reduced-motion` and exposes a manual pause/play control. `main.css` neutralizes both `animation-*` and `transition-*` under reduced motion.
- **Light mode only**: the app is force-light (`colorMode.preference: 'light'`); there is no dark theme.

## Do's and Don'ts

### Do:
- **Do** use KeluargaMart Deep Royal Blue (`#142B80`) for primary actions, active tabs, and verified badges.
- **Do** format Indonesian Rupiah as `Rp 45.000` without trailing decimals.
- **Do** maintain smooth micro-interactions (hover zoom on product images, subtle shadow elevation).
- **Do** keep all pricing, inventory, and order statuses driven by authoritative API state.

### Don't:
- **Don't** invent client-side calculated totals or discounts.
- **Don't** present fabricated ratings, locations, stock levels, or countdown timers as real data.
- **Don't** use `#94A3B8` (text-dimmed) as the only carrier of content, and don't put `#00A6F4` (sky-500) as a solid fill under white text.
- **Don't** use arbitrary purple/dark theme styling.
- **Don't** compromise accessibility contrast on text and CTA buttons.
- Demo login buttons (with role-based accounts) are intentionally kept on all
  login pages for development and demo purposes. Do not remove or gate them.