| name | worldview-ui |
| description | WorldView HUD design system. Use when building ANY UI component or page. Defines colours, typography, spacing, component patterns. NEVER use generic white dashboards. |
| allowed-tools | Read, Write, Grep |
WorldView HUD Design System
CRITICAL RULES
- NEVER white/light background for admin, driver, buyer, or tracking. Dark theme mandatory.
- NEVER default Tailwind blue (#3b82f6). Use palette below.
- NEVER Inter/Arial/Roboto. Use IBM Plex Mono for data, Plus Jakarta Sans for body.
- Supplier portal is the ONE EXCEPTION — light theme for Fiji outdoor phone readability.
Colours (CSS vars):
--bg-primary: #0a0f1a (deep navy)
--bg-secondary: #0d1520 (cards)
--bg-tertiary: #111a2e (elevated)
--ocean-teal: #4fc3f7 (primary accent, CTAs, links)
--reef-coral: #ff7043 (alerts, urgent)
--sunset-gold: #ffab40 (prices, highlights, important numbers)
--lagoon-green: #66bb6a (success, delivered)
--deep-purple: #ce93d8 (secondary info)
--text-primary: #e0e6ed
--text-secondary: #90a4ae
--border-default: #1e2a3a
Typography:
- IBM Plex Mono: data, numbers, timestamps, countdown timers, capacity numbers
- Plus Jakarta Sans: body, headings, descriptions, buttons
Key patterns:
- Map is ALWAYS the hero (50-70% viewport). Data overlays on map, not sidebar.
- Capacity bar: teal fill, amber <20%, red at sold out
- Countdown timer: monospace, subtle pulse in last 6 hours
- Cards: bg-secondary, border-default, no shadows (use border contrast on dark)
- Status badges: semi-transparent pill (bg-color/10 text-color border-color/20)
- Loading: skeleton screens with bg-tertiary animate-pulse, never spinners
- Mobile: bottom tab bar (4 tabs max), 44px min tap targets, 16px min body text
Mapbox dark tiles: mapbox://styles/mapbox/dark-v11
