first commit

DESIGN.md

@@ -0,0 +1,52 @@
+# 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.