Kage Design logo kage
ffffinder.repponen.com
FFFFinder hero component

Design analysis

A deliberately quiet opening establishes the product with a short monospace-style statement and a large rounded application preview. The oversized whitespace and pale panel make the interface image feel like the central proposition.

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/ffffinder/236e01a7-b902-40d9-8cf2-9e70faeb5362-1790748892-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ffffinder/236e01a7-b902-40d9-8cf2-9e70faeb5362-1790748796754-full.webp
- Component on Kage: https://kage.design/component/ffffinder-hero

## Before you start
Ask what the user's product is, who it is for, and what brand personality and visual assets they already have. Then apply the principles below to that product rather than reproducing this reference.

Build a restrained product hero with a short, highly legible statement near the upper content edge and one dominant application or product preview beneath it. Use a generous single-column layout, full-width canvas, and a centered preview panel with a pale cool-gray background, a large radius, and ample outer whitespace. Let the preview carry most of the visual weight; the copy should be concise and functional rather than marketing-heavy.

Design rules:
- Use a narrow content measure for the intro copy, aligned to the same left inset as the preview.
- Give the hero substantial vertical breathing room; keep the preview large enough to communicate the product at a glance.
- Use a compact monospace or technical sans for small explanatory text, with a slightly stronger weight for the first line.
- Approximate palette: white `#FFFFFF`, panel `#E8ECF2`, text `#171717`, muted text `#73777D`.
- Use 16–20px corner radius on the outer preview panel and a restrained shadow only if needed to separate it from the page.
- If the preview is interactive, support hover/focus states without distracting from the static composition.

Never:
- Never copy logos, product names, wording, illustrations, screenshots, or imagery from the reference.
- Never make the hero a generic gradient landing page or add decorative claims that the product cannot support.

More components