BUILD
- Build a complete Dark UI product dashboard homepage. Not a marketing landing, not a card, not an isolated navbar, not tabs.
- Domain from Use on: Dashboards first. Devtools and Chat live inside the shell (Usage, Chat in the rail), not as extra marketing pages.
STYLE
- Dark UI: charcoal ground, low-contrast hairlines, accent on data
- Shell #1D1D1F (charcoal, never navy or slate-900). Rail #161618. Tiles #2C2C2E
- Type #F5F5F7, mute #A1A1A6, hairline rgba(255,255,255,0.08)
- Data and New query use #00C2B3; query button type #0A0A0A. Plus Jakarta Sans + IBM Plex Mono for KPI and status. No Inter
LAYOUT
- Full-bleed app shell, not a 1120px marketing container
- Left sidebar ~72px: North, Overview, Usage, Chat
- Main column: workspace top bar with search + New query, four KPI tiles, a chart well, a three-row request table, status bar
- Nav is chrome of the dashboard, not a floating bar
SECTIONS
1. KPI row: Tokens 12.4m, Latency 410ms, Cost $1.2k, Errors 0.4% — teal numbers on #2C2C2E tiles
2. Chart well for throughput
3. Three-row request table (north-api / chat-prod / usage)
4. Status bar, not a marketing footer: Connected · us-east · v2.4
INTERACTION
- Hover: hairline teal #00C2B3. No lift, no blur, no glow blobs
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route (the dashboard home).
DON'Ts
- No purple, violet, indigo, fuchsia. No Inter. No emoji icons
- No navy, no Tailwind slate as the night. No "Start free" hero. Do not output a headline plus two empty marketing cells
- Do not treat this as a landing page with a sidebar sticker
MOTION
- Hover: brightness lift over 140ms ease-out. Glow spreads at 200ms.
- Avoid large travel in dark UI; motion reads twice as loud against black.
- Panel enter: fade with a 4px offset, 180ms.
- prefers-reduced-motion: opacity only.