tryobra.com
Design analysis
A centered framed demo preview creates a clear pause in the dark narrative and gives the visitor a concrete, low-commitment way to understand the product.
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-1789152085-4.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-card ## Before you start Ask what the user's product demo should show, how long it takes to understand, and what low-friction action should launch it. Build a centered demo card on a near-black page. Use a short centered heading and supporting sentence above a wide bordered preview frame. Inside the frame, combine a simple product title treatment, a prominent orange play button, and a couple of small utility controls or metadata labels. Use a 1px warm-white border, subtle dark-on-dark layering, square corners, and 32–48px internal padding. Make the play control keyboard accessible and provide hover/focus feedback without relying on imagery. Never: copy logos, product names, copy, illustrations, or imagery from the reference.
kage