## 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/codeaf/101a4291-d5ef-4fcc-8820-515e03aa7369-1791007419804.webp
- Design on Kage: https://kage.design/designs/codeaf-og-image

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, tagline, colours, logo file, any claim or stat worth a badge). Wait for the answers. Everything below is applied to *their* product — this reference only supplies the composition and design language.

## Deliverable
Produce a single **1200×630** social card (Open Graph / Twitter summary large image). Best done as one HTML file with a fixed 1200×630 root, rendered to PNG (e.g. Playwright/`puppeteer` screenshot at deviceScaleFactor 2 for a 2400×1260 crisp export), or as a standalone SVG that a build step converts to PNG. No interactivity, no external web fonts at render time unless bundled.

## Page structure
One canvas, one column. All text left-aligned on a shared left margin (~80px), with the right ~35% of the canvas intentionally empty except for atmosphere.

1. **Background layer** — near-black base filling the canvas; a soft warm glow emanating from the bottom-right corner (radial gradient, amber-to-transparent), overlaid with a fine grain/noise texture (SVG `feTurbulence` at low opacity) so the light feels material, plus a very slight darkening vignette at the top-left so text contrast stays high.
2. **Logo lockup (top-left, ~64px from top)** — a rounded-square logo tile (~96×96, radius ~24px) in a light cream tone containing a simple two-element mark (e.g. a black chevron and a small amber dot — replace with the user's actual mark), then the product wordmark to its right in ~64px extra-bold sans, with a tiny letterspaced monospace byline ("by {ParentCo}" style) tucked under the wordmark.
3. **Badge / eyebrow (~40px below lockup)** — a fully-rounded pill with a 1px low-opacity white border and no fill: a small amber dot, then one short uppercase claim in monospace (~16px, letter-spacing ~0.2em). Keep it to 5–8 words.
4. **Headline (the focal point)** — two lines, ~92–100px, near-white, tight leading (~1.05), ending in a full stop whose period is coloured amber. It must be the largest element on the card by a wide margin.
5. **Subheadline** — one line, ~26–28px, muted warm gray, sitting ~40px under the headline; states the before→after of the product in plain words.
6. **Footer URL (bottom-left, ~40px from bottom edge)** — the product's path (e.g. `parentco.com/product`) in monospace, ~18px, muted gray.

## Design language
- **Composition rule:** one left-aligned text column occupying the left ~65%; the glow and negative space balance it on the right. Never centre content and never fill the right half with graphics.
- **Focal hierarchy by scale alone:** wordmark ≈ 64px → headline ≈ 96px (dominant) → subhead ≈ 28px → microcopy ≈ 16–18px. Contrast comes from size jumps, not weight changes or boxes.
- **Colour palette:** background `#0B0908` near-black with warm brown undertone; glow core `#E8A33D` amber fading through `#5A3A16` into the base; headline `#F5F1E8` warm off-white; subhead and URL `#8B8577` muted warm gray; single accent used only for the dot, the badge dot, and the headline period.
- **Accent discipline:** amber appears in exactly three tiny places (logo mark detail, badge dot, terminal period). It is punctuation, not decoration — never a coloured block, button or underline.
- **Type pairing:** a grotesque sans (Inter/Neue Haas class) for wordmark and headline; a monospace for every piece of microcopy (byline, badge, URL), always uppercase with wide letter-spacing for the badge and lowercase for byline/URL.
- **Texture over gloss:** build the glow with a soft radial gradient + noise grain so it reads as light in a dusty room; avoid banding by using large soft stops, and keep the area behind text nearly pure background colour.
- **Spacing rhythm:** consistent 80px left margin; vertical gaps tighten as you descend (lockup → badge ≈ 40px, badge → headline ≈ 40px, headline → subhead ≈ 40px, subhead → URL uses the remaining space pinned to the bottom). Content should fill roughly 85% of the canvas height.
- **Borders:** hairline only — the badge is the sole bordered element, 1px white at ~15% opacity, fully rounded, transparent fill. No shadows on text.

## Never
- Do not reuse the CodeAF name, the AgentField AI byline, the chevron-and-dot logo, the headline copy, the badge claim, or the agentfield.ai URL — use the user's own branding and copy, or clearly placeholder text if they haven't supplied any.
- Do not present the result as CodeAF's card or mention the reference product anywhere in the output.
- Do not add photography, illustrations, screenshots or extra icons; the card is type, one lockup, one pill and atmosphere only.
- Do not exceed three accent-coloured elements, and do not centre-align or add a second text column.