vamseeachanta Layout (+3)
Layout
┌─────────────────────────────────────────────────┐
│ Top Bar (56–64px): Logo, Search, User Menu │
├──────────┬──────────────────────────────────────┤
│ Sidebar │ Main Content (breadcrumbs if deep) │
│ 240–280px│ │
│ collapsed│ Metric Cards → Charts → Tables │
│ 64–80px │ │
└──────────┴──────────────────────────────────────┘
| Nav scenario | Pattern |
|---|---|
| 10+ sections | Collapsible sidebar |
| 3–6 sections | Top navigation |
| Secondary nav | Tabs (max 6) |
| Deep hierarchy | Breadcrumbs |
Content Hierarchy
- Value-first metrics: "You saved 4 hours" > raw numbers
- Actionable insights: What should the user do next?
- Progressive disclosure: Summary → detail on demand
Empty States
// GOOD: helpful, action-oriented
<EmptyState
icon={<InboxIcon />}
title="No messages yet"
description="When you receive messages, they'll appear here."
action={<Button>Compose message</Button>}
/>
// BAD: <p>No data</p>
Toast Timing
- Default: 4–5 seconds; minimum (a11y): 6 seconds
- Formula: 500ms/word + 3s base; always include dismiss button