Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

11 - Design System Mapping (Transport Module)

Maps transport screens to the shared design system (00-shared/02 tokens, 00-shared/04 mapping, 00-shared/03 components). No new tokens introduced; module-only patterns are listed as exceptions.

1. Tokens used (00-shared/02)

TokenWhere
color-success / color-warning / color-neutralEntityStatusBadge tones (07 §2)
color-dangerdelete actions, conflict field errors
color-primaryFABs, primary CTAs, active chips
typography-title-mediumlist tile titles, stat counts
typography-body-mediumsubtitles (model, license, phone)
typography-label-largesection headers ("Stops", "Resources")
spacing-* (4 px grid)card/list padding, stop editor rows
radius-mediumcards, tiles, badges
elevation-lowoverview tiles, detail cards
motion-m-fast/basetransitions per 10 §9

2. Component -> token mapping

Component (07)ContainerFillBorderText
StatTileAppCardsurfacecolor-outline-variantcount = typography-headline
EntityStatusBadgeAppBadgestatus tone 10 %tonetone text
ShiftPickersegmented chipsprimary 10 %primaryprimary text
RouteStopEditorAppCard listsurfaceoutline-variantbody-medium
ResourcePickerAppTextField + chipssurfaceoutlinebody-medium
AssignmentTileAppListTilesurfacenonetitle = title-medium
DependencyGuardDialogAppDialogsurface-containeroutlinedanger title

3. Status colour mapping (semantic)

Server enums -> colour, single source for the module (vehicle.schema.ts:13-17, driver.schema.ts:7-11, route.schema.ts:7-10, route-assignment.schema.ts:7-10):

StatusColourIcon
activesuccesscheck-circle
maintenancewarningwrench
on_leavewarningpause-circle
inactiveneutralminus-circle

4. Density & layout

  • Lists: standard density (AppListTile default 56 dp); detail cards use spacing-4.
  • Master-detail (tablet/desktop, 00-shared/05 §2): left list 320 dp min, right detail pane.
  • Overview: StatTile grid - 2 columns phone, 3-4 tablet/desktop.

5. Type & voice

  • Titles: entity names verbatim (plateNumber, route name, driver full name).
  • Empty states: action-oriented ("No vehicles yet - add your first vehicle").
  • Conflict messages: server message verbatim (07 §8), never paraphrased - they are exact 409 bodies (transport.service.ts:42-44, 115, 181-183, 187-189, 257).

6. Module exceptions (flag to shared team)

  • plateNumber always monospace (typography font feature tnum).
  • Capacity displayed with unit "seats".
  • Stops numbering uses ordinal prefix ("Stop 1", "Stop 2") rather than bullets.
  • Planned screens (live map, attendance, fees) will need map palette + location markers - deferred to (planned) implementation (IMPLEMENTATION_PLAN.md:229).