## 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/gojo/109391a8-f454-43af-b6cd-05815ad35e3c-1789106544-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/gojo/109391a8-f454-43af-b6cd-05815ad35e3c-1789106501929-full.webp
- Component on Kage: https://kage.design/component/gojo-cta

## Before you start
Ask the user what their product is, who it is for, and what brand personality, typography, and colour palette they want to use. Then apply the principles below to create an original version for that product—not a copy of the reference.

## Build this section
Create a wide, minimalist CTA section that introduces product customization immediately before a pricing section or another high-intent conversion area.

### Layout and alignment
- Use a full-width white or near-white section with a centered content container, approximately 1150–1250px wide.
- On desktop, use a two-column grid: a narrower left column for the headline and supporting copy, and a wider right column for a compact list of configurable features.
- Align both columns to the same top baseline.
- Give the left column roughly 42% of the width and the right column roughly 58%, with a generous 56–80px gap.
- Place a thin horizontal divider across the full viewport near the bottom of the section to mark the transition into the next block.
- Follow the divider with a large, centered heading for the next conversion-oriented section, such as pricing. Keep this heading visually separate from the CTA content above.
- On mobile, stack the columns vertically, keep the feature list readable, and preserve generous vertical spacing. The transition divider should remain full width.

### Typography hierarchy
- Use a modern sans-serif with a clean, slightly editorial feel.
- Make the primary headline large, bold, and compact: approximately 36–42px on desktop, 30–34px on mobile, with tight line-height around 1.05–1.15.
- Set supporting copy in a muted medium-gray at approximately 18–20px with a relaxed line-height around 1.55–1.7.
- Add a small introductory label above the feature list, around 15–16px, using muted gray text.
- Render feature names at approximately 16px with a comfortable 1.4 line-height. Use slightly stronger text colour than the label, but avoid excessive weight.
- Make the following section heading prominent and centered, around 40–44px, with a bold weight.

### Feature list treatment
- Present configurable items in a two-column grid rather than cards.
- Separate rows with very subtle horizontal rules; do not add vertical borders between columns.
- Keep each row compact but breathable, using approximately 16–18px vertical padding.
- Allow individual feature labels to wrap naturally.
- If a feature has a keyboard shortcut or secondary control hint, show it as a small inline keycap with a pale gray background, a thin border, and a 3–5px radius. Keep keycaps visually secondary.
- Use clear, neutral labels that communicate optionality or customization without sounding technical.

### Spacing
- Use approximately 64–88px top padding and 76–96px bottom padding for the main CTA area.
- Keep 18–24px between the headline and supporting paragraph.
- Leave 24–32px between the feature-list label and its first divider.
- Use approximately 84–120px of vertical space between the CTA divider and the next section heading, depending on viewport size.
- On small screens, reduce horizontal padding to 20–24px while preserving the section’s airy rhythm.

### Colour and surface
- Use a white background near `#FFFFFF` or a very lightly tinted neutral such as `#FCFCFB`.
- Use near-black for the primary heading, approximately `#171717` to `#202020`.
- Use a soft gray for supporting and metadata text, approximately `#737373` to `#858585`.
- Use a darker gray for feature labels, approximately `#4A4A4A`.
- Use extremely subtle dividers, approximately `#E7E7E7` to `#EEEEEE`.
- Use pale gray keycaps around `#F4F4F4` with a border around `#DEDEDE`.

### Borders and radius
- Keep the overall section borderless except for the horizontal transition divider and feature-row rules.
- Use 1px solid borders with low-contrast neutral colours.
- Use small 3–5px radii for keyboard keycaps or inline utility elements.
- Avoid rounded cards, shadows, gradients, and decorative containers; the visual language should feel lightweight and document-like.

### Interaction and responsiveness
- If feature items are configurable, make them keyboard accessible and visibly interactive on hover, focus, and active states without changing the restrained aesthetic.
- Use a subtle background tint or text-colour shift on hover rather than a dramatic animation.
- Keep focus indicators clearly visible, such as a 2px outline in the product’s accent colour with a 2px offset.
- Ensure the two-column list becomes a single-column list on narrow screens, or use a responsive two-column layout only when each label has enough room.
- Preserve the relationship between this CTA and the next section: the divider and following heading should remain visually legible at every breakpoint.

## Never
- Never use the reference product’s logo, product name, brand identity, or exact copy.
- Never reproduce the reference feature labels, pricing heading, or keyboard shortcut text verbatim.
- Never use illustrations, photography, screenshots, or imagery from the reference.
- Never recreate the section as a pixel-perfect copy; adapt the grid, content, typography, and accent colour to the user’s product.
- Never add heavy cards, gradients, excessive shadows, loud animations, or decorative elements that undermine the minimalist editorial CTA.