## 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/clay-com/ce4b0cf8-bf15-4191-ac52-305fb90e5e86-1789060074470.webp
- Design on Kage: https://kage.design/designs/clay-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, and type choices. Wait for their answers before proceeding. Apply the reference's composition to their product, using placeholder branding and copy rather than reproducing the reference.

## Page structure
- **1200×630 social-card canvas:** Build a fixed-ratio image intended for link previews, with all important content kept safely inside the edges.
- **Illustrated background:** Fill the canvas with a bright cyan sky transitioning into a rounded, textured green landscape with distant hills.
- **Upper object tableau:** Arrange a playful collection of oversized 3D geometric and everyday objects across the middle and upper thirds, creating depth through overlap, varied scale, and soft cast shadows.
- **Lower brand zone:** Let the landscape darken into a deep green gradient across the bottom third, creating contrast and a quieter area for identity.
- **Centered identity lockup:** Place a colorful placeholder icon beside a large lowercase white placeholder wordmark near the bottom center; keep this lockup dominant but leave generous surrounding space.

## Design language
- Treat the card as a single illustrated scene rather than a modular layout; establish a clear visual hierarchy from the busy object field to the calm brand zone.
- Use a saturated sky cyan around `#55DCE8`, grassy greens around `#4F9868` and `#0B5948`, and white text around `#FFFFFF`; use small object accents in primary red, yellow, orange, blue, and pink.
- Pair a friendly, rounded sans-serif for the placeholder wordmark with simple, high-legibility supporting type if any copy is added. Keep the wordmark large, lowercase, bold, and visually centered.
- Use soft, tactile 3D forms with rounded edges, subtle grain, diffuse lighting, ambient occlusion, and short grounded shadows. Avoid sharp UI-like cards, thin rules, and excessive outlines.
- Build depth with a low horizon, layered hills, overlap, floating objects, and a few scale changes; keep the top and middle areas energetic while the bottom third becomes darker and less detailed.
- If generating the image in code, prefer an SVG, Canvas, or HTML/CSS composition rendered to PNG at exactly 1200×630. Use placeholder shapes or generated abstract 3D objects, a placeholder icon, and placeholder wordmark/copy that can be swapped later.
- Keep the lockup optically centered, check readability at thumbnail size, and use no animation because the deliverable is a static social image.

## Never
- Do not use Clay's logo, arch icon, wordmark, product name, exact copy, or distinctive branded assets.
- Do not copy the exact object arrangement or recreate the reference image literally; make a new scene with the same playful illustrated composition.
- Do not use logos, wordmarks, product names, copy, illustrations, photography, or icon sets from the reference.
- Never present the result as Clay or imply affiliation with it.