## 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/loom-com/c384a931-6938-4c5e-b36b-e07415522afb-1789060413-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/loom-com/c384a931-6938-4c5e-b36b-e07415522afb-1789060013127.webp
- Design on Kage: https://kage.design/designs/loom-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, imagery, and illustration assets). Wait for their answers before designing. Apply the system below to their product, not to the reference product.

## Page structure
1. **Top navigation:** Build a slim white header with a left-aligned brand mark, small right-side sign-in text, a primary blue pill CTA, a secondary light CTA, and a compact circular menu button.
2. **Hero introduction:** Center a large, bold black headline above two lines of supporting copy and two pill CTAs. Keep generous white space around the text.
3. **Hero video:** Place a wide, nearly full-content-width video frame immediately below the hero actions. Use a large rounded rectangle, a still image or product demonstration, a centered blue play button, and small playback metadata overlays.
4. **Trust statement and customer logos:** Add a centered claim with a blue CTA, followed by several rows of monochrome customer logos distributed on a loose grid with generous vertical spacing.
5. **AI feature callout:** Introduce a large rounded blue panel with a product illustration on the left and a short “new” label, bold heading, explanatory copy, and dark button on the right.
6. **Screen recorder section heading:** Add a centered heading and one-line subtitle on white, then create an alternating feature row for fast recording, with text and CTA on one side and a soft yellow product illustration on the other.
7. **Extended feature rows:** Under a centered section heading, alternate three rows of product capabilities: editing with an illustration on the right, sharing/embedding with the illustration on the left, and team engagement with the illustration on the right. Each row has a compact heading, short paragraph, and understated blue text link.
8. **Security banner:** Use a wide dark, rounded panel with centered white heading, supporting paragraph, and blue CTA to create a strong tonal break for privacy and enterprise security.
9. **Use-case cards:** Add a centered heading and a row of four narrow pastel cards for distinct audiences. Each card contains a small product image, bold category title, and concise description, followed by a centered light CTA.
10. **Feature checklist:** Present a large heading followed by two columns of short feature rows, each prefixed with a small pale-blue circular check, and finish with a simple underlined link.
11. **Blog/editorial panel:** Add a large rounded blue panel with a centered eyebrow and headline, two darker blue article cards side by side, and a dark rounded button for exploring more content.
12. **Enterprise showcase:** Create a large rounded near-black panel with centered enterprise heading, short copy, blue learn-more CTA, and a large colorful product composition or interface image anchored in the lower half.
13. **Testimonial carousel:** Place a pale-blue rounded testimonial card with left/right circular arrow controls, a centered quote, customer avatar, and attribution. Let neighboring cards partially peek in at the sides if a carousel is used.
14. **Final conversion strip:** Add a white rounded floating card with a bold campaign-oriented statement on the left and a blue CTA on the right, plus a small platform-availability note.
15. **Footer navigation:** Use a pale-blue footer background with multiple columns of small uppercase section labels and compact text links for app, solutions, business, downloads, resources, and company information.
16. **Footer utility row:** Finish with a white lower strip containing social controls, legal links, and a right-aligned parent-company or ownership note.

## Design language
- Build hierarchy through very large, heavy sans-serif headings, short readable paragraphs, and generous whitespace; use compact eyebrow labels only where they clarify a panel’s context.
- Keep the first half airy and editorial: isolated centered statements, full-width media, and alternating rows. Increase information density in the lower half with cards, checklists, article links, testimonials, and footer navigation.
- Use a mostly white canvas with near-black text (`#101114`), vivid electric blue for primary actions and feature panels (`#1769E0` to `#246BDF`), deep blue for nested cards (`#1457B8`), near-black security backgrounds (`#111214`), and pale blue footer/testimonial surfaces (`#E8F3FF` or `#E5F1FF`).
- Introduce restrained pastel surfaces for product illustrations and use-case cards: pale yellow (`#FFF2C7`), lavender (`#F0E5FF`), mint (`#EAF9D8`), and soft sky blue (`#E4F1FF`). Keep illustration colours subordinate to the blue brand accent.
- Pair a friendly geometric or humanist sans-serif with bold weights for headings and regular weights for body text. Scale hero headings roughly 48–64px desktop, section headings 32–44px, card headings 16–22px, and body copy 14–17px with comfortable line height.
- Use large rounded corners throughout: approximately 24–32px on major panels, 14–20px on cards, and full pill radii on buttons. Prefer flat colour blocks and very soft shadows over gradients or heavy borders; use borders only when needed to separate controls.
- Keep CTAs short and pill-shaped. Make primary actions blue with white text, secondary actions pale blue or white with dark text, and occasional dark buttons inside blue or light panels for contrast.
- Use product screenshots, interface mockups, circular webcam portraits, and simple playful annotations as the visual language. Alternate media alignment to create rhythm rather than repeating identical card grids.
- Maintain a centered max-width layout with broad gutters. Let major blue, black, and enterprise panels span nearly the full content width while text rows and logo grids remain narrower.
- Use subtle interactions: buttons should lift or darken slightly on hover, cards can raise by a few pixels, video controls should appear interactive, and carousels should use obvious circular arrows. Avoid noisy animation; reserve motion for media playback, gentle reveals, and image transitions.

## Never
- Do not copy any reference logos, wordmarks, product names, slogans, customer names, copy, screenshots, illustrations, photography, avatars, or icon sets.
- Do not reproduce the reference brand identity or present the result as the reference product.
- Replace all content with the user’s own product, audience, terminology, brand assets, and original media while retaining only the reusable layout principles and interaction patterns.