## 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/bestproxy-com/5000b238-9731-49a3-927e-d4d657cecf5d-1792343991821.webp
- Design on Kage: https://kage.design/designs/bestproxy-og-image

## Before you start
Ask the user what product or announcement this card is for, who the audience is, and which brand assets already exist (name, logo, colours, typeface). Wait for the answers before designing. Everything below is a reusable system to apply to *their* brand — not a template of the reference.

## Page structure
Produce a single fixed-size social share image, 1200×630 px (build it as HTML/CSS rendered to PNG with a headless browser, or as a standalone SVG at that exact size). Zones, top to bottom:

1. **Canvas** — a dark, near-black background with a faint scattering of 1–2 px dots (a subtle starfield) at low opacity across the whole surface.
2. **Logo lockup (top-left, ~48 px inset)** — a small two-colour geometric mark next to a bold wordmark, ~28 px, white.
3. **Pill badge** — below the lockup: fully rounded, 1 px border in the primary colour, translucent dark fill, a filled circular icon chip on the left and a short category label in the primary tint.
4. **Headline (left column)** — two lines, very heavy geometric sans; exactly one keyword tinted in the accent colour, the rest white.
5. **Support copy** — up to three short lines under the headline in muted gray, regular weight, ~22 px.
6. **Illustration (right ~40%)** — a flat vector scene: a large globe/planet motif in the primary colour with thin white meridian lines sits behind a product-metaphor object (device, shield, container — derive this from the user's product), plus one small accent-coloured pointer/pin element; the cluster sits slightly below vertical centre and may kiss the canvas edges.
7. **Corner dot grids** — small grids of dots in accent and primary colours in the top-right and bottom-left corners, plus one small grid near the top centre, all kept clear of the text column.

## Design language
- **Palette rule:** one dark canvas (~#0E1116), one primary (~#7C5CF6), one bright accent (~#2ED57F), white for primary type, ~#9AA3B2 for secondary copy. The accent is rationed: one headline word, one icon/pin, decoration dots — nowhere else.
- **Type rule:** a single geometric sans family; hierarchy by size and weight only — wordmark ~28 px bold, headline ~72–80 px at 1.1 line height, body ~22 px regular. Never colour a whole line; highlight a single word.
- **Composition rule:** text owns the left ~55% as a narrow column with a strict top-down reading order (logo → badge → headline → support); the illustration is the only large element and balances the right, letting the text column stay narrow without the card feeling empty.
- **Depth rule:** everything flat — no gradients, no drop shadows. Depth inside the illustration comes from a single darker shade of each fill colour used as a hard offset shape.
- **Shape rule:** rounded-full pills, softly rounded illustration forms; no cards, boxes or dividers anywhere except the badge.
- **Decoration rule:** ornament is dot-based only (starfield plus corner grids) and always low-contrast against the canvas so the type stays dominant.
- **Safe-area rule:** keep all meaningful content ≥48 px from the edges and out of the outer ~10% — social platforms crop card edges in some previews.

## Never
- No logos, wordmarks, product names, copy, illustrations or icon sets from the reference (no "BestProxy", no padlock-on-laptop-with-globe scene as drawn).
- Never present the result as the reference product or imply any affiliation.
- Don't fall back to stock photography or 3D renders — the language is flat vector only.