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.

3.5 KiB Raw Permalink Blame History