## 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/loqua/664d54c6-e6ec-4c03-b779-4de7d1f10bd5-1789192837366.webp
- Design on Kage: https://kage.design/designs/loqua-og-image

## Before you start
Ask the user what product this card is for, who it is for, and what brand assets they already have (name, logomark, brand colours, typeface). Wait for the answers before designing. Everything below is applied to their brand, not to the reference.

## Page structure
Produce a single static social card image at exactly 1200×630 (OG ratio) — as HTML/CSS rendered to PNG or as an SVG — with placeholder branding and copy:

1. **Canvas** — one full-bleed, flat background field in the brand colour. No gradient, texture, border or vignette; every edge bleeds the same colour.
2. **Focal tile** — one white rounded-square tile centred on both axes (slightly above true centre reads best), spanning roughly 40–45% of the canvas width, with a very large corner radius of about 25% of the tile side (squircle-like).
3. **Brand mark** — the user's logomark centred inside the tile, occupying ~50–60% of the tile area, drawn in near-black. If they have no mark, build an abstract placeholder from 2–4 rounded, tapered vertical shapes of descending height — a "speech bars" motif that reads as both a letterform and a sound wave.
4. **Optional caption** — the reference carries no text. If the user wants one, add a single short line (wordmark or tagline) below the tile, centred, white on the field, ~28–34px. Never place text inside the tile.

## Design language
- **One focal element**: the whole card is field + tile + mark. Scale contrast does all the work; resist adding screenshots, badges or URL lines.
- **Colour triad**: a saturated mid-tone field (approx `#00A78F` in the reference — swap in the user's brand colour at similar saturation), a pure white tile (`#FFFFFF`) and a near-black mark (`#0A0A0A`). Three colours, nothing else.
- **Flatness**: no shadows, strokes, outlines or gradients anywhere — every shape is a flat fill meeting the next.
- **Geometry**: one radius language throughout — superellipse tile, fully rounded terminals on the mark, consistent softness across all shapes.
- **Type** (only if a caption is requested): a single geometric sans-serif, medium weight, one line, slightly widened letter-spacing on wordmarks; at most two type sizes on the card.
- **Legibility check**: view the export at ~300px wide before finishing — the tile and mark must remain unmistakable at thumbnail size. Export at exactly 1200×630 (2× at 2400×1260 is fine).

## Never
- Do not reproduce the Loqua name, wordmark or its specific three-bar mark; create an original mark for the user's brand.
- No copy, taglines or imagery taken from the reference.
- Never present the result as the reference product, and never keep its exact palette if the user supplies their own.