A table you could reconcile accounts with: tabular numerals right-aligned to the decimal, a quiet uppercase header, and hairline row dividers. Status renders as tinted pills, never as raw text.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Stripe-style financial ledger table.
1. Header: white background (no fill), 12px uppercase labels in #64748B with 0.04em tracking, separated from the body by a 1px #E2E8F0 border.
2. Rows: 44px tall, 1px #E2E8F0 dividers, hover background #F8FAFC. No zebra striping.
3. Numbers: font-variant-numeric: tabular-nums, right-aligned. Currency amounts bold-ish (500 weight).
4. Status: pills — Paid: #D7F7C2 bg / #06B6D4 text; Open: #E2E8F0 bg / #64748B text; Failed: #FFE7F2 bg / #B3063D text. 12px medium, 4px 8px padding, full radius.
5. First column (ID) in a 13px monospace, muted #64748B.
6. Row click navigates; actions live behind a trailing ⋯ menu, revealed on hover.A table you could reconcile accounts with: tabular numerals right-aligned to the decimal, a quiet uppercase header, and hairline row dividers. Status renders as tinted pills, never as raw text.
Click headers to sort, rows to select — hover styling matches the exported rules.
Click headers to sort, rows to select — hover styling matches the exported rules.