Void white / Style book
Mock ← Lab
Tables
Ink-on-white data surfaces — spec, ledger, and matrix variants for book panels.

Rules

  • Ink hierarchy — primary labels at 600 weight; supporting text at dim (#a1a1aa).
  • Tabular nums — all numeric columns use font-variant-numeric: tabular-nums; right-align quantities.
  • 1px grid — horizontal rules only on ledger; optional full grid on matrix compare mode.
  • Header rhythm — 10px uppercase labels, 0.08em tracking; sticky on scroll for ledger.
  • State without hue — status uses weight + 4px dot, not green/red fills.
  • Single-line ledger rows — primary meta and numeric deltas inline (middot-separated), not stacked.
  • Selection — 2px ink inset bar on first cell; subtle (#fafafa) row wash.

Spec

Two-column reference table for tokens, field definitions, and commit metadata.

Token table · vbc-table--spec
PropertyValue
Cell padding X1rem · 16px
Cell padding Y0.4375rem · 7px (ledger) / 0.625rem · 10px (spec)
Header size0.625rem · 10px uppercase
Body size0.8125rem · 13px
Border#e4e4e7 strong · rgb(9 9 11 / 0.06) row
Numeric alignmentRight · tabular-nums · −0.02em tracking

Ledger

Primary data grid — sticky header, row hover, optional selection column.

Keyword ledger · vbc-table--ledger vbc-table--interactive
Keyword Volume KD Intent Status
emergency electrician phoenix Commercial · local pack
2,400 ↑ 12% 68 trans Committed
panel upgrade cost Informational · blog
880 41 info Committed
ev charger installation Emerging · high margin
1,900 ↓ 3% 52 comm Draft
24 hour electrician near me Transactional · map pack
3,100 trans Pending
1–4 of 847 keywords · sorted by volume desc
Use when
Primary book data — sortable, selectable, paginated
Row height
~32px · single-line cells, inline meta

Matrix

Dense compare grid — audience layer completion, metric snapshots.

Layer completion · vbc-table--matrix vbc-table--grid
Reader Demographics Psychographics Jobs Pain Objections Channels Done
Homeowner — urgent repair 6/6 5/6 6/6 4/6 2/6 0/6 61%
Property manager — portfolio 6/6 6/6 5/6 6/6 5/6 4/6 88%
GC — new construction 3/6 1/6 2/6 0/6 0/6 0/6 11%