---
version: alpha
name: Resellbot — Auction Table Product Preview
colors:
  primary: '#1C1B19'
  canvas: '#F7F6F3'
  surface: '#FFFFFF'
  copy: '#55524B'
  positive: '#0B7A47'
typography:
  heading:
    fontFamily: '"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe
      UI", Roboto, Helvetica, Arial, sans-serif'
    fontSize: 54px
    fontWeight: 800
    lineHeight: 55.62px
  body:
    fontFamily: '"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe
      UI", Roboto, Helvetica, Arial, sans-serif'
    fontSize: 13px
    fontWeight: 700
    lineHeight: 20.8px
---

## Overview
A product-feature section pairs a bold introduction with an inset auction-table interface: slim sidebar, toolbar, compact rows, green numeric outcomes, and a contrasting warning state. Inspected as an isolated component at 1440px desktop and 390px mobile on 2026-09-29. Screenshot selector: `section[class="rb-section"]`. This is not a whole-page capture.

## Colors
Near-black #1C1B19, warm #F7F6F3 canvas, white card surfaces, muted #55524B copy and green #0B7A47 numerical accents follow the measured source-site palette. Transparent roots inherit the site canvas; do not interpret transparent as an opaque color. Small highlights and illustration accents are visual observations, not newly measured tokens.

## Typography
The sampled heading uses Plus Jakarta Sans at 54px / 55.62px, weight 800, on desktop and 32px / 32.96px on mobile. The sampled paragraph is 13px / 20.8px. Use the heavy, tight heading sparingly and keep smaller interface labels readable. CSS font stacks describe the source, not font availability in a destination project.

## Layout
Use a wide introductory row with the heading left and explanation plus text link right. Below it, align a large white app frame to the same container. Keep row labels smaller than section text and align numerical columns consistently. On mobile, the sidebar and desktop column headers disappear and each auction becomes a stacked card-like row. The retailer and payoff occupy the top line, the description and source sit below, and financial metrics align along the bottom. Preserve this semantic reflow rather than scaling the desktop table. Measured bounds are 1440 × 988.156px desktop and 390 × 1270.58px mobile. These two widths do not establish an exact breakpoint.

## Elevation & Depth
A single app-window shadow lifts the product demonstration from the warm page. Thin internal row rules, a muted sidebar, and small pale badges make the dense interface scannable without heavy grid lines. The surrounding section remains unboxed. Exact shadow parameters were not sampled; shadow descriptions are visual estimates.

## Shapes
Maintain rounded rectangular product panels, fine separators, compact badges, and strongly rounded action pills where present. Avoid applying the pill treatment to data tables or text containers. Exact card corner radii are not encoded because they were not sampled individually.

## Components
Section heading and paragraph; a browse link; app title strip; quick-view sidebar; table/cards controls; retailer, lot, profit, maximum-price and payoff columns; compact condition labels; and an explanatory note below the table. Controls were not activated; the screenshot documents the resting visual state only.

## Do's and Don'ts
Do preserve the component hierarchy and readable responsive structure. Do use genuine product data, clear labels and accessible contrast when adapting. Do not reuse source auction amounts, countdowns, retailer names, performance claims or pricing as claims about another business. The live values are transient and were not independently verified. Do not infer menu, link, hover, chart, keyboard or conversion-flow behavior from static captures.