first commit

refer/rider_operations_system/DESIGN.md

@@ -0,0 +1,151 @@
+---
+name: Rider Operations System
+colors:
+  surface: '#fff8f7'
+  surface-dim: '#f1d3d1'
+  surface-bright: '#fff8f7'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#fff0ef'
+  surface-container: '#ffe9e7'
+  surface-container-high: '#ffe1df'
+  surface-container-highest: '#fadbd9'
+  on-surface: '#281716'
+  on-surface-variant: '#5c403e'
+  inverse-surface: '#3e2c2b'
+  inverse-on-surface: '#ffedeb'
+  outline: '#906f6d'
+  outline-variant: '#e5bdbb'
+  surface-tint: '#bd0e25'
+  primary: '#960019'
+  on-primary: '#ffffff'
+  primary-container: '#c01227'
+  on-primary-container: '#ffd1ce'
+  inverse-primary: '#ffb3af'
+  secondary: '#5f5e5e'
+  on-secondary: '#ffffff'
+  secondary-container: '#e2dfde'
+  on-secondary-container: '#636262'
+  tertiary: '#004e6f'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#006791'
+  on-tertiary-container: '#b8e1ff'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#ffdad7'
+  primary-fixed-dim: '#ffb3af'
+  on-primary-fixed: '#410005'
+  on-primary-fixed-variant: '#930018'
+  secondary-fixed: '#e5e2e1'
+  secondary-fixed-dim: '#c8c6c5'
+  on-secondary-fixed: '#1c1b1b'
+  on-secondary-fixed-variant: '#474746'
+  tertiary-fixed: '#c7e7ff'
+  tertiary-fixed-dim: '#86cffe'
+  on-tertiary-fixed: '#001e2e'
+  on-tertiary-fixed-variant: '#004c6c'
+  background: '#fff8f7'
+  on-background: '#281716'
+  surface-variant: '#fadbd9'
+typography:
+  display-lg:
+    fontFamily: Public Sans
+    fontSize: 32px
+    fontWeight: '700'
+    lineHeight: 40px
+    letterSpacing: -0.02em
+  headline-md:
+    fontFamily: Public Sans
+    fontSize: 24px
+    fontWeight: '700'
+    lineHeight: 32px
+  headline-sm:
+    fontFamily: Public Sans
+    fontSize: 20px
+    fontWeight: '600'
+    lineHeight: 28px
+  body-lg:
+    fontFamily: Public Sans
+    fontSize: 18px
+    fontWeight: '500'
+    lineHeight: 26px
+  body-md:
+    fontFamily: Public Sans
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: 24px
+  label-bold:
+    fontFamily: Public Sans
+    fontSize: 14px
+    fontWeight: '700'
+    lineHeight: 20px
+  label-sm:
+    fontFamily: Public Sans
+    fontSize: 12px
+    fontWeight: '500'
+    lineHeight: 16px
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  touch-min: 48px
+  touch-lg: 56px
+  margin-mobile: 16px
+  gutter: 12px
+  stack-sm: 8px
+  stack-md: 16px
+  stack-lg: 24px
+---
+
+## Brand & Style
+The design system for the Rider/Agent application shifts from the consumer-facing "discovery" experience to a high-utility "execution" environment. The brand personality is functional, clear, and urgent, designed for users who are often in motion, outdoors, and multitasking.
+
+The design style is **Corporate / Modern** with a heavy emphasis on **High-Contrast** elements to ensure legibility under direct sunlight. We maintain brand continuity through the signature red primary color and specific rounding constants, but the interface prioritizes information density and clear calls-to-action over decorative whitespace. The emotional response should be one of confidence, reliability, and efficiency.
+
+## Colors
+The palette is engineered for maximum outdoor readability. 
+- **Primary Red (#c01227):** Reserved for critical actions, branding, and primary buttons.
+- **Secondary Dark (#1a1a1a):** Used for primary text and high-contrast UI shells to ensure the "urgent" tone.
+- **Status Colors:** Explicitly mapped to operational states:
+    - **Success Green:** Completion of Pick up or successful check-ins.
+    - **Warning Amber:** Delays, expiration of tasks, or inventory issues.
+    - **Info Blue:** Navigation prompts, route updates, and general system notifications.
+- **Backgrounds:** A clean, high-brightness neutral palette to provide a stark contrast against the dark text and vibrant status colors.
+
+## Typography
+This design system utilizes **Public Sans** across all levels to maintain its institutional and trustworthy character. Typography is optimized for glanceability:
+- **Weight over Scale:** We use semi-bold and bold weights for critical data points (Booking numbers, street names) rather than just increasing size.
+- **Touch-Friendly Heights:** Line heights are slightly more generous than standard web defaults to ensure that text-based interactive elements have a sufficient vertical hit area.
+- **Mobile Priority:** Large display styles are used sparingly, primarily for "Current Task" headers.
+
+## Layout & Spacing
+The layout follows a **Fluid Grid** model with a strict 4px baseline rhythm.
+- **Touch Targets:** A minimum height of 48px is enforced for all interactive elements, with 56px used for primary action buttons to accommodate gloved hands or rapid movement.
+- **Safe Zones:** A 16px horizontal margin is standard on mobile. Content cards use 12px internal padding to maximize information density while maintaining legibility.
+- **Vertical Stacking:** Information is organized in a "stack" layout (Top-to-Bottom) to simplify the decision-making process for the rider.
+
+## Elevation & Depth
+To maintain brand consistency while ensuring utility, the design system employs **Ambient Shadows**:
+- **Soft Shadows:** Shadows use a low-opacity (#000000 at 8-10%) with a wide blur (12px to 16px) and a slight Y-offset. This creates a subtle lift for cards without cluttering the UI.
+- **Active States:** Buttons and cards use a deeper, more condensed shadow when pressed to provide tactile feedback.
+- **Contrast Borders:** In high-glare environments, shadows are reinforced with a 1px low-contrast border (#E0E0E0) to ensure the container boundaries are visible.
+
+## Shapes
+The shape language is defined by a consistent **14px (0.875rem) corner radius** for all primary containers and buttons.
+- **Standard Corners:** 14px for cards, primary buttons, and input fields.
+- **Small Elements:** 8px for inner nested elements or secondary tags.
+- **Pill Shapes:** Used exclusively for status badges (e.g., "Active", "On Time") to distinguish them from actionable buttons.
+
+## Components
+- **Primary Action Buttons:** 56px height, Solid Red (#c01227) with White text. Bold weight. Rounded to 14px.
+- **Operational Cards:** White background with a subtle shadow and 1px border. Used for individual Booking details. Headers within cards should use the "Label-Bold" style in Red or Dark Grey.
+- **Status Chips:** High-saturation background (Success Green, Warning Amber, Info Blue) with white or high-contrast dark text. Pill-shaped.
+- **Lists:** High-density rows with 56px minimum height. Use chevron icons to indicate drill-down actions.
+- **Input Fields:** 14px rounding, 56px height. Labels are persistent above the field in "Label-SM" style for clarity during data entry.
+- **Progress Indicators:** Linear bars at the top of the screen or within task cards to show "Steps Remaining" in a pickup flow.
+- **Floating Action Buttons (FAB):** Used sparingly for "Center on Map" or "Emergency Contact" to ensure they don't block critical pickup data.