Components
Tables
Tables are the heart of Swift Digital. They must be dense enough for power users yet calm enough for occasional ones.
Standard Table
| ID | Campaign | Folder | Sent | Open rate | Status |
|---|---|---|---|---|---|
| EML-2041 | Use case 7 — Lapsed Visitor | Marketing | 1,008,979 | 42.1% | Sent |
| EML-2040 | CCIWA Survey Email — Reminder | Surveys | 12,440 | 31.7% | Sent |
| EML-2039 | Reminder — Action Required | Compliance | 8,210 | — | Draft |
| EML-2038 | Final Reminder — Action Required | Compliance | 8,210 | — | Scheduled |
| EML-2037 | Internal Notice: New Department Protocol | Internal | 412 | 88.4% | Sent |
Anatomy
- header — N50 background, N600 text, 11px uppercase, 700 weight
- row — 44px tall, 14px text, 12px horizontal padding
- zebra — alternating rows at 30% N50 — optional, only for >6 rows
- hover — full row tints to N50, never colour the brand blue
- numbers — right-aligned with tabular-nums for clean columns
- IDs — JetBrains Mono, smaller, muted
Status Badges
SentDraftScheduledPendingFailed
Usage
✓ Do
Right-align numerical columns with tabular-nums for predictable column widths.
✓ Do
Truncate long text with ellipsis and reveal full value on hover via tooltip.
✕ Don't
Don't add row shadows or heavy borders — calm dividers keep dense data scannable.
✕ Don't
Don't colour entire rows by status — use a small badge in a status column.