## 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/voiskey/2d879cee-55b8-45bf-98ab-83ef4a908ee2-1789538440704-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/voiskey/2d879cee-55b8-45bf-98ab-83ef4a908ee2-1789538433389.webp
- Design on Kage: https://kage.design/designs/voiskey-landing-page

## Before you start
Ask the user what they are building, who it is for, and which brand assets they already have (name, colours, type choices, logo, imagery, and product screenshots). Wait for their answers before designing. Apply the system below to that product rather than copying the reference product.

## Page structure
1. **Top navigation and hero** — Use a slim header over a near-black full-width hero, with a small brand mark at left, a few text links, and a prominent light download/action pill at right. Center a large headline, supporting paragraph, primary CTA, and a small row of platform or compatibility links; place a subtle technical/dotted texture and green atmospheric glow behind the content.
2. **Large white breathing-space transition** — After the hero, allow an unusually tall white gap before the next message so the dark opening resolves into a calm product-story section.
3. **Intro statement** — Center a concise heading on white, pairing a dark phrase with a small product mark or glyph and a second phrase to establish the product’s core distinction.
4. **Five-feature narrative sequence** — Build five generous two-column rows in order, alternating text and visual placement. Each row has a tiny number label, a bold two-line heading, a short explanatory paragraph, and a large rounded product demonstration card with soft gray-to-pale-green backgrounds. Cover the product’s key behaviours in the user’s own terms: handling natural speech, adapting formatting and tone, learning vocabulary, supporting many languages, and turning spoken instructions into structured work.
5. **Anywhere/language section** — Separate the feature sequence with a thin horizontal rule and small central ornament, then use a large mixed-weight heading such as “Works anywhere. Any language.” Below it, show a wide rounded compatibility strip containing app-like tiles and language chips, followed by a short explanatory line and a secondary dark download pill aligned toward the right.
6. **Audience/use-case section** — Introduce a heading and short subheading, then create a two-column area with audience-specific copy and a large rounded image or product-context panel. Add pill tabs for several audiences, with one selected in black. Under the panel, include a horizontal row of three compact use-case cards with pale icon containers, titles, descriptions, and small learn-more links.
7. **Speed comparison section** — Switch to a deep black/green gradient band. Center a headline with one muted word and a supporting line, then present a clean two-column comparison between the old workflow and the product workflow, including large numeric performance figures, thin divider rules, small labels, and restrained illustrative controls.
8. **Final CTA card** — Overlap a large white or very pale green gradient rounded rectangle across the lower edge of the dark section and the following white area. Center a small brand/product slot, a concise headline, a dark CTA pill, and a row of device/platform links. Keep the card elevated with a soft shadow or diffuse glow.
9. **Footer** — End with a very quiet white footer: thin top rule, small copyright text on the left, and compact support/legal/privacy links on the right.

## Design language
- Build hierarchy with very large geometric sans-serif headlines, short line lengths, and bold two-line statements; use a smaller gray body scale with generous line-height and modest tracking.
- Let rhythm change deliberately: a dramatic dark hero, an oversized white pause, spacious feature rows, denser compatibility and audience modules, then a high-contrast comparison band and a calm footer.
- Use near-black backgrounds around `#020605` to `#07130f`, white and off-white surfaces around `#ffffff` and `#f5f7f5`, and a restrained brand green around `#0b8064`, `#18b87b`, or bright accent `#6dff9b`. Use green as a highlight, glow, selected state, or product cue rather than colouring every element.
- Pair black or near-black headline text with muted gray supporting text around `#6f7472`; occasionally colour one word in the headline gray or green to create a controlled emphasis.
- Use soft gradients in visual demo cards, generally blending cool gray with pale mint/lime (`#eef3f0`, `#dff7c9`, `#b9efb0`), while keeping the actual UI mockups crisp and legible.
- Treat controls and CTAs as compact pills with high contrast, generous horizontal padding, and fully rounded corners. Use large rounded rectangles for demos and imagery, usually around 18–28px radius; keep shadows diffuse and light, never heavy.
- Keep layout wide and editorial: a centered max-width container, generous horizontal margins, strong two-column alignment, and alternating media/text order to create a zig-zag scan path.
- Use thin rules, tiny numbering, subtle separators, and small metadata labels to add structure without making the page dense. Let the feature copy remain compact beside larger visual cards.
- Make interaction states quiet and obvious: selected audience tabs become black with white text, download buttons invert against their background, and links can use small arrows or underlines. Use only restrained fades, gradient movement, and gentle card elevation; avoid bouncy or excessive animation.
- Ensure the final result is responsive: stack feature rows on narrow screens, preserve the CTA prominence, turn horizontal chip/card groups into scrollable or wrapped rows, and retain generous vertical spacing without leaving unusable empty gaps.

## Never
- Do not use the reference company’s logo, wordmark, product name, tagline, copy, screenshots, illustrations, photography, icon set, or exact branded UI.
- Do not present the result as Voiskey or imply affiliation with it.
- Replace all reference-specific assets and language with the user’s own product content, brand system, and original demonstrations.