Forecast Spec Variation B - List Layout
A high-density, enterprise-grade dark mode configuration wizard or setup interface. Featuring a deep charcoal and black palette (#0a0a0a, #151517) with a vibrant safety orange (#e37400) accent. This style uses the Inter font family for high legibility in data-rich environments. The layout is a vertical list selection pattern within a structured modal, suitable for fintech, supply chain management, pharmaceutical forecasting, or complex SaaS workflow configurations. Key elements include a sidebar progress navigation, a thin top-aligned progress bar, and list-based radio selection cards.
Summary
A professional dark-themed configuration modal designed for complex decision-making. It utilizes a sidebar for navigation, a thin horizontal progress bar at the top, and a vertical list of selectable presets. The interface is optimized for scannability and high information density, using orange as the primary interactive signifier.
Style
The style is 'Enterprise Dark Modern'. It features a primary background of #0a0a0a and component surfaces of #151517. Typography uses Inter (400 to 700 weight). The primary action color is Orange (#e37400). Borders are subtle (#424242) and spacing is tight to allow for dense information architecture. Micro-interactions include hover-state border changes and smooth transitions for radio selections.
Layout & Structure
The layout is a fixed-size modal (840x720px) divided into four functional zones: a top progress bar, a left sidebar for step tracking, a main content area for list-based selections, and a bottom footer for global actions.
Main Container
Sidebar Navigation
Selection Area
Footer Action Bar
Components
Vertical Selection Card
A high-density list item used for choosing presets.
Custom Tier Builder Button
A dashed-border utility button for secondary actions.
Inline Info Banner
A compact notice box for default settings.
Special Notes
MUST maintain the 11px font size for descriptions to ensure high density. MUST NOT use rounded corners larger than 8px. MUST use the specific #e37400 orange for all active/interactive states. Ensure the scrollbar is custom-styled to match the dark theme (thin and dark gray).