Tier 1Web (www / app / auth). The full design system: our component library and the components.css recipe. This is the one tier where the recipe is the contract, native tiers take the tokens and nothing else.--line · --list-item-border · --list-item-bg · --list-item-bg-hover
01 Data table: Payment History components/table
app.put.io's only table, also on the payment confirm pages. A 12-column ratio, 50px rows divided by --line, no zebra, no vertical rules. Read-only: no sort, no selection.
IDDateTypePlanAmountInvoice
#48213October 21, 2026PaddleBilling100 GB9.99 USD
#41790September 21, 2026PaddleBilling100 GB9.99 USD
#30022August 21, 2026Voucher100 GB9.99 USD
02 Files table proposed
Files ship as a list (see File row). As a table: rows divide with --list-item-border only.
Actions
homework_answers_DONT_DELETE 18.4 GB 2026-07-01 23:41
The.Wire.S03E04.Back.Burners.1080p.BluRay.x264-DEMAND.mkv 12.1 GB 2026-06-29 08:12
podcast_ep127_final_mixdown_v2.mp3 840 MB 2026-06-27 19:03
ubuntu-24.04.1-desktop-amd64.iso 64.2 GB 2026-06-25 11:30
document-scan-march-2026.pdf 2 KB 2026-06-20 14:55
03 Selection toolbar proposed
Shipped: selection lives in the file list header, a select-all checkbox beside the Actions and Sort by dropdowns (see Menu). This sticky bar would replace them while rows are selected.