---
name: Eco Logistics System
colors:
  surface: '#faf8ff'
  surface-dim: '#d2d9f4'
  surface-bright: '#faf8ff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f2f3ff'
  surface-container: '#eaedff'
  surface-container-high: '#e2e7ff'
  surface-container-highest: '#dae2fd'
  on-surface: '#131b2e'
  on-surface-variant: '#3d4a42'
  inverse-surface: '#283044'
  inverse-on-surface: '#eef0ff'
  outline: '#6d7a72'
  outline-variant: '#bccac0'
  surface-tint: '#006c4a'
  primary: '#006948'
  on-primary: '#ffffff'
  primary-container: '#00855d'
  on-primary-container: '#f5fff7'
  inverse-primary: '#68dba9'
  secondary: '#006398'
  on-secondary: '#ffffff'
  secondary-container: '#5bb8fe'
  on-secondary-container: '#00476e'
  tertiary: '#8d4b00'
  on-tertiary: '#ffffff'
  tertiary-container: '#b15f00'
  on-tertiary-container: '#fffbff'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#85f8c4'
  primary-fixed-dim: '#68dba9'
  on-primary-fixed: '#002114'
  on-primary-fixed-variant: '#005137'
  secondary-fixed: '#cce5ff'
  secondary-fixed-dim: '#93ccff'
  on-secondary-fixed: '#001d31'
  on-secondary-fixed-variant: '#004b73'
  tertiary-fixed: '#ffdcc3'
  tertiary-fixed-dim: '#ffb77d'
  on-tertiary-fixed: '#2f1500'
  on-tertiary-fixed-variant: '#6e3900'
  background: '#faf8ff'
  on-background: '#131b2e'
  surface-variant: '#dae2fd'
typography:
  display:
    fontFamily: Plus Jakarta Sans
    fontSize: 36px
    fontWeight: '700'
    lineHeight: 44px
    letterSpacing: -0.02em
  display-mobile:
    fontFamily: Plus Jakarta Sans
    fontSize: 28px
    fontWeight: '700'
    lineHeight: 36px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 28px
    fontWeight: '700'
    lineHeight: 36px
    letterSpacing: -0.015em
  headline-lg-mobile:
    fontFamily: Plus Jakarta Sans
    fontSize: 22px
    fontWeight: '700'
    lineHeight: 28px
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: '600'
    lineHeight: 24px
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
  body-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '400'
    lineHeight: 16px
  label-lg:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '600'
    lineHeight: 16px
    letterSpacing: 0.02em
  label-sm:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: '600'
    lineHeight: 14px
    letterSpacing: 0.03em
  data-metric:
    fontFamily: Plus Jakarta Sans
    fontSize: 24px
    fontWeight: '700'
    lineHeight: 28px
    letterSpacing: -0.02em
  data-mono:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: '600'
    lineHeight: 18px
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  gutter: 1.5rem
  gutter-mobile: 0.75rem
  margin: 2rem
  margin-mobile: 1rem
  space-xs: 0.25rem
  space-sm: 0.5rem
  space-md: 1rem
  space-lg: 1.5rem
  space-xl: 2rem
  space-2xl: 3rem
---

## Brand & Style

This design system establishes a high-utility, trust-centric interface engineered for multi-tier recycling and supply chain operations. Bridging ground-level operational logistics with high-level administrative oversight, the aesthetic blends industrial utility with clean, modern SaaS precision.

### Target Audience & Operational Roles
- **Ground Personnel & Drivers:** Requiring rapid legibility in intense outdoor conditions, high-contrast states, non-fussy hierarchy, and oversized touch targets (minimum 48px–56px) for one-handed operation on mid-range Android devices.
- **Scrap Vendors & Scrap Yards:** Requiring transparent unit economics, instant trust indicators for weight calibration, and frictionless booking flows.
- **Dispatchers & Enterprise Admins:** Requiring high data density, tabular scannability, real-time telemetry markers, and reliable audit trails.

### Aesthetic Foundation
- **Modern Utilitarian Minimalist:** Crisp surfaces, low-noise chrome, strict 4px/8px modular rhythm, and functional structural borders rather than heavy decorative shadows.
- **Eco-Industrial Purpose:** Crisp cool neutrals grounding a vibrant, authoritative emerald green, conveying verified environmental processing, modern operational hygiene, and circular material movement.

## Colors

The palette is engineered for high outdoor contrast and unequivocal lifecycle status clarity across ground handhelds and desktop monitors.

