<Card title="Focus: Most Urgent Task" subtitle="Your top priority right now">
  <div style="margin-bottom: 16px;">
    <h2 style="margin: 0 0 8px;">Finalize Q4 Budget Proposal</h2>
    <p style="margin: 0; color: var(--color-muted);">Finance · High priority</p>
  </div>

  <div style="display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; align-items: center;">
    <Badge tone="warning">Due: Today, 5:00 PM</Badge>
    <Badge tone="info">In Progress</Badge>
  </div>

  <Progress value="65" max="100" label="Completion" tone="info" />

  <div style="margin-top: 20px; display: flex; gap: 12px;">
    <Button variant="primary" icon="check">Mark Done</Button>
    <Button variant="secondary" icon="clock">Snooze 1 hr</Button>
  </div>
</Card>