## 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/fly-io/55088b40-21c4-4b5b-a67c-8a1494f33e2d-1789073897-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fly-io/55088b40-21c4-4b5b-a67c-8a1494f33e2d-1789073866-full.webp
- Component on Kage: https://kage.design/component/fly-hero

# Build an illustrated split hero for a software product

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, typography, and primary conversion goal are. Then apply the principles below to create an original hero for my product—not a copy of the reference.

## Composition
- Create a full-width landing-page hero with a slim white navigation bar above it.
- Keep the navigation horizontally aligned in a centered content container, with brand treatment on the left, text links in the middle, and two right-side actions: a quieter secondary button and a filled primary button.
- Make the hero a two-part composition: a text block occupies roughly the left 48–55% of the content width, while a large expressive visual occupies the right side and can extend beyond the hero bounds.
- Vertically center the text block within a generous hero region, while allowing the artwork to feel oversized and slightly cropped at the top or right edge.
- Use generous left and right padding—approximately 6vw on desktop—and keep the headline width constrained so it remains a strong visual block rather than a long sentence.
- On small screens, stack the content: navigation becomes compact, the text comes first, and the artwork moves below it with a controlled height and no important details cropped.

## Typography
- Use a distinctive editorial or display serif for the main headline if that suits the brand; otherwise choose a strongly characterful display face that contrasts with the interface sans-serif.
- Set the headline in 72–104px desktop type, tight line-height around 0.9–1.0, and slightly negative tracking. Use two or three short lines with deliberate line breaks.
- Set supporting copy in a clean sans-serif at 18–21px with approximately 1.35 line-height and a maximum width of 500px.
- Navigation and buttons should use a readable sans-serif at 14–16px, with medium weight and clear contrast.
- Preserve a strong hierarchy: headline first, one concise explanatory statement second, then one primary CTA.

## Colour and atmosphere
- Use an airy, pale pastel hero background rather than a flat white surface. A suitable starting palette is soft sky blue #C9E5FA, blush #F7D6DE, and warm cream #F8EAD8, blended as a subtle gradient or broad colour fields.
- Use near-black ink #17151D for the headline and body text.
- Use a saturated violet primary action around #7135E8 or #7B3FF2, with white text.
- The artwork should introduce a few vivid accent colours—violet, cyan, coral, and yellow—without competing with the headline.
- Add very subtle translucent organic strokes or blurred colour shapes behind the artwork to create movement and depth. Keep them decorative and low contrast.

## Artwork direction
- Use an original, playful abstract object, character, or system metaphor that communicates the product’s purpose without relying on literal stock imagery.
- Give the artwork a bold silhouette, irregular hand-drawn contours, and a limited flat-colour palette. It should feel tactile and slightly eccentric, not like a generic 3D render.
- Scale the main visual large enough to overlap the background and anchor the right half of the hero. Supporting shapes may peek from behind it, but the text must remain easy to read.
- If the implementation uses SVG or CSS shapes, keep the illustration modular and responsive. If using an image asset, provide an original placeholder or generated visual rather than borrowing an existing brand asset.

## Controls and interaction
- Make the primary CTA visually dominant with a filled violet background, approximately 12px radius, and comfortable horizontal padding.
- Use a quiet secondary navigation action with a pale lavender fill or subtle border, while the primary navigation action is solid.
- Add hover states that slightly darken the primary button, lift it by 1–2px, and transition over 160–220ms. Add a visible keyboard focus ring.
- Navigation links may shift to a slightly darker colour or underline on hover; avoid excessive animation.
- Keep decorative background motion optional and very restrained—gentle drift or parallax only if it does not affect readability or performance.

## Spacing, borders, and surfaces
- Navigation height should be approximately 88–96px on desktop, with a clean white background.
- Use a hero minimum height around 590–680px, depending on the artwork and viewport.
- Leave 28–40px between headline and supporting copy, and 30–36px between supporting copy and CTA.
- Use little or no visible border on the hero. Buttons may use a subtle lavender border such as #D7CBEF.
- Keep corner radii moderate: 10–14px for buttons and 14–20px for any supporting cards or visual containers. Do not turn the hero into a card.

## Accessibility and implementation
- Maintain WCAG-appropriate text contrast over the pastel background.
- Give the artwork meaningful alternative text only when it conveys product information; otherwise mark it decorative.
- Preserve semantic heading order, keyboard navigation, responsive focus states, and reduced-motion support.
- Ensure the headline and CTA remain visible above the fold on common desktop sizes.

## Never
- Never reuse the reference’s logos, product names, navigation labels, headline, supporting copy, CTA wording, characters, illustrations, image assets, or exact visual motifs.
- Never imitate the reference artwork or trace its shapes, creatures, composition, or linework.
- Never use generic filler copy when product-specific messaging can be requested from me.
- Never let decorative imagery reduce text readability, obscure controls, or become the only way to understand the product.