## 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/madebydaedalus-com/ae0cc407-2597-43fd-9c0f-0722227b2dcc-1789060549-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/madebydaedalus-com/ae0cc407-2597-43fd-9c0f-0722227b2dcc-1789060515-full.webp
- Component on Kage: https://kage.design/component/madebydaedalus-hero

## Before you start
Ask the user what their product is, who it is for, and what their brand personality and visual identity are. Then apply the principles below to create an original hero for that product—not a copy of the reference.

## Design the hero
Build a full-width desktop-first website hero with a calm, premium editorial feel and a playful visual counterpoint. The section should communicate a confident promise quickly, then provide one obvious path to act.

### Layout and alignment
- Use a centered content container around 1120–1200px wide with generous horizontal padding, approximately 56px on desktop and 24px on mobile.
- Place a slim header above the hero content. Keep the header visually quiet: a brand mark or wordmark on the left, a compact horizontal navigation in the middle or right, and a bordered utility CTA at the far right.
- Separate the header from the hero with a thin horizontal divider in a soft neutral tone.
- Use a two-column hero below the header: roughly 50–55% for copy on the left and 45–50% for an abstract visual on the right. Vertically center the two columns within a tall, airy hero region.
- Align the eyebrow, headline, supporting copy, and primary CTA to one left edge. Let the visual extend beyond its nominal column slightly so it feels less boxed in.
- On smaller screens, stack the copy above the visual, preserve the reading order, and reduce the artwork scale without removing it.

### Typography hierarchy
- Use a modern grotesk or humanist sans-serif with a confident, slightly warm character.
- Set the eyebrow in small 12–14px text with relaxed tracking and muted contrast. Pair it with a short horizontal rule or small marker.
- Make the headline the dominant element: approximately 76–104px on desktop, 52–68px on tablet, and 42–54px on mobile; use a tight line-height around 0.9–1.0 and slightly negative letter spacing.
- Break the headline into a few deliberate lines rather than relying on arbitrary wrapping. Keep it short, memorable, and specific to the user’s product.
- Add a subtle inline emphasis beneath one phrase—such as a thin gradient stroke, soft highlight, or underlining gesture—without harming legibility.
- Keep supporting copy to roughly 2–3 short lines at 16–18px with a 1.5 line-height and a soft charcoal colour.
- Use concise CTA labels with medium-to-semibold weight; pair the main label with a simple arrow or directional icon.

### Colour and visual language
- Start with an off-white background near #FAF9F7 or #FBFAF8 rather than pure white.
- Use near-black ink around #17151D for the headline and primary button.
- Use muted grey-brown text around #6E6A68 for secondary copy and navigation.
- Make the visual area an original abstract form appropriate to the product: use fluid geometry, a soft multi-colour gradient, and a few small orbiting accents. A useful palette may include warm yellow #FFD84A, coral #FF8A72, violet #C77DFF, and sky blue #63B9F2, but adapt it to the brand.
- Keep decorative elements low-density and intentional. Fine orbit lines can use #DDDAD6 at low opacity; small accent shapes should echo the main gradient.

### Borders, controls, and spacing
- Use thin 1px borders around the header divider, utility CTA, and primary CTA where appropriate, using #D8D5D1 or a brand-adjusted equivalent.
- Give the utility CTA a compact pill or softly rounded rectangle with approximately 8–10px radius.
- Give the primary CTA a slightly rounded rectangle around 7–10px radius, with a dark fill and light text. Include comfortable padding around 16px 22px and an arrow aligned at the far edge.
- Maintain a strong vertical rhythm: approximately 28–36px from eyebrow to headline, 28–40px from headline to supporting copy, and 28–36px from supporting copy to CTA.
- Place any secondary note beside or beneath the primary CTA in small muted text, as optional reassurance rather than a competing action.

### Interaction and motion
- Make both header and hero CTAs visibly interactive with a restrained hover state: slightly lift or brighten the surface, shift the arrow a few pixels, and animate the transition over 180–240ms.
- If the visual is animated, use slow, subtle floating or orbital movement; avoid distracting the user from the headline.
- Respect reduced-motion preferences.
- Ensure keyboard focus states are clear and accessible, with sufficient colour contrast and semantic heading/button/link elements.

### Responsive behaviour
- At tablet widths, reduce the headline and artwork scale while keeping the two-column relationship if space allows.
- At mobile widths, stack the sections, keep the CTA full-width or naturally sized, and place the artwork below the copy with generous breathing room.
- Prevent decorative artwork from causing horizontal overflow. Keep all copy readable without relying on visual overlays.

## Never
- Never copy the reference’s logos, product names, headline, navigation labels, CTA copy, annotations, or brand-specific wording.
- Never reuse the reference’s exact abstract character, shapes, composition, illustrations, or imagery.
- Never make the hero dependent on imagery or illustration if an original CSS/SVG visual can communicate the idea.
- Never overcrowd the header, use multiple competing primary CTAs, or sacrifice readability for decorative effects.