## 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/mastra-factory/e98dc23c-cafd-4086-ae60-932f10b41f0f-1789106665-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mastra-factory/e98dc23c-cafd-4086-ae60-932f10b41f0f-1789106606408-full.webp
- Component on Kage: https://kage.design/component/mastra-factory-cta

# Before you start
Ask me what my product is, who it is for, and what its brand personality and visual system are. Then apply the principles below to create an original CTA and footer for my product—not a copy of the reference.

## Build this section
Create a full-width, dark closing section for a developer-focused product website. The section should feel like a confident final invitation to start building, with a centered CTA area above a large, contained footer panel.

## Design language

### Layout and alignment
- Use a near-black page background, approximately `#090909`, with generous vertical breathing room.
- Center the primary CTA content horizontally in the upper portion of the section.
- Use a large, two-line headline with a maximum width around 720–820px. Keep the line breaks intentional and let the headline dominate the hierarchy.
- Place a concise supporting sentence directly below the headline, constrained to roughly 600–700px.
- Arrange two primary actions in a centered horizontal row: one standard filled or elevated button and one darker command-style button that can include a copy affordance. Place a quieter text link beneath them.
- Below the CTA, add a large footer container inset from the viewport edges. On desktop it should have approximately 48–56px side margins; on small screens it should reduce to 16–24px.
- Inside the footer, place a small brand mark or product-independent symbol at the upper left and a newsletter signup at the upper right. Under that, use a six-column navigation grid on wide screens, collapsing to two columns or a stacked layout on narrow screens.
- Keep the footer content aligned to a consistent inner grid with approximately 38–40px padding on desktop and 24px on mobile.

### Typography hierarchy
- Use a modern sans-serif with a slightly technical feel; use a monospace face only for command snippets, labels, or small metadata.
- Make the headline approximately 64–72px on desktop, with tight line-height around 0.98–1.05 and mildly negative letter spacing. Scale it to 40–48px on mobile.
- Set the supporting copy around 18–20px with relaxed line-height and muted contrast.
- Use 14–16px labels for buttons and navigation headings. Make footer links slightly smaller and softer than their headings.
- Style any newsletter eyebrow in uppercase monospace or compact uppercase sans-serif, with increased tracking and a warm accent colour.

### Colour
- Page background: near-black `#090909`.
- Footer panel: approximately `#0b0b0b` or `#0d0d0d`, subtly distinct from the page.
- Primary text: soft white `#f4f3f1` rather than pure white.
- Secondary text and footer links: cool grey around `#8f8f8f` to `#a3a3a3`.
- Borders: low-contrast charcoal such as `#292929` or `rgba(255,255,255,0.14)`.
- Buttons should use dark graphite fills around `#242424`–`#2c2c2c`, with light text and a faint highlight or border.
- Use one restrained warm accent for the newsletter indicator and label, approximately amber `#d8964b`; do not introduce multiple bright accent colours.

### Borders, radius, and depth
- Give the footer panel a 1px subtle border and a large radius around 34–42px.
- Add a very soft, broad outer shadow or darker halo around the panel to separate it from the page without looking glossy.
- Use pill-shaped buttons and form controls with radii around 999px.
- Keep the visual treatment matte: no gradients, excessive blur, glassmorphism, or prominent drop shadows.

### Interaction and states
- Make the main buttons clearly clickable with hover states that slightly brighten the fill and raise contrast; keep transitions around 150–220ms.
- If the command-style action copies text, show a copy icon, provide an accessible tooltip, and change the icon or label briefly after copying.
- The newsletter form should include a clearly labelled email input and a compact submit button. Validate empty or malformed input accessibly and show a concise success state without shifting the layout.
- Footer links should gain a subtle colour increase or underline on hover and have visible keyboard focus styles.
- Ensure the CTA remains usable on mobile: stack the buttons, make form controls full width, and preserve comfortable touch targets of at least 44px.

### Content guidance
- Write original, product-specific copy based on my product and audience. The headline should communicate a clear next step, while the supporting copy should explain the practical outcome.
- Keep the action set focused: one primary conversion, one alternative developer-oriented action, and one low-emphasis information link.
- Use realistic navigation categories relevant to my product, but keep the footer concise.

## Never
- Never reuse logos, product names, exact copy, command strings, navigation labels, or brand assets from the reference.
- Never reproduce the reference’s exact layout proportions, line breaks, icons, or visual mark; create an original implementation using the same underlying principles.
- Never add illustrations, stock imagery, decorative artwork, or unrelated graphics.
- Never use bright multi-colour gradients, heavy shadows, oversized card effects, or dense footer content.
- Never sacrifice semantic HTML, responsive behaviour, accessibility, keyboard navigation, or visible focus states.