Editorial SaaS Onboarding
A calm, professional SaaS onboarding design system with an editorial aesthetic. Characterized by a sophisticated graphite and warm off-white palette (#FDFBF9), modern serif headlines, and a structured asymmetrical layout. Ideal for high-end B2B platforms, fintech, product management tools, and developer-focused SaaS. Features include a split-screen layout, restrained oxidized green accents (#3E5C45), text-based progress indicators, and subtle slide-up animations.
Summary
A high-end, calibration-focused onboarding UI that feels like a professional internal tool. It utilizes a split-screen architecture (45/55 ratio), combining minimalist typography (Serif/Sans pairing) with interactive role-selection cards and an abstract UI preview panel.
Style
Editorial-meets-utility style using a dark graphite (#111827) and warm off-white (#FDFBF9) color scheme. Typography pairings include DM Serif Display for headlines and Inter for functional text. Animations are smooth and restrained, utilizing cubic-bezier curves for a premium feel.
Layout & Structure
Split-screen layout with a functional left column (interaction/form) and an illustrative right column (preview/context).
Left Navigation Header
Progress Indicator
Content Hero Section
Interactive Selection Cards
Action Footer
Visual Preview Panel (Right Side)
Components
Calibration Radio Card
A high-fidelity radio card that changes its internal border and typography color on focus/selection.
Abstract UI Skeleton
A non-literal representation of an application interface used for contextual previews.
Special Notes
MUST avoid pure black (#000) and pure white (#FFF). MUST use DM Serif Display for emotional emphasis and Inter for functional clarity. MUST use the specific cubic-bezier(0.16, 1, 0.3, 1) for all entrance animations to ensure the 'calm' feel. DO NOT use vibrant gradients, heavy shadows, or cartoonish illustrations.