## 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/idlen/3069db9b-3df5-4391-ad36-e06497124e05-1789538481615.webp
- Design on Kage: https://kage.design/designs/idlen-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 product name, logo or mark, colours, type choices, and any required copy. Wait for their answers before designing. Apply the reference composition to their product rather than reproducing the reference brand.

## Page structure
1. **Social-card canvas** — Create a 1200×630px image, preferably as SVG or HTML/CSS rendered to PNG, with a full-bleed near-black navy background.
2. **Brand marker** — Place a small placeholder geometric mark and placeholder wordmark in white near the upper-left, with generous inset padding.
3. **Primary headline** — Set a very large, bold, uppercase two-line headline beneath the brand marker. Make the first line neutral gray-white and the second line the main colour focal point with a vivid gradient.
4. **Supporting copy** — Add one muted explanatory line and one brighter, higher-contrast secondary line below the headline, aligned to the same left edge.
5. **Product preview inset** — Place a cropped, dark rectangular preview of the user’s product interface in the lower-right, partially extending toward the bottom edge. Use simplified placeholder UI blocks, metrics, or controls that communicate the product without competing with the headline.
6. **Export treatment** — Ensure the final composition remains legible at social-preview size, has no accidental browser chrome, and exports at exactly 1200×630px.

## Design language
- Build hierarchy through scale and position: the wordmark is small, the headline is extremely large, supporting copy is medium-sized, and the product preview is secondary but visually grounding.
- Use an asymmetric composition: dense typography occupies the left and central field while the interface preview creates weight in the lower-right; preserve clear negative space around the headline.
- Use a near-black/navy background around `#050a0f` to `#0b1420`, with subtle tonal variation rather than a visible texture or busy pattern.
- Treat the first headline line with a restrained silver-gray treatment, approximately `#8f949b` through `#f4f5f6`; make the key second line a saturated left-to-right gradient such as blue `#347ff0` through cyan/teal `#16c7b1` to violet `#735cff`.
- Pair a clean modern sans-serif with heavy display weight for the headline. Use tight tracking, compact line-height, uppercase lettering, and a noticeably smaller regular-weight sans-serif for supporting copy.
- Keep the wordmark white and simple. Use thin low-contrast borders around the inset UI, approximately `#272727`, with dark charcoal surfaces around `#111111` to `#181818`, small-to-medium corner radii, and almost no shadow.
- Make the inset interface feel like a cropped product screenshot: a dark header, one prominent value or status panel, and a few compact statistic/control tiles. Keep details abstract and subordinate to the headline.
- Use no animation in the exported image. If building the source as HTML/CSS, use gradients and layout primitives that rasterize consistently; validate contrast and readability at the full 1200×630 canvas.

## Never
- Do not use the reference product’s logo, wordmark, name, exact copy, dashboard content, or recognizable UI details.
- Do not copy the Idlen branding or present the result as Idlen.
- Do not add unrelated photography, illustrations, icon sets, browser chrome, or a fake social-platform frame.
- Use placeholder branding and placeholder copy until the user supplies their own assets and content.