## 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/clerk-com/b0a171ff-4b4c-415f-ac9b-4885f02b49d0-1789060731-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/clerk-com/b0a171ff-4b4c-415f-ac9b-4885f02b49d0-1789060086880.webp
- Design on Kage: https://kage.design/designs/clerk-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including product name, logo, colours, typography, and any existing UI or illustration assets. Wait for their answers before designing. Apply the following structure and design language to their product, not to the reference.

## Page structure
1. **Announcement bar and navigation:** Add a thin black announcement strip at the top, followed by a white, lightly bordered navigation bar with a compact brand mark on the left, grouped dropdown links in the centre, and sign-in/sign-up actions on the right.
2. **Hero:** Use a tall, very light hero with a centred two-line oversized headline, a short muted explanatory paragraph, and a small developer-oriented command or prompt card beneath it. Keep the background nearly white with faint technical UI traces or grid-like artefacts rather than a large illustration.
3. **Customer logo strip:** Follow the hero with a bordered horizontal band. Put a short trust statement in the first cell and several monochrome customer marks in evenly sized cells to the right.
4. **Components showcase:** Create a generous white section with a two-column layout: left-aligned eyebrow, headline, supporting copy and link, followed by an accordion-style component list; on the right, show a large floating authentication/sign-up UI mockup with blurred or faded related screens behind it.
5. **Authentication feature section:** Transition into a deep charcoal section using clipped/angled white-to-dark edges. Centre a small coloured eyebrow, large white heading, concise copy, and link, then place a dense multi-column bento grid of dark cards. Each card should pair a feature title and short description with a subdued product-security visual, including authentication methods, sessions, one-time codes, fraud detection, social sign-on, security, bot detection, passwords, API keys, and CLI tooling.
6. **Multi-tenancy section:** Return to a spacious white section with a purple eyebrow, large headline, copy and link at the top. Below, arrange three large pale cards showing roles and permissions, auto-join/invitations, and organization UI components through lightweight admin/product mockups.
7. **Billing section:** Continue the white canvas with a split layout: left-aligned billing eyebrow, headline, explanatory copy, checklist and link; right-aligned pricing/subscription dashboard mockup inside a soft-shadowed browser frame.
8. **Frameworks and integrations section:** Use another charcoal band with two equal columns. Give each column a coloured eyebrow, centred white heading, brief description, link, and a bordered 2-by-3 technology grid beneath it. Keep the logos or marks generic and supplied by the user rather than copied from the reference.
9. **Testimonials section:** Switch back to white with a left intro column and a staggered masonry-like grid of pale testimonial cards on the right. Use small avatars, muted borders and varied card heights so the social proof feels collected rather than rigid.
10. **Footer:** Finish with a spacious white footer containing the brand mark at left and several narrow link columns for product, SDKs, resources, company and legal. Add a thin divider, copyright text, and small social/action icons along the bottom edge.

## Design language
- Build hierarchy with very large, tightly set sans-serif headlines, compact body copy, small uppercase or sentence-case eyebrow labels, and restrained link CTAs. Use a display scale around 48–68px for desktop hero headings, 30–42px for section headings, and 13–16px for body text.
- Change rhythm deliberately down the page: sparse and centred in the hero, horizontally segmented in the logo band, spacious and demonstrative in product showcases, dense and modular in the dark feature grid, then lighter and more editorial in testimonials and the footer.
- Use a mostly neutral palette: near-white `#fafafa` / `#ffffff`, near-black `#151517` / `#1d1d20`, soft gray `#6f7075`, and very light borders around `#e8e8eb`. Reserve a small purple accent around `#6d5ce7` for labels and links, with occasional cyan/teal accents for framework or integration categories.
- Treat contrast as a structural device. Alternate white and charcoal sections, and use angled clipped corners or notched transitions at section boundaries to make the long page read as distinct product chapters.
- Keep cards rectangular with modest rounding, approximately 8–14px, thin borders and very soft shadows on white surfaces. Dark bento cards should use subtle tonal differences rather than bright outlines; avoid glossy glass effects.
- Use product UI mockups as the main visual language: sign-up panels, dashboards, pricing cards, admin controls and small security diagrams. Blur, fade, crop or layer secondary mockups behind primary ones to create depth without relying on decorative illustration.
- Keep navigation and supporting text compact, with generous horizontal gutters and a strong desktop grid. Use clear two-column splits for narrative-plus-demo sections and 3-column or 4-column grids for feature content.
- Make interaction feel quiet and functional: dropdown navigation, accordion rows, links with small arrow indicators, copyable command cards, and subtle hover elevation or border changes. Avoid large animated spectacle; if motion is added, use short fades and gentle card translation.

## Never
- Do not copy the reference's logos, wordmarks, product name, exact copy, customer names, testimonial text, interface labels, illustrations, photography, or icon sets.
- Do not present the result as Clerk or imply affiliation with it.
- Do not reproduce the exact authentication mockups or branded framework/integration marks; create new UI examples appropriate to the user's product and use only assets supplied or approved by the user.