Tabular — Responsive table-to-cards (teal), legibility fixes applied
Light-mode 'Tabular' product page built around one responsive data table that is a real desktop table on wide screens and collapses each row into a labeled stacked card below 920px, in pure CSS with no JavaScript: teal accent on near-white, status pills, tabular-nums columns, a sticky blurred nav, a dark prompt-library strip, and a teal CTA band.
Summary
A light-mode 'Tabular' product landing page whose centerpiece is one responsive data table that renders as a real desktop table on wide screens and collapses each row into a labeled stacked card the moment the viewport gets narrow. Flow: a blurred sticky nav, a grid-dot hero with a big black headline, a live-preview table section, a full-bleed dark prompt-library strip, a 3-up features grid, a full-bleed teal CTA band, and a footer. The library value is the responsive table-to-cards mechanic done with zero JS: thead hides, tr becomes a bordered card, each td flexes label-vs-value via content: attr(data-label).
Style
Clean, calm light-mode SaaS aesthetic on a near-white canvas with a single deep-teal accent and an ink/slate neutral scale. Inter throughout with OpenType character variants enabled and tabular-nums on the numeric table columns. Soft layered shadows, generous rounding on cards/panels, hairline slate borders, and semantic teal/amber/rose status pills. One dark section (near-black ink) and one saturated teal CTA band break up the white for rhythm.
Layout & Structure
Single-column, max-width 1152px (max-w-6xl) centered with px-6 gutters. Vertical flow: sticky 64px nav -> full-bleed grid-bg hero (centered) -> a live-preview table section that holds the responsive table -> a full-bleed dark ink-900 prompt-library strip -> a 3-up features grid -> a full-bleed teal CTA band -> a slim footer. The hero, library strip and CTA band break the gutter as full-bleed bands; the table is the centerpiece and is the thing that reflows from table to cards at 920px.
Sticky nav
Hero
Live preview header
Responsive table (the centerpiece)
Dark prompt-library strip
Features grid
Teal CTA band
Footer
Special Notes
The whole point is the responsive reflow done in pure CSS, no JS: keep the real semantic <table> (thead/th with scope) so screen readers retain column context, and drive the mobile card form with display rules + content: attr(data-label) on td::before. The 920px breakpoint is deliberate (a 6-column table squeezed into a tablet width reads worse than cards, so it flips to cards below 920, not at a smaller phone-only breakpoint). Teal-700 #0f766e is the only saturated brand color used structurally (logo tile, links, primary buttons, CTA band, card left-border); teal/amber/rose are reserved for status semantics. Keep tabular-nums on the numeric columns and right-align them. Sample table data is illustrative. Icons via Iconify Lucide set. Anchored on the 'Mobile First Responsive Table - Cards' pattern by herudea (https://codepen.io/herudea/pen/YxLRWR), rebuilt as an original light-teal 'Tabular' product surface.