Senior Financial Product Designer + React Developer — Executive Decision Interface

We are redesigning the primary executive screen for Stratyx, an AI-enabled financial and operational decision platform. This is not a conventional SaaS dashboard. The interface must help an executive quickly understand: * What decision requires attention * What action is recommended * Why the recommendation is credible * What financial impact is expected * What evidence supports it * Whether human approval is required The four attached screenshots represent the desired level of visual maturity, information density, hierarchy, and precision. They are directional references—not templates to copy literally. Design direction The finished interface should feel like an institutional financial report transformed into a modern operating system: * Sophisticated, credible, and distinctive * Dense but easy to scan * Strong financial typography and tabular numerals * Clear separation of actuals, forecasts, assumptions, and recommendations * Restrained color, borders, and visual ornament * Designed for executives making consequential decisions * Excellent on both desktop and mobile We explicitly do not want: * A generic SaaS dashboard * Repeated rounded cards * Excessive pills, icons, shadows, or gradients * Oversized marketing headlines * Large areas of decorative whitespace * A spreadsheet copied directly into a browser * A design that resembles a standard AI-generated template Required first-viewport structure The initial screen must communicate the following without explanation: 1. Business context and reporting period 2. The most important decision requiring attention 3. The recommended action 4. Expected financial or operational impact 5. Confidence and evidence status 6. Any approval required from the user 7. A dominant actual-versus-forecast analytical view 8. Supporting evidence and reconciliation details Scope Phase 1 — Design * Establish the visual system: typography, spacing, colors, rules, tables, charts, controls, and responsive behavior * Produce a high-fidelity 1440px desktop design * Produce a corresponding 390px mobile design * Design realistic financial tables and analytical charts * Specify component states and key interactions * Deliver organized, editable Figma files * Include one revision based on consolidated feedback No development should begin until the designs are approved. Phase 2 — Front-end implementation * Reproduce the approved interface in React and TypeScript * Use reusable, maintainable components * Preserve the supplied functionality and data behavior * Implement responsive desktop and mobile layouts * Ensure dense tables remain usable without causing page-level overflow * Preserve descriptive navigation labels on mobile * Meet basic accessibility standards * Provide a clean implementation suitable for integration into the main product Webflow experience is useful for understanding responsive composition and future marketing-site consistency, but this product interface must ultimately be implemented in React—not delivered only as a Webflow page. Deliverables * Editable Figma source file * Approved 1440px desktop mockup * Approved 390px mobile mockup * Compact design-system specification * React/TypeScript implementation of the approved screen * Reusable styles and components * Permanent desktop and mobile screenshots * Brief handoff documentation * One consolidated revision Required experience * Senior product design for financial, analytical, enterprise, or data-intensive software * Strong React, TypeScript, HTML, and CSS skills * Excellent responsive-interface implementation * Advanced Figma component and layout skills * Demonstrated ability to make dense information clear * Strong chart, table, hierarchy, and typography judgment