Index / FAQ — Numbered Swiss (International Typographic)
Numbered, Swiss / International-Typographic FAQ rendered as a near-monochrome type specimen: an oversized Inter headline ('Frequently asked, answered.') with red comma + period, a tiny 'Support / Reference' eyebrow column, a full-bleed inverted ink feature rule, and a numbered accordion list under a heavy ink top rule where a Swiss plus glyph (two crossing hairlines) collapses to a single red rule on the one pre-opened row, closed by a black 'Still curious' CTA band, all built from 1px hairlines on a 12-column grid with no cards or shadows.
Summary
A numbered, Swiss / International-Typographic FAQ page rendered as a type specimen. A near-invisible sticky paper nav (a single red square mark + 'Specimen' wordmark, Index / Questions / Contact links, a hairline 'Start free' pill) sits over a full-bleed 12-column hero where a tiny 'SUPPORT / Reference' eyebrow column sits left of an oversized Inter headline 'Frequently asked, answered.' with the comma and period punched in red. A full-bleed inverted ink band runs a row of micro-tracked uppercase feature labels. The FAQ is a numbered list under a single heavy 1.5px ink top rule: each row is a 12-column grid (a tabular '01' number, the question, a Swiss plus glyph built from two hairlines), one row ships pre-opened where the number, plus and active states tint red and the plus collapses to a single horizontal rule. A full-bleed black 'Still curious' CTA band with a red primary pill + outline secondary pill, and a hairline paper footer with a centered max-width grid, close the page.
Style
Strict Swiss / International Typographic Style executed as a type specimen, almost monochrome. The whole page is paper #ffffff with near-black ink #0a0a0a text; structure is carried entirely by HAIRLINE rules (1px borders at rgba(10,10,10,0.14)) and a 12-column grid, never by fills or shadows. Exactly one accent, a signal red #ff3b30 (with a slightly darker #c81e16 for hover / active / small marks), used with extreme restraint: the square brand mark, the comma and period in the headline, the open-row number / plus / states, and the primary CTA pill. There are NO rounded cards, NO drop-shadows and NO gradients; the only inverted surfaces are two full-bleed ink #0a0a0a bands (the feature specimen rule and the CTA). Typography is the whole design: a single typeface, Inter, across weights 300-700, with negative letter-spacing on display type (-0.03em headlines), tabular-nums on all numbers, and wide 0.22em uppercase 'micro' eyebrows / labels. The signature is the numbered list and the plus/minus glyph built from two 1.5px crossing hairlines (a plus that loses its vertical stroke to become a single rule when open), plus a calm 360ms cubic-bezier(0.16,1,0.3,1) grid-template-rows accordion. The result reads as a precise editorial reference sheet, not a typical SaaS FAQ.
Layout & Structure
A centered max-w-[1180px] container with px-6 / md:px-10 gutters runs through every section, separated by full-bleed hairline bottom borders. Order: a sticky paper nav, a 12-column hero (a 3-col eyebrow beside a 9-col headline + lead + tabular meta row), a full-bleed inverted ink 'specimen rule' of uppercase feature labels, the numbered FAQ list under a 1.5px ink top rule (a 3/9 split section header, then seven 12-column accordion rows), a full-bleed black 'Still curious' CTA band, and a hairline paper footer (a brand + tagline block beside Product / Company link columns over a baseline copyright row).
Sticky nav
Hero / masthead
Specimen rule (inverted feature band)
FAQ section header
Numbered FAQ row (closed)
Numbered FAQ row (open / active)
CTA band + footer
Special Notes
Centered max-w-[1180px] container with px-6 / md:px-10 gutters throughout; every section divided by full-bleed hairline (rgba(10,10,10,0.14)) bottom borders. Palette is fixed and almost monochrome: paper #ffffff base, ink #0a0a0a text + the two inverted bands, exactly one accent signal red #ff3b30 with a darker #c81e16 for hover / active / small marks; no other colours, no shadows, no gradients, no rounded cards (only the tiny brand square and the pill buttons are rounded). ONE typeface only: Inter (weights 300-700) via Google Fonts; all numerals are tabular-nums; eyebrows/labels are a 'micro' style (~10.5px, 600, UPPERCASE, 0.22em tracking); display headlines track tight to -0.03em. Icons are Iconify lucide (lucide:arrow-up-right / lucide:arrow-right) on the CTA pills only. Exactly one FAQ row ships pre-opened. Responsive: the nav center links hide below md, the hero / FAQ / CTA 12-column grids collapse to a single column on mobile, the inverted feature band drops cells (5 -> 3 at sm -> 2 on mobile), and there is no horizontal overflow at 390px. Copy is human and reassuring with zero em-dashes (warm proactive-friend voice: 'No tickets required.', 'Ping us and we will sort it together.', 'Real humans read every message, usually same day', 'no canned bot replies').