53 lines
3.5 KiB
Markdown
53 lines
3.5 KiB
Markdown
# 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.
|