## 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/supabase-com/b03f69f9-4b47-487d-8f2b-17d7cd19e877-1789060354-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/supabase-com/b03f69f9-4b47-487d-8f2b-17d7cd19e877-1789060301-full.webp
- Component on Kage: https://kage.design/component/supabase-cta

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual system are. Then apply the following principles to create an original version for that product rather than reproducing the reference.

## Build a centered conversion CTA with a trust strip

Create a spacious CTA section for a software product homepage. The component should feel calm, credible, and conversion-focused: one concise headline, two clearly differentiated actions, and a low-emphasis row of security or trust assurances beneath it.

### Layout and alignment
- Use a full-width section with a centered content column and a restrained maximum width, approximately 960–1120px.
- Center-align the headline and action group. Keep the CTA content visually compact near the top of the section while preserving generous vertical whitespace below it.
- Use a single-line headline on desktop where possible, with a responsive max-width that allows natural wrapping on smaller screens.
- Place the primary and secondary buttons in a horizontal row with a small, consistent gap; stack them vertically on narrow screens.
- Separate the trust strip from the CTA with substantial vertical space, approximately 150–180px on desktop and 72–96px on mobile.
- The trust strip should sit inside the same maximum-width container and use a subtle top or bottom divider. On desktop, arrange an introductory trust statement at the left and three concise assurances to its right. On mobile, allow the items to wrap into a compact vertical or two-column layout.
- Keep all elements aligned to a clear container edge even though the main CTA is centered.

### Typography hierarchy
- Use a modern sans-serif with a clean, technical feel; use the user's brand font when available.
- Make the headline prominent but not oversized: approximately 32–40px desktop, 28–32px mobile, with tight line-height around 1.1–1.2 and medium-to-semibold weight.
- Create emphasis inside the headline through weight or colour contrast rather than extra decoration.
- Use 14–15px text for buttons and trust statements, with 1.4–1.5 line-height.
- Keep certification labels visually subordinate using muted text and concise wording.

### Colour
- Start from the user's brand palette. For a similar restrained SaaS treatment, use an off-white or white background around #FFFFFF or #FAFAFA.
- Use near-black for primary text, around #111111–#1A1A1A, and a softer charcoal around #666666–#737373 for supporting text.
- Give the primary button a distinctive brand accent; a comparable mint/green range is #55D6A5–#6EE7B7, with dark text around #10231B.
- Use a white or near-white secondary button with a thin neutral border around #D4D4D4 and dark text.
- Keep the divider extremely subtle, around #EEEEEE–#F2F2F2. Avoid gradients unless the user's brand system calls for them.

### Borders, radius, and controls
- Use compact buttons approximately 40px high with horizontal padding of 16–20px.
- Apply a modest radius, approximately 6–8px, so controls feel polished without becoming pill-shaped.
- Give the primary action a subtle border or inner highlight in a slightly darker accent tone and a restrained shadow, if needed.
- Use small check marks or equivalent text-safe assurance markers in the trust row; keep them aligned with the first text baseline.
- On hover, slightly darken or saturate the primary accent, strengthen the secondary border, and preserve clear keyboard focus rings. Add a brief 150–200ms transition.
- Ensure buttons have accessible labels, visible focus states, sufficient colour contrast, and a touch-friendly hit area.

### Content behaviour
- Write a short, outcome-oriented headline appropriate to the user's product. Make the primary action the clearest next step and the secondary action useful for visitors who need more information or human contact.
- Keep the trust row factual and scannable: one short reassurance followed by two or three relevant certifications, safeguards, integrations, or reliability claims. Only show claims the product can substantiate.

### Never
- Never copy the reference's logo, product name, wording, headline, button labels, certification names, or other branded copy.
- Never reuse the reference's exact layout proportions, typography, colours, or spacing as a pixel-for-pixel replica.
- Never include the reference's illustrations, imagery, icons, or visual assets.
- Never invent security certifications, compliance claims, customer numbers, or guarantees for the user's product.
- Never sacrifice responsive behaviour, semantic HTML, accessibility, or visible keyboard focus states for visual similarity.