## 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/uini-io/ef5b466a-1fe9-4cb6-9300-79049ee31244-1789059824-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/uini-io/ef5b466a-1fe9-4cb6-9300-79049ee31244-1789059808490.webp
- Design on Kage: https://kage.design/designs/uini-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). Wait for their answers before designing. Apply the system below to their product, not to the reference product, and use their own content and assets.

## Page structure
1. **Top navigation:** Build a slim white header with the product mark at left, a small horizontal set of links in the middle/right, and a compact orange primary CTA at the far right.
2. **Hero:** Center a two-line oversized headline with the first line in near-black and the second in warm orange. Add a short centered paragraph, a smaller supporting line, a prominent orange CTA, and a quiet reassurance line beneath it.
3. **Hero product demonstration:** Place a large browser/app mockup below the hero, nearly full content width, showing a realistic product workspace with layered cards and a floating support/interview widget. Add tiny pixel-art accents around the mockup.
4. **Three-part value proposition:** Introduce the product with a left-aligned headline and a short explanatory paragraph, followed by three evenly spaced numbered columns. Each column has a small orange numeral, a concise heading, body copy, and a text link with an arrow.
5. **Feature section — targeted interviews:** Use a generous two-column row: explanatory copy on the left with a small pixel-art icon, and a pale, softly shadowed product configuration mockup on the right.
6. **Feature section — embedded knowledge centre:** Reverse the emphasis with text on the left and a tall help-widget/article-answer mockup on the right. Include visible answer content, source chips, and a compact action area inside the demo.
7. **Feature section — proactive help:** Put an app/export mockup on the left and explanatory copy on the right. Show an error or failed action leading to a contextual nudge card.
8. **Feature section — article drafting:** Reverse again, with explanatory copy and a small decorative icon on the left and stacked search-results/draft-review cards on the right.
9. **Implementation steps:** Create a compact two-column section. The left side has a heading, short description, and link; the right side has three horizontally separated rows: install the widget, add questions and docs, and learn and improve.
10. **Testimonials:** Center a section heading, then show six testimonials in a three-column by two-row card grid. Keep cards light with thin borders, compact quotes, coloured circular initials, and names/roles below.
11. **Pricing introduction:** Use a two-column heading area with a large title on the left and plan explanation on the right. Add a monthly/annual segmented toggle below the title.
12. **Pricing table:** Present three equal-height plan columns in one bordered panel. Show plan name, price, billing unit, feature bullets, and full-width CTA buttons; visually emphasize the free plan with orange treatment and use small annual-savings badges where relevant. Add a collapsed “compare every feature” row underneath.
13. **FAQ:** Use a two-column layout with a heading, short prompt, and pixel-art accent on the left; place a vertical accordion list of questions with fine divider lines and chevrons on the right.
14. **Final CTA:** Transition into a full-width orange block with a pixelated/dotted fade along its top edge. Center a dark headline line followed by a white headline line, supporting copy, and a dark CTA; add small pixel-art scenery at the edges.
15. **Footer:** Finish with a near-black footer. Put the product mark and short description in the first column, then three link columns for exploration, comparisons, and legal/contact items. Add a large abstract pixel-art wordmark/graphic near the bottom and a thin legal/status bar.

## Design language
- Build hierarchy through scale and spacing rather than heavy decoration: use very large, tightly tracked sans-serif display headings, medium section headings, and small gray body text.
- Keep the main canvas warm white, approximately `#fdfdfb` or `#ffffff`; use near-black `#171716` for primary type and controls, and muted gray `#666762` for supporting copy.
- Reserve a saturated terracotta-orange, approximately `#ed7048` or `#ef734c`, for primary buttons, selected pricing states, accent headlines, separators, and the final CTA. Use it sparingly so actions remain obvious.
- Pair a clean modern sans-serif for all interface and marketing text. Use a large hero around 56–72px desktop, section headings around 36–48px, card headings around 16–20px, and body copy around 14–16px with generous line-height.
- Let the page breathe: use very large vertical section gaps, broad margins, and alternating left/right compositions. Start with centered, high-impact content, move through spacious feature rows, then become denser for testimonials, pricing, and FAQ.
- Treat product demos as polished interface specimens: pale gray surfaces, white cards, thin `#e8e8e3` borders, modest 12–18px radii, and soft diffuse shadows. Keep UI copy small but legible and use layered cards to imply depth.
- Use mostly thin borders and minimal shadows; avoid gradients and glossy effects. Buttons may be rectangular with a modest radius, clear padding, and a small arrow or external-link cue.
- Introduce a recurring pixel-art language through small geometric decorative motifs, dotted/pixel fades, and tiny low-resolution object illustrations. Create original motifs appropriate to the user’s product; do not copy the reference artwork.
- Give sections subtle rhythm changes: airy white feature areas, a structured bordered pricing block, compact accordion rows, then a strong orange full-bleed ending and dark footer.
- Make interactions quiet and functional: links and buttons should have restrained colour/darkness transitions, mockup cards can lift slightly on hover, pricing toggle should visibly switch states, and FAQ rows should expand with a short height/opacity transition.
- Ensure responsive behavior: collapse navigation, stack feature rows and pricing cards, keep the hero readable, and preserve the orange/black contrast on small screens.

## Never
- Do not use the reference product’s logo, wordmark, product name, copy, illustrations, photography, pixel-art objects, or icon set.
- Do not reproduce the exact screenshots or invent a claim that the result is the reference product.
- Use the user’s own brand assets, product terminology, content, and original interface examples instead.