App / Portal
Operations dashboard for issuer/processor teams on a Latin-American card-issuing infrastructure platform. Inherits the marketing palette but pushes blacks darker and uses purple for charts & AI surfaces. Geist throughout, pill-shaped chips everywhere, no row striping.
Colors
Surfaces
Text
Accent & Status
Typography
| Role | Size | Line | Weight |
|---|---|---|---|
| KPI value | 40px | 48px | 500 |
| KPI label | 16px | 24px | 500 |
| Table header | 14px | 20px | 400 |
| Table cell | 16px | 24px | 400 |
| Date sub-line | 12px | 16px | 400 |
| Pill / chip | 13px | 19.5px | 400 |
Layout
| Icon-rail width | 64px |
| Topbar height | 72px |
| Content padding | 32px 48px |
| KPI card row gap | 24px |
| KPI card min-height | 168px |
| Table row padding | 20px 16px |
Shell & Icon Rail
Fixed 64px rail. Logo tile up top (40×40 pink→purple gradient). Icons 20px, default #5b6371. Active state pulls icon to white and adds a 3px pink bar at the left edge.
color: #FFFFFF + 3px #ec4899 bar.Hover:
color: #ec4899.Avatar pinned at the bottom (32px circle, initials 12px).
KPI Cards
Three-up grid above the transactions table. Frost surface (white @ 2%), 18px radius, 168px min-height. Headline metric 40px Geist 500 with tabular-nums.
Data Table
No striping. Hairline row dividers (white @ 5%). 14px muted header, 16px primary cells. Date cells get a 12px time sub-line. Amounts right-aligned, tabular.
| Date | Type | Origin | Merchant | Amount | State |
|---|---|---|---|---|---|
| 17/09/202506:12:59 | Purchase | Domestic | New Balance | $120.05 | Approved |
| 14/09/202515:20:45 | Withdrawal | Domestic | BC Bank | $50.10 | Approved |
| 03/09/202517:35:55 | Purchase | International | Amazon | $69.99 | Approved |
| 01/09/202509:15:30 | Reversal | Domestic | Zara | $39.99 | Lost |
Status & Type Pills
Status pills carry a 6px leading dot. Type pills are border-only with muted text. Lost = pink, never red.
AI Assistant Chip
Pinned top-right of every dashboard view. Purple gradient — the only spot where purple dominates over pink.
background: linear-gradient(135deg, rgba(192,132,252,0.18) 0%, rgba(126,34,206,0.12) 100%); border: 1px solid rgba(192,132,252,0.35); border-radius: 50px; padding: 10px 18px; color: #c084fc; font: 500 14px Geist;
Full Dashboard Mock
Condensed reproduction of the live operations view.
| Date | Type | Merchant | Amount | State |
|---|---|---|---|---|
| 17/09/202506:12 | Purchase | New Balance | $120.05 | Approved |
| 15/09/202510:16 | Purchase | Supermarket | $32.70 | Approved |
| 14/09/202515:20 | Withdrawal | BC Bank | $50.10 | Approved |
Tailwind Reference
Drop the tailwind block from design-system-app.json into theme.extend and use these class recipes verbatim.
| Recipe | Class pattern |
|---|---|
appShell | min-h-screen bg-bg-page text-fg-primary font-sans |
iconRail | fixed left-0 top-0 h-screen w-rail bg-bg-rail flex flex-col items-center py-4 gap-8 z-30 |
iconRailItem | w-10 h-10 grid place-items-center text-fg-subtle hover:text-brand-pink data-[active=true]:text-fg-primary relative |
kpiCard | rounded-xl bg-white/[0.02] border border-border-card p-6 min-h-[168px] flex flex-col gap-3 |
kpiValue | text-kpiValue text-fg-primary tabular-nums tracking-tight |
aiChip | inline-flex items-center gap-2 rounded-pill bg-aiChip border border-brand-purple/35 text-brand-purple text-sm font-medium px-4 py-2 hover:shadow-glowPurple |
statusPillApproved | inline-flex items-center gap-1.5 rounded-pill bg-status-approvedBg border border-status-approvedBorder text-status-approved text-ui px-3 py-1 |
typePill | inline-flex items-center rounded-pill border border-border-input text-fg-muted text-ui px-3.5 py-1 |
tableRow | border-t border-border-table hover:bg-white/[0.03] transition-colors |
amountCell | text-right font-medium tabular-nums |