## 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/once-ui-2-0/63d040ba-d4f5-4957-89ea-f6209b2defc4-1790488895054.webp
- Design on Kage: https://kage.design/designs/once-ui-2-0-og-image

# Social card (1200×630) — dark cinematic hero with warm/cool split lighting

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, logo shape, brand colours, typeface). Wait for the answers before designing. Everything below is applied to *their* product and brand — the reference only supplies the composition and visual language.

## Page structure
This is a single fixed 1200×630 canvas (an Open Graph card), not a scrolling page. Build it as stacked layers, bottom to top:

1. **Environment background** — a near-black scene suggesting a dark hall: 3–4 faint vertical light columns (one warm on the left third, one green on the right third), a subtle horizontal floor line at ~78% height with a soft reflection smear beneath it, and a vignette that darkens all four corners.
2. **Focal object** — a faceted sphere built from ~20–30 triangles (icosahedron-like), centred at roughly x=60%, y=40%, spanning ~55% of the canvas width. Its left facets are metallic champagne/beige with amber glow bleeding through the seams; its right facets are dark glass with glowing green wireframe circuitry. It is the only high-detail element.
3. **Satellite facets** — 3–5 loose triangles floating off the sphere's upper-left and right, connected to it by thin dotted lines, implying parts that snap in and out.
4. **Wordmark lockup** — bottom-left, at x≈60px, y≈62% height: a small geometric glyph (~26px) plus the product name in lowercase, white, ~26px medium weight.
5. **Headline** — directly below the lockup at the same left edge: a two-line headline in white, ~72–80px, ending with ~50–60px bottom margin. Line breaks should be balanced (similar line lengths).

## Design language
- **Composition rule:** one glowing focal object owns the centre-right; all type owns the bottom-left. Never overlap text with the detailed object. Keep ~60px safe margins on all sides. The upper-left quadrant stays as near-empty dark space — that emptiness is what makes the card feel premium.
- **Colour treatment:** near-black base `#0b0e0d` to `#141917`; warm side in champagne `#d9c9a6` with amber glow `#e09a45`; cool side in green `#3ee6a0` / deep teal `#0f3d2e`; all type pure white. The warm/cool split down the middle of the object is the signature move — apply it to the user's two brand colours if they have a pair, otherwise keep champagne/green.
- **Lighting and glow:** every lit element emits its side's hue as a soft radial bloom (`filter: blur` or large soft box-shadow). Seams between facets glow brighter than the facets themselves. Add a faint floor reflection of the focal object and a subtle film-grain overlay (~3% opacity) to unify the layers.
- **Building the object without 3D tools:** construct the sphere in SVG or CSS — triangles as `clip-path: polygon(...)` or SVG polygons. Metallic facets: linear gradients from `#e8dcc0` to `#8a7a58` with a 1px lighter edge stroke. Glass facets: near-black fill with green stroke-only wireframe lines and tiny green node dots inside. Rotate/scale each triangle so the facets read as a curved surface. Connect satellites with 1px dotted lines.
- **Typography:** a single geometric grotesque throughout. Wordmark ~26px, weight 500, lowercase, letter-spacing normal. Headline ~76px, weight 500 (not bold — the render carries the drama, type stays restrained), line-height ~1.05, sentence case, max two lines. No third type size on the card.
- **Readability at thumbnail size:** the card must survive being shown at ~400px wide — headline still legible, object still reads as one shape. If detail is lost, increase glow contrast rather than adding more elements.

## Never
- Do not use the name "Once UI", its four-diamond glyph, its headline copy, or a reproduction of its 3D render.
- Do not present the result as Once UI's card; it is the user's product rendered in this composition.
- Do not add badges, buttons, URLs, avatars, stock photos or icon sets — this language is one object, one lockup, one headline, nothing else.