Relevant source files

The following files were used as context for generating this wiki page: - [components/marketing-redesign/KlutrMobileMockup.tsx](https://github.com/lwhite702/Klutr_Primary/blob/main/components/marketing-redesign/KlutrMobileMockup.tsx) - [design-reference/figma/src/BACKEND_HANDOFF.md](https://github.com/lwhite702/Klutr_Primary/blob/main/design-reference/figma/src/BACKEND_HANDOFF.md) - [design-reference/figma/src/README.md](https://github.com/lwhite702/Klutr_Primary/blob/main/design-reference/figma/src/README.md) - [design-reference/figma/src/DESIGN_SYSTEM_COMPLETE.md](https://github.com/lwhite702/Klutr_Primary/blob/main/design-reference/figma/src/DESIGN_SYSTEM_COMPLETE.md) - [PRD_CANONICAL.md](https://github.com/lwhite702/Klutr_Primary/blob/main/PRD_CANONICAL.md) - [BRAND_GUIDE.md](https://github.com/lwhite702/Klutr_Primary/blob/main/BRAND_GUIDE.md)

# Mobile Experience The Klutr Mobile Experience is a mobile-first, neurodivergent-friendly environment designed specifically for fast, nonlinear thinkers. It prioritizes frictionless capture and intuitive interaction zones to accommodate users who generate ideas faster than traditional organizational tools can manage. By focusing on a "thumb-reachable" layout and high-contrast visual anchors, the mobile interface ensures that users can dump thoughts, voice notes, and images without cognitive guilt or the need for upfront organization. Sources: [design-reference/figma/src/README.md](), [PRD_CANONICAL.md:5-9]() ## Mobile Architecture and Layout The mobile interface is built with a single-column layout optimized for vertical scrolling and quick interactions. The system uses a mobile-first approach where complex desktop panels are transformed into full-screen modals or collapsible sheets. ### Layout Principles - **Thumb-Reachable Zones**: Primary controls and capture inputs are located in the bottom third of the screen to ensure ease of use with one hand. - **Single Column**: Content is displayed in a vertical stream to reduce multi-tasking overhead. - **Bottom Navigation**: Persistent navigation bar for core surfaces. Sources: [design-reference/figma/src/README.md:273-280](), [components/marketing-redesign/KlutrMobileMockup.tsx:218-232]() ```mermaid graph TD subgraph Mobile_View_Structure Header[Sticky Header] Content[Scrollable Content Stream] CaptureBar[Persistent Mobile Capture Bar] Nav[Bottom Navigation Bar] end Header --- Content Content --- CaptureBar CaptureBar --- Nav ``` This diagram represents the high-level vertical layout of the Klutr mobile application. Sources: [components/marketing-redesign/KlutrMobileMockup.tsx:25-235]() ## Key Mobile Components The mobile experience is defined by several specialized UI components that facilitate rapid interaction. ### Mobile Capture Bar The Capture Bar is a persistent element located at the bottom of the screen. It supports multi-modal input including text, voice, and image uploads. | Feature | Description | | :--- | :--- | | **Voice Capture** | Microphone button for immediate voice memo recording. | | **Quick Plus** | Action button for adding images or attachments. | | **Input Field** | Minimalist text input with auto-focus support. | | **Type Coding** | Visual color codes (Purple for Tasks, Green for Ideas). | Sources: [components/marketing-redesign/KlutrMobileMockup.tsx:218-233](), [design-reference/figma/src/README.md:38-48]() ### Navigation and Surfaces Mobile navigation is handled through a bottom tab bar that switches between the primary cognitive surfaces. - **Stream**: The main hub for viewing chronological thoughts. - **Boards**: A Kanban-style view optimized for mobile cards. - **Stacks**: AI-suggested groupings and workspaces. - **Vault**: PIN-protected, locally encrypted storage. Sources: [components/marketing-redesign/KlutrMobileMockup.tsx:14-177](), [design-reference/figma/src/README.md:21-128]() ```mermaid flowchart TD User([User]) --> Capture[Capture Bar] Capture --> Voice[Voice Note] Capture --> Text[Text Entry] Capture --> Image[Photo/Upload] User --> Nav[Tab Bar] Nav --> Stream[Stream View] Nav --> Boards[Boards View] Nav --> Stacks[Stacks View] Nav --> Vault[Vault View] ``` The flow above illustrates how users interact with the primary navigation and capture systems on mobile. Sources: [components/marketing-redesign/KlutrMobileMockup.tsx:14-235]() ## Gesture Logic and Transitions To maintain a "Zen-like" individual workspace, the mobile experience utilizes specific gesture-based controls to handle organization without cluttering the UI with buttons. ### Standard Gestures - **Swipe Right**: Archives a thought, moving it to the "Nope" surface. - **Swipe Left**: Opens a quick actions menu for the specific item. - **Pull Down**: Refreshes the chronological stream. - **Long Press**: Triggers multi-select mode for batch actions. ### Transition Specifications Transitions are calibrated to be "calm and soft" rather than abrupt: - **Panel Slides**: 300ms ease-out using `translateX` transforms. - **Fades**: 200ms ease-in-out for state changes. - **Modal Entry**: Centered overlays with backdrop blur. Sources: [design-reference/figma/src/README.md:167-183](), [design-reference/figma/src/DESIGN_SYSTEM_COMPLETE.md:120-138]() ## Mobile UI/UX Design Standards The design system is implemented via CSS variables to ensure consistency and performance on mobile devices without runtime style calculations. | Token Type | Mobile Usage | Source | | :--- | :--- | :--- | | **Elevation** | `--elevation-sm` for cards; `--elevation-md` for modals | [DESIGN_SYSTEM_COMPLETE.md:89]() | | **Radius** | Softer, larger radii (`rounded-2xl` / `18px`) for touch comfort | [DESIGN_SYSTEM_COMPLETE.md:90](), [DESIGN_STANDARDS.md:58]() | | **Typography** | Inter Display for headings; Switzer for body text | [DESIGN_STANDARDS.md:32-35]() | | **Tap Targets** | Minimum 44x44px for all interactive elements | [design-reference/figma/src/README.md:214]() | ### Color-Coded Categorization Mobile items use a specific chart palette for rapid pattern recognition: - **Tasks**: Purple (`--chart-4`) - **Notes**: Blue (`--chart-5`) - **Ideas**: Green (`--mint`) - **Links**: Orange (`--chart-3`) Sources: [design-reference/figma/src/README.md:46-51](), [design-reference/figma/src/DESIGN_SYSTEM_COMPLETE.md:73-77]() ```mermaid sequenceDiagram participant User as "User Interface" participant Stream as "Stream Surface" participant Nope as "Nope Archive" User->>Stream: Swipe Right on ThoughtCard Stream->>Stream: Trigger Animation (Slide) Stream->>Nope: Move Thought Object Nope-->>User: Visual Confirmation (Item Removed) ``` This sequence illustrates the gesture-based archiving process central to mobile hygiene. Sources: [design-reference/figma/src/README.md:168](), [PRD_CANONICAL.md:130-138]() ## Implementation Example: Mobile Card Pattern Mobile cards use `KeepBadge` for tags and high-fidelity depth to create a premium feel. ```tsx // Pattern for a mobile ThoughtCard

Thought content...

Active

``` Sources: [design-reference/figma/src/UPDATE_COMPLETE_SURFACES.md:43-52](), [design-reference/figma/src/DESIGN_SYSTEM_COMPLETE.md:188-196]() ## Summary The Klutr Mobile Experience successfully translates a complex "second brain" architecture into a lightweight, gesture-driven sanctuary. By adhering to strict mobile-first constraints—such as thumb-reachable zones and single-column layouts—the system ensures that the nonlinear thinker is never overwhelmed by organizational friction. The integration of the Keep Design System provides a performant, high-fidelity interface that maintains brand identity while prioritizing clarity and speed of capture.