## 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/scalebrowser/65a14343-8d7a-41a8-9af6-8ff755a65fc2-1792216865134.webp
- Design on Kage: https://kage.design/designs/scalebrowser-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, type choices, logo or other assets. Wait for their answers before designing. Apply everything below to their product, not to the reference brand.

## Page structure
- **Social-card canvas:** Produce a 1200×630 image intended for Open Graph sharing, with a wide cinematic composition and safe margins for cropping.
- **Upper brand zone:** Place a placeholder logo mark and placeholder wordmark centered in the upper third, clearly separated from the headline.
- **Atmospheric landscape band:** Build a horizontal layered background through the middle: a deep blue horizon, subtle pixel/dither texture, a small warm glow near the center, and a dark jagged mountain or abstract terrain silhouette spanning the width.
- **Lower message zone:** Set a short, lighter italic or oblique supporting line above a larger, bold two-line-or-single-line placeholder headline, centered in the lower half.
- **Frame details:** Add a very thin inset rectangular border and small rounded corner markers to create a restrained technical/vintage display frame.

## Design language
- **Use a cinematic centered hierarchy:** Keep the placeholder brand lockup compact and high, let the headline be the largest readable element, and preserve generous negative space around both.
- **Create depth with horizontal layers:** Combine near-black navy (#050a12), midnight blue (#0d1a2d), muted slate blue (#334b6a), and a restrained warm cream glow (#d6c5a5) at the horizon rather than using a flat background.
- **Treat texture as atmosphere:** Add sparse white-blue stars, low-contrast halftone or pixel dithering, and faint horizontal bands. Keep texture subtle enough that the type remains crisp at thumbnail size.
- **Use high-contrast type:** Render the placeholder wordmark and main headline in off-white (#f3f4f2). Pair a clean geometric or grotesk sans with a slightly italic supporting line; use medium weight for the supporting line and heavy weight for the headline.
- **Scale type for sharing contexts:** Make the headline approximately 52–68px at 1200×630, the supporting line about 30–40px, and the wordmark about 38–48px, adjusting for the user's copy while maintaining clear contrast.
- **Keep the frame precise:** Use a 1px translucent blue-gray border, minimal radius on corner markers, no cards, drop shadows, or decorative UI chrome. The landscape should be a flat graphic silhouette or SVG-like shape, not a photographic scene.
- **Make the output an image:** Implement the card as SVG or HTML/CSS rendered to PNG, at exactly 1200×630px. Use placeholder branding and copy supplied by the user; do not rely on remote assets unless explicitly provided.
- **Keep interaction out of the artifact:** This is a static social card, so there are no controls or motion. If previewed in a browser, ensure the final export preserves the full-bleed composition and safe margins.

## Never
- Do not use the reference logo, wordmark, product name, tagline, exact copy, mountain artwork, or any other proprietary branding from the reference.
- Do not copy the reference card pixel-for-pixel; create a new landscape or abstract horizon using the same broad compositional principles.
- Do not add unrelated logos, icon sets, photography, illustrations with recognizable characters, or UI screenshots.
- Never present the result as Scalebrowser or imply affiliation with it.