01 · Creative premise
Practice what the conference preaches.
GRID/WORKS is a fictional biennale for constructive graphic design: the Swiss International Style, alive in 2027. A site about that subject has exactly one honest move: be a specimen of the thing itself. Three colors. Two typefaces. One 12-column grid with a 12 pixel baseline, carried without exception from the masthead to the colophon.
Every element sits on the grid, and the site will show you the grid to prove it.
The constraint is the showcase. Where other experiments in this series perform with WebGL or generated imagery, this one performs with restraint: the discipline named in the headline is demonstrated by the page you are reading it on.
02 · The system
Three colors, two faces, one baseline.
Paper, ink, Swiss red
#f7f5f2, #111111, #e63329. Red is never decoration: it marks section numbers, active states, emphasis spans, and the tickets section, where it becomes the ground.
Inter Tight and Space Mono
Inter Tight at 800 does the Akzidenz work in headlines with tight negative tracking. Space Mono carries every label, chip, and table header at small caps sizes.
12 columns, 12px baseline
One CSS Grid definition drives every section. Hairline rules land on column edges because the content actually occupies the columns, not because lines were drawn where they look nice.
Structure over whitespace
Sections separate with single ink rules rather than large gaps, the print signature of the style. Vertical rhythm stays in baseline multiples.
03 · Grid exposure
The toggle is the signature moment.
A control in the masthead (or the G key) flips the page into drawing-office mode: the 12 columns tint red, the baseline grid draws in, and annotation chips appear against the headline, the footer, and the margins, reporting the actual specs: H1 / INTER TIGHT 800 / LH 0.92, COL 12 · GUTTER 0 · MARGIN 0 · BASELINE 12.
<html class="grid-on"> /* one class, whole page changes */
#gridOverlay → fixed, 12 tinted columns + baseline lines
.spec-chip → absolute annotations, only visible when exposed
button aria-pressed → toggle state announced to screen readersIt is a design-nerd feature by intent. The audience for a biennale site is designers, and the invitation in the manifest says it plainly: press the toggle and see the system beneath the surface. Nothing communicates confidence in a layout like offering the reader the ruler.
04 · Swiss motion
Fast, flat, and finished.
International Style motion should feel like precise machinery, not like water. Every transition on the page obeys three rules:
Snappy timing only
Hovers invert instantly, reveals settle in a quarter second, nothing floats. The slowest things on the page are the two counter-scrolling marquees, and they are steady, not eased.
Hard edges everywhere
No soft shadows, no glows, no parallax. The ticket casts a flat offset block shadow, exactly like spot-color print.
Position and color only
Headline lines rise in with a clipped translate. Schedule rows invert on hover. The stub tears with a single translate and rotate. Nothing animates layout.
05 · Set pieces
Small machines in the margins.
A stub that tears
The specimen ticket is CSS: perforation as a dashed border with punched circles, ADMIT ONE set vertically. Click it and the stub tears off along the perforation, rotates a few degrees, and a mono caption confirms: see you in Basel.
Counter-scrolling rosters
Two bands, speakers on ink and exhibitions on red, scroll in opposite directions with duplicated tracks for seamless loops. The only continuous motion on the page, used as a horizontal rule you can read.
A table that behaves like print
Day headers are full-bleed ink bars. Rows invert completely on hover, text and all, the exact behavior of a highlighted line in a printed programme.
06 · Production process
Three passes before release.
System verification
- Exposed the grid and audited every section against the overlay at desktop width.
- Click-tested the toggle and confirmed the annotation chips report real values.
- Verified both marquees loop without seams.
Mobile discipline
- Stopped the GRID: OFF control from wrapping and tightened its mobile footprint.
- Rebalanced the mobile hero so the headline claims the top instead of floating in dead air.
- Confirmed the 6-column mobile overlay variant and the two-across speaker grid.
Interaction and release QA
- Click-tested the ticket tear and its confirmation caption.
- Swept desktop at four depths and mobile at three; zero console errors throughout.
- Verified the G shortcut ignores modifier keys and text inputs, and reduced motion stays legible.
- Shipped through the production build and portfolio index.
07 · Authorship
Built by models. Directed by a person.
This series is a transparent record of AI orchestration. Credit is split by the work actually performed.
Claude Fable 5 invented the biennale, wrote the manifest and programme, built the grid system, exposure toggle, marquees, and ticket, and completed the three polish passes.
Codex established the portfolio index at /x, the per-experiment guide pattern, and the release pipeline this site ships through.
Viron Gil Estrada commissioned the 25-site experiment, set the quality bar, owns the platform, and defined the one-site-at-a-time release strategy.
Three colors, two typefaces, zero images, zero shadows softer than a block. The style guide is the whole site.