# Design System: TPP Kierowca

## 1. Visual Theme & Atmosphere
Mobile-first industrial logistics interface for TPP drivers working in transport and waste management. The UI must feel durable, calm, and immediately readable in a cab: high contrast, large targets, structured cards, no decorative softness. Density is daily-app balanced, with enough information on route cards to scan the day quickly.

## 2. Color Palette & Roles
- **TPP Forest** (#154212) - Primary actions, active state, top route accents.
- **TPP Container Green** (#2D5A27) - Branded panels, selected chips, success surfaces.
- **Logo Leaf** (#609830) - Small brand highlights and progress accents only.
- **Operational Navy** (#1B365D) - Secondary actions and structural emphasis.
- **Field Surface** (#F7FAF8) - Primary app background.
- **Manifest Surface** (#FFFFFF) - Cards, inputs, photo tiles.
- **Panel Surface** (#EBEFED) - Section bands and secondary containers.
- **Charcoal Ink** (#181C1B) - Primary text.
- **Muted Steel** (#42493E) - Secondary text and metadata.
- **Industrial Outline** (#72796E) - Important borders and dividers.
- **Soft Outline** (#C2C9BB) - Low-emphasis borders.
- **Critical Red** (#BA1A1A) - Errors and destructive messaging.

## 3. Typography Rules
- **Display / Headline:** Hanken Grotesk, 32sp/24sp/20sp, weight 700/600, tight but not oversized.
- **Body:** Hanken Grotesk, 18sp for driver-facing copy, 16sp for supporting text, relaxed line height.
- **Technical Labels:** JetBrains Mono, 14sp/12sp, for route time, route ID, contract code, status metadata.
- Use Android system fallback if bundled fonts are not present, but keep the same scale and weight rhythm.

## 4. Spacing, Shape & Components
- Base grid is 8dp. Screen margin 16dp, route-card padding 20dp, list gap 16dp.
- Minimum touch target is 48dp. Main action buttons are 56dp high; route-critical actions use 64dp.
- Buttons and inputs use 4dp radius. Cards and sheets use 8dp. Photo thumbnails use 12dp.
- **Route Card:** White surface, 1dp Soft Outline border, 4dp left status strip, mono contract chip, large origin/destination.
- **OTP Input:** Six visible digits, mono, centered, high contrast, no floating labels.
- **Photo Tiles:** First two tiles are camera and gallery actions; uploaded cargo photos appear in a 2-column grid.
- **Status Chips:** Rectangular, low radius, text plus tonal background; never rely on color alone.

## 5. Compose Implementation Rules
- Use Material 3 with a fixed light TPP theme.
- Use icons for phone, lock, route, camera, gallery, refresh, back, and logout actions.
- No emoji, neon glow, gradient text, blurred blobs, oversized marketing hero, or generic stock imagery.
- Lists use skeleton-like loading blocks where possible and clear empty states.
- Text must not overlap and must fit on small Android screens with large system font.

## 6. Screens
- **Phone Login:** TPP brand header, phone number input, primary "Wyślij kod" action.
- **OTP:** masked phone, six-digit code input, resend action after failure or timeout.
- **Today Routes:** greeting, sync time, route cards for today's dispatcher assignments.
- **Route Detail:** manifest layout with route, contract, vehicle and notes sections, then cargo photo grid.
- **Photo Preview:** full-screen dark viewer with top back action and image fit-to-screen.

## 7. Motion & Interaction
- Use short Material spring/tween transitions through Navigation Compose.
- Active cards and buttons use subtle pressed opacity/scale, not glow.
- Refresh and upload states must remain visible; never leave the driver guessing after tapping camera/gallery.