## 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/trigger-dev/b9ca49c4-30e6-4b69-8f7d-3e7049f90280-1789073778-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/trigger-dev/b9ca49c4-30e6-4b69-8f7d-3e7049f90280-1789073735-full.webp
- Component on Kage: https://kage.design/component/trigger-testimonials

## Before you start
Ask me what my product is, who it is for, and what its brand personality, colours, and typography are. Then apply the principles below to create a version for my product rather than copying the reference.

## Build a closing CTA and footer grid
Create a full-width website ending section for a developer-focused or software product. The section should feel like a confident, practical final conversion moment followed by an information-rich footer.

### Layout and alignment
- Use a very dark near-black canvas, approximately `#101114` or `#111214`.
- Keep the content inside a centered, responsive container with a maximum width around `1200–1280px`.
- Build the upper area as a four-column grid on desktop:
  - The first column is wider, roughly 2.25–2.5 grid units, and contains the closing headline, supporting paragraph, and primary CTA.
  - The remaining three columns contain concise benefit or trust statements, each with a small accent icon, heading, description, and optional text link.
- Add thin vertical rules between columns using a low-contrast colour such as `#202226`; let the rules extend through the section to create a precise editorial grid.
- Place the footer navigation below a horizontal divider. Use a logo or wordmark area on the left and several link columns on the right. On smaller screens, collapse this into stacked sections or a two-column grid while preserving the same reading order.
- Align all text and controls to the same left edge within each grid cell. Give the primary CTA enough breathing room rather than centering it.

### Typography hierarchy
- Use a clean contemporary sans-serif system or brand font.
- Make the closing headline medium-to-large, around `28–32px`, with a weight of `500–600`, tight line height around `1.15`, and a soft off-white colour such as `#e4e5e8`.
- Use supporting copy at `18–20px`, line height around `1.45`, in muted grey `#8c8f98`; constrain its width so it remains easy to scan.
- Use feature headings at `16–18px`, weight `500–600`, with `#d7d8dc`.
- Use descriptions and footer links at `14–15px`, line height around `1.5`, in `#858891`.
- Keep labels short and sentence case. Establish hierarchy through size, weight, and contrast rather than excessive decoration.

### Spacing and sizing
- Give the upper CTA area generous padding: approximately `40–48px` horizontally and `56–72px` vertically on desktop.
- Use `24–32px` between the headline, paragraph, and CTA.
- Give each feature column at least `28–36px` of internal horizontal padding.
- Separate the upper grid from the footer navigation with a strong but subtle horizontal rule.
- Give the lower footer grid approximately `28–40px` of top padding and `64px` or more of bottom padding.
- On mobile, reduce outer padding to `24px`, remove or shorten vertical rules, and use `32–48px` gaps between stacked groups.

### Colour, borders, and controls
- Keep the background close to black: `#101114`.
- Use borders and grid lines around `#202226` or `#27292e`, never bright white.
- Make the main CTA a saturated lime or another brand accent, approximately `#9cff3b`; use near-black text, a compact height around `40px`, horizontal padding around `16px`, and a radius of `4–6px`.
- Add a small arrow or directional affordance to the CTA and text links. On hover, slightly increase brightness or translate the arrow a few pixels.
- Use distinct but restrained accent colours for the small feature icons, such as violet `#7654ff`, magenta `#ec35b7`, or another palette derived from the user’s brand.
- Keep iconography simple: small outlined or geometric symbols, approximately `20–24px`, with no large illustrations.
- Footer links should transition from `#858891` to `#d7d8dc` on hover. Preserve visible keyboard focus states with an accent-coloured outline.

### Content structure
- Write a direct closing headline that communicates readiness or a next step.
- Follow it with one concise sentence explaining the immediate benefit.
- Use one prominent action button.
- Include three short supporting value propositions, for example around pricing, deployment flexibility, reliability, security, or support—but choose topics that are true and relevant to the user’s product.
- Organize footer links into meaningful categories such as documentation, resources, product, and company. Keep each list compact and scannable.

### Responsive and accessibility behaviour
- At widths below roughly `800px`, change the upper grid to a single column or a clear two-column arrangement, keeping the CTA first.
- Ensure the CTA and all links have at least a comfortable touch target of about `44px` in height.
- Use semantic `footer`, navigation landmarks, headings, lists, and descriptive accessible labels for icon-only controls.
- Maintain sufficient contrast between muted text and the dark background, and never rely on colour alone to communicate link state.

## Never
- Never use the reference product’s logo, wordmark, product name, or branded copy.
- Never copy the exact testimonial, CTA, feature, or footer text from the reference.
- Never reproduce the reference’s proprietary icon shapes, illustrations, imagery, or brand marks.
- Never treat this as a pixel-perfect clone; adapt the grid, accents, content, and typography to the user’s product and brand.
- Never use decorative complexity that competes with the CTA or makes the footer difficult to scan.