## 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/frigade-assist-api/d8a44e39-e0ef-424f-ab8e-b27fea62f0f2-1789106648228.webp
- Design on Kage: https://kage.design/designs/frigade-assist-api-og-image

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (brand name, logo, colours, typefaces, and any imagery). Wait for their answers before proceeding. Apply the reference's composition to their product rather than copying the reference brand.

## Page structure
- **1200×630 social-card canvas:** Create a fixed 1200 by 630 pixel composition intended for export as a PNG, using HTML/CSS rendered to PNG or a carefully layered SVG.
- **Background field:** Fill the card with a deep charcoal-black surface and add restrained vertical panel divisions plus faint diagonal hatching near the outer sides.
- **Top focal marker:** Place a small white downward-pointing pointer or triangular marker on the vertical centerline near the upper third.
- **Central arc treatment:** Add a broad, shallow dark dome or radial form across the middle, capped by a thin electric-blue glowing arc that separates the brand area from the headline.
- **Placeholder wordmark:** Center the user's placeholder logo or wordmark above the arc, rendered in white with generous breathing room.
- **Primary headline:** Center a bold two-line headline below the wordmark and arc. Use placeholder copy supplied by the user, with one short phrase or final clause in a saturated blue accent.
- **Export-safe finish:** Keep all important text inside generous margins and render a crisp, flat social image with no interactive controls.

## Design language
- Build hierarchy through a centered vertical axis: small marker first, compact wordmark second, glowing arc third, then the largest headline.
- Use a dark cinematic base around `#202126` or `#1f2025`, with slightly lighter charcoal panels around `#27282e` and near-black edge treatment around `#17181d`.
- Treat blue as a single high-impact accent, approximately `#2678ff` to `#3d8cff`; use it only for the arc glow and one meaningful headline phrase.
- Use a bold modern sans-serif for the headline, with a large size around 58–70px, tight line-height around 0.98–1.05, medium-tight tracking, and strong white contrast. Keep the wordmark smaller and lighter than the headline.
- Keep composition symmetrical and spacious. The headline should occupy the dominant visual mass without touching the edges, while the upper branding remains compact.
- Use very subtle 1px vertical rules, low-opacity diagonal hatch lines, and restrained gradients to add depth without making the card busy.
- Make the blue arc thin and luminous: combine a sharp bright core with a wide, low-opacity blue blur. Add only soft shadows or glows; avoid cards, drop shadows, and rounded UI containers.
- Keep the background texture static and quiet. If generating an SVG, use gradients, masks, and low-opacity pattern lines rather than raster-heavy decoration.
- Produce the final artifact as a 1200×630 PNG (or an SVG that exports cleanly to that size), checking that the typography remains legible at social-preview scale.

## Never
- Do not use the reference company's logo, wordmark, product name, tagline, copy, or exact brand assets.
- Do not reproduce the reference headline or its wording; use placeholder branding and copy for the user's product.
- Do not borrow any reference-specific illustration, icon set, or imagery. Create an original abstract arc, pointer, and texture treatment only.
- Never present the result as the reference product; make the branding clearly belong to the user's product.