## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106716-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106640138-full.webp
- Component on Kage: https://kage.design/component/noodle-seed-card

## Before you start
Ask what the user's product is, who it is for, and what their brand personality and visual identity are. Then apply the principles below to their product rather than reproducing this reference.

## Build a launch announcement card
Create a wide, editorial announcement section for a product website. It should feel premium, minimal, and intentionally spacious, with one visual-led column and one message-led column.

### Layout and alignment
- Use a near-black full-width section, approximately `#050505`, with a very subtle top and bottom divider in `#171717`.
- Constrain the content to a centered max width of roughly 1080–1160px.
- On desktop, use a two-column grid: a narrower visual column around 35–40% and a larger text column around 60–65%.
- Align the main announcement copy vertically around the middle of the visual area, not at the top edge.
- Give the visual column enough height for an expressive product image or abstract brand asset, with generous empty space around it.
- Place a compact credibility or social-proof badge beneath the visual, aligned with the visual column rather than floating independently.
- On smaller screens, collapse to one column: visual first, badge second, then copy. Keep the section padding generous but reduce the visual height proportionally.
- Use responsive padding of approximately 32px on mobile and 72–96px vertically on desktop.

### Typography hierarchy
- Use a clean modern sans-serif with a neutral, highly legible feel.
- The eyebrow should be uppercase, letter-spaced, and small: approximately 11–12px, medium weight, with a warm accent colour.
- The headline should be a single confident sentence, around 30–34px on desktop, 26–30px on mobile, with a regular or book weight and tight but comfortable line-height around 1.15.
- Add a short supporting sentence beneath it in muted grey, approximately 15–16px with 1.5 line-height.
- Keep the copy width controlled so the headline does not span the entire page.

### Colour and visual tone
- Use near-black for the background and off-white, approximately `#F2F1EE`, for the headline.
- Use a subdued grey such as `#858585` for supporting text.
- Choose one restrained warm accent—muted amber, copper, or orange around `#B9784E`—for the eyebrow and optional focus highlights.
- Keep the image or visual asset as the primary source of personality; do not add decorative gradients unless the user's brand needs them.

### Borders, badge, and radius
- Keep the main section visually flat and borderless apart from extremely subtle horizontal rules.
- Style the proof badge as a compact dark charcoal panel around `#29282A`, with a 10–12px radius and a faint inner or outer contrast edge.
- Use a small circular mark or neutral symbol inside the badge, followed by a compact uppercase label and a stronger value line. Treat it as supporting evidence, not a second hero.
- Use modest spacing between badge elements and avoid excessive shadows. If a shadow is needed, use a very soft black shadow with low opacity.

### Interaction and accessibility
- If the announcement is clickable, make the whole card or a clearly defined action area keyboard accessible with a visible warm-accent focus ring.
- Add a subtle hover treatment such as a slight badge lift, brighter border, or small image scale—never a dramatic animation.
- Respect `prefers-reduced-motion`.
- Provide meaningful alt text for the visual and maintain at least WCAG AA contrast for all text.

### Content guidance
- Use a short announcement category, one direct headline, and one concise supporting line.
- The credibility badge should communicate an appropriate third-party milestone, review, launch, or metric for the user's product.
- Preserve the balance of playful visual storytelling and serious product communication, adapting the visual language to the user's brand.

## Never
- Never use logos, product names, copy, illustrations, imagery, or badge branding from the reference.
- Never reproduce the reference's exact cat, bag, Product Hunt treatment, wording, or brand marks.
- Never make the layout feel like a dense dashboard, sales table, or generic centred hero.
- Never sacrifice responsive behaviour, keyboard access, alt text, or readable contrast for visual similarity.