### Primary & Functional Accents
- **Primary Brand (Emerald):** `#059669` (Dark `#047857`, Light Surface `#ECFDF5`). Represents verified green operations, final completed pickups, confirmed weigh-ins, and positive ledger balances.
- **Action Highlight (Emerald Accent):** `#10B981` used strictly for active live toggles, high-visibility badges, and driver route completion actions.
- **Transit & En-Route (Sky / Blue):** `#0284C7` (Surface `#F0F9FF`, Border `#BAE6FD`). Signifies dynamic movements: Driver Assigned, Dispatched, In-Transit.
- **Pending & Attention (Amber):** `#D97706` (Surface `#FFFBEB`, Border `#FDE68A`). Identifies awaiting vehicles, pending spot-quotes, and yard capacity holds.
- **Operational Stage: Loading (Purple):** `#7C3AED` (Surface `#F5F3FF`, Border `#DDD6FE`). Indicates material handling, sorting, and vehicle loading at origin.
- **Operational Stage: Scale/Weighment (Teal):** `#0D9488` (Surface `#F0FDFA`, Border `#99F6E4`). Marks gross/tare weighbridge submissions and gross balance calculations.
- **Critical & Deviation (Rose/Red):** `#E11D48` (Surface `#FFF1F2`, Border `#FECDD3`). Indicates weight discrepancies > 2%, route halts, rejected materials, or payment flags.

### Neutrals & Structural Foundations
- **Base Canvas:** `#FFFFFF` (Pure white for desktop modules, yard receipts, and primary modal cards).
- **Sub-surface / Background:** `#F8FAFC` (Slate-50 for app background, scannable data grids, and mobile card backdrops).
- **Muted Structural Borders:** `#E2E8F0` (Slate-200 for crisp 1px hair lines).
- **Text Primary:** `#0F172A` (Slate-900; optimal readability under glare).
- **Text Secondary / Metadata:** `#475569` (Slate-600; high legibility for unit specs, registration plates, timestamps).
- **Text Tertiary / Placeholder:** `#94A3B8` (Slate-400).

## Typography

The pairing combines the modern geometry and clarity of **Plus Jakarta Sans** for headlines and telemetry metrics with the neutrality and legibility of **Inter** for operational forms, tabular logistics data, and dense ledger outputs.

### Region-Specific Format Rules
- **Currency (`₹` INR):** Render with tabular numerals (`font-feature-settings: 'tnum' 1`). Always prefix the standard rupee symbol with standard Indian numbering formatting (e.g., `₹1,45,200.00`).
- **Weight Units:** Bold integer values, standard weight descriptors (e.g., **4,850** kg or **14.25** MT). Never wrap units to next lines.
- **Vehicle Registration Plates:** Displayed using `data-mono` with uppercase transformation, subtle border enclosure, and strict spacing (e.g., `MH 12 QN 4821`, `DL 01 AA 9024`).
- **Phone Numbers:** Formatted cleanly with country code prefix (e.g., `+91 98230 12345`).
- **Timestamps:** DD MMM YYYY, hh:mm a (e.g., `14 Oct 2024, 02:45 PM`).

## Layout & Spacing

A strictly systematic 8px-based spatial model governing responsive transitions from dense dispatch dashboards to handheld driver execution screens.

### Grid & Breakpoints
- **Mobile (`< 640px`):** Single-column fluid view. Screen margin is `margin-mobile` (16px). Outer padding provides dedicated bottom clearance for persistent action bars (80px clearance).
- **Tablet / In-Cab Terminals (`640px - 1024px`):** 6-column fluid grid. Margin is 24px, gutters are 16px. Split views prioritize map/telemetry (40%) alongside queue actions (60%).
- **Desktop Admin (`> 1024px`):** 12-column structured workspace. Margin is `margin` (32px), gutter is `gutter` (24px). Sidebar fixed at 260px; right-hand auxiliary telemetry drawer fixed at 380px when triggered.

### Touch Ergonomics & Vertical Cadence
- Mobile components strictly enforce a minimum touch container of 48px height (with 56px standard for mission-critical actions like "Swipe to Confirm Weighment" or "Accept Load").
- Desktop admin grids enforce dense 40px cell heights with horizontal paddings matching `space-md`.

## Elevation & Depth

Visual hierarchy relies on clean surface layering, micro-borders, and low-opacity ambient shadows rather than heavy skeuomorphism. This ensures high visual clarity under bright outdoor conditions and reduced rendering overhead on field devices.

