## 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/axiom/f40af8a6-74e8-47b0-9eca-03bf1f573ac1-1789711408293.webp
- Design on Kage: https://kage.design/designs/axiom-og-image

# Build a 1200×630 Open Graph social card

## Before you start
Ask the user what product or company the card is for, who will see it (Slack, X, LinkedIn, iMessage previews), and what brand assets they already have: name/logo, primary accent colour, and typeface. Wait for the answers before writing any code. Everything below is applied to *their* brand, not to any reference product.

## Page structure
Produce the card as a single HTML/CSS file sized exactly 1200×630px (render to PNG with a headless browser, or emit an equivalent 1200×630 SVG). Top to bottom:

1. **Canvas**: one full-bleed dark background (near-black, ~#0D0D0D) with a subtle vertical/diagonal gradient so it is not perfectly flat. No imagery other than the light-streak treatment below.
2. **Wordmark lockup (top-left, ~80px from edge)**: a small monochrome logo mark plus the brand name in the headline typeface, set in white at ~34–40px with wide tracking. It must be small relative to the headline — it identifies, it does not dominate.
3. **Headline block (bottom-left, ~70–80px from left and bottom edges)**: the tagline or key message in 2 lines, ~88–96px, white, tight line-height (~1.05), regular-to-medium weight, sentence case. End the last line with a full stop set in the single accent colour (~#FF5A00) — this tiny dot is the brand hook.
4. **Light-streak composition (right half, bleeding off the right edge)**: a bundle of 15–25 thin straight lines at a consistent diagonal (roughly 30–40°, travelling from lower-left to upper-right). Lines vary in length, opacity (10–60%) and weight (1–3px); most are desaturated, a few are full accent colour, one is brightest and carries a soft outer glow. All converge toward a single luminous point placed at roughly 62% width, 55% height — a small glowing dot (accent colour) with a radial blur/bloom. Lines may crop at the canvas edge; never let the bundle cross into the wordmark or headline.

## Design language
- **Three-element rule**: the card has exactly one focal hierarchy — dark field → large headline → glowing streak convergence. Nothing else competes; no cards, badges, screenshots or URLs on the canvas.
- **Anchored corners**: identity lives top-left, message lives bottom-left, artwork occupies the right half. This L-shaped arrangement keeps text out of the area where preview UIs crop and lets the eye travel from wordmark to headline to glow.
- **Negative space is structural**: the upper-right quadrant stays almost empty. Don't fill it; the streaks need travel distance to read as motion.
- **Colour budget**: ~90% near-black and white, ~10% one accent. The accent appears only in the streaks, the focal glow and the headline's full stop — never as a filled shape or second text colour.
- **Type**: a single geometric/neo-grotesque sans for both wordmark and headline. Wordmark is small with positive letter-spacing; headline is oversized, sentence case, tight leading, no more than 2 lines. If a system-safe stack is needed, Inter/Helvetica-style faces are acceptable.
- **Glow treatment**: one bloom only, at the convergence point. Achieve it with layered box-shadows or a radial-gradient behind the dot; streaks themselves stay crisp, not blurred.
- **Thumbnail discipline**: check the card at ~300px wide. If the headline isn't instantly readable and the glow isn't visible, increase contrast and headline size rather than adding elements.

## Never
- Never use the reference product's name, wordmark, logo glyph, tagline copy, or its specific light-ray illustration; replace all of it with the user's branding and their own message.
- Never present the output as the reference brand or reuse its exact accent hex if the user's brand uses a different colour.
- Never add stock photography, gradients-heavy rainbow palettes, extra sections, call-to-action buttons or URLs — the composition must stay a three-element card.