BidDir — Homepage Opening Section

---
version: alpha
name: BidDir — Homepage
colors:
  surface-1: rgb(255, 255, 255)
  surface-2: oklch(1 0 0)
  surface-3: oklch(0.95 0.01 60)
  surface-4: oklch(0.52 0.018 50)
  heading: oklch(0.18 0.02 40)
  body: oklch(0.52 0.018 50)
  primary: oklch(0.18 0.02 40)
typography:
  heading:
    fontFamily: Inter, ui-sans-serif, system-ui, sans-serif
    fontSize: 48px
    fontWeight: 800
    lineHeight: 60px
  body:
    fontFamily: Inter, ui-sans-serif, system-ui, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
---

## Overview
Opening-section crop from an authentic browser screenshot; downstream directory imagery is excluded. Warm cream auction directory with coral bid controls and pale pink ranked product cards. Captured October 6, 2026. One small image failed in the long page; the principal hero and listing layout are intact. Do not reproduce a missing asset.

## Colors
Use the measured surface and text tokens above as the base palette. Dominant background samples describe interface surfaces, not colors inside logos or photographs. Preserve the restrained relationship between the canvas, supporting text and the focal accent.

## Typography
The inspected headline uses Inter, ui-sans-serif, system-ui, sans-serif at 48px, weight 800, with 60px line height. Supporting text sample uses Inter, ui-sans-serif, system-ui, sans-serif at 14px with 20px leading. These are computed styles at 1440px, not an inferred global type scale. Keep headings visually distinct from metadata and allow natural narrow-screen wrapping.

## Layout
Center a compact bid hero above a narrow ordered product list. Place the rank badge left, logo and description centrally, and price right; interleave compact trending/activity panels. On mobile the cards narrow and descriptions wrap.

## Elevation & Depth
Use the screenshot as the depth reference: keep text and content surfaces visually quiet, reserving emphasis for primary actions and highlighted content. Avoid adding heavy shadows that compete with the directory. Exact shadow values were not measured.

## Shapes
The sampled heading radius is 0px; this is not a card-radius token. Follow the visible component shapes described below. Keep consistent alignment, adequate touch targets, and content-driven heights.

## Components
Use coral circular rank markers, pill-shaped entry controls and gently rounded cream/pink rows. Keep the top three tinted while lower ranks use quieter white cards.

## Do’s and Don’ts
Preserve the reference-specific hierarchy and spacing rhythm. Use original content and properly licensed imagery when adapting. Do not copy live counts as product claims, imitate broken assets, or infer filtering, hover, payment, authentication or keyboard behavior from a still image. Mobile evidence covers the opening viewport at 390px; intermediate breakpoints and accessibility were not audited. One small image failed in the long page; the principal hero and listing layout are intact. Do not reproduce a missing asset.