# Handoff: teeu Marketplace — Interface & UI Kit ## Overview `teeu` is a general marketplace (products across all categories) with two distinct roles: a **customer** who browses, favorites, buys, and tracks orders, and a **store/seller** who manages sales, orders, and reviews. This package documents the core interface system (colors, type, components) plus six key surfaces: the UI-kit foundations, the global header/nav, the product card, the marketplace browse page, the customer dashboard, and the store (seller) dashboard. ## About the Design Files The file in this bundle (`Teeu Marketplace Kit.dc.html`) is a **design reference created in HTML** — a single canvas that stacks all six artifacts as labelled sections (01–06). It is a prototype showing intended look, layout, and states, **not production code to copy directly**. Your task is to **recreate these designs in the target codebase's existing environment** (React, Vue, Svelte, SwiftUI, native, etc.) using that project's established component patterns, styling approach, and libraries. If no codebase exists yet, choose the most appropriate stack for a marketplace web app (e.g. React + a utility or component-CSS system) and implement the designs there. > The HTML uses a small internal templating runtime (``, ``, `` and a > `class Component` logic block). Ignore the runtime — read it only to understand the data shapes > and repetition. Rebuild with your own components and data layer. ## Fidelity **High-fidelity (hifi).** Final colors, typography, spacing, radii, and component states are all specified below and should be reproduced faithfully using the codebase's existing libraries/patterns. The one exception is product imagery: those are striped **placeholders** labelled `Category · 800×800` — swap in real product images (square, 1:1, 800×800 or larger). --- ## Design Tokens ### Color | Token | Hex | Usage | |---|---|---| | Primary | `#1877FF` | Primary actions, links, active nav, focus ring | | Primary Dark | `#1466E0` | Hover / pressed on primary | | Primary Soft | `#EAF2FF` | Tinted fills, selected states, icon-button bg | | Ink | `#1E2024` | Headings, primary text, dark sidebar bg | | Slate | `#5B6069` | Body text | | Muted | `#9AA0AA` | Secondary/meta text, placeholder text | | Line | `#E7E9EE` | Borders / dividers | | Canvas | `#F5F6F8` | App / page background | | Success | `#1F9D57` | Delivered, positive deltas, in-stock | | Warning | `#E8952A` | Pending/shipped accents, star rating gold | | Sale | `#F5455C` | Discounts, sale price, notification dots, danger | Secondary surface hexes used in the mocks: - Desk/canvas behind artifacts: `#E7E9ED` - Soft card border (inner): `#EEF0F3`, hairline row divider: `#F1F2F5` / `#F5F6F8` - Status badge tints: blue `#EAF2FF`/`#1466E0`, amber `#FDF3E6`/`#B7761A`, violet `#F0ECFB`/`#7B57D6`, green `#E9F7EF`/`#1F9D57` - Danger soft: `#FDECEE`, warning soft: `#FDF3E6`/`#FFF6E5` - Avatar gradient: `linear-gradient(135deg, #1877FF, #59A0FF)` ### Typography - **Primary family:** Manrope (weights 400, 500, 600, 700, 800). Google Fonts. - **Mono/meta family:** JetBrains Mono (400, 500) — used for IDs, captions, spec labels, tiny meta. - Scale (px / weight / notes): - Display: 38 / 800 / letter-spacing −0.02em - Heading (section H2): 26 / 800 / −0.01em - Card/panel title: 16–22 / 800 - Subhead: 18 / 700 - Body: 15 / 500 / color Slate - Product name: 14–15 / 700 - Small/meta: 12–13 / 600 / Muted - Caption (mono): 11–12 / 500 / Muted, often uppercase with 0.06–0.1em tracking - `-webkit-font-smoothing: antialiased` on body. ### Spacing 8pt-based. Common values: 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 28, 30 px. Section gap on the canvas: 96px. Artifact frame width: **1400px** (desktop-first). ### Radius - sm `10px` (small controls, chips-in-grid), md `12–14px` (buttons, inputs, tiles), lg `16–18px` (cards, panels), xl `22px` (large frames / foundation cards), pill `999px` (chips, status badges, avatar pill). ### Elevation (shadows) - Card resting: `0 12px 30px -18px rgba(30,45,80,0.25)` - Large frame: `0 20px 50px -30px rgba(30,45,80,0.40)` - Primary button glow: `0 8px 18px -8px rgba(24,119,255,0.6)` - Product hover lift: `0 20px 40px -20px rgba(24,119,255,0.45)` + `translateY(-4px)` - Small floating (heart button on image): `0 4px 10px -4px rgba(0,0,0,0.2)` - Focus ring: `0 0 0 4px rgba(24,119,255,0.12)` with `1.5px solid #1877FF` border ### Icons Lucide-style stroke icons (2px stroke, round caps/joins): search, heart, cart, user, 2×2 grid (categories), chevron-down, bell, package, tag, star, message, dollar/finance, plus, check. Use the codebase's icon library (Lucide recommended) — do not ship the inline SVGs verbatim. --- ## Screens / Views ### 01 · Foundations (UI kit) Reference sheet only — not a shipped screen. Documents the palette (11 swatches, 44px chip + name + mono hex), the Manrope type scale, radius/elevation samples, and live examples of every component: buttons, inputs, badges (below). **Buttons** - Primary: bg `#1877FF`, text `#fff`, weight 700, padding `13px 24px`, radius 12, glow shadow. - Primary hover: bg `#1466E0`. - Secondary: bg `#fff`, text Ink, `1.5px solid #E1E4EA`, radius 12. - Ghost: transparent, text Primary, weight 700. - Danger: bg `#FDECEE`, text `#F5455C`. - Sizes: Small `9px 16px` / 13px / radius 9; Large CTA `16px 30px` / 16px / radius 14. - Icon button: 44–46px square, radius 12, bg `#F2F4F7` (neutral) or `#EAF2FF` (primary tint) with Primary glyph. - Pill/chip: bg `#EAF2FF`, text `#1466E0`, radius 999, padding `9px 16px`. **Inputs** - Text/search: `1.5px solid #E1E4EA`, radius 12, padding `12px 15px`, bg `#fff` or `#F7F8FA`, leading icon Muted. - Focus: border Primary + focus ring (see shadows). - Select: same box, trailing chevron, bg `#F7F8FA`. - Checkbox: 20px, radius 6, checked = Primary bg with white check. - Toggle: 40×23 track radius 999, Primary when on, 18px white knob. **Badges / status** - Discount: bg Sale, white, weight 800, radius 8 (`-28%`). - New: bg Primary, white, radius 8. - Info chip: bg `#EAF2FF`, text `#1466E0`, radius 999 (e.g. "Free shipping"). - Status pill: tinted bg + 7px dot + label, radius 999 (Delivered=green, Shipped=amber, Pending=grey/muted). - Rating chip: bg `#FFF6E5`, gold `★` + value, weight 800, radius 8. ### 02 · Header & navigation Full-width bar, white, radius 18 (in-app it's a top bar), `0 12px 30px -18px …` shadow. Row padding `16px 26px`, gap 22. - **Left:** teeu logo (height ~34px). - **Categories button:** Primary filled, grid icon + label + chevron, radius 12, padding `12px 18px`. Opens a category mega-menu (not drawn — see Next steps). - **Search:** flex-1, `1.5px solid #E1E4EA`, radius 12, bg `#F7F8FA`, leading search icon, placeholder "Search across every category…", trailing `/` keyboard-hint chip. - **Right actions (guest):** Favorites and Cart as icon+label stacks with count badges (Favorites badge Sale `#F5455C`, Cart badge Primary), a vertical divider, then **Sign in** (secondary) + **Sign up** (primary). - **Category strip:** second row, `1px solid #F1F2F5` top border, horizontal list of category names (13.5px / 600 / Slate): All, Electronics, Fashion, Home & Living, Beauty, Sports, Toys & Kids, Grocery, Books, Auto. - **Signed-in variant:** replaces auth buttons with three neutral icon buttons (44px, `#F2F4F7`) — favorites, notifications (with red dot), cart (Primary count badge) — plus an avatar pill: 34px gradient avatar with initials + name + chevron, inside a `1.5px solid #E1E4EA` radius-999 pill. ### 03 · Product card Base: white, `1px solid #E7E9EE`, radius 18, overflow hidden. Image area is `aspect-ratio 1/1` with a striped placeholder (`#EEF1F5` + 45° repeating stripes) and a mono label `Category · 800×800`. Body padding `15px 16px 17px`. - Seller (12px / 600 / Muted) → product name (15px / 700, line-height 1.3) → rating row (gold `★` + bold value + `(reviews)` Muted) → price row. - Price: 20px / 800. Icon "+" add button 40px, radius 11, bg `#EAF2FF`, Primary glyph. - Favorite heart: top-right on image, 34px white circle, floating shadow; filled Sale `#F5455C` when active. **States** - **Default:** as above. - **Hover:** border `#D3E3FF`, hover-lift shadow + `translateY(-4px)`, heart filled Sale, and a full-width **Add to cart** Primary button overlaid at the bottom of the image (radius 11, glow). - **Sale:** Sale badge top-left (`-25%`); price shown in Sale color with struck-through old price beside it. - **Out of stock:** whole card `opacity 0.85`, image dimmed with a `rgba(245,246,248,0.55)` scrim, grey "Sold out" badge top-left, CTA replaced by disabled full-width "Notify me" (bg `#F2F4F7`, Muted text). ### 04 · Marketplace — browse Large frame: bg Canvas, radius 22, big shadow. - **Condensed header** (white, `1px solid #EEF0F3` bottom): logo, Categories button, search (prefilled), favorites/cart icons, avatar. - **Filters sidebar** (240px, right border `#EEF0F3`, padding `24px 22px`): - Category list — active item = Primary text on `#EAF2FF` radius-9 fill; others Slate. - Price — dual-handle range slider (track `#E7E9EE`, active segment Primary, white knobs w/ 3px Primary border), mono min/max labels. - Rating — checkbox rows with gold stars + "& up". - **Grid area** (padding 24): header row with "Electronics · 1,248 results" + Sort control (bordered pill w/ chevron, "Most popular"). Product grid = **4 columns**, gap 18, using the compact card variant (radius 16, smaller paddings, name min-height 36px to keep rows aligned, sale badge + heart on image, price + small "+" button). ### 05 · Customer dashboard Frame: Canvas bg, radius 22, big shadow, split into sidebar + content. - **Sidebar** (240px, white, right border): logo, nav list, user block at bottom (38px gradient avatar + name + "Member since 2023"). Nav items 14.5px / 700, radius 11, icon + label; **active** = Primary text on `#EAF2FF`. Items: Overview, My orders, Favorites, Messages, Profile. - **Content** (padding `28px 30px`): - Greeting "Hi Amara 👋" + subline. - **Stat tiles** — 4-up grid, white cards radius 16, label (Muted) + big 26/800 value: Active orders `2`, Favorites `14`, teeu points `820` (Primary), Saved this yr `$142` (Success). - **Two-column body** (1.55fr / 1fr): - **Your orders** card: list rows with 48px thumb, item name, mono meta (`#id · qty · eta`), right-aligned total + status pill. Below it a **tracking** widget on `#F7F8FA`: 4-step dot/line progress (Ordered → Packed → Out for delivery → Delivered), completed = Primary, current dot has `0 0 0 4px rgba(24,119,255,0.2)` halo, remaining `#E1E4EA`; labels beneath. - **Recommended for you**: 52px thumb + name + rating·price rows. - **Messages**: header with red unread count pill; avatar-initial + sender + preview line. Order data (sample): TU-4821 Aura Wireless Headphones · Out for delivery · $129; TU-4790 Organic Cotton Crew Tee ×2 · Delivered · $48; TU-4772 Hydrating Glow Serum · Shipped · $28. ### 06 · Store (seller) dashboard Frame as above but with a **dark sidebar** (bg Ink `#1E2024`, 240px). - **Sidebar:** logo (inverted via `filter: invert(1) brightness(2)`) + "SELLER" label; nav items Muted `#9CA3AF`, **active** = white text on Primary fill. Items: Dashboard, Orders, Products, Reviews, Payouts. Bottom: store block — 38px gradient square avatar "SL" + "SoundLab" + "Verified seller" (divider `#2E3237`). - **Content:** - Header "Dashboard" + "Store performance · last 30 days" + **Add product** Primary button (plus icon). - **Stat tiles** (4-up): Revenue (30d) `$18,240` +12.4%; Orders (30d) `342` +8.1%; Avg. rating `4.8` (128 reviews); Conversion `3.2%` −0.3%. Delta color = Success up / Sale down. - **Revenue** card (1.5fr): "30 days" chip, big `$18,240`, and a 7-bar column chart (bars `#EAF2FF`, the peak/current bar Primary, radius 6 top), mono W1–W7 axis. - **Recent reviews** card (1fr): header with `★ 4.8`; each review = name + gold stars, body text (Slate), mono `item · when`. - **Orders to fulfill** table (full width): 5-col grid `1.2fr 2fr 1.2fr 1fr 1fr` (Order / Product / Buyer / Status / Total, right-aligned), mono uppercase column headers, Order cell = mono Primary `#id` + time, status = tinted pill (New=blue, Packed=amber, Shipped=violet, Delivered=green), total 14/800 right-aligned. --- ## Interactions & Behavior - **Categories button** → opens a full category mega-menu / flyout (design TBD; wire the button + strip). - **Search** → typeahead suggestions; `/` focuses the field (keyboard hint shown). - **Favorite heart** → toggles saved state (outline Muted ↔ filled Sale) and updates the header Favorites count; optimistic update. - **Add to cart / "+"** → adds item, updates header Cart count badge. - **Product card hover** → lift + shadow + reveal "Add to cart" over the image (`transform` + `box-shadow` transition, ~150–200ms ease-out). - **Sort control / filters** → re-query and re-render grid; active category highlighted. - **Range slider** → dual-thumb price filter. - **Out of stock** → CTA disabled; "Notify me" subscribes to restock alerts. - **Order tracking** → step progress reflects fulfillment status; current step haloed. - **Nav items** → route between dashboard views; active state per tokens above. - **Seller "Add product"** → opens product create flow (not designed here). - **Responsive** (mobile web is in scope): header collapses (search under a row or icon, categories to a drawer, auth to a menu); product grid 4→2→1 col; dashboards stack sidebar into a top tab bar or drawer. ## State Management - **Session/auth:** `isAuthenticated`, `currentUser` (name, initials, role: customer|seller) → switches header between guest and signed-in, and gates dashboards. - **Cart:** `cartItems[]` + derived `cartCount`. - **Favorites:** `favoriteIds` set + derived `favoritesCount`; per-card `isFavorited`. - **Browse:** `activeCategory`, `filters` (priceRange [min,max], minRating), `sort`, `results`, `resultCount`, pagination/infinite scroll, loading + empty states. - **Product:** `inStock` flag drives the out-of-stock treatment; `discountPct`/`oldPrice` drive sale UI. - **Customer dashboard:** `orders[]` (id, item, qty, status, total, eta), `trackingSteps`, `recommendations[]`, `messages[]` + unread count, loyalty points. - **Store dashboard:** `stats` (revenue, orders, rating, conversion + deltas), `revenueSeries[]`, `reviews[]`, `fulfillmentOrders[]` (id, product, buyer, status, total, when). - Data fetching for all lists; loading skeletons should mirror the `hint-placeholder-count` slots (e.g. 8 product cards, 3–4 order rows, 2 reviews). ## Assets - `assets/logoblue.png` — the teeu wordmark logo (the only brand asset provided; black wordmark with a bright-blue accent + smiley). Use it in the header and both dashboard sidebars. On dark backgrounds it was inverted+brightened via CSS filter — prefer a proper light/mono logo variant in production. - **Product images:** all product imagery in the mocks is a **striped placeholder** labelled `Category · 800×800`. Replace with real 1:1 product photos (≥800×800). - **Fonts:** Manrope + JetBrains Mono (Google Fonts). - **Icons:** Lucide-style — use the codebase's icon set. ## Files - `Teeu Marketplace Kit.dc.html` — the full design canvas (sections 01–06). Open in a browser to see the live reference. The `