## 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-3.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-table

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

## Build this section
Create a usage-based pricing explanation section with a short heading, several concise paragraphs explaining the pricing philosophy, a sentence introducing the examples, a compact comparison table, and a text link to explore full pricing. The table should be the visual anchor, while the surrounding copy provides enough context to make the numbers understandable.

## Design language

### Layout and alignment
- Use a pale, warm-neutral page background and a centered content container with a comfortable maximum width, approximately 1100–1200px.
- On large screens, arrange the explanatory copy and an optional brand-specific visual in a loose two-column composition; keep the table aligned with the main text column rather than stretching unnecessarily wide.
- Set the pricing heading at the top of the section, followed by three or four short paragraphs with clear vertical rhythm.
- Place the table after the introductory copy and the “examples” sentence. Keep the table width around 650–750px on desktop, or let it fill the available content width when the product needs a wider data set.
- On small screens, collapse to one column, hide or move the optional visual, and allow the table to scroll horizontally or reflow into stacked rows without making text microscopic.
- Use a left-aligned layout throughout. Align heading, body copy, table, and pricing link to the same content edge.

### Typography hierarchy
- Use a modern sans-serif with a friendly, highly legible appearance.
- Make the section heading prominent but not oversized: roughly 32–40px desktop, 28–34px mobile, with tight line-height and medium-to-bold weight.
- Set explanatory paragraphs around 17–19px with approximately 1.45–1.6 line-height and a dark charcoal text colour.
- Use a smaller but still readable table size, approximately 14–16px. Make column headers semibold and use strong contrast for prices.
- Use underlined or otherwise clearly recognizable text links for product names and the full-pricing call to action.

### Spacing
- Give the section generous top and bottom breathing room, around 72–112px vertically depending on the surrounding page.
- Keep 24–32px between the heading and first paragraph, 20–28px between paragraphs, and 20–28px before the introductory table sentence.
- Give the table 24–32px of separation from the preceding copy and 24–36px before the pricing link.
- Use compact but comfortable table rows: approximately 44–52px tall, with 12–16px horizontal cell padding.

### Colour
- Use an approximate warm off-white or light gray background such as #F1F2EE or #F5F5F1.
- Use near-black charcoal for headings and body copy, such as #20242B or #252A31.
- Use a soft gray border such as #BFC2BC for the table grid; keep it visible but not heavy.
- Give the table header a subtly differentiated neutral fill, such as #E8E9E4, while keeping body cells close to the page background.
- Use one restrained accent colour from the user's brand for linked product names and the primary pricing link. Small product-category icons may use varied accent colours, but they should remain simple and secondary.

### Borders and radius
- Enclose the table in a 1px border with a modest 6–8px corner radius.
- Keep internal grid lines at 1px and slightly lighter than the outer border.
- Avoid cards, drop shadows, gradients, or excessive decoration; the table should feel like an integrated editorial element.
- If the table scrolls on mobile, preserve its rounded outer frame and ensure the scrollbar or overflow treatment does not obscure content.

### Table structure and interaction
- Include a narrow index column, a product or plan column, a free allowance or included tier column, and a usage-based price column. Adapt the labels and number of columns to the user's product.
- Keep numeric values left-aligned or consistently aligned according to the product's data conventions; never mix alignment randomly.
- Use subtle row hover feedback, such as a barely perceptible background shift to #EDEEE9, if rows are interactive.
- Make linked names keyboard accessible with visible focus states using the brand accent and a 2px outline or underline treatment.
- Ensure the table has semantic headers, responsive overflow handling, sufficient colour contrast, and no reliance on colour alone to communicate meaning.
- The “explore pricing” link should look like a simple text CTA with an underline, a clear hover colour change, and a visible focus state.

## Never
- Never use the reference site's logos, product names, pricing values, exact copy, or brand-specific terminology.
- Never reproduce the reference illustration or use any copied imagery, icons, or decorative artwork.
- Never copy the exact table content, row order, dimensions, or visual styling; adapt the structure to the user's product and brand.
- Never make the table feel like a dense admin spreadsheet, hide important pricing details behind hover, or sacrifice mobile readability for desktop fidelity.