## 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/desert-ant-labs/3d4185b9-43a5-4715-af3c-0e39490fc3a5-1789106537383.webp
- Design on Kage: https://kage.design/designs/desert-ant-labs-og-image

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including the brand name, colours, typefaces, logo or mark, and the exact social-card copy. Wait for their answers before designing. Apply the reference's composition to their product, using placeholder branding and copy until those details are provided.

## Page structure
- **1200×630 canvas:** Create a fixed 1.904:1 social card intended for sharing on X, Slack, LinkedIn, or iMessage, with a warm off-white background and ample unused space.
- **Upper-left brand mark:** Place a small dark rounded-square placeholder logo near the top-left margin, with a simple high-contrast symbol or abstract mark inside.
- **Lower-left headline block:** Put the main message in two large, tightly stacked lines toward the left and lower-middle of the canvas; make the first line visually softer or textured and the second line crisp and emphatic.
- **Supporting URL or metadata:** Add a small monospaced placeholder URL beneath the headline, aligned to the same left edge.
- **Export output:** Render the composition as a PNG at exactly 1200×630, using HTML/CSS rendered with a headless browser or an SVG converted to PNG.

## Design language
- **Build hierarchy through scale:** Let the headline dominate with an oversized geometric sans-serif, using a very large display size, tight line-height, and slightly condensed horizontal footprint; keep the mark and URL deliberately small.
- **Use asymmetry and negative space:** Anchor all content on the left while leaving the upper-right and right half mostly empty. Keep generous outer margins so the card remains legible when previewed at small sizes.
- **Treat colour as a restrained system:** Use a warm ivory background around `#F7F6F1`, near-black type around `#0B0D0E`, and muted gray secondary text around `#666863`; avoid decorative colour unless the user's brand requires it.
- **Pair type by function:** Use a heavy contemporary sans for the headline and a small monospaced face for the URL or metadata. Keep the headline nearly black, with the first line optionally rendered in a subtle monochrome grain, blur, or stippled texture while preserving readability.
- **Make the texture controlled:** Apply a fine, low-contrast noise or halftone treatment only to the softer headline line, not across the entire canvas. The second line should remain sharply rendered and visually heavier.
- **Keep geometry quiet:** Use a compact rounded-square mark with a modest radius, no card shadows, no gradients, and no unnecessary borders. Preserve clean edges and a flat editorial surface.
- **Design for static sharing:** Do not depend on interaction or motion; if previewing in HTML, ensure the final render is deterministic, high contrast, and readable without hover states.
- **Use placeholder content safely:** Do not copy the reference headline, URL, logo, or product identity. Substitute neutral placeholder brand and copy that the user can replace after answering the setup questions.

## Never
- Never copy the reference logo, wordmark, product name, URL, headline, or exact copy.
- Never use the Desert Ant Labs identity or present the result as that product.
- Never add unrelated illustrations, photography, icon sets, or decorative scenes from the reference.
- Never turn this into a responsive webpage, landing page, or dashboard; produce a single 1200×630 social card image.