## 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-5.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-cta

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

## Design goal
Build a warm, confident contact CTA that turns an open-ended invitation into a clear next step. The section should feel editorial and human: a large question or invitation creates emotional pull, while concise supporting text, a useful contact detail, and one prominent action make the conversion path obvious.

## Layout and alignment
- Use a full-width, softly tinted section with generous desktop padding: approximately 56–72px top and bottom, and 56px horizontal padding on large screens.
- Organize the content as an asymmetric two-column composition: the primary message occupies roughly 55–65% of the width; the CTA action sits in the right column and is vertically aligned around the middle of the headline/supporting content rather than at the top.
- Keep all text in one consistent left-aligned content axis. Place a small eyebrow line above the headline, optionally preceded by a short horizontal rule.
- Make the headline the visual anchor, with a maximum width that allows it to wrap into two or three intentional lines. Avoid centering the entire section.
- Place the supporting copy below the headline, followed by a compact email/contact utility row and a small explanatory note.
- On screens below roughly 760px, collapse to one column: keep the headline first, then supporting copy and contact utility, with the primary button below and full-width or naturally sized.
- Preserve the generous empty space around the content; this CTA should feel calm and considered rather than densely packed.

## Typography hierarchy
- Use a modern geometric or humanist sans-serif with a distinctive, friendly character. Use a heavy or bold display weight for the headline and a regular/medium weight for supporting text.
- Eyebrow: 12–13px, medium weight, muted colour, with comfortable letter spacing and sentence-case wording.
- Headline: approximately 72–96px on desktop, with a tight line-height around 0.9–1.0 and slight negative tracking. Scale down fluidly to around 48–60px on tablet and 38–48px on mobile.
- Add one expressive typographic accent—such as a question mark, colon, or highlighted final word—in a contrasting purple or brand accent. Keep the accent integrated into the headline rather than turning it into decoration.
- Supporting copy: 14–16px with a 1.6 line-height, using short lines and generous separation between sentences or paragraphs.
- Utility text and helper text: 11–13px, muted and understated. Button text should be 13–15px, medium or semibold, with clear contrast.

## Colour
- Use a pale lavender/lilac background close to `#F0E7F7` or `#F1E8F8`.
- Use a very dark near-black for the headline and button, around `#17151D` or `#19171F`.
- Use a softened charcoal for body and helper text, around `#6F6877`.
- Use a restrained violet accent for the expressive punctuation or highlighted word, around `#9565B8` or `#9B6BC0`.
- Keep the palette quiet: the accent should appear sparingly, while the button remains the strongest contrast point.

## Borders, radius, and surfaces
- Use a thin, low-contrast border around the contact utility control, approximately `1px solid rgba(35, 28, 45, 0.14)`.
- Give the utility control a pill-like radius of 999px and modest horizontal padding.
- Use a dark primary button with a medium radius of approximately 8–10px, not a pill. Make it large enough to feel deliberate, around 220–240px wide and 56–60px tall on desktop.
- Keep the button surface nearly black with a very subtle border or inner highlight so it does not appear flat.
- Avoid cards, shadows, gradients, and extra containers; the background field should carry the section.

## Interaction
- The primary button should include a concise action label and a simple directional icon, such as an arrow pointing up-right. Position the icon at the far right with balanced inset padding.
- On hover, slightly brighten the button or shift it by 1–2px, and animate the arrow with a small diagonal movement. Keep the transition quick and restrained, around 180–240ms.
- The email/contact utility should support a copy action. On activation, change the label temporarily to a confirmation state such as “Copied” and provide a subtle visual confirmation without disrupting layout.
- Ensure keyboard focus is clearly visible with a 2px accent or light outline and sufficient contrast.
- Respect reduced-motion preferences by disabling movement animations when requested.

## Content guidance
- Write an open-ended headline that invites the user to start a conversation, but adapt the wording to the product’s audience and voice.
- Keep the supporting message to two short lines or compact sentences: clarify what the user brings and what the product or team contributes.
- Include an appropriate contact method only if it is useful for the product. If not, replace the email utility with another low-friction secondary action.
- Make the main button outcome-specific rather than generic, and ensure its destination or behavior is clear.

## Never
- Never reuse the reference’s logo, product name, brand name, exact copy, or contact address.
- Never copy the exact headline, button label, typography treatment, or layout proportions as a pixel-for-pixel recreation.
- Never use illustrations, photographs, icons, or imagery from the reference; use original text and a simple generic interface icon if needed.
- Never make the CTA a generic centered banner with no clear hierarchy.
- Never use excessive decoration, loud gradients, dense copy, or multiple competing primary actions.
- Never sacrifice responsive behavior, keyboard accessibility, colour contrast, or reduced-motion support.