The Editorial Data Table
An editorial, print-inspired comparison data table for a product that typesets tables instead of rendering spreadsheets. A 'Biggest Gaps' delta table set in a rounded cream card: serif column headers underlined by one heavy 2px ink rule, hairline rules between roomy rows, Fraunces serif row labels, right-aligned tabular-nums delta values that fade by rank (leaders in burgundy), centered circular initial badges (burgundy AC vs ink MR) and right-aligned significance pills (burgundy-tinted Major vs ghost Moderate/Minor), with a genuine mobile reflow (CSS-grid rows, no <table>) so each row collapses to label + value with its badge/pill wrapping underneath. Cream + ink + a single restrained burgundy accent, set in Fraunces + Inter.
Summary
An editorial, print-inspired comparison data table for 'Table', a product that typesets tables instead of rendering spreadsheets. The whole page is a centered max-w-[1120px] column on a warm cream 'paper' canvas: a sticky translucent nav, a full-bleed serif hero ('The editorial data table.') with a 3-up stat grid, then the centerpiece 'Biggest Gaps' comparison table, an 'Anatomy of a well-set table' 2x2 principle band on a warmer cream, a denser 'Type Specimens' gallery table, a dark 'ink' pricing/CTA band, and a footer. The centerpiece table is a rounded card with a serif column-header row underlined by ONE heavy 2px ink rule, hairline rules between roomy rows, serif row labels, right-aligned tabular-nums delta values (the leaders in burgundy, the rest fading to muted ink), centered circular initial badges (burgundy for AC, ink for MR), and right-aligned significance pills (burgundy-tinted for Major, hairline-bordered for Moderate/Minor). On mobile the 4-column grid reflows: each row becomes a label + right-aligned value on line one, with the badge and pill wrapping to a second line, so nothing is squished or horizontally scrolled. Set in Fraunces (serif) + Inter (sans) on a cream + ink + burgundy palette.
Style
A warm, document-like editorial aesthetic: a soft cream 'paper' page (#faf6ef) with a slightly warmer band (#f3ecdf), near-black warm 'ink' text (#1c1815) stepped down through #6b635b and #9a9087 for hierarchy, and a single restrained burgundy accent (#7b2d3b, hover #9c3f4f) that marks only what matters (leading values, key badges, eyebrows, the primary CTA). Rules are a single sand hairline color (#e4dccd); the only heavy line is one 2px ink rule under each table header. Depth is almost flat: faint burgundy-tinted blurred blobs behind the hero, a soft long lift shadow under the centerpiece table card, hairline borders everywhere else, and the pricing band inverts to a dark ink #1c1815 surface with cream text. The type does the work: serif (Fraunces) for the display headline, numbers and table row labels; sans (Inter) for body, uppercase tracked labels and UI; numeric deltas use tabular-nums so the +values line up. It reads like a printed page with a point of view, not a cold spreadsheet or a neon dashboard.
Layout & Structure
One centered max-w-[1120px] container with px-6 md:px-10 gutters runs the entire page: sticky nav, full-bleed hero (overflowing the container with its blurred blobs and bottom hairline), the centerpiece 'Biggest Gaps' comparison table section, a full-bleed warmer-cream 'Anatomy' band holding a 2x2 principle grid, a denser 'Type Specimens' gallery-table section, a full-bleed dark ink pricing/CTA band, and the footer. Both tables are built as CSS grids (NOT <table>): a hidden md:grid header row underlined by a 2px ink rule, then divide-y divide-rule rows that are a single grid below md (label + right-aligned value, with badge/pill wrapping) and a 4-column grid at md and up.
Sticky translucent nav
Full-bleed editorial hero
Centerpiece comparison table ('Biggest Gaps')
Significance pills
Anatomy principle band (2x2)
Specimens gallery table (denser)
Dark pricing / CTA band
Footer
Special Notes
Two typefaces from Google Fonts: Fraunces (serif, opsz 9..144, weights 300/400/500/600/700) for the display H1/H2/H3, the big stat numbers and the table row labels/names; Inter (sans, weights 400/500/600/700) for body, uppercase tracked labels and UI. Tailwind is loaded via the CDN with a custom theme.extend.colors map and a maxWidth.container of 1120px. Exact palette tokens (from the tailwind config): cream #faf6ef (page), cream-2 #f3ecdf (warm band + row-hover bg), ink #1c1815 (text, dark CTA band, the one heavy header rule, MR badge), ink-60 #6b635b, ink-40 #9a9087, burgundy #7b2d3b (the single accent: leading values, AC badge, Major pills as a /10 tint, eyebrows, primary CTA), burgundy-2 #9c3f4f (the lighter/hover burgundy, used on the dark band's eyebrow/headline/CTA), rule #e4dccd (all hairlines). Helper CSS: .label { letter-spacing: 0.22em }, .tabnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' }, an .underline-link (background-size 0%->100% 1px line grow on hover, 0.35s), and .row-hover (background-color transition to #f3ecdf, 0.2s). Icons are Phosphor via the iconify-icon web component (ph:ruler in the hero, ph:arrow-up-right + ph:check on the dark band). The named editorial fixes vs a generic data table: (1) ONE heavy 2px ink rule under the header + sand hairlines between rows and nothing else; (2) serif (Fraunces) row labels + tabular-nums numeric column so names read like a printed page while numbers stay aligned; (3) a restrained single burgundy accent that marks only the leaders / key badges / Major pills, everything else ink on cream; (4) a real mobile reflow (CSS-grid rows, not a <table>) so each row collapses to label + value with the badge/pill wrapping underneath, no horizontal scroll at 390px. Everything shares one centered max-w-[1120px] container at px-6 md:px-10, rendered cleanly with no overflow at 1280/768/390.