## 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-2.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-2

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

## Build a contextual feature grid
Create a responsive website section that explains how several product capabilities work together around one central customer benefit. The section should feel editorial, informative, and product-led rather than like a set of generic marketing cards.

### Layout and alignment
- Use a spacious, full-width section with a restrained warm-neutral background, separated clearly from adjacent sections.
- Start with a prominent headline aligned to the main content container. Make the headline a short outcome statement, with one phrase receiving a soft tinted highlight or accent treatment.
- Under the headline, use an asymmetric two-column layout:
  - The wider left column contains the main explanation, one or two paragraphs, and a short bulleted list of concrete inputs, workflows, or outcomes.
  - The narrower right column contains a concise bold introductory sentence followed by a compact bullet list of included capabilities.
- Keep both columns top-aligned and use generous vertical spacing so the content remains easy to scan.
- Place one understated text link below the main copy as the primary call to action. It should look like a clear next step, not a large button.
- On smaller screens, collapse to one column. Keep the headline first, then the main explanation, supporting bullets, capability list, and CTA. Avoid cramped side-by-side content.
- Use a centered max-width container, roughly 1100–1250px depending on the product’s overall layout. Preserve comfortable horizontal padding on mobile.

### Typography hierarchy
- Use a dark, highly legible sans-serif with a slightly characterful or editorial feel if that suits the brand.
- Headline: large and compact, approximately 44–64px desktop and 32–40px mobile, with tight line-height around 1.05–1.15 and medium-to-bold weight.
- Body copy: approximately 17–20px with 1.45–1.6 line-height. Keep measure moderate so paragraphs do not become wide walls of text.
- Supporting list text: approximately 16–18px with comfortable line-height.
- Use bold selectively for the short right-column introduction and important phrases; avoid turning every feature name into a heading.
- Make the CTA link visually distinct through underline, weight, or a small directional affordance rather than a heavy filled button.

### Spacing and rhythm
- Give the section generous top and bottom padding, approximately 80–128px desktop and 56–80px mobile.
- Leave 28–48px between the headline and the two-column content.
- Use 20–32px between paragraphs and 24–36px around list groups.
- Use 12–18px between bullet items, with bullets positioned clearly outside the text block.
- Keep the CTA at least 28px below the preceding copy so it reads as a deliberate next step.

### Colour and visual treatment
- Use an approximate background of warm off-white or very pale grey, such as #F1F2EE or #F4F4F0.
- Use a near-black navy or charcoal for primary text, such as #171B2D or #252936.
- Use a saturated but approachable blue accent for the highlighted phrase and links, such as #3478D4 or #3B82D8. Ensure contrast remains accessible.
- The highlight behind part of the headline should be a subtle translucent blue tint, approximately #DCEBFA, with softly rounded corners or a marker-like shape—not a full pill unless consistent with the product brand.
- Keep borders minimal. If the section needs separation, use a fine muted line such as #C9CBC5 at 1px.
- Avoid excessive cards, shadows, gradients, and decorative containers; the hierarchy should come from alignment, typography, and whitespace.

### Content and interaction
- Write original, product-specific copy based on the user's product. Explain the unifying concept first, then show concrete examples and included capabilities.
- Make bullets concise and scannable. Use real product nouns only after learning the user's product, and do not invent unsupported claims.
- The CTA should describe a meaningful next action, such as connecting a source, exploring a workflow, or viewing the capabilities.
- Links should have a clear hover state: accent colour shift, underline emphasis, or a subtle directional movement. Preserve visible keyboard focus with a 2px high-contrast outline.
- If a small information icon or tooltip is useful beside a capability, make it keyboard accessible and provide a concise explanation on hover and focus.
- Ensure the component works with long translated text, reduced motion, keyboard navigation, and screen readers. Use semantic headings, paragraphs, lists, and links.

### Never
- Never use logos, product names, copy, illustrations, mascots, or imagery from the reference.
- Never reproduce the reference’s exact wording, layout proportions, colour palette, or decorative artwork.
- Never create a generic grid of identical cards when an editorial two-column explanation better communicates the product’s value.
- Never hide essential information behind hover-only interactions or sacrifice contrast for visual similarity.