# Requirements: Ready2Blob **Defined:** 2026-03-31 **Core Value:** An IT pro can go from zero to a deployable rclone setup in minutes — without needing to know rclone's config syntax or PowerShell deployment conventions. ## v1.2 Requirements ### Theme - [x] **THEME-01**: App uses a consistent MD3 color token system (CSS custom properties) that all components reference instead of hardcoded Tailwind color classes - [x] **THEME-02**: User can toggle between System, Light, and Dark themes, with choice persisted across sessions and no flash of unstyled content on load ### Components - [x] **COMP-01**: All text inputs render as MD3 outlined text fields with floating labels that animate on focus and when the field has content - [x] **COMP-02**: Buttons follow MD3 hierarchy — filled for primary actions (Next, Download), outlined for secondary (Back, Copy), text for tertiary - [ ] **COMP-03**: Backend selection cards and output blocks use MD3 elevation with tonal surface tint, consistent padding, and shape tokens - [x] **COMP-04**: Step indicator displays as numbered circles connected by lines, with completed steps showing a checkmark, current step highlighted, and future steps muted ### Content & Clarity - [ ] **UX-01**: First-time visitor sees an intro section explaining what Ready2Blob does, with a clear call-to-action to start the wizard - [ ] **UX-02**: Remote name field includes a placeholder example, help text explaining what it is, and a visual preview showing how it appears in the generated `[remote-name]` config - [ ] **UX-03**: Each wizard step has a 1-2 sentence description below the heading explaining what the user is doing and why - [ ] **UX-04**: All backend credential fields have contextual help text explaining what to enter and where to find it ### Polish - [ ] **POLISH-01**: Wizard layout adapts to mobile screens — backend cards stack, form fields go full-width, step indicator collapses, buttons stretch - [ ] **POLISH-02**: All interactive elements have visible MD3 focus indicators (3px outline) using `focus-visible` for keyboard navigation - [ ] **POLISH-03**: Step transitions use subtle fade/slide animation that respects `prefers-reduced-motion` - [ ] **POLISH-04**: On validation failure, the view auto-scrolls to the first errored field ### Tech Debt - [x] **DEBT-01**: FieldRenderer uses consistent `aria-label` pattern across text-branch and select-branch (resolving v1.1 cosmetic debt) ## Future Requirements - Accent color presets (5-8 curated themes) — deferred from v1.2 scoping - Code block syntax highlighting in ReviewStep output blocks - Upgraded tooltip popovers with Floating UI positioning - Custom styled select/dropdown replacing native `