## 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/planetscale-com/b4abfdd8-cd39-4289-8914-c1bd40d118b4-1789060671-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/planetscale-com/b4abfdd8-cd39-4289-8914-c1bd40d118b4-1789060620-full.webp
- Component on Kage: https://kage.design/component/planetscale-banner

## Before you start
Ask what the user's product is, who the audience is, and what brand personality, colour palette, and typography system the product uses. Then apply the principles below to create an announcement banner for that product rather than reproducing the reference.

## Design language
Build a very shallow, full-width announcement strip intended to sit above the main site navigation.

- **Layout and alignment:** Make the banner span the viewport from edge to edge. Use a single horizontal row centered both vertically and horizontally, with the message followed by a compact inline text action. Keep the content on one line at desktop widths and allow a controlled wrap or horizontal scroll on narrow screens rather than letting the bar become excessively tall. Give the inner content approximately 16–24px of horizontal padding.
- **Typography hierarchy:** Use a compact monospace or technical type style for the announcement, around 14–16px with a 1.2–1.4 line height and medium weight. Keep the message visually primary, while the action is slightly heavier and visually framed. Use sentence case and concise wording so the banner reads at a glance.
- **Colour:** Use a saturated warm yellow or amber background, approximately `#FFD000` to `#FFC400`, with near-black text around `#171717`. The action can use a dark filled label or dark text with a subtle contrasting treatment. Ensure colour contrast remains accessible and adapt the colours to the user's brand when appropriate.
- **Borders and radius:** Keep the strip rectangular and full bleed with no outer radius. Avoid heavy borders; if separation from the content below is needed, use a subtle bottom rule in a slightly darker amber or translucent black. The inline action may have a minimal 2–4px radius or a squared-off technical appearance.
- **Spacing and sizing:** Target a height of roughly 40px on desktop, with 8–10px vertical padding. Keep the gap between message and action around 8–12px. Make the clickable action easy to target with at least a 32–40px effective height, even if its visible label is compact.
- **Interaction:** Make the action a real link or button with a clear hover state, such as a slightly lighter/darker background or underline. Add a visible keyboard focus ring. If the announcement can be dismissed, provide an accessible close control without disturbing the centered message; otherwise keep it persistent and non-dismissible. Respect reduced-motion preferences and do not use distracting animation.
- **Responsive behaviour:** Preserve the shallow visual profile. At small widths, reduce horizontal padding and type size slightly, and either wrap the content into two balanced lines or allow the row to scroll discreetly. Never clip the action or make it unreachable.

## Never
- Never copy any logo, product name, brand-specific wording, or exact call to action from the reference.
- Never reuse the reference's exact copy, colour values, typography files, spacing measurements, or implementation markup as a fixed template.
- Never include illustrations, decorative graphics, or imagery from the reference.
- Never make the banner so tall or visually dominant that it competes with the main page content.
- Never omit accessible focus states, sufficient contrast, semantic link/button behaviour, or mobile handling.