## 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-11.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-footer

## Before you start
Ask what the user's product is, who it is for, and what brand personality, colours, typography, and voice it uses. Then apply the principles below to create an original footer CTA for that product rather than reproducing the reference.

## Design the section
Build a dark, minimal footer or closing CTA section with a quiet technical feel and one clear next step.

### Layout and alignment
- Use a full-width, deep-black section with a centered content container, preferably around 1120–1200px wide on desktop.
- Create a subtle column-and-row grid across the background. The grid should align with the main container edges and a small number of internal columns; it should feel architectural rather than decorative.
- Keep the primary action centered horizontally within the section, with generous empty space around it.
- If supporting copy is needed, place it above or near the action in a compact block; keep the CTA visually dominant through placement, not oversized styling.
- Let the section transition naturally from the content above and below. On small screens, reduce the grid to fewer columns and preserve comfortable horizontal padding of roughly 24px.

### Typography hierarchy
- Use the product's existing typeface if available; otherwise choose a clean contemporary sans-serif or restrained monospace accent that suits the brand.
- Keep supporting text small and understated, approximately 13–16px with a 1.4–1.6 line height.
- Style the main CTA as concise medium-weight text, approximately 14–16px, with a little letter spacing and an optional directional arrow or equivalent affordance.
- Avoid large display headlines unless the user's product needs a stronger closing message.

### Colour
- Base background: near-black, approximately `#070809` to `#0A0B0D`.
- Grid and structural rules: extremely low-contrast charcoal, approximately `#17191C` or `rgba(255,255,255,0.08)`.
- Primary text: soft off-white, approximately `#E7E8EA`.
- Secondary text: muted grey, approximately `#777B82`.
- Use the user's brand accent sparingly for hover, focus, or a small active detail rather than flooding the section with colour.

### Borders, radius, and surface treatment
- Prefer crisp, square or near-square geometry: 0–4px corner radius for buttons and cells.
- Use 1px borders with low opacity; avoid heavy shadows, gradients, glassmorphism, and bright outlines.
- The grid can fade toward the edges or become less visible away from the CTA, but it should remain subtle enough that text stays legible.

### Interaction and accessibility
- Make the CTA an obvious keyboard-focusable link or button with a visible focus ring using the product's accent colour.
- On hover, slightly brighten the label and arrow, or increase border contrast; use a restrained 150–200ms transition.
- Ensure the contrast of the CTA and any required legal or navigation text meets accessibility standards.
- Keep the footer responsive: stack supporting content on narrow screens, prevent horizontal overflow, and retain the centered visual rhythm.

## Never
- Never use logos, product names, or branded marks from the reference.
- Never copy the reference's wording, CTA text, navigation labels, or other product-specific copy.
- Never reuse its illustrations, imagery, icons, glyphs, or visual assets; create only generic UI affordances where needed.
- Never make a pixel-for-pixel copy of the reference layout; adapt the grid density, spacing, content structure, and accent treatment to the user's product and brand.
- Never sacrifice readability or accessibility for the low-contrast aesthetic.