M3 Design System (v8.1)

Steps

1. Navigate to dashboard
2. Click each sidebar item
3. Check active state

Verify (6 checks)

• Sidebar visible at all times on desktop (w-64, not collapsible)
• Fovea logo and version badge displayed at top
• Navigation items: Dashboard, Data Rooms, Contracts, File Requests, Contacts, Settings, Help
• Active item has M3 primary surface highlight
• User info (name, email, avatar) shown at bottom of sidebar
• Sidebar uses M3 color tokens (no raw purple/gray classes)

Steps

1. Scroll down on a page with content
2. Check top bar appearance

Verify (4 checks)

• Top bar uses glass effect (backdrop-blur, semi-transparent)
• Stays fixed at top during scroll
• Shows notification bell, theme toggle, and user menu
• No content clipping or overlap on scroll

Steps

1. Open app at 390px width
2. Use bottom nav to switch sections

Verify (5 checks)

• Bottom nav appears at bottom of screen on mobile (hidden on desktop)
• Glass effect with shadow applied
• Icon-only navigation with active state highlight
• Sidebar is hidden on mobile
• Tap targets are large enough (min 44px)

Steps

1. Navigate to dashboard
2. Check layout at desktop and tablet widths

Verify (5 checks)

• Hero metric card shows primary stat (total views or documents)
• Bento grid layout with varied card sizes
• M3 surface hierarchy: primary, secondary, tertiary cards
• Cards responsive: single column on mobile, grid on desktop
• No raw purple/gray Tailwind tokens — only M3 tokens

Steps

1. Check version badge in sidebar
2. Compare to package.json version

Verify (3 checks)

• Version number in sidebar matches package.json version field
• Version reads from lib/version.ts (not hardcoded)
• Patch version auto-increments on every Vercel build (prebuild script)

Steps

1. Open DevTools → Elements → inspect any card, button, or text element
2. Check for raw Tailwind color classes (purple-*, gray-*, slate-*)

Verify (6 checks)

• No raw bg-purple-* classes on any authenticated page
• No raw text-gray-* or text-slate-* classes on any authenticated page
• All backgrounds use M3 surface tokens (surface, surfaceVariant, etc.)
• All text uses M3 on-surface tokens (onSurface, onSurfaceVariant, etc.)
• Primary action buttons use M3 primary token
• Destructive actions use M3 error token

Steps

1. Click each sidebar nav item in sequence
2. Observe active state indicator
3. Resize to tablet (768px) and mobile (390px)

Verify (6 checks)

• Active sidebar item shows M3 "state layer" surface (not a bold border)
• Navigation transitions are smooth (no layout shift)
• At tablet width: sidebar may collapse or switch to icon-only mode
• At mobile width (<1024px): sidebar hidden, bottom nav appears
• Bottom nav active item highlighted with M3 indicator pill
• No duplicate navigation elements at any viewport width

Steps

1. Navigate to the dashboard with multiple documents
2. Scroll down 200px
3. Scroll back to top

Verify (5 checks)

• Top bar is sticky (remains at viewport top during scroll)
• Glass blur effect visible as content scrolls behind it
• Page content does not jump or overlap the top bar on load
• Notification bell and user avatar remain clickable while scrolled
• No z-index conflicts between top bar and modals/dropdowns