---

name: dashboard-design-vercel description: Use when building or editing member/dashboard surfaces (anything under /dashboard) that should feel like Vercel + shadcn - soft rounded, light, breathing - and NOT like the hard-edged square marketing site. Covers the neutral palette, radii, spacing, sidebar/tabs/card patterns, and the strict bans.

Dashboard Design (Vercel + shadcn idiom)

Two design contracts live in the Developers Digest site. Do not mix them.

The boundary (never blur this)

Public / marketing surfaces = hard-edged neutral. White backgrounds, hairline border-black/10, square corners (no radius), solid black primary. This is the Gumroad-successor marketing look. Do not add rounded corners here.

Member / dashboard surfaces (anything under /dashboard) = softer Vercel/shadcn idiom. Per J: "feel like Vercel - magic ui + vercel + shadcn style, let it breathe."

• Rounded corners: rounded-lg cards, rounded-md inputs and buttons.
• Light muted surfaces: bg-neutral-50 for the sidebar and wells.
• Generous whitespace and padding.
• Subtle shadows are OK (shadow-sm).
• Small pill badges are OK.
• Sidebar search input at the top, grouped nav.

Same palette on both sides: neutral only. The difference is radius, muted surfaces, breathing room, and small shadows/badges - not color.

Let it breathe

Dashboards should feel calm, not dense. Prefer more padding than you think you need (p-4 to p-6 inside cards, py-10 on page shells). Space groups with gap-6/gap-8. One clear focal action per view. White cards on the neutral canvas, muted bg-neutral-50 for secondary wells. Do not cram; give each region room.

Scope your radius

Any global --radius: 0 / square reset for the marketing site must be scoped so it does not leak into /dashboard. shadcn components rely on their radius tokens inside the dashboard shell. Reset radius on marketing routes only, or set the dashboard shell to restore rounded-* explicitly. Never force square corners on dashboard surfaces.

Hard bans (both contracts)

• No gradients (bg-gradient-*, linear-gradient, gradient text/borders).
• No pink, no cream (retired Gumroad tokens bg-pink, bg-cream still exist for legacy pages - do not reintroduce them in new work).
• No pill buttons (btn-pill-*) and no offset-layer cards (gumroad-card) - both retired.
• No emojis.
• No em dashes (U+2014). Use " - " (hyphen with spaces).

Reference

• reference/tokens.md - the neutral palette, radii, spacing grid, borders, shadows, and the full ban list with concrete Tailwind classes.
• reference/patterns.md - copy-ready component patterns (sidebar, breadcrumb, underline tabs, cards, list+detail layout, buttons, badges, empty states, wells) grounded in the real app/dashboard/library/LibraryClient.tsx.