Kage Design logo kage
outbid.lol
outbid.lol hero component

Design analysis

The hero uses a simple time toggle, a large claim-oriented headline, and a single inline form for URL/handle, category, and ranking submission. Its compact height gets users to the leaderboard quickly while the coral action remains visually dominant.

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-1.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-hero

## Before you start
Ask what the user's product does, what users should submit or accomplish, and what brand voice to use. Then design an original hero that follows these principles rather than reproducing the reference.

Create a centered, compact hero directly below the navigation. Start with a small segmented time control, followed by a bold headline with one highlighted numeric or outcome phrase in coral. Under it, add a wide inline form with a URL or handle field, a category select, and a rounded coral submit button. Keep the form in one row on desktop and stack it responsively on mobile.

Use #fffdf9 as the page background, #242321 for the headline, #df765e for emphasis and the primary button, #f8e9e2 for soft controls, and #d8d0c8 for field borders. Use a bold 30–36px headline, 12px control labels, 14px inputs, 1px borders, 22–28px field radius, and generous 20–32px spacing between control groups. Include clear hover, focus, disabled, and validation states; the button should communicate the main action without gradients.

Never use the reference's headline, numbers, product name, copy, logos, illustrations, or imagery.

More components