tryobra.com
Design analysis
A compact interactive calculator turns the product promise into an immediate hands-on result using two inputs, a live output panel, and a strong follow-up action.
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/tryobra-com/5ed8a808-d125-4341-bc8a-0a69442cb995-1789152086-9.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tryobra-com/5ed8a808-d125-4341-bc8a-0a69442cb995-1789152039794-full.webp - Component on Kage: https://kage.design/component/tryobra-form ## Before you start Ask what inputs the user's product needs, what useful result can be calculated instantly, and what conversion should follow the result. Build a dark bordered calculator section with a chapter eyebrow, large heading, and a two-column interactive form. Put labeled inputs on the left and a live result/visual indicator on the right. Use accessible labels, visible focus states, tabular numerals, and an orange primary button. Add a full-width explanatory row beneath the inputs and a smaller secondary prompt below that. Use 1px warm-white borders, #0b0d0d background, #f4f3ec text, muted gray helper copy, orange #ff5425 for actions, and 32–48px internal padding. Validate inputs inline and make the layout stack cleanly on mobile. Never: copy logos, product names, copy, illustrations, or imagery from the reference.
kage