tryobra.com
Design analysis
A simple two-column comparison makes the free and paid choices immediately legible, with the paid plan using a full orange panel to attract attention.
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-1789152087-10.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-pricing-table ## Before you start Ask what pricing model, billing cadence, entitlements, and primary conversion action fit the user's product. Do not assume the reference's plan names or prices. Create a dark pricing section with a chapter label, large heading, and a monthly/annual toggle above a two-column plan comparison. Give the free plan a dark surface with a light border and the recommended or paid plan a vivid orange surface (#ff5425). Each plan needs a small label, large price, billing qualifier, concise feature checklist, and full-width CTA. Use strong contrast, 1px borders, square or 2px radii, 32px padding, and an accessible selected state for the billing toggle. On mobile, stack the plans while preserving comparison clarity. Never: copy logos, product names, copy, illustrations, or imagery from the reference.
kage