## 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/phantom-com/d3f77618-3b33-49ec-8620-2002729b2b18-1789146833252.webp
- Design on Kage: https://kage.design/designs/phantom-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, and any approved mark. Wait for their answers before designing. Apply everything below to their product, not to the reference.

## Page structure
- **1200×630 social-card canvas:** Create a fixed-ratio image intended for link previews, with a full-bleed solid or near-solid background and generous inset safe areas.
- **Central brand lockup:** Place a simple custom placeholder symbol on the left and a large placeholder wordmark on the right, aligned on a shared horizontal baseline and centered as one visual unit.
- **No supporting content:** Keep the card intentionally sparse; do not add navigation, buttons, metadata, taglines, or decorative sections unless the user's product requires a small secondary line.

## Design language
- **Build hierarchy through scale and isolation:** Make the brand lockup the only dominant element, using very large lowercase or compact display typography and ample negative space around it.
- **Use a soft lavender field:** Start with an approximate background of `#A79AEF` or a product-specific equivalent; keep the surface flat, with no gradient, texture, border, or visible shadow.
- **Use a restrained two-colour treatment:** Render the placeholder mark and wordmark in warm off-white around `#FFFDF5` for clear contrast without harsh pure white. If the user's brand assets require other colours, preserve the same simple high-contrast relationship.
- **Pair one display face only:** Use a bold, rounded or softly geometric sans-serif for the placeholder wordmark; keep letter spacing close to neutral and use lowercase forms when appropriate. Size the wordmark so the full lockup occupies roughly 70–80% of the canvas width while remaining comfortably inside the edges.
- **Keep the composition centered:** Align the mark and wordmark optically at the middle of the 1200×630 frame, with the combined lockup slightly wider than it is tall. Use generous top and bottom breathing room.
- **Keep geometry simple:** Draw a distinctive abstract placeholder mark from a few smooth, organic shapes rather than importing a recognizable reference logo. Avoid cards, rounded containers, outlines, gradients, and drop shadows.
- **Make it exportable:** Produce a real 1200×630 social card image, for example as an SVG or as HTML/CSS rendered to PNG. Include a small preview or export instruction and ensure text and shapes remain crisp at the final dimensions.
- **Interaction and motion:** This is a static asset, so use no animation or interactive states; focus on exact alignment, optical centering, and predictable raster output.

## Never
- Do not copy or recreate Phantom's logo, wordmark, product name, exact copy, or distinctive mark.
- Do not use logos, wordmarks, product names, copy, illustrations, photography, or icon sets from the reference.
- Use placeholder branding and placeholder copy only, adapted to the user's own product.
- Never present the result as Phantom or imply affiliation with it.