Modern Construction & Finance UI/UX Website and Investor Demo

Design Home, How It Works, and Product Demo in Figma, with desktop and mobile layouts and a clickable prototype. The Product Demo page must include separate developer and contractor views. Use the accompanying visual concepts as direction and this brief as the source of truth for copy, numbers and behavior.
• Build a clear visual hierarchy, readable dashboard previews and consistent reusable components. Refine the supplied copy without inventing traction or capabilities.
• Connect the three pages and prototype the core BOQ-to-forecast journey, including approval, exception and reporting states.
• Prepare an organized handoff with editable source files, assets, responsive specifications and interaction notes. Production coding is a separately priced option.

Visual direction
Use white as the main background, deep green #087443 for primary actions, pale green #EFF8F2 for section backgrounds and near-black #13251B for text. Reserve amber for exceptions. Favor clear typography and spacious product screens over stock construction imagery. Use the approved MradiQ logo when provided; the concept wordmark is a placeholder, not a new logo assignment.
Desktop frame: 1440 px with a centered content width around 1200 px and 12-column grid. Mobile frame: 390 px with 16–20 px gutters. Use an 8 px spacing scale, approximately 48–56 px desktop hero headings, 32–36 px mobile headings, and 16–18 px body text. Dashboard labels must remain readable; use generous touch targets and accessible contrast.