## 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/peras/e6c3823e-de67-4672-862b-b942e75435c7-1792821750900.webp
- Design on Kage: https://kage.design/designs/peras-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 name, colours, and type choices. Wait for their answers before proceeding. Apply the following system to their product, not to the reference product.

## Page structure
- **1200×630 social-card canvas:** Create a fixed landscape image intended for sharing on X, Slack, LinkedIn, or iMessage, with generous dark negative space.
- **Primary composition:** Use an asymmetric two-column arrangement: a small abstract product illustration or pixel-like symbol on the left, and the textual message block on the right.
- **Brand marker:** Place a compact placeholder wordmark or product label above the headline, optionally paired with a simple vertical accent bar.
- **Headline:** Set a short, highly legible multi-line headline as the focal point, with one or two meaningful phrases in the accent colour.
- **Footer band:** Add a thin horizontal divider across the lower portion, then place subdued placeholder attribution or URL text at the bottom left and right.

## Design language
- **Build hierarchy with scale and weight:** Make the headline the dominant element using a heavy geometric or grotesk sans-serif, approximately 52–64px on a 1200px-wide canvas, with tight line-height around 0.95–1.05. Keep the wordmark and footer clearly subordinate.
- **Use a near-black field:** Set the background around `#090D0C` or `#0B0F0E`, with warm-white text around `#F2F3EE` for softer contrast than pure white.
- **Reserve one vivid accent:** Use an electric lime around `#B7FF3C` for highlighted headline words, a small brand bar, and one simple graphic detail. Keep it limited so the message remains readable.
- **Use an asymmetric grid:** Allocate roughly 25–30% of the width to the left graphic and 65–70% to the text block. Align the brand marker and headline to the same left edge; vertically center the main composition in the upper two-thirds.
- **Keep imagery simple and constructed:** If using an illustration, make it a flat, chunky pixel-art or geometric silhouette with hard edges and no gradients, photography, or detailed scene. Use a tiny contrasting highlight sparingly.
- **Treat type as the image:** Use bold, compact sans-serif lettering, minimal tracking, and deliberate line breaks. Highlight only the most important phrase rather than applying accent colour to whole paragraphs.
- **Use restrained framing:** Add a thin, low-contrast divider in muted charcoal such as `#28302C`; avoid cards, rounded panels, heavy shadows, and decorative borders. If the logo marker uses a bar, keep it rectangular and crisp.
- **Keep the footer quiet:** Use medium-weight small text in muted gray-green around `#AAB2AC`, with compact metadata separated by a dot or slash. The footer should support provenance without competing with the headline.
- **Make it exportable:** Implement the card as SVG or HTML/CSS rendered to PNG at exactly 1200×630. Verify that all text stays inside safe margins, roughly 85–95px horizontally and 70px vertically, and that the result remains legible at thumbnail size.
- **Motion and interaction:** There is no interaction in a social card; render a static, deterministic image with no animation or hover states.

## Never
- Do not copy the reference product's logo, wordmark, product name, tagline, exact copy, pixel-art symbol, or footer text.
- Do not use the reference's branding or present the result as that product.
- Do not add stock photography, a copied icon set, gradients, excessive decoration, or interface controls.
- Use placeholder branding, placeholder copy, and an original simple graphic adapted to the user's product.