---
version: alpha
name: Resellbot — Split Hero with Layered Auction Cards
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: 92px
    fontWeight: 800
    lineHeight: 88.32px
  body:
    fontFamily: '"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe
      UI", Roboto, Helvetica, Arial, sans-serif'
    fontSize: 21px
    fontWeight: 400
    lineHeight: 31.5px
---

## Overview
A warm off-white split hero combines a large tightly tracked headline, a yellow underline accent, two pill actions, and a layered stack of auction cards with green outcome metrics. Inspected as an isolated component at 1440px desktop and 390px mobile on 2026-09-29. Screenshot selector: `section.rb-hero`. 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 92px / 88.32px, weight 800, on desktop and 46.02px / 44.1792px on mobile. The sampled paragraph is 21px / 31.5px. 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
The desktop hierarchy is strongly asymmetric: broad text at left and a narrower product stack at right. Keep the headline around 92px at the measured desktop width and preserve deliberate line wrapping. Use a dark primary action and an outlined white secondary action with trial context below. On mobile, the text precedes two full-width stacked actions and the auction stack moves underneath. Retain 20px mobile gutters rather than scaling a desktop image. Measured bounds are 1440 × 774.469px desktop and 390 × 1234.38px mobile. These two widths do not establish an exact breakpoint.

## Elevation & Depth
The white foreground auction card floats above several narrower rear rows. Give only the important product panel a broad soft shadow; let text rest directly on the warm canvas. The yellow word underline adds a small organic contrast to otherwise geometric forms. 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
Headline, lead with bold introductory phrase, two actions, plan context, auction summaries, and a foreground card with a dominant amount and smaller metric rail. Green communicates numerical outcome rather than primary navigation.

## 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.