kage
imagetoascii.art
Design analysis
A 1200×630 social card set entirely in monospace on a near-black canvas, split roughly 55/45 between a sparse left text column and a dense right-hand artwork. The left column stacks a small letter-spaced purple wordmark, a two-line white headline, a mid-gray two-line value prop and a single flat lavender CTA chip with dark text — hierarchy comes only from size, case and the one accent colour. The right field is a multicolour ASCII jellyfish that doubles as a live demo of the product's output, bleeding off the right and bottom edges and carrying all the saturation on the card.
Prompt preview
## 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/image-to-ascii/79830328-9cc9-45ff-a993-8b73d781d5e3-1789452105972.webp
- Design on Kage: https://kage.design/designs/image-to-ascii-og-image
## Before you start
Ask the user what product or page this social card is for, where the link will be shared (X, Slack, LinkedIn, iMessage), what brand assets they already have (name, wordmark, colours, typeface), and what one visual could demonstrate the product's output. Wait for the answers before designing. Everything below is applied to their product and brand, using placeholder copy where assets are missing — never the reference product's name or copy.
## Page structure
Produce one static image, exactly 1200×630 px — either an HTML/CSS page sized to that viewport and rendered to PNG, or an SVG with a 1200×630 viewBox. Top to bottom:
1. **Full-bleed canvas**: solid near-black background; no border, frame or vignette.
2. **Wordmark (top-left)**: small uppercase product/site name in the accent colour, letter-spaced, sitting ~64px from the top and left edges.
3. **Left text column (~55% width, slightly above vertical centre)**: a two-line headline in white, then a two-line supporting line in mid-gray, then one flat rectangular CTA chip lower in the column.
4. **Right visual field (~45% width)**: one large piece of the product's own output — in this language, an ASCII/character rendering of a subject — big enough to read at thumbnail size, bleeding off the right and bottom edges.
5. Nothing else: no footer, no URL, no badges or logos.
## Design language
- Use one monospace typeface for everything; hierarchy comes from size, weight, case and colour, never from mixing families.
- Type scale at 1200×630: wordmark ~18px uppercase with ~2px letter-spacing in the accent colour; headline ~64–72px bold, line-height ~1.1, white; supporting lines ~24px regular, line-height ~1.5, mid-gray; CTA chip text ~20px dark-on-accent with generous horizontal padding.
- Colour: near-black background (`#0a0a0a`–`#111`); white primary text (`#f5f5f5`); mid-gray secondary (`#9ca3af`); exactly one UI accent — a lavender/violet like `#c4b5fd` reads well as a chip with near-black text. Let the artwork carry all other colour (2–4 hues such as teal, orange and pink) so it stays the focal point.
- Flat treatment: no shadows, no gradients, no borders, radius 0–2px; the CTA is a plain rectangle.
- Asymmetric 55/45 split: left-aligned text with generous negative space above and below, contrasted against a dense, detailed artwork filling the right half.
- The artwork must stay legible at ~200px wide: large character blocks, a strong silhouette, hue shifts suggesting light and depth.
- Static asset — no motion, no hover states. Keep all text inside a ~64px safe margin so platform crops never clip it.
## Never
- No jellyfish imagery, no "Image to ASCII Converter", "imagetoascii.art" wordmark, or any of its taglines and copy ("Free. Private. Made of characters." etc.).
- No ASCII art copied from the reference; generate original character art of the user's own subject.
- Never present the result as the reference product or reuse its logos, icon set, illustrations or photography.
