## 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/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106718-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106640138-full.webp
- Component on Kage: https://kage.design/component/noodle-seed-cta

## Before you start
Ask the user what their product does, who it is for, and what their brand identity is. Then apply the principles below to create an original version for that product—do not reproduce the reference literally.

## Build a dark, technical product-control CTA section
Create a spacious CTA section for a software product, infrastructure tool, developer platform, or security-focused service. The section should communicate control, reliability, and operational confidence through typography, structure, and restrained interface detail rather than decorative imagery.

### Layout and alignment
- Use a near-black full-width background, approximately `#050505` or `#000000`.
- Add a subtle horizontal divider between this section and adjacent content using `#1A1A1A`.
- Constrain the content to a centered max-width of roughly `1120–1180px`, with responsive side padding of `24px` on mobile and `56–72px` on desktop.
- Use a two-column composition on desktop:
  - Left column: the primary heading, concise explanation, and supporting operational copy.
  - Right column: a wide, low-contrast product/status panel aligned with the supporting copy rather than the top of the section.
- Give the section generous vertical breathing room: approximately `120–150px` top and bottom on desktop, reducing to `72–96px` on mobile.
- Keep the left content relatively narrow, around `420–500px`, so the message remains easy to scan. Let the right panel occupy the remaining width.
- Collapse to one column below roughly `760px`; place the status panel below the text with a comfortable gap.

### Typography hierarchy
- Use a clean modern sans-serif with a neutral, technical character. Avoid overly expressive display fonts.
- Set the main heading in a large regular or book weight, around `48–56px` desktop and `38–44px` mobile, with approximately `0.96–1.05` line-height. Break it into two short lines when that improves rhythm.
- Use soft white for the heading, approximately `#F2F2F2`, rather than pure white.
- Set body copy around `16–18px`, with `1.5–1.65` line-height and muted gray `#929292` to `#A4A4A4`.
- Use a smaller supporting paragraph around `14–16px`, with a slightly tighter measure and the same muted gray palette.
- If the product has a related detail page, make its inline text link subtly brighter and underline it; use a restrained hover transition rather than a vivid accent.

### Content structure
- Lead with a confident outcome-oriented statement about keeping the customer’s product, data, workflow, or operations under control.
- Follow with one short paragraph explaining the mechanism or value in plain language.
- Add a second supporting block that describes visibility, auditability, permissions, reliability, or operational safeguards.
- Avoid stacking multiple competing headlines. This is a focused conversion moment, not a feature grid.

### Status panel
- Build a quiet rectangular interface panel on the right with a very thin border, approximately `1px solid #282828`.
- Use a square or barely rounded treatment: `0–2px` radius. The panel should feel like a monitoring surface, not a marketing card.
- Give the panel generous internal padding, approximately `28px` desktop and `20px` mobile.
- Add a compact uppercase or monospace-style label on the left, such as a runtime, security, or system state label. Use low-contrast gray `#777777`, letter spacing around `0.18em`, and a font size of `9–11px`.
- Add a status indicator on the opposite side: a tiny warm accent dot in muted orange, approximately `#D97935`, paired with a small uppercase status label in `#777777`.
- Separate the panel header from its body with a thin horizontal rule using `#2A2A2A`.
- Keep the panel body mostly empty or minimally populated with subtle structural lines, metrics, or a quiet placeholder state. The visual weight should remain with the message on the left.

### Colour, borders, and interaction
- Primary background: `#000000` to `#050505`.
- Main text: `#F2F2F2`.
- Secondary text: `#969696`.
- Dividers and borders: `#1A1A1A` to `#2B2B2B`.
- Accent status colour: a restrained orange around `#D97935`; use it sparingly and only where it conveys state.
- If this component includes a CTA button, use a white or off-white pill with dark text, approximately `#F5F5F5` background and `#111111` text. Use medium horizontal padding, a `999px` radius, and an arrow or compact directional icon.
- On hover, slightly dim the button or translate the arrow by `2–3px`; do not add a glow or saturated gradient.
- Ensure keyboard focus states are visible with a thin light outline and sufficient contrast.
- Keep motion subtle: use short opacity, colour, or transform transitions around `150–220ms`. Avoid animated dashboards, blinking indicators, or distracting effects.

### Responsive behaviour
- On mobile, preserve the same hierarchy: heading, explanation, supporting detail, then the status panel.
- Reduce heading size and panel padding without making the section feel cramped.
- Allow long copy to wrap naturally; never force awkward line breaks.
- Ensure the status header remains readable if its label and indicator need to stack at narrow widths.

## Never
- Never use logos, product names, or branded copy from the reference.
- Never copy the reference’s exact wording, line breaks, measurements, or interface labels.
- Never use illustrations, photography, decorative imagery, or unrelated visual assets from the reference.
- Never turn the status panel into a dense fake dashboard or add invented metrics that distract from the CTA.
- Never use bright gradients, excessive rounded cards, neon accents, or heavy shadows that undermine the quiet technical tone.