Appearance

Main Navigation ​

General Interface ​

The Rosepetal AI Vision Platform interface is designed to be intuitive and efficient, with all main elements accessible from any view.

🏠 Central Dashboard ​

Main Layout ​

The dashboard uses a card design that automatically adapts to screen size:

  • Desktop view: 3-4 column grid cards
  • Tablet view: 2 column grid
  • Mobile view: Single column with vertical scroll

Module Cards ​

Each module is presented as an interactive card:

📊 Visual Information ​

  • Descriptive icon: Represents the functionality
  • Module name: Clear title
  • Dynamic state: Colors indicate availability
  • Hover effects: Visual feedback when cursor passes

🎨 Visual States ​

  • 🟢 Green: Available and working module
  • 🟡 Yellow: Available with limitations
  • 🔴 Red: Unavailable or with errors
  • ⚪ Gray: No access due to permissions

Module Access ​

Click on any card to directly access the corresponding module.

🧭 Top Bar ​

Main Elements ​

Logo and Brand ​

  • Rosepetal logo: Top left corner
  • Click on logo: Returns to main dashboard
  • Adaptation: Adjusts to light/dark theme

User Controls ​

In the top right corner:

🌐 Language Selector ​
  • Español: Complete interface in Spanish
  • English: Interface in English
  • Immediate change: No need to reload
🌓 Dark/Light Mode ​
  • Visual toggle: Immediate switch
  • Saved preference: Remembered between sessions
  • Automatic adaptation: All components change
👤 User Menu ​
  • Avatar/Icon: Shows user initial
  • Dropdown with options:
    • My Profile: Edit personal information
    • Settings: User preferences
    • Log Out: Secure logout

📱 Responsive Navigation ​

Device Adaptation ​

Desktop (> 1200px) ​

  • Complete grid: Maximum space utilization
  • Hover effects: Mouse interactions
  • Keyboard shortcuts: Available shortcuts

Tablet (768px - 1200px) ​

  • Reduced grid: 2-3 columns
  • Optimized taps: Appropriate touch areas
  • Smooth scroll: Fluid vertical navigation

Mobile (< 768px) ​

  • Single column: Optimized layout for vertical
  • Hamburger menu: For additional options
  • Large taps: Enlarged touch areas

Adaptive Elements ​

  • Text: Scalable sizes
  • Icons: Smart resizing
  • Spacing: Adaptive padding and margins
  • Images: Automatic responsive

🗂️ Navigation within Modules ​

Common Structure ​

All main modules follow a consistent structure:

Module Header ​

  • Main title: Current module name
  • Action buttons: Create, refresh, configure
  • Breadcrumbs: Current location (when applicable)
  • Quick filters: Search and sorting

Content Area ​

  • List/Grid: Main module elements
  • Side panel: Additional information or controls
  • Modal overlays: For detailed views

Secondary Navigation ​

  • Tabs: For different views of the same module
  • Contextual buttons: Element-specific actions
  • Pagination: For long lists

List View → Detail ​

Datasets (list) → Click on dataset → Detailed view
Main view → Action button → Overlay modal → Close

Integrated Tabs ​

Dataset detail → [Overview | Tags | Models | Upload]

🔍 Search and Filters ​

  • Search field: In modules with lists
  • Real-time search: Filters while typing
  • Clear button: Quickly clear search

Advanced Filters ​

  • Dropdowns: For predefined selections
  • Dates: Time ranges
  • States: Active, inactive, completed
  • Types: Categorization by functionality

Visual Indicators ​

  • Active filters: Highlighted in color
  • Counters: Number of results
  • Reset button: Clear all filters

🎛️ Interface Controls ​

Main Buttons ​

Action Buttons ​

  • 🟢 Green: Positive actions (create, confirm)
  • 🔵 Blue: Neutral actions (update, info)
  • 🔴 Red: Dangerous actions (delete, cancel)
  • ⚪ Gray: Disabled actions

Button States ​

  • Normal: Default state
  • Hover: Color change when cursor passes
  • Active: Pressed state during click
  • Disabled: Visually dimmed, not clickable

Interactive Elements ​

Cards ​

  • Hover effect: Elevation and color change
  • Cursor pointer: Indicates clickable element
  • Loading states: For actions in progress

Forms ​

  • Real-time validation: Immediate feedback
  • Error states: Highlighted in red with message
  • Success states: Visual confirmation

⚡ Shortcuts and Productivity ​

Global Keyboard Shortcuts ​

  • Ctrl/Cmd + /: Show shortcuts list
  • Escape: Close modals or cancel actions
  • Enter: Confirm in forms
  • Tab: Sequential navigation through elements

Module-Specific Shortcuts ​

In Datasets ​

  • Ctrl + N: New dataset
  • F5: Refresh list
  • Delete: Delete selected (with confirmation)

In Labeling ​

  • ←→ Arrows: Navigate images
  • Space: Zoom fit
  • +/-: Zoom in/out
  • Ctrl + Z: Undo

Touch Gestures (Mobile/Tablet) ​

  • Pinch to zoom: In image editors
  • Swipe left/right: Navigate between elements
  • Long press: Context menu
  • Pull to refresh: Update lists

🔄 Loading States and Feedback ​

Progress Indicators ​

Loading States ​

  • Spinner: For quick loads
  • Progress bar: For processes with known duration
  • Skeleton screens: For structured content loading

Error States ​

  • Descriptive messages: Clear problem explanation
  • Action buttons: Retry, report, cancel
  • Iconography: Visual that reinforces the message

Notifications ​

Toast Messages ​

  • Success: ✅ Confirmation of completed actions
  • Info: ℹ️ Relevant additional information
  • Warning: ⚠️ Important warnings
  • Error: ❌ Problems requiring attention

Location and Duration ​

  • Position: Top right corner
  • Auto-dismiss: 3-5 seconds for success/info
  • Manual dismiss: Errors require user action

🎨 Themes and Customization ​

Dark/Light Mode ​

Automatic Change ​

  • Header toggle: Instant change
  • Persistence: Preference saved in localStorage
  • Coherence: All elements change together

Optimization by Mode ​

  • Light mode: Better for well-lit environments
  • Dark mode: Reduces visual fatigue in dark environments
  • Contrast: Ensured in both modes for accessibility

Thematic Elements ​

  • Primary colors: Adjusted by theme
  • Iconography: Adapted to corresponding contrast
  • Images: Filters applied according to active theme

🔒 Visual Access Control ​

Elements According to Role ​

Administrator ​

  • All modules: Complete visible access
  • Advanced settings: Additional options
  • Management tools: Administrative controls

Standard User ​

  • Basic modules: Datasets, models, flows
  • Limited functions: No system configurations
  • Appropriate views: Only allowed functionalities

Viewer ​

  • Read-only: Informational modules only
  • No editing: Creation/modification buttons hidden
  • Shared data: Only information accessible by role

Visual Indicators ​

  • Disabled modules: Appear dimmed
  • Restricted functions: Not visible in interface
  • Informative tooltips: Explain why not available