hanomi.ai
Design analysis
A process section explains the workflow through three numbered stages arranged along a thin vertical guide, alternating text and visual emphasis to create movement down the page.
Prompt preview
## Reference images Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language. - Component: https://kage-design-assets.t3.tigrisfiles.io/components/hanomi-ai/e6570335-e597-4dea-b51d-b53895fecbf1-1790500615-6.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hanomi-ai/e6570335-e597-4dea-b51d-b53895fecbf1-1790500563313-full.webp - Component on Kage: https://kage.design/component/hanomi-feature-grid-4 ## Before you start Ask what the user's product is, who it serves, and what its brand personality and visual identity are. Apply the following principles to that product rather than reproducing this reference. Build a three-step process section on a light background. Start with a section heading and a short introductory sentence, then place three numbered stages along a thin vertical timeline. Use large accent-colored numerals, concise stage headings, and one or two lines of explanation per stage. Alternate the placement of text and supporting visual so the timeline feels dynamic while remaining easy to scan. Use 80–140px vertical spacing between stages, a 1px light-gray guide line, black typography, and warm orange numerals. Add small technical product visuals only where they clarify the step. On mobile, keep the guide on the left and align all content to its right. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage