## 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/raycast-com/85f2a082-cb21-4e6a-8485-365ffb9d735a-1789067519-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/raycast-com/85f2a082-cb21-4e6a-8485-365ffb9d735a-1789067491-full.webp
- Component on Kage: https://kage.design/component/raycast-cta

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

## Build this section
Create a dark, editorial CTA component with a modular technical grid. The section should feel like a premium product interface or engineering schematic: structured, quiet, precise, and visually rich without becoming busy.

### Layout and alignment
- Use a wide container with a 12-column or comparable modular grid and thin vertical and horizontal rules.
- Compose the section from several uneven rectangular cells rather than one conventional hero block.
- Include 2–3 feature cells that pair a short heading and supporting paragraph with an abstract product-related visual area.
- Use an intentionally asymmetric rhythm: alternate text-left and text-right cells, and let one larger visual cell span multiple columns or rows.
- Keep all content aligned to the same grid lines. Do not center every element.
- Place small technical labels such as `FIG_01` or a short category marker near selected cell edges, using them as visual navigation rather than primary content.
- End with a full-width or central bottom action row. Make the CTA easy to find, but visually quieter than the feature content.
- On mobile, collapse the grid into a single-column sequence while retaining the borders, labels, alternating rhythm, and clear CTA hierarchy.

### Typography
- Use a clean modern sans-serif for headings, with strong weight and compact line-height.
- Use a restrained monospace face for supporting copy, metadata, labels, and UI-like details.
- Heading scale: approximately 22–30px desktop, 18–24px mobile; use sentence case.
- Body copy: approximately 14–16px with generous line-height and a muted tone.
- Metadata: approximately 10–12px, uppercase or technical notation, with increased letter spacing.
- Keep copy short: one concise headline and two or three lines of supporting text per feature cell.

### Spacing
- Use generous outer padding, approximately 48–96px desktop and 24–32px mobile.
- Use consistent cell padding of approximately 28–48px, with larger padding in the main CTA cell.
- Maintain a deliberate amount of empty space around visual treatments so the grid does not feel crowded.
- Use a compact footer action row with approximately 20–28px vertical padding.

### Colour and surface
- Base background: near-black, approximately `#07090B` or `#090A0C`.
- Primary text: soft white, approximately `#F1F3F5`.
- Secondary text: cool gray, approximately `#777C84`.
- Grid and cell borders: extremely subtle blue-gray, approximately `#1B2027`, with some lines reduced in opacity.
- Accent colour: choose one brand-appropriate luminous colour; for a cool technical direction, use electric blue around `#2D7CFF` or `#4A92FF`.
- Keep accents concentrated in visuals and the main action affordance. Avoid colourful backgrounds or gradients unless they are essential to the user's brand.
- Visual cells may use a barely visible dot grid or fine technical pattern at low opacity to reinforce the schematic quality.

### Borders, radius, and visual treatment
- Prefer square or nearly square corners: 0–4px radius.
- Use 1px hairline borders and avoid heavy cards, shadows, and floating containers.
- Treat visual areas as part of the grid rather than separate cards.
- If product visuals are needed, use original abstract geometry, interface fragments, diagrams, or simplified 3D forms that relate to the user's product. Keep them low-detail, dark-toned, and highlighted with the chosen accent colour.
- Add small directional arrows or understated action glyphs only where they clarify interaction.

### Interaction
- Make the bottom CTA and any feature links keyboard accessible with visible focus states.
- On hover, slightly brighten the border, metadata, or arrow and shift the CTA accent colour; keep the transition subtle, around 150–250ms.
- Do not introduce excessive motion. If visual elements animate, use a slow, restrained parallax, glow, or opacity shift that respects `prefers-reduced-motion`.
- Ensure the CTA has a clear hover, active, and focus state without turning the entire section into a collection of animated cards.

### Content structure
- Use benefit-oriented feature headings and short explanatory copy tailored to the user's product.
- Include one primary final CTA with a concise action label and a small directional arrow.
- The CTA should communicate the next step directly, such as starting, exploring, installing, joining, or publishing—based on the user's product.

## Never
- Never use logos, product names, or branded copy from the reference.
- Never reproduce the reference's exact text, grid dimensions, cell arrangement, illustrations, 3D objects, or imagery.
- Never copy proprietary visual assets or decorative motifs one-for-one.
- Never make the section dependent on imagery; provide a strong typographic and grid-based fallback.
- Never use rounded SaaS cards, loud gradients, dense shadows, or generic centered-hero treatment unless they clearly fit the user's own brand.