Interactive Multi-Step Onboarding Flow
A minimalist, high-end multi-step onboarding flow designed for mobile-first SaaS and lifestyle applications. Characterized by a sophisticated Slate-based color palette (#0F172A), premium typography using the Switzer typeface, and fluid horizontal sliding transitions. Key features include a bento-grid interest selector, animated toggle switches, and a persistent progress-tracking header. Suitable for fintech, creative portfolios, productivity tools, and modern web platforms requiring a seamless user registration experience.
Summary
An interactive, 4-step sliding onboarding flow with a clean, high-contrast aesthetic. It utilizes a fixed header for progress tracking and a fixed footer for primary actions, while the content area slides horizontally between steps using smooth cubic-bezier transitions.
Style
The design follows a 'clean-tech' aesthetic using the Switzer font family (font-sizes ranging from 12px labels to 32px headers). It employs a neutral grayscale palette dominated by Slate (#0F172A) and off-whites (#F8FAFC). Animations are snappy yet smooth, using a custom cubic-bezier timing function for all state transitions and sliding effects.
Layout & Structure
A vertical stack consisting of a fixed navigation header, a flex-1 sliding content viewport, and a fixed primary action footer. The content slides on a 400% width container divided into four 100vw sections.
Header & Progress
Step 1: Welcome & Input
Step 2: Interest Selection
Step 3: Feature Toggles
Footer Actions
Components
Interactive Selection Card
A card that combines visual icons with checkbox logic for multi-select preferences.
Sliding Viewport Container
The core navigation mechanic that handles step transitions.
Special Notes
Must maintain a strict whitespace-heavy layout to ensure a premium feel. Do not use bright colors outside of the grayscale/slate spectrum. The 'Continue' button text and icon must update on the final step to signal completion (e.g., 'Get Started' with a rocket icon). Ensure all interactive elements have hover/active states using transition-all with 200ms duration.