doormile_milderapp/refer/rider_operations_system/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Rider Operations System	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #fff8f7 #f1d3d1 #fff8f7 #ffffff #fff0ef #ffe9e7 #ffe1df #fadbd9 #281716 #5c403e #3e2c2b #ffedeb #906f6d #e5bdbb #bd0e25 #960019 #ffffff #c01227 #ffd1ce #ffb3af #5f5e5e #ffffff #e2dfde #636262 #004e6f #ffffff #006791 #b8e1ff #ba1a1a #ffffff #ffdad6 #93000a #ffdad7 #ffb3af #410005 #930018 #e5e2e1 #c8c6c5 #1c1b1b #474746 #c7e7ff #86cffe #001e2e #004c6c #fff8f7 #281716 #fadbd9	display-lg headline-md headline-sm body-lg body-md label-bold label-sm fontFamily fontSize fontWeight lineHeight letterSpacing Public Sans 32px 700 40px -0.02em fontFamily fontSize fontWeight lineHeight Public Sans 24px 700 32px fontFamily fontSize fontWeight lineHeight Public Sans 20px 600 28px fontFamily fontSize fontWeight lineHeight Public Sans 18px 500 26px fontFamily fontSize fontWeight lineHeight Public Sans 16px 400 24px fontFamily fontSize fontWeight lineHeight Public Sans 14px 700 20px fontFamily fontSize fontWeight lineHeight Public Sans 12px 500 16px	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px	touch-min touch-lg margin-mobile gutter stack-sm stack-md stack-lg 48px 56px 16px 12px 8px 16px 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.