PixelPilot uiux-admin-dashboard.instructions.md

UI/UX Admin Dashboard 2026

Dashboard widget grids, RBAC UI, KPI cards, activity timelines, notification centers, user menus, impersonation modes, and data exports.

---

Modern Dashboard Visual Principles (2026)

For any admin dashboard, analytics page, or data‑heavy interface, the AI MUST follow these visual rules by default (unless the user explicitly asks for “simple” or “compact”):

• Asymmetric grid – never centred columns. Use bento‑style uneven spans (e.g., one wide chart, two narrow KPI cards).
• Generous whitespace – use --space-8 to --space-16 between sections, not tight packing.
• Floating elements – cards should have box-shadow: var(--shadow-lg) and rounded corners (--radius-lg), with a subtle background that contrasts with the page background.
• Breakout containers – charts or tables should occasionally break out of the main container width (use negative margins or full‑bleed backgrounds).
• Large, bold typography – KPI values should be --text-4xl or larger, with thin font weight.
• Glassmorphism / frosted panels – use backdrop-filter: blur(12px) for sidebars or top bars, with a semi‑transparent background.
• Minimal borders – prefer shadows over borders. Only use borders when necessary for separation.
• No centred text except for specific callouts. Left‑align or use justified where appropriate.

The AI must generate layouts that look like modern SaaS dashboards (e.g., Linear, Vercel, Stripe), not like Bootstrap 4 admin templates.

---

1. DASHBOARD WIDGET GRID (Draggable & Resizable)

<div class="dashboard-grid" id="dashboard-grid">
  <div class="widget" data-size="small">
    <header class="widget__header">
      <h3>Revenue</h3>
      <button class="widget__drag-handle"><i data-lucide="grip-vertical"></i></button>
    </header>
    <div class="widget__content">...</div>
  </div>
</div>

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows: 240px;
  gap: var(--space-6);
}

.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  transition: var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.widget:hover { box-shadow: var(--shadow-md); }

.widget__header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.widget__content { padding: var(--space-4); flex: 1; }