## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tryobra-com/5ed8a808-d125-4341-bc8a-0a69442cb995-1789152039794-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tryobra-com/5ed8a808-d125-4341-bc8a-0a69442cb995-1789152035672.webp
- Design on Kage: https://kage.design/designs/tryobra-landing-page

## Before you start
Ask the user what they are building, who it is for, and what brand assets they already have, including the product name, colours, typefaces, logo, imagery, and any existing UI patterns. Wait for their answers before continuing. Apply the reference's design principles to that product rather than copying the reference.

## Page structure
1. **Utility navigation:** Build a slim, fixed-height black header with a small mark area, tightly spaced uppercase navigation links, language/login controls, and a high-visibility orange start button.
2. **Hero:** Use a black, wide editorial hero with an oversized multi-line headline. Mix heavy cream words, thin outlined words, and orange emphasis; place a short explanatory paragraph and paired CTAs below or beside it, with small assistant/channel labels as supporting metadata.
3. **Scrolling cost ticker:** Add a narrow orange strip under the hero with compact monospace transaction snippets separated by vertical rules, creating motion and a construction-site data feel.
4. **Proof statistic:** On black, center a very large orange currency figure with a small eyebrow above, a bold cream explanatory line below, and restrained ruled annotations beneath.
5. **Receipt capture section:** Introduce the first numbered feature section with a left-aligned eyebrow, oversized mixed solid/outline heading, and short paragraph. Below, arrange an annotated receipt visual on the left and a five-row bordered workflow list on the right, each row numbered and titled.
6. **Demo panel:** Center a bordered video/demo card with a poster-like internal layout, orange play button, supporting text, and a subtle dark graphic shape; keep it narrower than the main content column.
7. **Ledger section:** Switch to a warm cream background. Use a dark oversized heading with one outlined word, a short description, filter tabs, and a full-width ledger table with compact rows, column dividers, and orange/green amount treatments.
8. **Instruments/dashboard section:** Return to black with a large mixed-style heading and description. Add a four-column KPI strip, date-range controls, then a large cream analytics chart card beside a smaller line-chart card, followed by three compact cream summary cards with bars and labels.
9. **Specification grid:** On black, show a numbered eyebrow and a large headline, then a three-column by three-row bordered grid of feature specifications. Use thin cream rules, compact labels, bold short titles, and small explanatory copy.
10. **Audience ticker:** Insert a narrow black-on-cream or cream-on-black horizontal band listing target customer types in small uppercase text, separated by rules.
11. **Public proof/work section:** Switch to cream and present a headline about proof over promises with supporting copy. Feature a large browser-style project page mockup with a before/after construction photo, timeline, latest update, orange progress details, and a floating mobile phone preview; add small callout annotations around the mockup.
12. **Field calculator:** Return to black. Use a narrower content width with a large heading, then a bordered calculator panel split into input fields and calculated result bars. Add a strong orange action button and a secondary tools link in the panel footer.
13. **Pricing:** On black, introduce the pricing heading with the same solid/outline treatment, a monthly/annual toggle, and a two-column bordered pricing comparison. Keep the free plan dark and the paid plan orange, with prominent prices, feature lists, and full-width outlined buttons.
14. **FAQ:** Switch to cream and use a large heading above a tall accordion list. Each question is a bordered horizontal row with a small orange question number, bold dark text, and a plus control; finish with a help-center link.
15. **Free template lead capture:** Return to black and place a large bordered split panel. Put an orange eyebrow, bold stacked download headline, supporting copy, and a text link on the left; put an email field and orange download button on the right.
16. **Closing CTA:** Use a full-width saturated orange band with a huge black/outlined two-line headline, a short supporting sentence, and a dark CTA aligned toward the right.
17. **Footer:** End on black with the mark and short product description on the left, grouped product/resources/legal links across the row, a small trust/badge element, and a thin ruled legal footer with copyright and language controls.

## Design language
- Build hierarchy through extreme scale contrast: small uppercase section indices and monospace notes sit beside condensed, heavy display headings roughly 64–110px on desktop. Alternate solid cream or black words with thin outlined words to create a repeatable editorial signature.
- Treat the page as a sequence of rhythm changes: spacious black hero and statistic, dense operational receipt/table content, a cream ledger interruption, dashboard cards, a specification matrix, image-led proof, then compact calculator, pricing, FAQ, and lead-capture modules.
- Use near-black backgrounds around `#0b0c0b`, warm cream surfaces around `#f1f1e7`, orange accents around `#ff5422`, and off-white type around `#f4f4ed`. Reserve green for positive financial values and use it sparingly.
- Pair a wide, heavy condensed grotesk for display headlines with a small technical monospace for labels, annotations, table copy, and helper text. Keep body copy narrow and understated rather than large or conversational.
- Use 1px cream/black borders, square corners or only very slight radius, hard-edged rectangular controls, and almost no soft shadows. Data cards should feel like printed instruments or wireframes; orange fills should carry the main emphasis.
- Make tables, grids, KPI strips, and chart cards visibly structured with rules and aligned columns. Use generous outer margins but compact internal rows so information feels precise rather than airy.
- Use outlined type, orange progress bars, tabs, toggles, accordion plus controls, and bordered buttons as interaction cues. Buttons should invert or fill with orange on hover; accordions and tabs should expand without changing the overall geometry.
- If adding motion, keep it purposeful and restrained: let the ticker scroll horizontally, allow chart values and progress bars to animate in, and use subtle section reveals rather than glossy transitions.
- Make the responsive version preserve the visual grammar: collapse multi-column grids into stacked bordered modules, keep headline scale dramatic but controlled, turn wide tables into horizontally scrollable panels, and retain the black/cream/orange section alternation.

## Never
- Do not use the reference product's logo, wordmark, name, copy, construction imagery, receipt artwork, screenshots, icon set, or exact data.
- Do not present the result as the reference product or imply affiliation with it.
- Do not copy its industry-specific claims or literal section headings; translate the structure and visual system to the user's own product, audience, and content.