## 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/tryobra-com/7e3a33a6-3112-4ca6-a829-1dce7cc55f6a-1789152038453.webp
- Design on Kage: https://kage.design/designs/tryobra-og-image

## Before you start
Ask the user what product they are building, who it is for, and what brand assets they already have (name, colours, typefaces, logo mark). Wait for the answers. Everything below is applied to their product and their brand — the reference is only a compositional template.

## Page structure
Produce a single social share card image at exactly 1200×630 (e.g. an HTML/CSS file rendered to PNG at 2× for crispness, or a standalone SVG). Lay it out as:

1. **Canvas**: full-bleed near-black background with a generous, consistent padding (~64–72px) framing all content. On the right half, place two large decorative circles bleeding off the right edge — one slightly lighter charcoal, one darker, overlapping like offset rings — purely as depth, behind nothing and touching no text.
2. **Top-left wordmark row**: a small logo mark (a simple geometric glyph, e.g. a ring or dot in the accent colour) followed by the brand name in bold uppercase white, modest size (~28–32px), tight to the top-left corner.
3. **Headline block (upper-left, ~65% width)**: three stacked lines of very large all-caps display type (~90–100px, heavy weight, tight leading). Vary the treatment per phrase to build hierarchy inside one typeface: line one mixes a solid off-white word with an outline-only (stroke, no fill) word; line two mixes off-white words with an accent-coloured word; line three is fully accent-coloured. Keep the strongest promise words in the accent colour.
4. **Bottom row (baseline-aligned, full width)**: left side holds two lines of supporting copy in a monospace face, small (~22–24px), muted gray, explaining who the product is for. Right side holds two buttons side by side: a filled accent-colour button with dark uppercase letter-spaced label plus an arrow (primary action), and an outlined button with a thin off-white border, transparent fill, uppercase letter-spaced URL or secondary label.

## Design language
- **Contrast is the whole design**: near-black canvas (#0e0e0e–#111111), warm off-white text (#f2efe6), one saturated orange accent (#f4581c), one muted gray for secondary copy (#8a8a8a), charcoal circles (#1a1a1a and #141414). Nothing else.
- **One display face, three treatments**: build headline hierarchy through solid fill, outline stroke (1.5–2px text stroke, transparent fill) and accent colour rather than through size changes. All caps, heavy weight, slightly tight letter-spacing and leading.
- **Type pairing**: heavy geometric grotesque for wordmark and headline; a true monospace for supporting copy and button labels. Buttons use uppercase with wide letter-spacing (~0.15em) at small size.
- **Flat everything**: no shadows, no gradients on text or surfaces (the logo mark may be the single exception if the brand mark itself has one). Buttons are sharp-cornered or barely rounded (≤4px): solid fill with dark text, or 1–2px border with light text.
- **Composition rules**: left-align the text mass, right-align the action pair, keep the headline as the visual centre of gravity, and let the geometric circle motif occupy dead space on the right without competing with type. Baseline-align the bottom row so copy and CTAs read as one line.
- **Motion**: none — this is a static exported image.

## Never
Do not use the Obra name, wordmark, ring logo, headline copy, domain or button labels in the output. Do not reproduce its exact copy or brand assets; substitute the user's own name, tagline and domain with placeholder text if none exist. Never present the card as the reference product.