## Reference images

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

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/together-ai/60591018-8706-471e-a3f2-ad3109f52987-1789073908-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/together-ai/60591018-8706-471e-a3f2-ad3109f52987-1789073685313.webp
- Design on Kage: https://kage.design/designs/together-landing-page

## 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, logos, imagery, and other constraints). Wait for their answers before designing. Apply the system below to their product, not to the reference product, and replace all content with product-specific copy.

## Page structure
1. **Announcement strip:** Place a very thin black utility bar at the very top with a short announcement, centered in small light text and an accent symbol.
2. **Navigation:** Add a floating white navigation capsule below it, with the product mark at left, compact dropdown links across the center, and a thin divider followed by contact and dark sign-in/action buttons.
3. **Hero:** Use a large pale-blue hero field with a left-aligned two-line headline, where the first line is dark and the second is lighter gray; add a short description and two compact buttons. Balance it with an abstract, colorful 3D graphic on the right, annotated with tiny technical labels and hairline connector rules.
4. **Trust row:** Finish the hero with a low-contrast “trusted by” label and a horizontal line of muted customer/research logos.
5. **Platform overview:** On white, center a section title and explanatory subtitle, then show three equal pastel statistic cards in blue, pink, and peach. Each card has a tiny uppercase label, oversized metric, and small bottom caption; use subtle connector marks between cards.
6. **Full-stack cloud:** Add a centered section heading and subtitle, followed by a three-tab product selector. Show the active tab as a cyan-tinted strip and the inactive tabs as white. Below, use a large bordered white panel with an accordion/list of capabilities on the left and a product UI or code screenshot on the right.
7. **Research section:** Switch to a full-width near-black navy background. Introduce the research message at upper left, with small navigation controls at upper right, then lay out four dark editorial cards in one row. Each card contains a compact category pill, centered research title, and tiny author line. Add a muted recognition/publication logo row beneath.
8. **Customer stories:** Return to white with a centered heading and subtitle and a deliberately large open area for customer-story content. Place a small dark “view all” button near the bottom of this whitespace to create a slow, spacious rhythm.
9. **News/blog section:** Add a thin top rule, left-aligned section heading, and a small “all posts” button at right. Use a large featured article tile on the left with image, category, title, and excerpt; stack three smaller article rows on the right with thumbnails, categories, titles, and truncated descriptions.
10. **Final CTA:** Use another pale-blue field with a centered heading, subtitle, and compact dark CTA button. Let a large abstract 3D form enter from the lower edge as a soft visual continuation of the hero.
11. **Mega-footer:** Place a large rounded white footer panel over the CTA artwork. Organize several narrow link columns with uppercase group labels, add a large low-opacity brand-shaped typographic watermark across the lower half, and finish with copyright, legal links, and small social icons along the bottom edge.

## Design language
- Build hierarchy with an oversized geometric sans-serif display face, compact body copy, and strong weight/colour contrast; use roughly 40–56px for section headlines, 18–24px for card metrics, 12–14px for body text, and 9–10px uppercase labels.
- Keep the overall grid wide and orderly: generous horizontal margins, centered section headings, equal-width cards, and thin horizontal rules that divide content without heavy framing.
- Change rhythm down the page: begin airy and image-led, become more information-dense in the platform and research sections, reopen into generous whitespace for stories, then tighten into the blog grid before ending with a spacious CTA/footer.
- Use a restrained palette: white and near-white surfaces (#ffffff, #f8fafc), pale blue backgrounds (#eaf7ff), near-black navy (#050522), black text (#080808), and muted gray text (#89909a). Reserve saturated accents for abstract artwork and cards: cyan/blue (#55dbe2, #2177e8), violet (#7250e8), pink (#f5c8ef), and peach/orange (#ffd2bd).
- Treat pastel blocks as functional visual markers rather than decoration: use blue, pink, and peach for metric cards, and a cyan highlight for the active capability tab. Keep logos and secondary text deliberately low contrast.
- Pair large rounded geometric type with tiny monospaced or tightly tracked uppercase metadata for a technical editorial feel. Keep buttons compact, black, rectangular with mildly rounded corners, and use uppercase microcopy.
- Use thin #edf0f2 borders, minimal shadows, and modest radii. Reserve a larger radius for the floating navigation and the oversized footer panel; avoid glossy cards or layered drop shadows.
- Use abstract translucent 3D shapes with gradients and soft transparency as the main illustration language. If animated, make them slow and ambient; keep tab changes, accordions, carousels, and buttons crisp and understated.
- Preserve the contrast cadence: pale-blue hero, white product sections, a single dramatic navy research block, white editorial content, then pale-blue CTA and white footer overlay.

## Never
- Do not copy the reference product’s logos, wordmarks, product names, text, research titles, customer names, imagery, illustrations, or icon set.
- Do not present the result as Together AI or imply affiliation with it.
- Create original abstract artwork, copy, labels, navigation, and data appropriate to the user’s product and audience.