TITLE: GRID — a conference on structure
PROMPT: Design 'GRID — a conference on structure' in strict International Typographic Style. Flush-left massive Helvetica-system headlines in black, white and one red; a visible modular grid with generous asymmetric whitespace; numeric indices everywhere; speakers rendered as pure typographic blocks (name, role, city) — type is the imagery; one full section inverts to solid red. Interactions: press G (or a button) to toggle a column-and-baseline grid overlay, hovering speaker rows shifts them exactly one gutter, the schedule strip scrolls horizontally, and the footer colophon cycles justified alignment. Ruler-precise, quiet, confident.
DESCRIPTION: A conference poster-page in strict Swiss / International Typographic Style: a 17vw uppercase mega-headline (GRID IS ALL, with a thin-weight 'is' and a single red 'all'), flush-left and letter-spacing negative, over a twelve-column modular grid with an 8pt-feel baseline rhythm. Numeric indices and tabular numerals run everywhere — poster number, coordinates, edition, register labels, seat counts. Twelve speakers are pure typographic rows (index, name, role, city) with two keynote names printed in process red; a full manifesto section inverts to solid red with white type and a stat row (12 columns / 8pt baseline / 3 inks / 0 photographs); the programme is a horizontally scrolling timetable strip with black break-slots and red keynote-slots; a colophon declares the whole typesetting. No images anywhere — the type does everything.
TECHNIQUES: CSS Grid twelve-column modular layout with a single --gutter custom property shared by every register, custom-property overlay of the live column grid plus a repeating-linear-gradient baseline overlay toggled by class, clamp() fluid type from 360px to 4K, transform:translateX(gutter) hover shift on speaker rows with cubic-bezier easing and a red tick appearing in the left margin, pointer-captured drag-to-scroll on the schedule strip plus vertical-wheel-to-horizontal translation, colophon text-align cycling (left/center/right/justify) with hyphens, tabular-nums everywhere, keyboard shortcuts (G, C) with input-field guard, live tabular clock in the edge chrome, prefers-reduced-motion honored (transitions removed, hover shift disabled)
INTERACTION: Press G or the centred button to reveal the column grid and red 8pt baseline overlay the page is built on; hovering (or keyboard-focusing) a speaker row shifts it exactly one gutter right and shows a red tick; the programme strip drags horizontally with grab cursor and converts vertical wheel motion into horizontal scroll; clicking the colophon or pressing C cycles its justification through flush left, centered, flush right and justified — a quiet joke about the style's own rules. A live tabular clock ticks in the top-right register.