Ship the French site first, translate the blog later

Build a one-page product landing page for [product], a localization or content-sync tool. Treat it as a dark data-table product: the page's main control is a live coverage table in the hero, and the rest of the page keeps the table's grammar.

Ground: flat deep indigo #1B1F3D with faint horizontal row ruling every 40px at about 5 percent bone, like the rows of a table. No gradients, no glow, no dot grid.

Above the fold, three columns. Far left, a narrow vertical spine set sideways with the release number, date and reading time, divided from the copy by a 1px rule. Then a copy column: a small mono kicker, a bold 13ch headline, a two-sentence deck, one coral #F0704F button with dark ink text, and a plain text link. The right seven twelfths hold the coverage panel on deeper indigo #121530 with a 12px radius and one tight shadow, the only elevated element on the page.

The coverage panel: a header row of locales with the source locale marked and locked; one row per content item with a square two-colour risograph thumbnail, the item name and its kind (page, collection, component); one three-state cell per locale reading Included, Untranslated or Hidden in words. Clicking a cell cycles its state. Row checkboxes reveal a coral bulk bar that sets a chosen locale for every selected row. A footer radio picks the default for new locales, and an Add locale button appends a column with that default.

Below the hero, a full-width contents table (row number, section, item, source, date). Its row numbers become the section markers: each section is a two-column row with a 220px key column (a large mono row number, a solid bone kind label, the date) beside a 720px reading column. One bone sheet inverts the page for the reusable pattern and a CSS snippet. The copyable prompt sits in a two-column block: a metadata column (key, archetype, works-in list, copy button) beside the prompt on a deeper indigo sheet with a 1px periwinkle border. Sources as a real table, a three-cell pager, a colophon.

Palette: indigo #1B1F3D ground, #121530 for the nav and panels, bone #EEEAE0 for headings and the inverted sheet, coral #F0704F as the only loud accent (buttons, focus rings, the bulk bar, row numbers), pale sage #BFD9B4 for Included, ochre #EDC16A for Untranslated, and Hidden as a periwinkle outline with a strike. Type: Red Hat Display 800 for headlines, Red Hat Text for body and controls, Red Hat Mono for row numbers, keys, labels and code. One superfamily, split by optical size.

Guardrails: body text 19px with 1.7 line height and a 68 character measure. Every state is written as a word, never color alone. Small labels meet WCAG AA against the indigo and against each fill. Hover and focus states on every real control at about 150ms, with a prefers-reduced-motion guard. No fake controls: every button does something or is removed. 6px radius on cells and labels, 12px on panels, no pills. No neon, no glow, no purple-blue gradients, no readable text inside images. On mobile the table rows become cards with each locale as a labelled line, the spine turns horizontal above the headline, and the key column sits inline above each heading.