Tables

Data tables with hairline borders and tabular numerics.

Service	Region	Status	Uptime	ID
Pipeline Pro	us-east-1	Live	99.97%	svc-8f3a21
Auth Gateway	eu-west-1	Beta	98.40%	svc-c4e9d7
Metrics Collector	ap-south-1	Degraded	96.12%	svc-a1b7c3
Cache Redis	us-east-1	Live	99.99%	svc-d2e8f1

Usage

<table class="ds-table">
  <thead><tr><th>Region</th><th>Status</th><th>ID</th></tr></thead>
  <tbody><tr><td class="mono">us-east-1</td><td><span class="badge badge-success"><span class="badge-dot badge-dot-success"></span> Live</span></td><td class="mono">svc-8f3a21</td></tr></tbody>
</table>

Rules

1. Header: uppercase + tracking (+0.06em) in --muted, 2px bottom border
2. Data rows: --border-subtle bottom border, 1px
3. Mono font for all IDs, hashes, numeric data
4. No row striping — borders provide visual separation
5. Tabular numerics via font-variant-numeric: tabular-nums
6. Use --bg hover on the row, not --surface-hover