Reconciliation Wizard - Vertical Cards
A high-precision dark-mode wizard interface for technical configurations, featuring a vertical card system for complex choices. This design system is optimized for data-heavy applications, fintech platforms, or scientific tools that require granular control and clear hierarchy. It utilizes an industrial color palette of deep grays (#151517, #212121) paired with a high-visibility orange accent (#e37400). Key elements include ASCII-based visualization blocks for technical clarity, a persistent sidebar for multi-step navigation, and compact, metadata-rich typography using the Inter font family.
Summary
A professional enterprise wizard UI designed for complex decision-making processes, utilizing a vertical stack of interactive cards with integrated technical visualizations and a multi-state navigation sidebar.
Style
The style is characterized by a 'Technical Industrial' aesthetic. It uses a deep dark theme with a restricted color palette to minimize eye strain during complex tasks. Typography is highly hierarchical, leveraging font sizes from 8px to 16px to create clear information density. Borders are subtle (#424242) except when highlighting active states with a vibrant orange (#e37400). Micro-interactions focus on subtle background shifts (white/5% opacity) and smooth border transitions.
Layout & Structure
A split-view dialog layout consisting of a narrow sidebar for navigation and a large content area for task execution, tied together by a top progress bar and a sticky bottom action footer.
Wizard Container
Sidebar Navigation
Content Header
Vertical Selection Cards
Footer Actions
Components
ASCII Visualization Block
A code-like snippet used to visualize abstract logic (like hierarchy or flow) within a selection card.
Status Badge
Small, high-contrast label used for 'Recommended' or 'New' flags.
Special Notes
Must-dos: Ensure all mono-spaced blocks use 'tabular-nums' for alignment. Maintain exactly 24px gap in card rows to separate the radio, text, and diagram clearly. Must-nots: Do not use vibrant colors for non-interactive text; keep descriptions in the #757575 to #9E9E9E range to maintain hierarchy. Do not exceed 840px width for the wizard to ensure focus.