## 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/superhuman-com/aa0f5749-a8ae-405c-9afb-679f6a47222d-1789060754-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/superhuman-com/aa0f5749-a8ae-405c-9afb-679f6a47222d-1789060721-full.webp
- Component on Kage: https://kage.design/component/superhuman-banner

## Before you start
Ask what the user's product is, who the banner is for, and what their brand language and visual identity are. Then apply the principles below to create an original version for that product rather than reproducing the reference.

## Design goal
Build a slim, full-width announcement banner that sits at the top of a marketing page and points visitors toward a related product, feature, resource, or important update. It should feel like a calm secondary layer above the main page, not a promotional hero.

## Reusable design rules

### Layout and alignment
- Make the banner span the full viewport width.
- Use a compact height of roughly 56–64px on desktop, with enough vertical padding for comfortable reading.
- Center the content as one horizontal inline group rather than using separate left and right columns.
- Keep the content inside a responsive container or allow a centered max-width of approximately 720–900px.
- On narrow screens, let the message wrap naturally or stack the link below it while keeping the whole banner visually centered.
- Preserve generous side padding, around 20–32px on mobile and 32–48px on larger screens.

### Typography hierarchy
- Use a clean sans-serif consistent with the product's brand; avoid decorative display typography.
- Set the announcement text around 14–16px with a medium or regular weight and comfortable line height near 1.4.
- Keep the sentence visually primary but understated; the destination link should be slightly more actionable through underline, weight, or colour contrast.
- Use sentence case and concise wording. Include a small right-pointing arrow as part of the link affordance, with a modest gap before it.

### Colour
- Start with a very light, cool lavender or brand-tinted surface, approximately `#E9E2FF` or `#EEE9FF`, but adapt the hue to the user's palette.
- Use a dark charcoal text colour such as `#24232A` rather than absolute black.
- Make the link slightly stronger through a darker text tone or subtle underline; maintain accessible contrast.
- If the surrounding page has a dark or highly saturated hero, keep this strip deliberately quiet so it reads as a separate announcement layer.

### Borders, radius, and depth
- Keep the banner edge-to-edge with no outer border radius.
- Avoid heavy shadows. If separation from the content below is needed, use a 1px low-contrast bottom border such as `rgba(30, 25, 60, 0.08)`.
- Do not place the announcement inside a floating card; it should feel integrated into the page chrome.

### Interaction
- Make the linked phrase and arrow one generous clickable target, not two unrelated controls.
- Add a subtle hover treatment: a slightly darker link colour, clearer underline, or a 1–2px arrow nudge.
- Preserve keyboard focus with a visible focus ring or underline change.
- Ensure the banner remains readable at increased text size and on small screens; never truncate the message.

## Never
- Never copy the reference site's logos, product names, wording, or exact call to action.
- Never reuse the reference's brand identity, gradients, illustrations, imagery, icons, or distinctive visual assets.
- Never assume the user's product is the same as the reference product.
- Never make the banner taller or louder than necessary for a secondary announcement.
- Never hide important content behind the banner or rely on colour alone to communicate that the text is a link.