tryobra.com
Design analysis
The light ledger section turns the product promise into a concrete record view with filters, aligned columns, colored amounts, and a visible total.
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-5.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-table ## Before you start Ask what records the user's product manages, which filters matter, and which values need visual emphasis. Use realistic but original domain data. Create a light ledger section using a warm ivory background (#f2f1e8) and dark ink text (#101211). Start with a chapter eyebrow, oversized heading with one outlined word treatment, and concise supporting copy. Add a compact row of bordered filter tabs above a full-width table. Use thin gray rules, small uppercase column headers, generous row height, monospace or tabular numerals, and right-aligned amounts. Differentiate positive and negative values with muted green and orange/red accents, and end with a bold total row. Keep the table horizontally scrollable on mobile while preserving the header hierarchy. Never: copy logos, product names, copy, illustrations, or imagery from the reference.
kage