## 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/postsider/48512d23-ce19-4237-bb59-a486ed510d72-1790056966065.webp
- Design on Kage: https://kage.design/designs/postsider-og-image

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have (name, colours, type choices, logo or other assets). Wait for their answers before implementing. Apply the following direction to their product, using placeholder branding and copy until those answers are provided.

## Page structure
- **1200×630 canvas:** Build a fixed social-card composition intended for export as a PNG, using HTML/CSS rendered to an image or a standalone SVG.
- **Background field:** Use a warm-white or pure-white canvas with an extremely subtle square grid spanning the full card.
- **Left identity block:** Place a large placeholder wordmark in the upper-left/mid-left area, followed by a small widely tracked uppercase descriptor line.
- **Headline block:** Under the descriptor, add a concise two-line placeholder headline with the first phrase in near-black and the supporting phrase in muted gray.
- **URL or metadata line:** Add a small gray destination label beneath the headline.
- **Motion lines:** Draw several thin, low-contrast curved or diagonal lines that travel from the lower-left toward the upper-right, crossing behind the central imagery.
- **Platform or feature trail:** Arrange a small group of colorful rounded-square placeholder tiles along a gentle rising diagonal through the middle-right, representing integrations or capabilities without using recognizable reference branding.
- **Right focal illustration:** Reserve the far-right third for an original monochrome editorial/anime-inspired character or product-related illustration, cropped naturally by the bottom edge and visually aligned with the trajectory lines.
- **Export treatment:** Ensure the final artifact is exactly 1200×630, has safe margins for social-platform cropping, and can be exported without browser UI or extra padding.

## Design language
- **Create a quiet base:** Keep the background predominantly white, approximately `#FFFFFF` or `#FCFCFB`, with grid lines around `#F3F3F1` and motion lines around `#E5E5E2`.
- **Use strong left-to-right hierarchy:** The wordmark is the largest text object, the headline is the second focal point, and the illustration plus rising tile trail provide the visual counterweight on the right.
- **Pair bold display type with restrained utility text:** Use a heavy geometric or grotesk sans for the wordmark and headline; use a smaller uppercase sans with generous tracking for the descriptor and a compact neutral sans for the URL.
- **Keep the palette mostly monochrome:** Use near-black `#080808`, charcoal `#444444`, and cool gray `#888888` for type and linework. Introduce saturated accent colours only in the small integration tiles, with a few distinct red, blue, purple, green, or orange accents.
- **Make the composition feel active but sparse:** The faint grid provides structure, while diagonal curves, scattered tiny dots, and the ascending tile arrangement create movement across otherwise generous negative space.
- **Treat the illustration as editorial line art:** Keep it predominantly black, white, and gray with confident outlines and selective solid fills; make it original and related to the user's product rather than copying any existing character.
- **Use restrained geometry:** Tiles may have modest rounded corners and soft shadows, but avoid glossy cards, gradients, heavy borders, or excessive UI decoration. Keep shadows subtle and localized.
- **Preserve legibility at thumbnail size:** Maintain strong contrast for the wordmark and headline, limit copy length, and keep all essential text within generous inset margins.
- **No complex interaction is needed:** This is a static image; if creating it in HTML/SVG, use deterministic positioning and verify the rendered result at exactly 1200×630.

## Never
- Do not use the PostSider name, wordmark, tagline, URL, logos, platform icon set, copy, or exact character artwork from the reference.
- Do not reproduce the reference character, recognizable social-network marks, or any proprietary illustrations; use generic placeholder tiles and an original illustration instead.
- Do not present the result as PostSider or imply affiliation with it.
- Do not add extra page sections, navigation, interactive controls, photography, or a full website layout; the deliverable is one 1200×630 social card image.