Every time I ask for "a dashboard in Next.js" I get the same shadcn-flavored gray boxes. I built a genuinely distinctive analytics dashboard using the prompt below, which forces an editorial, print-inspired design direction.
It specifies typography, a strict palette, and bans the usual suspects. Posting because the "design bans" technique changed everything for me.
Still struggling with: how do you keep the charts on-theme? Mine revert to default library colors half the time.
Build a Next.js 14 analytics dashboard page with an EDITORIAL PRINT design language, not a generic admin template. Hard rules: - Typography-first: big serif display numerals (Playfair Display) for KPIs, tight grotesque (Inter) for labels - Palette: paper #faf7f2, ink #1a1a1a, one accent #d64541. Nothing else. - BANNED: card drop shadows, rounded-xl, gradient buttons, sidebar with icons, gray-50 backgrounds - Layout: asymmetric 12-col grid like a newspaper front page, KPIs as a "masthead" row, hairline rules (1px #1a1a1a) as separators - Charts: sparklines and bar charts drawn as inline SVG, ink-colored, accent only for the current period - Data: mock a realistic e-commerce dataset in a separate ts file Ship it as app/dashboard/page.tsx plus components. It must build with zero errors.