## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Screenshot: https://kage-design-assets.t3.tigrisfiles.io/screenshots/beehiiv-com/4c9af101-e604-417c-ae57-bb8bb3d01d7e-1789067382587.webp
- Design on Kage: https://kage.design/designs/beehiiv-og-image

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including the brand name, colours, typefaces, and any approved logo or imagery. Wait for their answers before proceeding. Apply everything below to their product, using placeholder branding and copy until those answers are available.

## Page structure
- **1200×630 canvas:** Build a fixed-ratio social card intended for link previews, with all important content safely inset from the edges.
- **Background field:** Fill the entire canvas with a near-black indigo background and add very subtle, oversized geometric or rounded forms that create depth without competing with the text.
- **Top brand lockup:** Place a small placeholder logo mark and wordmark centered near the top, rendered in solid white.
- **Hero headline:** Center a short placeholder headline in two stacked uppercase lines. Make it the dominant element, spanning most of the card width and aligned as a compact block.
- **Footer divider:** Add a fine horizontal rule across most of the width below the headline.
- **Feature rail:** Along the bottom, show several short uppercase placeholder categories separated by small circular or faceted markers, with generous letter spacing and a single-line layout.

## Design language
- Treat the output as a **1200×630 social card image**, produced as SVG or as HTML/CSS rendered to PNG; do not build a responsive webpage around it.
- Use a deep near-black indigo base around `#09071d` or `#0d0924`, with barely visible tonal shapes in `#11102d` and `#17143a`.
- Build hierarchy through scale and compression: a small brand lockup, an oversized headline, then a restrained footer rail. The headline should occupy roughly the central third of the canvas and use tight line-height.
- Set the headline in a heavy geometric sans or similarly bold display face, uppercase, with compact tracking. Apply a left-to-right or subtly varied lavender, pale lilac, blush, and pink gradient such as `#b7bce8` → `#f3dff0` → `#ee76b6`.
- Keep the wordmark, divider, and footer text white or near-white (`#f7f6fa`). Use high contrast and avoid body-copy-sized paragraphs.
- Use a precise centered grid: the brand lockup sits near the upper quarter, the headline is optically centered, and the footer is anchored near the bottom with a consistent horizontal inset of about 65–75px.
- Keep borders hairline-thin and shadows absent or extremely soft. Use no visible card radius; the image itself is the container. Decorative markers may use a small purple-to-pink fill, but should remain subordinate.
- Preserve generous negative space around the headline while allowing the type to feel nearly edge-to-edge. Slightly reduce headline size or letter spacing as needed to prevent clipping at 1200×630.
- If adding motion during authoring, keep it limited to a subtle background gradient or shape drift; the final exported PNG must be static and legible at thumbnail size.
- Ensure the card works without external assets: use a simple placeholder geometric mark or text lockup, and verify the final render at exactly 1200×630.

## Never
- Do not use the reference company’s logo, wordmark, product name, tagline, exact headline, footer labels, or distinctive iconography.
- Do not copy the reference’s specific copy or reproduce its branding; use neutral placeholder branding and copy such as `YOUR BRAND`, `BUILD WHAT MATTERS`, and generic category labels.
- Do not add unrelated photography, illustrations, icon sets, UI screenshots, or extra interface controls.
- Never present the result as the reference product; make the composition reusable for the user’s own product.