## 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/patreon-com/f09b5697-c1c9-4600-81d4-e7bb56a9df3f-1789146360542-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/patreon-com/f09b5697-c1c9-4600-81d4-e7bb56a9df3f-1789146357589.webp
- Design on Kage: https://kage.design/designs/patreon-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, logo, photography, and product screenshots). Wait for their answers before designing. Apply the following structure and principles to their product, not to the reference, and use original content and assets.

## Page structure
1. **Transparent hero navigation:** Place a compact navigation bar over a full-bleed visual. Keep primary links on the left, a centered text brand mark, and search/account/primary action controls on the right; use light text and outlined or filled pill controls according to contrast.
2. **Cinematic hero carousel:** Use a tall, edge-to-edge photograph or video with a darkening overlay, oversized two-line headline anchored low in the frame, a small contextual profile/caption detail, left/right arrows, and a downward cue. Let the media carry the emotional introduction.
3. **Creative ecosystem collage:** Transition to a pale blue background. Arrange an oversized editorial headline around several offset creator/content cards, mixing portrait crops and small labels rather than using a rigid card grid. Add a short explanatory paragraph low on the section.
4. **Full-bleed testimonial:** Follow with a large photographic quote section. Overlay a concise quote near the bottom-left and the speaker name near the bottom-right, keeping the image dominant and typography restrained.
5. **Creative control/product section:** Return to a light blue field and center a very large stacked headline. Surround it with floating content-preview cards at different scales and positions, then place a short product explanation and black pill CTA below/left of center.
6. **Community section:** Use a stronger blue background and a large left-aligned headline broken across several lines. Add supporting copy and a CTA beneath it, with a tall rounded mobile community-interface mockup positioned on the right.
7. **Business/monetization section:** Continue the blue visual system with a large centered headline about turning a passion into a business. Place a dark analytics/earnings phone mockup to the left and two compact explanatory columns with a CTA to its right.
8. **Final conversion image:** Use another full-width lifestyle photograph as a closing emotional panel. Center a white rounded signup card over the image with a small product-neutral mark, short heading, primary CTA, login link, and app-store badges.
9. **Footer navigation:** End with a dense black footer. Organize multiple link columns by audience and company topic, then add app badges, language/currency controls, social icons, and compact business/contact information along the bottom.

## Design language
- Build hierarchy through extreme scale contrast: use a very large, thin, contemporary sans-serif headline for section statements, small compact sans-serif body copy, and short labels; allow headlines to occupy several lines and unusual positions.
- Change rhythm deliberately down the page: begin with immersive, low-density photography; move into airy collage layouts; then introduce practical copy and interface mockups; finish with a high-density utility footer.
- Use a restrained palette of pale sky blue around `#B6D2F2`, stronger periwinkle blue around `#76A4F5`, black around `#000000`, white around `#FFFFFF`, and occasional warm photographic colours. Keep text black on blue and white on dark imagery.
- Pair a thin geometric sans-serif display face with a neutral sans-serif for body text, labels, navigation, and interface content. Use generous tracking and line-height in navigation, but tight leading in oversized headlines.
- Treat photography as full-bleed editorial content, not as decorative thumbnails. Use varied crops, overlapping offsets, and a mix of portrait, landscape, and small content-preview proportions to make the collage feel authored.
- Keep controls simple: black or white pill buttons, thin white outlines over imagery, subtle rounded corners on mockups and cards, and almost no visible shadows except where needed to separate a floating card.
- Use rounded product mockups with restrained interface detail, dark analytics screens, pale community screens, and believable content density so the feature sections feel tangible.
- Keep transitions mostly static and editorial; where motion is added, use slow image/video movement, gentle carousel changes, and small hover or press feedback rather than busy animation. Preserve clear arrows and scroll cues for media-led sections.
- Maintain generous vertical spacing and let each section have its own colour field, while repeating the same type scale, pill CTA treatment, and left/right alignment logic to make the long page cohesive.

## Never
- Do not copy any logos, wordmarks, product names, slogans, interface labels, copy, photography, illustrations, or icon sets from the reference.
- Do not reproduce the reference brand or present the result as Patreon.
- Do not use the same creator identities, screenshots, people, or exact content arrangements; substitute original assets and product-specific language supplied by the user.