## 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/tally-so/8873d519-e012-4a77-bd60-f7e8803b75a7-1789060926-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tally-so/8873d519-e012-4a77-bd60-f7e8803b75a7-1789060790017.webp
- Design on Kage: https://kage.design/designs/tally-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including a product name, colours, typefaces, logo, and any existing screenshots or illustrations. Wait for their answers before designing. Apply the system below to their product, not to the reference product.

## Page structure
1. **Top navigation** — Use a compact white header with a small text logo at left and understated links for pricing, login, signup, plus one bright primary CTA at right.
2. **Hero** — Center a large, direct headline above a short explanatory paragraph, blue CTA, and tiny reassurance line. Surround the content with sparse hand-drawn doodles and place a large, lightly framed product preview beneath it.
3. **Trust strip** — Add a small “used by” statement, a horizontal row of customer marks, and a compact award badge below the hero preview.
4. **Intro feature section** — Begin with a left-aligned heading and short paragraph, followed by one wide magenta-accented feature card and two smaller bordered cards below it.
5. **First testimonial** — Place a centered quote with a small avatar/name attribution and generous whitespace.
6. **Advanced features section** — Introduce the section with a heading, paragraph, and decorative sketch; follow with a large bordered screenshot card showing the core workflow and a six-item feature grid beneath it.
7. **Intelligent forms section** — Use the same heading-plus-sketch pattern, then a large conditional-logic screenshot card, two smaller supporting cards, and a six-item feature grid.
8. **Second testimonial** — Add another centered quote between feature groups to create a visual pause.
9. **Customization section** — Show a heading about making the product feel personal, pair it with a character sketch, then use one large bordered customization preview and a six-item capability grid.
10. **Sharing section** — Present a heading and sketch above a two-column composition: one large embed card on the left and stacked popup, link, and custom-domain cards on the right.
11. **Integrations section** — Use a heading with decorative illustration, then show a spacious multi-column list of integrations with small product marks and one-line descriptions.
12. **Third testimonial** — Insert a short centered quote and attribution after the integrations list.
13. **Templates/use-cases section** — Introduce audience categories with a heading, description, and sketch, then use one large bordered card containing a six-column-or-grid set of use cases and a dark secondary button.
14. **Fourth testimonial** — Add a centered quote with attribution before the final conversion area.
15. **Final CTA** — Create a large airy closing panel with a hand-drawn figure illustration, bold headline, short paragraph, and blue CTA.
16. **Long testimonial** — Add a prominent centered multi-line customer quote with a small avatar and attribution.
17. **FAQ** — Use a simple left-aligned heading and a vertical accordion/list of four questions separated by thin horizontal rules and right-facing chevrons.
18. **Footer** — Finish with a thin divider and a multi-column footer: product/about block with social icons, product links, help links, resources, company links, and comparison links.

## Design language
- Build hierarchy with very large, heavy black sans-serif headings, compact regular-weight body copy, and short labels; use strong size contrast rather than many colours.
- Keep the page predominantly white and airy. Let the rhythm alternate between generous whitespace and dense bordered product demonstrations so the very long page never becomes a uniform wall of content.
- Use bright magenta/pink as a small expressive accent, approximately `#d946d8` or `#e43fd0`, for underlines, sketched marks, feature icons, and occasional borders—not as a full background.
- Use blue, approximately `#087dcc` or `#0b84d8`, only for primary actions and interactive examples. Keep supporting UI black, gray, and white.
- Pair a bold geometric or neo-grotesk sans-serif for headings with a clean neutral sans-serif for body text. Scale section headings around 32–44px, hero heading around 56–72px, body copy around 14–18px, and metadata around 11–13px; adjust responsively.
- Treat screenshots and feature cards as product-like surfaces: 1px light-gray borders, subtle gray shadow, white backgrounds, and small 4–8px radii. Avoid glossy gradients, deep shadows, and excessive rounded pills.
- Make illustrations feel hand-drawn: thin black linework, loose imperfect contours, occasional pink strokes, arrows, circles, and margin doodles. Use them as section companions and page-edge accents, not as dense decorative wallpaper.
- Repeat a reliable section layout: heading and paragraph on the left, a loose sketch toward the right, then one large preview card followed by smaller cards or a compact feature grid. Vary the card arrangement to create changing rhythm down the page.
- Use testimonials as centered pauses with oversized gray/black quotation text, tiny avatar or portrait, and restrained attribution rather than boxed testimonials.
- Keep copy blocks short and scannable. Use small magenta line icons above feature titles and organize capabilities into two- or three-column grids with generous row spacing.
- Make interactions quiet and functional: blue CTAs should have clear hover darkening, cards may lift slightly on hover, FAQ rows should expand with a simple chevron transition, and doodle elements should remain mostly static or use very subtle motion.
- Ensure the long page remains responsive: collapse grids to one column on small screens, keep screenshots inside horizontal-safe containers, and preserve the white space and section pauses rather than compressing everything into dense mobile blocks.

## Never
- Do not copy the reference product’s logos, wordmarks, product name, copy, illustrations, screenshots, icon set, customer marks, testimonials, or exact UI examples.
- Do not present the result as Tally or imply affiliation with it.
- Create original brand assets and product-specific examples for the user’s product while retaining only the reusable layout, pacing, contrast, card treatment, and hand-drawn visual language.