### Surface Elevation Levels
- **Level 0 (Flat Floor):** `#F8FAFC`. Base canvas for apps and admin background grids.
- **Level 1 (Card Baseline):** `#FFFFFF` paired with a 1px solid `#E2E8F0` border. No shadow. Used for standard table rows, standard inventory panels, and idle queue items.
- **Level 2 (Active Interactive Cards):** `#FFFFFF` paired with a 1px solid `#CBD5E1` border and ambient lift: `box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.04)`. Used for active transit trips, driver route stops, and hovered data rows.
- **Level 3 (Sticky Controls & Popovers):** `#FFFFFF` with `box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03)`. Used for bottom sheets on mobile, live weight verification cards, and vehicle assignment drawers.
- **Level 4 (Modals & Emergency Overlays):** `#FFFFFF` accompanied by a backdrop scrim of `rgba(15, 23, 42, 0.6)` with 4px backdrop blur.

## Shapes

The geometric architecture uses balanced, structural curves that soften industrial operations while maintaining rigorous data enclosure.

### Radius Assignments
- **Core Cards & Modules:** 12px to 16px radius (`0.75rem` to `1rem`). Prevents harsh industrial corners while preserving high content area efficiency.
- **Input Fields & Search Inputs:** 8px to 10px radius (`0.5rem` to `0.625rem`) for crisp form boundaries.
- **Buttons:** 10px radius for desktop inputs; 12px radius for oversized mobile touch targets.
- **Status Pills & Micro-Tags:** Fully rounded pill-shape (`9999px`) to create clear differentiation between rectangular content cards and live state indicators.
- **Weighbridge Photo Containers & Vehicle Preview Thumbnails:** 8px radius with 1px inset slate borders.

## Components

### Buttons & Primary Triggers
- **Primary CTA:** Background `#059669`, text `#FFFFFF`, font `label-lg`, hover `#047857`. Mobile height 52px; desktop height 40px.
- **Secondary Action:** Background `#FFFFFF`, 1px solid `#E2E8F0`, text `#0F172A`, hover background `#F8FAFC`.
- **Destructive/Reject:** Background `#FFF1F2`, text `#E11D48`, 1px border `#FECDD3`.
- **Slide-to-Confirm (Driver Mobile):** Full-width 56px track in `#ECFDF5` with an emerald thumb `#059669`. Prevents accidental weight submissions or status advancements.

### Status Indicators & Badges
All status elements pair a tinted background, matched border, bold text, and a 6px circular indicator dot:
- **Pending / Finding Vehicle:** `#FFFBEB` background, `#FDE68A` border, `#92400E` text. Amber pulse dot.
- **Driver Assigned / En Route:** `#F0F9FF` background, `#BAE6FD` border, `#0369A1` text. Blue solid dot.
- **Loading / Yard Operations:** `#F5F3FF` background, `#DDD6FE` border, `#6D28D9` text. Purple solid dot.
- **Weight Submitted:** `#F0FDFA` background, `#99F6E4` border, `#0F766E` text. Teal solid dot.
- **Completed / Paid:** `#ECFDF5` background, `#A7F3D0` border, `#047857` text. Emerald checkmark or solid dot.

### Cards & Module Containers
- **Collection Request Card:** Border 1px `#E2E8F0`, corner radius 14px, white surface. Top row split: Material type badge (e.g., "Heavy Melting Scrap") left, timestamp right. Middle section displays gross tonnage, vehicle badge, and vendor name. Footer houses quick call button (`+91`) and active status badge.
- **Weight Calibration Card:** Elevated high-contrast component. Features live numerical stream with 32px tabular digits, tare vs. gross calculation breakdowns, and proof upload previews (weighbridge slip photo).

### Data Input & Form Controls
- **Form Inputs:** 44px (desktop) / 50px (mobile) height. Slate-200 border, slate-900 typography. Focus state leverages a 2px outer ring in `#10B981` with 0px outline offset.
- **Registration Plate Input:** Monospaced, capitalized input with an embedded Indian flag / IND country tag prefix on the left edge.
- **Material Type Multi-Select Chips:** Surface `#F8FAFC`, border `#E2E8F0`, text `#475569`. When selected: surface `#ECFDF5`, border `#059669`, text `#065F46` with an emerald check icon.

### Logistics-Specific Custom Components
- **Vehicle Identifier Badge:** Slate-100 container (`#F1F5F9`) with 1px border `#CBD5E1`, text `#0F172A`, uppercase `data-mono` font, displaying vehicle plate alongside truck capacity (e.g., `MH 04 EB 8812 • 4.5T Eicher`).
- **Payment & Settlement Strip:** Two-column transactional row. Left: Bank / UPI / Cash settlement flag. Right: Bold formatted currency `₹XX,XXX` with instant verification tag.