Figma Design Link: Dashboard home: information hierarchy and layout grid
Redesign app/dashboard/page.tsx hierarchy: primary KPIs, secondary actions, and content density for first-time vs returning users.
- Deliver Figma (or agreed design tool) frames with mobile, tablet, and desktop breakpoints.
- Target WCAG 2.1 AA for color contrast, focus visibility, and touch targets where applicable.
- Align visual language with existing Tailwind usage; call out new tokens if engineering must extend
tailwind.config.js. - Provide annotated handoff: spacing, type styles, component states, and interaction notes (hover, focus, disabled, loading, error).
- Fork or branch the design file; map screens to Next.js routes under
app/for traceability. - Audit current UI implementation and note gaps vs desired patterns.
- Produce high-fidelity mocks and a short component/state inventory for engineering.
- Figma link (or attached file) with named pages per feature area.
- Redlines or dev mode specs for critical screens.
- List of open questions for product/engineering (contract limits, copy, edge cases).
design: handoff approved — Figma link + eng sign-off
- Prefer evidence-based layout decisions (scan paths, primary tasks).
- Run a quick design review with engineering before final sign-off.