## 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/posthog-com/73877279-c1a4-4217-acde-d4b5e92c7eb5-1789060472-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/posthog-com/73877279-c1a4-4217-acde-d4b5e92c7eb5-1789060452-full.webp
- Component on Kage: https://kage.design/component/posthog-feature-grid

## Before you start
Ask what the user's product is, who it is for, and what their brand personality, colour palette, and visual assets 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 responsive editorial feature/proof-points section that explains why the product is distinctive. The section should feel confident, direct, human, and slightly playful, with enough whitespace for the content to breathe.

### Content structure
- Use a two-column composition on desktop: explanatory content on the left and one supporting visual or illustration area on the right.
- Start with a prominent section heading framed as a concise question or value statement.
- Follow with one short introductory sentence that sets up the proof points.
- Present three or four vertically stacked bullet points. Each item should begin with a bold or italicised lead-in, followed by one or two lines of supporting detail.
- Allow selected phrases in the supporting copy to become underlined text links, but keep the number of links low and purposeful.
- Finish the text column with one plain-text call to action link that invites the visitor to learn more.
- Keep the section self-contained; do not add cards, metrics, testimonials, or a second CTA panel.

### Layout and alignment
- Use a wide page container with a maximum width around 1200–1280px and generous horizontal padding of 24–48px.
- Align the heading, introduction, bullets, and CTA to one consistent left edge.
- Give the text column roughly 55–62% of the available width and the visual column the remaining space.
- Vertically centre the supporting visual against the main copy, while allowing it to overlap or extend slightly if that suits the brand.
- On smaller screens, collapse to one column: text first, visual second. Preserve comfortable line lengths and do not force the image beside narrow copy.
- Use a bullet indentation that clearly separates the marker from the text without creating excessive ragging.

### Typography hierarchy
- Use a bold, modern sans-serif or the product's brand typeface.
- Section heading: approximately 32–44px desktop, 28–36px mobile, with tight line-height around 1.05–1.15 and a confident weight.
- Introductory text: approximately 18–22px, medium weight, with a line-height around 1.4.
- Bullet copy: approximately 16–19px, with a relaxed line-height around 1.45–1.6 for easy scanning.
- Lead-ins should use strong weight; use italics sparingly to create emphasis rather than decoration.
- CTA link should be visibly heavier than body copy and use an underline or another clear text-link treatment.

### Spacing
- Use approximately 72–112px vertical padding on desktop and 56–72px on mobile.
- Leave 24–36px between the heading and introduction.
- Leave 24–32px between the introduction and the bullet list.
- Use 16–24px between bullet items, depending on copy length.
- Place the final CTA 28–40px below the last bullet.
- Keep the visual from touching the section edges; use a minimum 24px internal breathing room.

### Colour and surfaces
- Start with a warm, lightly tinted neutral background such as #F1F2EE, #F4F1EA, or an equivalent colour from the user's brand.
- Use a near-black ink colour such as #171A24 or #20222B for headings and body text.
- Use a softer neutral such as #5F6268 for bullet markers or secondary text where appropriate.
- Use one dark or saturated brand accent for links and visual details; underlined links must maintain accessible contrast.
- Avoid gradients and excessive colour variation. The visual should feel like part of the same editorial system as the text.

### Borders and radius
- Keep the text area mostly borderless.
- If the supporting visual contains a panel, use a thin 2px accent border, a subtle contrasting fill, and a modest radius around 6–10px.
- Avoid floating card shadows, glossy effects, and heavy rounded containers.
- Use underlines, weight, and spacing as the primary affordances for links and hierarchy.

### Supporting visual and interaction
- Use one original, brand-appropriate visual treatment: for example, a simple diagram, abstract character, hand-drawn shape, product schematic, or typographic composition.
- The visual should reinforce the idea of proof, clarity, speed, craft, or differentiation without becoming the primary focus.
- If the visual is interactive, provide only a restrained hover or focus response such as a slight translate, colour change, or revealed annotation. Do not make the section depend on animation.
- All links need visible hover and keyboard-focus states. Preserve underlines or another unmistakable indication of interactivity.
- Ensure the layout remains readable at mobile widths, supports reduced motion, and meets accessible colour-contrast requirements.

## Never
- Never reuse the reference site's logos, mascots, illustrations, product names, brand names, or exact wording.
- Never copy the reference layout pixel-for-pixel; adapt the underlying editorial feature principles to the user's product and brand.
- Never use reference-specific copy, links, iconography, or imagery.
- Never add decorative imagery that competes with the proof points.
- Never hide essential information behind hover, animation, or interaction.