## 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/tally-so/8873d519-e012-4a77-bd60-f7e8803b75a7-1789060951-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tally-so/8873d519-e012-4a77-bd60-f7e8803b75a7-1789060926-full.webp
- Component on Kage: https://kage.design/component/tally-hero

# Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, typography, and visual assets they already use. Then apply the principles below to create an original hero for that product—not a reproduction of any reference.

## Build a playful, product-led SaaS hero
Create a responsive landing-page hero that communicates one clear promise above the fold and makes the product tangible through a large interface preview.

### Layout and alignment
- Use a clean, warm-white page background and a full-width header with a compact brand mark on the left and low-emphasis navigation plus one filled action on the right.
- Keep the hero content centered on a generous desktop canvas. Use a constrained text column: a single large headline, a short two-line supporting paragraph, a primary CTA, and a small reassurance line beneath it.
- Place the product preview below the CTA with enough vertical breathing room that it feels like the hero’s visual payoff. Use a centered browser/window frame that is wide on desktop, capped around 980–1100px, and inset from the viewport edges.
- Add a short credibility row beneath the preview: a sentence about adoption, a compact row of customer/category marks represented as text or neutral placeholders, and an optional award or trust badge. Keep this secondary to the product and CTA.
- On mobile, collapse navigation into a simple menu, reduce headline size, stack content vertically, crop or simplify the preview, and hide decorative marks that would create clutter.

### Typography hierarchy
- Use the user’s brand typeface where available; otherwise choose a contemporary sans-serif with sturdy, friendly proportions.
- Make the headline highly prominent: approximately 56–72px on desktop, 1.0–1.08 line-height, bold or extra-bold, with a maximum width that allows one or two balanced lines.
- Set supporting copy around 20–24px with a 1.35 line-height and a medium-dark neutral colour. Keep it short and benefit-led.
- Use 14–16px medium-weight navigation and button text. The reassurance line should be 12–14px and muted.
- Use a subtle hand-drawn underline or highlight beneath one meaningful headline phrase only if it suits the user’s brand; keep it imperfect and clearly decorative.

### Colour and visual tone
- Start from an airy palette: background near #FFFFFF or #FCFCFB, primary text near #111111, secondary text near #3F3F3F, and muted UI chrome around #E7E7E7.
- Choose one saturated brand accent for the primary CTA and any small expressive marks; a vivid blue such as #087CC1 or the user’s brand colour works well. Ensure white text has strong contrast.
- Keep the product preview mostly white and neutral so the actual product story remains legible. Use black or near-black controls inside the preview only where needed.
- Decorative accents can use a small secondary pop such as #D92BD4, but use it sparingly and never let it compete with the CTA.

### Borders, radius, and product preview
- Give the browser preview a 1px border around #E5E5E5, a 10–14px radius, and a very soft shadow such as `0 4px 18px rgba(0,0,0,.08)`.
- Build a lightweight browser chrome bar at the top with a horizontal divider and three small neutral circular controls. The content area should look like a believable, simplified version of the user’s product, not a generic empty rectangle.
- Use restrained corner radii: 6–10px for the browser frame and controls, with a slightly larger radius for the main CTA if that matches the brand.
- Maintain generous whitespace inside the preview so the interface feels calm and premium. Include only enough sample content to explain the product’s value.

### Interaction and accessibility
- Make the primary CTA visually dominant and keyboard accessible, with a clear hover state: slightly darken the accent, lift by 1px, or add a restrained shadow. Include a visible focus ring.
- Give header links and secondary controls clear hover and focus states without making them louder than the CTA.
- If the underline or decorative marks animate, use a quick, subtle entrance or hover transition and respect `prefers-reduced-motion`.
- Use semantic landmarks, one clear `h1`, accessible button/link labels, responsive sizing, and sufficient colour contrast.
- Keep trust content factual for the user’s product. If no real customer proof exists, omit it or use an honest generic statement rather than invented logos or metrics.

### Decorative composition
- Add a few hand-drawn-style doodle fragments around the outer edges of the hero—speech bubbles, arrows, stars, or abstract strokes—only when they support the brand personality. Keep them behind the main content, irregularly spaced, monochrome or lightly accented, and partially cropped at the viewport edges.
- Treat these elements as CSS/SVG-generated abstract shapes or user-provided assets. They should never obscure text, reduce readability, or become the focal point.

## Never
- Never reuse the reference’s logos, product name, customer names, award badge, metrics, exact copy, or interface content.
- Never copy the reference’s illustrations, doodles, screenshots, decorative placement, or exact visual composition; invent new shapes and product-specific content.
- Never assume the user’s brand is blue, black-and-white, playful, or hand-drawn—adapt the palette and personality after asking.
- Never use fabricated social proof, claims, customer marks, or awards.
- Never sacrifice responsive behaviour, accessibility, readable contrast, or performance for visual similarity.