## 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/desert-ant-labs/9afde706-8b4f-4c5f-a9d8-7a634f78e07d-1789106570-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/desert-ant-labs/9afde706-8b4f-4c5f-a9d8-7a634f78e07d-1789106538010-full.webp
- Component on Kage: https://kage.design/component/desert-ant-labs-cta

## Before you start
Ask the user what their product does, who it is for, and what their brand personality and visual system are. Then apply the principles below to create a tailored version for their product—not a copy of the reference.

## Build a minimal developer-focused CTA section
Create a standalone call-to-action section that feels calm, direct, and highly usable. It should work near the end of a landing page and give visitors a clear low-friction next step plus a small set of supporting resources.

### Content structure
- Use a short, benefit-led headline of two lines when appropriate. The first line should communicate the invitation or offer; the second should remove a major source of friction, such as signup, cost, setup, or commitment.
- Add one or two compact supporting paragraphs beneath the heading. Explain the offer in plain language, then reinforce the broader product promise or outcome.
- Finish with a horizontal action group containing one visually dominant primary button and two or more outlined secondary buttons when the product has useful documentation, community, demo, or resource destinations.
- Adapt all wording, destinations, and number of actions to the user’s product. Do not force developer-oriented links if they are not relevant.

### Layout and alignment
- Use a full-width section with a warm off-white background and a subtle top or bottom divider if it fits the surrounding page.
- Constrain the content to a readable left-aligned column, approximately 560–650px wide, positioned within a generous page gutter of roughly 64px on desktop.
- Keep the section visually sparse: large empty space should surround the content rather than filling the entire viewport with decorative elements.
- Stack the heading, body copy, and actions vertically with clear rhythm. Align every element to the same left edge.
- On smaller screens, reduce the page gutter to approximately 24px and allow buttons to wrap or stack while preserving comfortable touch targets.

### Typography hierarchy
- Use a bold, modern sans-serif for the headline, around 36–42px on desktop, with a tight line-height near 1.1 and slightly negative tracking.
- Use a compact monospace or technical-looking text style for supporting copy if it suits the brand; otherwise use a restrained sans-serif. Target roughly 15–16px with a 1.6 line-height.
- Keep the heading nearly black and the body copy a slightly softer charcoal so the hierarchy is clear without relying on colour alone.
- Make button labels medium or semibold, around 15–16px, with concise action language.

### Spacing
- Give the section at least 96px of vertical padding on desktop and 64px on mobile.
- Leave approximately 40–48px between the heading and body copy.
- Separate supporting paragraphs by about 28–36px.
- Place the action row around 40–48px below the final paragraph.
- Use 16–20px horizontal gaps between buttons and 12–16px vertical gaps when buttons wrap.

### Colour and surfaces
- Use an understated warm paper background near `#F7F6EE` or `#FAF9F1`.
- Use near-black text around `#111615`.
- Use a softer charcoal around `#242725` for body copy.
- Make the primary button near-black, approximately `#111615`, with warm-white text around `#F7F6EE`.
- Keep secondary buttons transparent or matching the section background, with dark borders and text.
- Avoid gradients, loud accent colours, shadows, and decorative texture unless they are essential to the user’s existing brand.

### Borders, radius, and controls
- Give buttons a strong 1.5–2px dark border so the outlined controls remain legible on the pale surface.
- Use a pill-like radius of approximately 16–18px, or around half the button height; the controls should feel rounded but not bubbly.
- Set button height around 52–56px with horizontal padding of 20–24px.
- Use a slightly heavier border or subtle tonal shift on hover. The primary button may lift by 1–2px or become marginally lighter; keep motion restrained.
- Add visible keyboard focus styles with a 2–3px contrasting outline and adequate offset.
- Ensure buttons and links have accessible labels, sufficient contrast, and touch targets of at least 44px.

### Responsive and interaction behaviour
- On desktop, keep the actions in one row when they fit naturally.
- On narrow screens, let the actions wrap cleanly or become full-width stacked buttons; never allow clipped labels or horizontal overflow.
- Preserve the primary action’s visual priority across breakpoints.
- Use short transitions around 150–200ms for colour, border, and transform changes, with reduced-motion support.
- If one action opens an external resource, communicate that through the label or accessible metadata where appropriate.

### Never
- Never copy the reference’s logos, product names, exact copy, URLs, illustrations, imagery, or brand-specific assets.
- Never reproduce the reference as a pixel-for-pixel clone.
- Never invent claims, pricing, limits, integrations, or destinations that the user has not provided.
- Never use decorative visuals that compete with the CTA or weaken its directness.