## 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/attio-com/853806da-b35e-493c-a2ae-f3b42d8e3fbb-1789060459-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/attio-com/853806da-b35e-493c-a2ae-f3b42d8e3fbb-1789060424-full.webp
- Component on Kage: https://kage.design/component/attio-cta

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

## Build this section
Create a spacious, centered call-to-action section for a modern software product. The section should move from a concise product promise into a clear primary action, then reinforce the promise with a cropped, believable product-interface preview beneath it.

### Layout and alignment
- Use a wide, centered section inside a restrained page container, approximately 1200–1280px at desktop widths.
- Add a subtle 1px vertical border or container edge on both sides and a fine horizontal divider at the top.
- Keep the text block centered and relatively narrow: approximately 760–900px wide.
- Reserve generous top space before the eyebrow label, around 150–190px on desktop, so the CTA feels like a destination rather than a standard card.
- Place a compact eyebrow label above the headline, followed by a headline with 2–3 balanced lines and a primary button beneath it.
- Let a product preview enter from below the CTA and extend beyond the visible section if appropriate. It should feel like a continuation of the product, not a separate marketing card.
- On mobile, reduce the top padding substantially, stack all content vertically, allow the headline to use 3–5 shorter lines, and make the preview horizontally scrollable or safely cropped without causing page overflow.

### Typography hierarchy
- Use a clean contemporary sans-serif with a neutral, highly legible appearance.
- Eyebrow: 13–14px, medium weight, compact line height, blue text on a very pale blue rounded pill.
- Headline: approximately 40–46px on desktop, 1.05–1.12 line height, slightly tight tracking, medium or semibold weight. Keep the first phrase dark and let the supporting phrase use a muted slate gray to establish emphasis without extra decoration.
- Button label: 14px, medium weight.
- Interface preview labels and metadata should be 12–14px, with clear differences between headings, secondary text, and data values.

### Colour
Use the product’s brand colours where appropriate, while preserving the calm, high-contrast structure:
- Page background: near-white, approximately `#FCFCFB` or `#FFFFFF`.
- Primary text: near-black, approximately `#17191C`.
- Secondary headline text and muted UI copy: cool gray, approximately `#737984`.
- Fine rules and panel borders: very light gray, approximately `#E4E6E8`.
- Eyebrow background: pale blue, approximately `#EEF5FF`.
- Eyebrow and link accent: medium blue, approximately `#245B9B`.
- Product preview surface: white with extremely subtle cool-gray fills such as `#F8FAFA`.
- Keep colour restrained; use saturated colour only for meaningful product states, links, or small status indicators.

### Borders, surfaces, and radius
- Use hairline borders rather than heavy shadows.
- Give the primary button a 1px neutral border, white or near-white fill, and a small 8–10px radius.
- Use 10–14px radii for interface cards and preview panels.
- The product preview should look like a polished application window: a thin outer border, soft inset sections, and subtle separation between columns or cards.
- Avoid large gradients, dramatic shadows, or oversized decorative shapes.

### Product preview
- Build an original, abstracted interface relevant to the user’s product: for example, a record or profile panel on the left and a contextual workspace with summary, upcoming activity, company/project information, and a timeline on the right.
- Use realistic placeholder data that belongs to the user’s domain, but do not reproduce the reference’s names, labels, copy, or exact arrangement.
- Keep the preview partially below the CTA’s main content so only the top portion is visible initially. It should provide enough detail to make the product promise credible.
- Include small, quiet interaction cues such as linked text, a compact toolbar, status chips, tabs, or an overflow menu. These may be visual in a static mockup, but should have hover states if implemented interactively.

### Interaction
- The primary CTA should have a clear hover state: slightly darker border, subtly tinted background, and a fast 150–200ms transition.
- The eyebrow is informational, not a button, unless the product strategy requires it to link elsewhere.
- If the product preview contains controls, provide keyboard-focus states and understated hover feedback; do not let decorative controls distract from the CTA.
- Preserve the centered reading order and make the primary CTA easy to reach with keyboard navigation.

## Never
- Never use the reference product’s logo, product name, brand wording, or exact marketing copy.
- Never copy the reference interface’s names, data, labels, illustrations, imagery, or exact card arrangement.
- Never use logos from the reference or imitate its visual identity so closely that the result feels branded to that product.
- Never make the CTA dependent on imagery; the hierarchy must work with typography, spacing, and the product preview alone.
- Never use heavy shadows, noisy decoration, excessive colour, or a crowded interface preview that competes with the headline.