Refined Scenario Basics Wizard Step
A refined, professional dark-mode wizard interface for SaaS and fintech applications. Features a sidebar-driven navigation, structured data entry with high breathing room, and a signature orange accent (#e37400). The layout uses a 840x720px centered dialog with a split sidebar/main content architecture, editorial-style typography using 'Inter', and custom-styled range sliders for complex parameter control. Suitable for scenario planning, analytics setup, or complex multi-step configuration flows.
Summary
A sophisticated multi-step wizard interface designed for high-precision data entry. It balances information density with visual clarity through subtle border-grouped input fields and a clear vertical progress sidebar.
Style
High-contrast dark mode aesthetic using a hierarchy of blacks and grays (#0a0a0a, #212121) punctuated by a vibrant orange (#e37400) accent. Typography is handled by 'Inter', utilizing weights from 200 to 800 for clear information hierarchy. Components feature subtle 8px rounding (rounded-lg) and thin borders (#424242 or gray-800).
Layout & Structure
A centralized 840x720px dialog divided into a 240px sidebar and a flexible main content area, topped by a global progress indicator.
Wizard Container & Progress Bar
Sidebar Navigation
Main Content Area
Footer Actions
Components
Bordered Field Group
A container that groups labels and inputs with uniform padding and subtle background elevation.
High-Contrast Range Slider
A custom-styled slider with a thick track and numeric milestones.