## 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/replicate-com/18021eac-ea1d-469d-8210-9b10eacb77c7-1789073887-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/replicate-com/18021eac-ea1d-469d-8210-9b10eacb77c7-1789073681668.webp
- Design on Kage: https://kage.design/designs/replicate-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including the product name, logo, colours, typefaces, imagery, and code language preferences. Wait for their answers before designing. Apply the following system to their product, not to the reference product.

## Page structure
1. **Announcement strip and navigation:** Add a slim promotional strip at the very top, followed by a light navigation bar with a compact brand mark, a wide search field, text links, and a dark primary action.
2. **Gradient hero:** Use a tall full-width hero with a saturated pink-to-purple-to-yellow atmospheric gradient. Place a large left-aligned headline, concise supporting copy, a black CTA, and a large bordered product demonstration below: tabs and syntax-highlighted code on the left, generated visual output on the right.
3. **Capability filters and model carousel:** Transition into white space with a small “what you can do” label and rounded outlined category pills. Below, show a horizontally clipped row of compact model cards with thumbnails, publisher/model metadata, descriptions, and run counts.
4. **Contributor strip:** Place two loose horizontal rows of circular contributor or partner avatars connected by fine dotted lines, creating a lightweight community network graphic.
5. **Community model statement:** Center a large two-line heading with a short explanatory paragraph and paired primary/secondary buttons. Follow it with a broad, partially clipped grid of model cards in multiple columns and rows.
6. **How it works explainer:** Introduce a large white technical panel inside a pink-orange gradient surround. Give it a thin warm border and stack three vertically separated modules: running models, fine-tuning with custom data, and deploying custom models. Each module uses explanatory text and an outlined CTA on the left, with code blocks, model-result cards, and configuration snippets on the right.
7. **Enterprise scale section:** Continue into a dark charcoal panel with a centered heading, supporting copy, CTA, and a row of customer names or wordmarks. Below, use a two-column grid of feature cards with orange-red line charts, pricing tables, diagrams, and short descriptions covering automatic scaling, usage-based billing, infrastructure abstraction, and monitoring.
8. **Editorial build collage:** Return to white space and create an oversized typographic composition using a phrase broken across rows. Mix huge black words with small rectangular video/demo thumbnails embedded between the words, then add a short paragraph and CTA beneath the collage.
9. **Gradient divider:** Add several thin horizontal rules using the hero’s pink, purple, orange, and yellow gradient treatment.
10. **Footer:** Finish with a spacious white footer: brand mark at left, three compact link columns for product, community, and company, then a thin bottom utility bar with theme/accessibility controls.

## Design language
- Build hierarchy through very large black or white sans-serif headlines, compact body copy, and strong left alignment in functional sections; reserve centered alignment for community and enterprise statements.
- Let the rhythm change deliberately: an energetic, image-led hero; airy white model discovery space; a dense, instructional code panel; a dark data-heavy enterprise block; then a playful editorial collage and quiet footer.
- Use intense gradient colour as an environmental field rather than as small UI decoration. Approximate the main gradient with hot pink `#ec18c8`, violet `#9b35d8`, orange-red `#f0442d`, and electric yellow `#f3ed00`; keep the content surfaces white and the dark section near `#1f1f1f`.
- Pair a neutral geometric sans-serif for all interface text with monospaced typography for code, metrics, and technical labels. Scale display headings aggressively, while metadata and utility links remain small and tightly spaced.
- Keep most controls rectangular with little or no radius; use rounded pills only for category filters and circular crops for avatars. Prefer 1px charcoal or warm-red borders and almost no shadows.
- Make technical examples feel tangible: use bordered code panes, syntax colour accents, tabs, model preview cards, small labels, and charts rather than decorative illustrations.
- Use clipping and overflow intentionally for horizontally scrolling model cards and cropped editorial media. Maintain generous white margins around major sections, but make the technical and metrics sections denser through nested grids and separators.
- Motion, where appropriate, should be restrained: allow carousels and model rows to scroll horizontally, use subtle hover colour changes on cards and buttons, and animate gradient or chart elements only gently. Keep interactions functional and fast rather than ornamental.

## Never
- Do not copy the reference product’s logos, wordmarks, product names, slogans, exact copy, illustrations, photography, avatar set, customer names, code examples, chart data, or icon set.
- Do not present the result as the reference product or imply an affiliation with it. Replace every example with the user’s own product, audience, brand assets, content, and domain-specific imagery.