## 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/pitch-com/6703b162-6073-44e6-a626-e3df0dc35c4b-1789060646-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/pitch-com/6703b162-6073-44e6-a626-e3df0dc35c4b-1789060611-full.webp
- Component on Kage: https://kage.design/component/pitch-feature-grid-2

## Before you start
Ask what the user's 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 that product—do not reproduce the reference literally.

## Build an editorial feature-grid section
Create a spacious SaaS feature section that introduces the product's core value and then highlights one capability in a two-column feature row. The composition should feel confident, polished, and editorial rather than like a dense dashboard or a conventional card grid.

### Layout and alignment
- Use a wide, centered container with generous horizontal padding; keep the content comfortably readable on large screens.
- Start with a small eyebrow label aligned to the left edge of the main heading. Use it to frame the section's purpose, not as a competing headline.
- Place a large, short headline beneath the eyebrow, with a constrained max-width so it wraps into two or three intentional lines.
- Follow with a supporting paragraph at a narrower width and leave substantial vertical space before the feature row.
- In the feature row, use a balanced two-column layout: explanatory copy on the left and a large visual panel on the right. Align the top of the feature heading with the top area of the visual.
- Let the visual occupy roughly half of the row on desktop. On mobile, collapse to one column, keeping the text above the visual and preserving generous vertical spacing.
- The section should feel open: avoid enclosing the entire section in a border or background card.

### Typography hierarchy
- Use a modern sans-serif with a slightly distinctive, high-quality product feel; use the user's brand font where available.
- Eyebrow: uppercase or small caps, approximately 14–16px, medium weight, with modest letter spacing.
- Main heading: approximately 44–56px on desktop, 700–800 weight, tight line-height around 0.98–1.08. Scale to roughly 34–40px on mobile.
- Body copy: approximately 17–19px, regular weight, line-height around 1.45–1.6, in a softened dark neutral.
- Feature heading: approximately 28–34px, bold, with a compact line-height. Pair it with a small outline icon or simple abstract glyph that reinforces the feature without becoming an illustration.
- Feature description: approximately 16–18px with comfortable line height and a readable max-width.

### Colour
- Prefer a warm or neutral light background around `#FCFCFA` or `#FFFFFF`.
- Use an almost-black ink colour such as `#0D0B1B` for headlines.
- Use a muted charcoal such as `#57545F` for supporting copy.
- Choose one saturated brand accent for the eyebrow, icon, and feature heading, such as a violet in the range `#4F21C7`–`#6737D8`; adapt it to the user's brand.
- Keep the visual panel more expressive than the surrounding section: use a soft gradient or tonal field built from the brand accent and lighter tints, for example `#E8DEFF`, `#BFA4FF`, and `#5630B9`.
- Maintain strong text contrast and do not rely on colour alone to communicate meaning.

### Borders, surfaces, and radius
- Keep the primary page surface flat and quiet.
- Place the feature visual inside a large rounded rectangle, approximately 20–28px radius, with no heavy border.
- If the visual contains a product mockup, use a smaller white or near-white rounded surface inside the coloured panel, with a very subtle shadow and fine neutral border.
- Use soft depth sparingly; the visual should feel integrated, not like a floating collection of cards.

### Visual treatment and interaction
- Represent the product capability with an original UI mockup, abstract interface composition, or structured placeholder content relevant to the user's product. Do not use an unrelated stock image.
- Add a subtle layered treatment inside the visual—such as an inset frame, gradient glow, or floating control—to create depth while preserving clarity.
- If the feature visual is interactive, support hover with a restrained increase in contrast, glow, or translate effect; keep motion short and subtle.
- Respect reduced-motion preferences and ensure the section remains understandable if animation is disabled.
- Make the layout responsive: prevent the visual from becoming too small, preserve readable line lengths, and reduce spacing only gradually on narrow screens.

### Never
- Never use logos, product names, or branded copy from the reference.
- Never copy the reference's exact headline, body text, feature label, or interface content.
- Never reuse the reference screenshot, illustration, gradient composition, or imagery.
- Never reproduce the exact layout as a pixel-for-pixel clone; reinterpret the system for the user's product and brand.
- Never use decorative visuals that obscure the feature message or make the section feel like a generic template.