# FleetLume UI v6 Design System

## Core layout

```text
Fixed sidebar
├── Fixed brand header
├── Filterable, independently scrolling navigation
├── Help and alert shortcut
└── Fixed account footer

Main workspace
├── Sticky command header
└── Scrollable application content
```

## Module color language

- Loads and tracking: blue / cyan
- Dispatch and AI: violet / indigo
- Drivers and carriers: orange / amber
- Equipment and reefers: blue / yellow / icy cyan
- Finance: green / violet
- Fuel: orange
- Border and urgent compliance: red
- Documents: cyan
- Maintenance: orange-red
- Notifications: red

## Responsive standards

- No page-level horizontal overflow
- Tables convert to labeled cards on phones
- Dashboard tables retain horizontal scrolling when comparison is important
- Three- and four-column forms reduce before fields become cramped
- Sticky side rails are disabled below laptop widths
- Bottom navigation appears below 1024px
- Touch targets remain at least approximately 38–44px

## Reference concepts

Approved design references are stored under `docs/ui-reference/` for future page work.
