Design analysis

The dominant section is a long, scannable ranked list with numbered rows, product avatars, titles, descriptions, category metadata, timestamps, click counts, and right-aligned monetary values. A narrow secondary ranking column appears beside the first rows, while activity and pagination break up the otherwise continuous table.

Prompt preview

## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/outbid-lol/7d6cde02-1b78-43c8-adde-d87a2555099d-1789142023-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/outbid-lol/7d6cde02-1b78-43c8-adde-d87a2555099d-1789139288987-full.webp
- Component on Kage: https://kage.design/component/outbid-lol-table

## Before you start
Ask what entities the user's product ranks, which fields matter, how ranking is calculated, and whether the experience needs a secondary sidebar. Then build a new leaderboard using the following reusable rules.

Create a centered leaderboard region with a main list column and an optional narrow “today” or secondary ranking column near the top. Each row should be a horizontal, lightly separated flex/grid item: rank number on the left, 40–48px rounded avatar or generated mark, content block with a one-line bold title and muted ellipsis description, compact metadata line, and a right-aligned accent value. On desktop use a roughly 70/30 main-to-sidebar split; on small screens hide or move the sidebar below the main list. Use occasional subtle activity summaries as separators only when they help scanning, and finish with centered pagination and a range label.

Use #fffdf9, #242321, #8a8178, #e8e1da, coral #df765e, pale peach #faeee8, and a small green status color #2f9d62. Keep rows 62–82px tall, content max-width about 700px, 12–16px horizontal padding, 1px separators, and 10–14px avatar radius. Titles are 12–14px semibold, descriptions 11–12px, metadata 9–10px, ranking values 12–14px semibold. Use tabular numerals for amounts. Add hover highlighting, links to detail views, accessible sort/filter controls, and pagination with a clearly active page.

Never use the reference's product names, ranking entries, dollar values, logos, avatars, descriptions, exact copy, or imagery.