# Design Guidelines: Environmental Management System (React Native Web)

## Design Approach

**Selected System:** Material Design 3 adapted for React Native  
**Justification:** Utility-focused business application requiring clean, functional interface with proven mobile patterns. Material Design provides robust component specifications perfect for data-heavy operational tools while maintaining visual appeal.

**Key Principles:**
- Mobile-first operational efficiency
- Clear hierarchy for complex data entry
- Touch-friendly interactions (minimum 44px targets)
- Sustainable, calming color psychology

---

## Color Palette

### Light Mode
**Primary (Green):** 150 65% 45% - Main actions, active states, environmental theme  
**Primary Container:** 150 60% 92% - Subtle backgrounds for primary elements  
**Secondary (Blue):** 200 70% 50% - Supporting actions, info states  
**Secondary Container:** 200 65% 95% - Card backgrounds, section dividers  
**Surface:** 0 0% 98% - Main background  
**Surface Variant:** 0 0% 94% - Elevated cards, input fields  
**On Surface:** 0 0% 15% - Primary text  
**On Surface Variant:** 0 0% 45% - Secondary text, labels  
**Error:** 0 70% 50% - Validation errors  
**Success (Green accent):** 145 70% 40% - Confirmations, positive feedback

### Dark Mode
**Primary (Green):** 150 55% 65% - Softened for dark backgrounds  
**Primary Container:** 150 45% 25% - Elevated primary elements  
**Secondary (Blue):** 200 60% 70% - Adjusted for contrast  
**Secondary Container:** 200 50% 20% - Dark card backgrounds  
**Surface:** 0 0% 12% - Main dark background  
**Surface Variant:** 0 0% 18% - Cards, inputs in dark mode  
**On Surface:** 0 0% 95% - Primary text  
**On Surface Variant:** 0 0% 70% - Secondary text  
**Error:** 0 60% 65% - Dark mode error state  
**Success:** 145 55% 60% - Dark mode success state

---

## Typography

**Font Family:**  
Primary: 'Inter' (Google Fonts) - Clean, modern sans-serif optimized for screens  
Monospace: 'Roboto Mono' - For data display, weights, measurements

**Scale:**
- Display: 28px/700 - Screen titles, admin dashboard headers
- Headline: 24px/600 - Section headers, module titles
- Title: 20px/600 - Card titles, form section headers
- Body Large: 16px/400 - Primary content, form inputs
- Body: 14px/400 - Secondary content, descriptions
- Label: 13px/500 - Input labels, buttons, tabs
- Caption: 12px/400 - Helper text, timestamps, metadata

**Line Heights:** 1.5 for body text, 1.3 for headlines

---

## Layout & Spacing System

**Core Spacing Units (Tailwind):** 2, 4, 8, 12, 16, 24, 32  
Consistently use these primitives throughout (p-4, m-8, gap-4, etc.)

**Mobile Layout:**
- Screen padding: p-4 (16px)
- Card padding: p-6 (24px)
- Section gaps: space-y-6
- Form field spacing: space-y-4
- Button spacing: gap-3

**Grid System:**
- Single column default for mobile
- Max container width: max-w-7xl for wider screens
- Cards: Full width mobile, grid when space allows
- Lists: Full width with proper touch targets

---

## Component Library

### Navigation
**Bottom Tab Bar:**
- 5 main sections: Dashboard, Cadastros (Clients/Suppliers), Pesagem (Weighing), Comercial (Buy/Sell), Perfil
- Icons: Material Design icons (scale-balance, users, shopping-cart, chart-bar, user-circle)
- Height: 64px with labels
- Active state: Primary color with subtle fill
- Background: Surface color with top border

**Top App Bar:**
- Height: 56px
- Title: Headline typography
- Actions: Icon buttons (search, filter, notifications)
- Elevation on scroll

### Cards
**Data Cards:**
- Border radius: 12px
- Elevation: subtle shadow (0 2px 8px rgba(0,0,0,0.08))
- Padding: p-4 to p-6
- Background: Surface Variant
- Dividers: 1px On Surface Variant at 20% opacity

**List Items:**
- Touch target: min-h-16
- Padding: px-4 py-3
- Trailing icons: chevron-right for navigation
- Leading icons: category-specific (recycle, truck, dollar-sign)
- Dividers between items

### Forms & Inputs
**Text Inputs:**
- Height: 56px (comfortable touch target)
- Border radius: 8px
- Filled style with Surface Variant background
- Label: Floating label animation
- Border: 2px on focus with Primary color
- Error state: Error color with helper text below

**Buttons:**
- Primary (Filled): Primary color, white text, h-12, px-6, rounded-lg
- Secondary (Outlined): 2px border, Primary text, same dimensions
- Text buttons: For tertiary actions, px-4
- Icon buttons: 48x48px touch target

**Date/Number Pickers:**
- Native mobile pickers with Primary color accents
- Clear visual feedback for selection

### Data Display
**Tables/Lists (Material Data Tables):**
- Sticky headers
- Zebra striping: Surface vs Surface Variant
- Row height: 52px minimum
- Sort indicators on headers
- Action column with icon buttons

**Status Badges:**
- Pill shape: rounded-full, px-3, py-1
- Small text: 12px/600
- Color-coded: Success green (completed), Secondary blue (in progress), Error red (pending)

**Metrics Cards (Dashboard):**
- Large number display: 32px/700
- Label below: Caption typography
- Icon top-left: 24px Primary color
- Background: gradient from Primary Container to transparent

### Modals & Overlays
**Bottom Sheets (Mobile):**
- Slide up animation from bottom
- Rounded top corners: 16px
- Handle indicator at top
- Max height: 90vh with scroll
- Backdrop: rgba(0,0,0,0.5)

**Dialogs (Confirmations):**
- Max width: 320px on mobile
- Padding: p-6
- Title: Title typography
- Actions: Right-aligned buttons with gap-3

---

## Images

**Logo/Branding:**
- Top app bar: Environmental logo (leaf + recycling symbol), 32px height
- Loading screen: Centered logo with subtle pulse animation

**Empty States:**
- Illustrations for empty lists: Simple line art in Primary color
- Examples: "No materials registered yet", "No active orders"
- Placement: Center of content area, mb-4 from text

**Profile/User Avatars:**
- Circular, 40px for list items, 64px for profile screen
- Fallback: Initials on Primary Container background

---

## Interactions & Animations

**Minimal Approach:**
- Page transitions: Slide (200ms ease-out)
- Button press: Scale 0.95 (100ms)
- List item press: Background color change to Primary Container (150ms)
- Loading states: Circular spinner in Primary color
- Pull to refresh: Native mobile pattern with Primary color indicator

**Feedback:**
- Toast notifications: Bottom of screen, 4s duration, slide up animation
- Success: Green background, white text
- Error: Red background, white text
- Form validation: Instant error display with shake animation (200ms)

---

## Accessibility

**Dark Mode:** Full implementation matching color palette above, toggle in settings  
**Touch Targets:** Minimum 44x44px for all interactive elements  
**Contrast:** WCAG AA compliant, especially for text on colored backgrounds  
**Screen Readers:** Semantic labels on all inputs and actions  
**Focus States:** 3px Primary color outline on keyboard navigation

---

This design creates a professional, efficient mobile management tool with environmental identity through the green/blue palette while prioritizing operational usability and data clarity.