Condensed Forecast Settings View
A dark-themed, condensed SaaS wizard interface designed for high-density technical configurations like machine learning settings or fintech dashboards. Features a multi-step sidebar navigation, a top-aligned progress bar, and streamlined selection rows. The style utilizes a sophisticated palette of deep charcoal, slate grays, and a signature orange accent (#e37400) to highlight primary actions and active states. Typography is set in Inter for maximum legibility at small sizes, employing a precise hierarchy with metadata separated by em-dashes and uppercase section headers.
Summary
A professional, high-density configuration dialog with a sidebar-driven wizard layout, featuring condensed selection rows, inline slider controls, and a subtle dark-mode aesthetic with orange primary accents.
Style
The design follows a strict 'Dark/Technical' aesthetic. Typography uses the Inter sans-serif family with a range of weights (400 to 700). Colors are anchored by a black-900 background (#151517) and gray-900 containers (#212121). Primary accents use a warm orange-900 (#e37400) for progress and primary buttons. Borders are subtle (gray-800), and interactions favor soft background shifts (gray-800/50) rather than heavy shadows or borders.
Layout & Structure
A 840x720px modal dialog split into a 240px sidebar and a flexible content area. A 3px thin progress bar sits at the very top of the modal. The footer provides navigation controls anchored to the bottom.
Top Progress Bar
Wizard Sidebar
Content Header & Info Banner
Condensed Selection Rows
Inline Slider Section
Dialog Footer
Components
Condensed Radio Selection Row
A highly efficient list item for choosing options without clutter.
Minimalist Accent Slider
An inline range input optimized for dark UI.
Special Notes
MUST: Maintain a strict 1px border grid. Use #e37400 for all primary interaction cues. Use gray-500 (#9E9E9E) for all secondary descriptive text to maintain hierarchy. MUST NOT: Use cards or bordered containers for individual selection items; they must be condensed rows to save vertical space. DO NOT: Use font sizes larger than 16px.