LocaFleet design system and UI patterns. Use when creating ANY UI component, page, or visual element. Contains color palette, status badges, layout patterns, and component specs.
@docs/prd/3-user-interface-design-goals.md
blue-600 (#2563EB), hover: blue-700slate-50, Cards: whiteslate-900slate-500slate-200| Status | Background | Text | Border | Usage |
|---|---|---|---|---|
| Disponible | green-50 | green-700 | green-200 | Vehicle available |
| Loue | violet-50 | violet-700 | violet-200 | Vehicle rented, contract active |
| Maintenance | amber-50 | amber-700 | amber-200 | Vehicle in maintenance |
| Hors service | slate-100 | slate-600 | slate-300 | Vehicle out of service |
| Retard | red-50 | red-700 | red-200 | Contract overdue |
| Brouillon | slate-100 | slate-600 | slate-300 | Draft status |
ALWAYS: 1'250.00 CHF - apostrophe separator, CHF suffix
// Use this helper from @/lib/utils
function formatCHF(amount: number): string {
return amount.toLocaleString("fr-CH", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}).replace(/\s/g, "'") + " CHF";
}
ALWAYS: 15.01.2026 (DD.MM.YYYY)
// Use this helper from @/lib/utils
function formatDate(date: Date): string {
return date.toLocaleDateString("fr-CH");
}
<Badge className="bg-{color}-50 text-{color}-700 border border-{color}-200">
{label}
</Badge>
Located in src/components/shared/:
AppSidebar - Main navigation sidebarCommandSearch - Cmd+K search modalDataTable - Generic table with sorting, filtering, paginationStatusBadge - Colored badge based on statusPageHeader - Page title with breadcrumb and actionsBottomActionBar - Sticky bar for bulk actionsEmptyState - Placeholder for empty listsLoadingState - Skeleton loadersUse Lucide React icons ONLY: import { Icon } from "lucide-react"