Kage Design logo kage
inngest.com
inngest.com call to action component

Design analysis

A high-trust enterprise CTA section that follows a data visualization with a direct security headline and a compact three-column proof grid. Strong typography, restrained copy, and generous negative space make the section feel factual rather than promotional.

Prompt preview
## 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/inngest-com/085d18d8-47d3-43b1-92ae-d8bd045a677d-1789074885-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/inngest-com/085d18d8-47d3-43b1-92ae-d8bd045a677d-1789074849550-full.webp
- Component on Kage: https://kage.design/component/inngest-cta

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual system are. Then apply the principles below to create an original version for that product—not a copy of the reference.

## Build this section
Create a dark, enterprise-oriented trust and compliance CTA section that can sit directly below a dashboard, analytics panel, or other proof-oriented product visual. The section should reassure technical and security-conscious buyers through clear facts, not decorative marketing.

### Layout and alignment
- Use a full-width near-black section with a centered content container, approximately 1150–1250px wide.
- Keep the content aligned to the same left and right edges as the section above it.
- Begin with a large, all-caps or strongly emphasized headline on the left, followed by one concise supporting sentence.
- Below the introduction, use a three-column grid on desktop with equal or near-equal widths and generous column gaps.
- Each grid item should contain a short proof-point heading and one or two lines of explanatory text. Allow the grid to continue into additional rows when the product has more trust claims.
- On smaller screens, collapse to one column or a comfortable two-column layout; preserve clear reading order and avoid cramped cards.
- Treat the section as a content-led CTA/proof block rather than a boxed card collection: avoid excessive containers around each item.

### Typography hierarchy
- Use a modern sans-serif with a technical, confident tone.
- Make the main heading large and prominent, roughly 36–48px on desktop, with tight line height and medium-to-bold weight.
- Use proof-point headings around 24–28px, with strong contrast and a compact line height.
- Supporting text should be 15–17px, relaxed line height, and a muted but readable tone.
- Use sentence case or uppercase consistently according to the user's brand; do not mix styles arbitrarily.
- If a proof point includes a link, make it visibly text-based with a subtle underline or underline-on-hover treatment.

### Spacing
- Give the section generous top and bottom padding, approximately 72–120px depending on viewport size.
- Leave 10–20px between the headline and supporting sentence.
- Leave 48–64px between the introduction and the proof grid.
- Use 28–40px vertical spacing between rows on mobile and desktop as needed.
- Keep paragraph measure controlled—roughly 32–45 characters per line for grid descriptions—to preserve scanability.

### Colour and surface
- Use a near-black background, approximately #050505 to #0A0A0A.
- Use warm or neutral white for primary text, approximately #F2F2F0 or #FFFFFF.
- Use a soft gray for supporting copy, approximately #9A9A9A to #B0B0B0.
- If separators are needed, use extremely subtle gray lines around #242424 or #2D2D2D.
- Let the user's accent colour appear only in links, focus states, or small interactive details; the proof content should remain restrained and credible.

### Borders and radius
- Prefer an open layout with no visible card borders around every proof point.
- If the surrounding product uses a panel, use a 1px border around #2A2A2A and a restrained radius of 8–14px.
- Keep radii consistent with the user's design system; avoid playful pills or heavily rounded cards for compliance content.

### Interaction and accessibility
- Make inline links keyboard accessible with a clear focus ring and a visible hover transition.
- Use subtle underline or colour changes rather than animated effects.
- Ensure text contrast meets accessibility standards and the grid remains readable at zoomed text sizes.
- If the section includes a primary CTA, place it after the introductory copy or beneath the proof grid, using the user's established button style; do not let it compete with the trust claims.

### Never
- Never reuse logos, product names, headlines, exact copy, compliance claims, or labels from the reference.
- Never copy the reference's specific grid content or wording.
- Never include the reference's chart, dashboard, illustrations, or imagery.
- Never invent certifications, security guarantees, or regulatory claims for the user's product; use placeholders or ask for verified details.
- Never turn every proof point into a visually heavy card or add unnecessary animation.

More components