Kage Design logo kage
tryobra.com
tryobra.com card component

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.

More components