Resellbot

---
version: alpha
name: Resellbot — Warm Canvas and Data-Rich Cards
colors:
  primary: '#1C1B19'
  background: '#F7F6F3'
  surface: '#FFFFFF'
  body: '#55524B'
  muted: '#6B675F'
  panel: '#EFECE6'
  positive: '#0B7A47'
  positive-soft: '#E4F2E9'
  divider: '#E6E3DC'
typography:
  display:
    fontFamily: Plus Jakarta Sans, system-ui, sans-serif
    fontSize: 92px
    fontWeight: 800
    lineHeight: 0.96
    letterSpacing: -0.048em
  heading:
    fontFamily: Plus Jakarta Sans, system-ui, sans-serif
    fontSize: 54px
    fontWeight: 800
    lineHeight: 1.03
    letterSpacing: -0.042em
  lead:
    fontFamily: Plus Jakarta Sans, system-ui, sans-serif
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.5
  body:
    fontFamily: Plus Jakarta Sans, system-ui, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  button:
    fontFamily: Plus Jakarta Sans, system-ui, sans-serif
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1
rounded:
  action: 999px
spacing:
  mobile-gutter: 20px
  hero-gap: 48px
components:
  primary-action:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.background}'
    typography: '{typography.button}'
    rounded: '{rounded.action}'
  data-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.body}'
---

## Overview
Resellbot's landing page combines a warm off-white canvas with unusually large, tightly set geometric headings and credible-looking product UI. A split hero pairs a forceful statement with overlapping auction cards; subsequent sections explain the product through tables, comparison rows, charts, and compact financial summaries. This reference is useful for data-heavy SaaS and marketplace tools that need an approachable marketing layer without hiding the interface.

Observed on 2026-09-29 at 1440 × 1000 desktop and 390 × 844 mobile. The full desktop capture is 9325px tall. Tokens come from computed styles unless described as visual estimates. Mobile review covers the opening viewport, not the entire page. Menus, sign-up flows, keyboard states, and chart controls were not exercised. Live auction values and countdowns are transient source content, not reusable claims or verified performance evidence.

## Colors
Use #F7F6F3 as the warm page ground and #1C1B19 for display text and primary controls. Explanatory text softens to #55524B, with smaller labels in #6B675F. White cards sit inside warmer #EFECE6 section panels; #E6E3DC separators keep dense data legible without heavy outlines. Green #0B7A47 and pale #E4F2E9 signal positive numeric outcomes. The hero and pricing statement use a small bright yellow marker-like underline; its exact painted value was not sampled, so treat it as an illustration accent rather than an extracted token. A near-black statistics band briefly inverts the palette.

## Typography
Plus Jakarta Sans provides both display and interface text. The desktop H1 is measured at 92px, weight 800, line-height 88.32px, and tracking -4.416px. Preserve its tightly packed four-line rhythm rather than setting a broad centered headline. Major H2s are 54px/55.62px at weight 800 with -2.268px tracking. Smaller paired feature headings are 38.88px/40.0464px. Lead copy is 21px/31.5px with a darker bold introductory phrase; compact data labels use 13–15px. Keep dense numerical UI quieter than the marketing headline.

The mobile headline reflows within a 350px column instead of scaling the desktop composition as an image. Keep comfortable paragraph leading and a clear separation between heading, explanation, and actions. The display's tight tracking should not spread to long body text.

## Layout
The desktop content span is 1200px, beginning 120px from the left of a 1440px viewport. The hero uses a 672px text column, a 48px gap, and a 480px product-card column. A low horizontal header aligns to the same container. Beneath the hero, a muted retailer strip gives way to a full-width dark statistics section. Follow with a large auction-table preview, split copy/detail-card section, paired analytical feature panels, centered comparison graphic, reversed market-data section, three product cards, a pricing banner, questions, and a final split CTA.

At 390px, use measured 20px side gutters. Navigation collapses to brand, visible trial action, and circular menu control. The hero becomes one column: heading and lead first, two full-width stacked buttons next, then the auction stack below. Maintain the warm whitespace and avoid compressing the data UI into the first screen. Two sampled widths do not establish the exact breakpoint. Section gaps of roughly 100–150px and panel insets around 40–50px are desktop visual estimates.

## Elevation & Depth
Reserve pronounced soft shadows for the overlapping hero cards and larger product demonstrations. The foreground card is opaque white and casts a broad gray shadow, while the narrower cards behind it create a shallow layered stack. Most section text stays directly on the page without containers. Warm inset panels group analytical features, and thin rules subdivide their white inner cards. Avoid glass transparency, neon glows, and blanket shadows on every element.

## Shapes
Actions use a measured 999px pill radius. The main data card has visually estimated 18–20px corners, while small metrics and badges are more compact. Keep dividers fine and chart strokes restrained. The yellow underline is irregular enough to soften the rigid typographic composition; restrict it to a few meaningful words rather than underlining every heading. Small circular status dots and check marks support data interpretation.

## Components
- Hero action group: dark filled primary action, white outlined secondary action with arrow, then understated plan/trial context. On mobile both actions fill the content column.
- Auction stack: shallow rear rows summarize seller and numeric result; the large front card contains a title, contextual label, dominant green amount, smaller status badge, three-column metric rail, and verification note. Reuse this hierarchy with genuine domain-specific data.
- Statistics band: white headline and large figures on near-black with quieter captions and vertical separators. Source numbers are not transferable endorsements.
- Table preview: a miniature app frame with slim sidebar, filter header, row dividers, green values, and occasional warning-colored states. Preserve enough detail to communicate the workflow without making the entire landing page look like an admin screen.
- Evidence list: a white inset manifest panel supports expanded sales rows. The static capture shows one open detail group; interaction and keyboard behavior remain untested.
- Analytical pair: two warm panels each contain a short heading and explanation above a white visualization, one for bid economics and one for payoff timing.
- Pricing banner: a wide white card with left-aligned offer, yellow underline accent, and compact actions on the right. Match the destination product's real terms rather than copying the source's price.
- Questions and footer: an asymmetric question section leaves ample breathing room beside compact answers. The final CTA returns to the auction-card motif before a dense but subdued multi-column footer.

## Do's and Don'ts
- Do let the product interface provide visual evidence instead of relying on abstract decorative graphics.
- Do balance bold, tight display typography with calmer labels, generous margins, and warm neutrals.
- Do use green for meaningful outcomes, not as an indiscriminate background for all controls.
- Do stack mobile actions and move secondary hero visuals below the main message.
- Don't copy auction results, retailer names, prices, customer claims, or product promises as facts about another business.
- Don't infer tested menu behavior, chart interactivity, or accessibility from screenshots; implement and verify those states separately.
- Don't turn the restrained warm palette into pure-white enterprise chrome or oversaturated gradients.