Tablr — warm comparison/pricing matrix (mobile reflow + contrast fixes)
A warm paper-toned feature comparison and pricing matrix for a data-table product: three plan columns (Starter / Studio / Scale) with the recommended Studio column rendered as a continuous dark ink panel and a terracotta 'Most popular' badge, feature rows grouped into Core grid / AI & automation / Team & governance / Support with olive check and muted dash glyphs, a Monthly/Yearly billing toggle, and a real mobile reflow into stacked per-plan cards led by the recommended plan. Cream + ink + terracotta + olive palette on Inter.
Summary
A warm, paper-toned feature comparison + pricing matrix for 'Tablr', a data-table component product. On desktop (>=1024px) it's a single CSS-grid matrix: a sticky-feeling pricing header row of three plan columns (Starter / Studio / Scale) over feature-group sections (Core grid, AI & automation, Team & governance, Support), where the recommended middle plan (Studio) is a full-height dark 'ink' column with rounded top/bottom corners and a terracotta 'Most popular' badge so the eye lands on it. Each feature row is a label cell plus a value cell per plan that renders either a numeric/text value (tabular-nums) or a check / dash glyph. Below 1024px the whole matrix reflows into three stacked per-plan cards led by the recommended Studio card, each card grouping the same features under labelled sub-headers in a definition-list. Sits inside a full landing page (sticky translucent nav, grain hero with a billing toggle, feature strip, footer) on Inter, in a cream + ink + terracotta + olive palette.
Style
A warm, earthy editorial-SaaS aesthetic on a soft cream 'paper' canvas (#faf6f0) with near-black warm 'ink' text (#2b251d) and a two-accent system: a terracotta/clay family (#c4633f, deeper #a84f2e) as the primary action + highlight color and an olive/sage family (#6b7048, deep #565b39) as the secondary accent for 'included' checks and group labels. Surfaces are barely-there warm off-whites (card #fffdfa, warm band #f3ece1), borders are a soft sand hairline (#e6ddce / #efe8db), and the recommended plan inverts to a dark ink panel. Depth is gentle: a faint dotted paper grain, soft small shadows, and one lift shadow with a terracotta-tinted glow on the highlighted plan. Numbers use tabular-nums so prices and counts align. The whole thing feels hand-warm and document-like rather than cold/neon, all on a single Inter type system.
Layout & Structure
A centered max-w-6xl (1152px) column with px-6 lg:px-8 gutters runs the whole page (nav, hero, matrix, feature strip, footer share it). The comparison section has a heading + billing toggle header row, then TWO renderings of the same data: a desktop-only (hidden lg:block) CSS grid matrix with 4 columns (label + 3 plans) where the middle plan is a continuous dark ink panel, and a mobile/tablet (lg:hidden) stack of three per-plan cards led by the recommended one. Feature rows are organized into four labelled groups (Core grid, AI & automation, Team & governance, Support) separated by hairline rules.
Section header + billing toggle
Desktop matrix grid (>=1024px)
Plan header row (3 pricing cards)
Feature group + rows
Footer CTA row
Mobile/tablet reflow (<1024px)
Special Notes
Single typeface: Inter from Google Fonts (weights 400/500/600/700/800/900), set as the sans family; numeric values use font-variant-numeric: tabular-nums (the .tnum class). Icons are Phosphor via Iconify (ph:table-fill, ph:arrow-right-bold, ph:arrow-down-bold, ph:play-circle, ph:lightning-fill, ph:magic-wand-fill, ph:wheelchair-fill, ph:github-logo-fill); the check/dash availability marks and the 'Most popular' star are hand-inlined SVGs, not icon-font glyphs. Exact palette tokens: paper #faf6f0 (page), paper.card #fffdfa, paper.warm #f3ece1; ink #2b251d (text + dark panel), ink.soft #5c5346, ink.faint #6e6557, ink.mute #8a8170; terra #c4633f, terra.deep #a84f2e, terra.soft #e8a888, terra.wash #f7e6dc, plus #8f3f22 as the button-hover terracotta; olive #6b7048, olive.deep #565b39, olive.soft #a9ad8c, olive.wash #e9ebdf; line #e6ddce, line.soft #efe8db; helper glyph colors ico-dash #a89a78 (light) and rgba(250,246,240,0.5) (dark). The two named fixes vs a generic comparison table: (1) a real mobile reflow -- below lg the dense 4-column matrix becomes three stacked, self-contained per-plan definition-list cards led by the recommended plan, so nothing is squished or horizontally scrolled on phones; (2) contrast fixes -- 'included' checks are olive (not low-contrast gray), missing features use a clearly muted dash, the dark Studio column recolors its content to cream / terra-soft / paper-opacity tokens that clear contrast on #2b251d, and group labels + the eyebrow carry hierarchy via weight + uppercase tracking rather than faint color. Everything shares one centered max-w-6xl (1152px) container at px-6 lg:px-8, rendered cleanly with no overflow at 1280/768/390.