## 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/together-ai/60591018-8706-471e-a3f2-ad3109f52987-1789073939-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/together-ai/60591018-8706-471e-a3f2-ad3109f52987-1789073908-full.webp
- Component on Kage: https://kage.design/component/together-hero

## Before you start
Ask the user what their product does, who it is for, and what their brand personality, colours, and primary conversion goal are. Apply the principles below to their product rather than reproducing this reference literally.

## Build an AI-native platform hero
Create a full-width website hero for a modern software, infrastructure, or developer product. The section should communicate the product category quickly, establish a confident point of view, and lead visitors toward one primary action and one lower-commitment alternative.

### Layout and alignment
- Use a very light, cool-toned hero canvas with a generous vertical footprint, approximately 620–700px including the trust row.
- Place a slim announcement bar at the very top using a near-black background and centered, compact text with a small accent symbol.
- Below it, use a floating navigation shell with a wide primary nav panel and a separate, compact actions panel on the right. Keep both panels aligned to the same top and bottom edges, with a narrow gap between them.
- Use a centered max-width container of roughly 1250–1400px with 14–20px side gutters.
- The main hero should be a two-column composition: left content around 48–52% width, right visual around 48–52%. Vertically center the content, while allowing the visual to extend beyond the normal text bounds.
- Anchor the headline and supporting copy to the left edge of the main container. Place the CTAs directly below the description with a compact horizontal gap.
- Add a low-contrast “trusted by” row along the bottom, separated from the main hero only by whitespace. It should scroll or clip gracefully on narrow screens.
- On mobile, stack the hero content above the visual, collapse navigation into a simple menu trigger, and keep the announcement bar readable without forcing horizontal overflow.

### Typography hierarchy
- Use a contemporary geometric or humanist sans-serif with clean circular forms and strong rendering at large sizes.
- Set the primary headline in a heavy weight, approximately 58–68px desktop with a line height around 0.98–1.05. Use two or three short lines rather than a paragraph-shaped block.
- Visually distinguish the second headline phrase with a muted grey or softened brand colour while keeping the same typeface and scale.
- Use supporting text at 16–18px with a 1.45 line height and a restrained dark slate colour. Limit the measure to roughly 560px.
- Make announcement, navigation, trust labels, and technical annotations small and disciplined. Optional utility labels may use uppercase, monospace, or letter spacing to suggest infrastructure and precision.
- Button labels should be concise, uppercase or sentence case according to the user's brand, and visually legible at 11–13px.

### Colour and atmosphere
- Use an approximate hero background of #EEF8FF or another very pale blue-white, with subtle radial shifts toward #E4F2FC near the visual.
- Use near-black #050505 for the announcement bar, primary headline, and primary button.
- Use a softened graphite such as #53606A for body copy and a lighter neutral grey such as #8C969D for the secondary headline phrase.
- Reserve one or two vivid accent colours from the user's brand for the abstract visual; suitable examples include electric violet #6B2BEF, saturated blue #1689D8, and warm orange-red #F04B21.
- Keep the trust marks and secondary controls subdued, around #A9B5BC, so they support credibility without competing with the headline.

### Visual treatment
- Build an abstract, non-literal product visual on the right: layered translucent discs, rounded panels, ribbons, bars, or orbital forms that imply connected systems, models, data, or infrastructure.
- Use soft gradients, translucent fills, subtle blur, thin outlines, and restrained depth rather than a photorealistic illustration.
- If labels are used around the visual, make them sparse, tiny, and technical; connect them with hairline rules or short markers. They should clarify the visual's conceptual zones, not act as body copy.
- Ensure the visual remains decorative and does not reduce the legibility of the text or CTAs. It may be implemented with CSS, SVG, canvas, or generated shapes depending on the product's stack.

### Spacing, borders, and radius
- Use an 8px spacing base. Keep 24–40px between headline, supporting copy, and CTA group; use 72–120px of breathing room around the main hero content.
- Give navigation panels and secondary buttons a small radius around 6–10px. The hero itself should remain open and mostly unboxed.
- Use subtle white or translucent borders on floating navigation shells, approximately rgba(255,255,255,.75), with a faint shadow such as 0 8px 24px rgba(30,60,80,.06).
- Primary buttons can be nearly square with a 4–6px radius; secondary buttons should use a pale blue-grey fill such as #DDE7ED.
- Keep decorative rules extremely thin and low contrast.

### Interaction and responsive behaviour
- Add a concise hover state to navigation links, buttons, and announcement link: change colour, underline, or background without introducing a large animation.
- Primary CTA should have a clear hover transition to a slightly lighter or accent-tinted black; secondary CTA should darken subtly.
- Let the abstract visual have restrained motion only if it supports the concept: slow floating, gradient drift, or parallax under 8px. Respect `prefers-reduced-motion`.
- Make all buttons keyboard accessible with visible focus rings and provide meaningful labels for any visual-only controls.
- Ensure the trust row does not imply endorsement unless the user's product has permission to display those organisations.

### Content guidance
- Write a concise, category-defining headline specific to the user's product. Use the second line to express the broader benefit or point of view.
- Keep the supporting sentence concrete and outcome-oriented.
- Use one high-intent primary CTA and one sales, demo, documentation, or exploration CTA based on the user's conversion goal.
- Replace the trust row with permitted customer names, partner categories, metrics, or remove it entirely if there is no substantiated proof.

## Never
- Never use logos, product names, slogans, copy, customer marks, labels, or exact text from the reference.
- Never recreate the reference's specific abstract illustration, arrangement, or decorative geometry one-for-one.
- Never include unlicensed logos, invented endorsements, or unsupported claims.
- Never use imagery, illustrations, icons, or brand assets from the reference; create an original visual language appropriate to the user's product.
- Never sacrifice responsive layout, contrast, accessibility, or semantic HTML for visual resemblance.