kage
arcjet.com
Design analysis
A 1200×630 share card built almost entirely from atmosphere: a near-black canvas washed with deep indigo glows, faint low-poly triangular facets, a scatter of 1–2px star particles and diagonal light streaks. The focal point is a single horizontal lockup just above centre — a thin comet-trail line tapering into a four-point sparkle, then the 'Arcjet' wordmark in a large geometric sans, closed on the right by a hairline orbital arc that visually finishes the word. The tagline sits alone at roughly 70% height in the same family at about a third of the wordmark's size, so the hierarchy reads in two beats: brand, then message. Everything is white on dark with no borders, cards or buttons, letting the arc and sparkle motifs carry the identity.
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/arcjet/922812ca-1b5e-4501-831d-dca925a117ef-1790056992228.webp - Design on Kage: https://kage.design/designs/arcjet-og-image ## Before you start Ask the user what product the card is for, who it is for, and what brand assets they already have (name, wordmark, colours, typeface, any existing motif). Wait for the answers before writing any code. Everything below is applied to their brand — the reference composition is the template, not the content. ## Deliverable Produce a **1200×630 social card** (Open Graph / Twitter summary_large_image size) as a single self-contained `og-card.html` rendered to PNG at exactly 1200×630 (e.g. via Puppeteer/Playwright screenshot, or an equivalent standalone SVG). No scrolling, no responsive variants — one fixed canvas. ## Canvas composition 1. **Background (full bleed):** near-black base (`#05060e`) with two or three large, very soft radial glows of the brand's deep accent colour (in the reference, deep indigo ~`#1c2c8f` to `#2b3fa8`) bleeding in from the edges and lower half. Keep total brightness low so white type dominates. 2. **Texture layer:** faint, low-contrast geometry — 2–3 large translucent triangular/faceted shapes at 3–6% opacity, a scatter of 30–60 tiny star particles (1–2px circles, white at 15–40% opacity) concentrated away from the centre, one or two diagonal light streaks/beams crossing a corner at 5–10% opacity, and an optional barely-visible grid or orbit-line set. All texture must stay behind the text and never reduce legibility. 3. **Focal lockup (slightly above vertical centre, optically centred):** a single horizontal group containing, left to right: a thin tapering trail line that leads the eye in, a four-point sparkle/star glyph at the trail's end, the wordmark at display size (~110–130px cap height equivalent), and a large hairline arc (2px stroke, partial circle ~280–320px radius) sweeping around the right side of the wordmark so the composition closes like an orbit. All elements vertically centred on one axis. If the user has a real logo, use it in place of the wordmark; keep the arc/trail/sparkle only if they suit the brand, otherwise replace with a single equivalent motif. 4. **Tagline (one line, ~70% height):** the product's one-sentence value line, centred horizontally under the lockup, in the same typeface at roughly 30–35% of the wordmark size, regular weight, pure white. Generous letter-spacing is not needed; let the size gap do the hierarchy. 5. **Safe margins:** keep all text at least 60px from every edge; crop the arc and background texture freely — only the wordmark and tagline need protection. ## Design language - **Two-beat hierarchy:** the card says exactly two things — brand and tagline. No buttons, URLs, badges or secondary lines. If the user insists on a third element (e.g. a domain), set it at 16–18px, 50–60% white opacity, tucked into a bottom corner. - **Colour:** dark ground, single accent, white type. Approximate values from the reference: background `#05060e`, deep glow `#1c2c8f`–`#2b3fa8`, particle/texture white at low opacity, text `#ffffff`. Substitute the user's accent at a similarly deep, saturated value; if their brand is light, invert the scheme but keep the single-accent discipline. - **Type:** one geometric sans family throughout (the reference reads like a geometric grotesque — use the user's brand face, or a system-safe geometric like Poppins/Montserrat only as fallback). Wordmark = largest element on the canvas; tagline = one clean step down; nothing else competes. - **Line work as identity:** hairline strokes (1–2px) build the motif — trail, sparkle, orbit arc. No filled shapes, no borders, no cards, no drop shadows; depth comes from glow and texture, not elevation. - **Contrast discipline:** every glyph sits on the darkest region of the background; glows and facets never pass behind text above ~10% opacity. - **Motion:** none — it is a static image, but keep the composition balanced enough to work as a 2:1-cropped thumbnail: the wordmark should survive even if the tagline is cut. ## Never - Do not reuse the Arcjet name, wordmark, sparkle/trail/orbit combination, tagline copy or exact background artwork. Build the same *composition language* with the user's own brand: their name, their tagline, their colours, their motif. - Do not add stock photography, emoji, gradients-on-text, or clutter the two-beat hierarchy with extra copy. - Never present the output as Arcjet's card or imply it is their asset.
