## 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/salience/c9f1caa5-745a-46fe-acf1-cee11b68f327-1792303313029.webp
- Design on Kage: https://kage.design/designs/salience-og-image

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have — name, logo mark or icon shape, brand colours (hex), and typeface if any. Wait for the answers before designing. Everything below is applied to *their* product, not to the reference.

## Deliverable
Produce one 1200×630 social card image (Open Graph / `summary_large_image` ratio). Build it as a single self-contained HTML file with a fixed 1200×630 body (no scrollbars) that can be rendered to PNG headlessly (e.g. Playwright screenshot), or as an equivalent standalone SVG. Use placeholder branding and copy throughout.

## Page structure
- **Full-bleed field:** one flat near-black background (#0A0A0A–#111111) covering the entire canvas. No gradient, texture, border or rounded outer frame.
- **Centred lockup:** one group, optically centred horizontally and vertically, spanning ~70–75% of canvas width. It contains exactly two elements side by side: a square brand tile on the left and the wordmark on the right, sharing an optical baseline, with a gap of roughly one tile-width between them.
- **Brand tile:** a square (radius ~8–12% of its size) filled with the single brand accent colour. Inside, a simple geometric mark built from a handful of flat shapes in the background colour — a plus, asterisk, pixel cluster or similar motif — centred with ~20–25% padding so it reads at 32px favicon size.
- **Wordmark:** the product name on one line, geometric/neo-grotesque sans (Inter, Neue Haas or similar), white or near-white, weight 500–600, slightly negative tracking, cap height ~25–30% of canvas height (~200–240px).
- **Optional tagline:** if the user wants one, a single short line below the lockup in the accent colour or muted grey (#8A8A8A), ~40–48px, lightly letter-spaced. If not, ship the card as lockup-only — the reference does.
- Nothing else: no URL, no buttons, no UI screenshots, no illustration, no photography.

## Design language
- One focal element only. The lockup *is* the composition; target ≥80% empty canvas. If anything else competes with the wordmark, delete it.
- Two-value colour system: near-black field + white type, with exactly one accent reserved for the icon tile (and tagline if used). Reference values — background #0A0A0A, type #FFFFFF, accent #8BE28B — are placeholders; substitute the user's palette.
- Flat rendering always: no shadows, gradients, outlines, noise or glass. Hierarchy comes purely from value contrast between dark field and white type.
- Extreme type scale with nothing in between: wordmark ~200–240px, optional tagline ~40–48px. Optical-centre the lockup, not mathematical-centre, to compensate for wordmark side bearings.
- Build the icon mark on a visible grid (squares/pixels) so its shape survives favicon-scale reduction.
- No motion — the artefact is a static image.

## Never
- Do not copy the reference's name, wordmark, green pixel-cross mark, or any of its copy.
- Do not invent branding for a real company; use the user's assets or clearly-placeholder text.
- Do not add gradients, glass, 3D effects, photography, stock illustration or extra UI chrome to the card.
- Never present the output as the reference product.