1 — Concept & brief

Site 12 of the FABLE 50 experiment: GRID CONGRESS, a fictional international design conference in Basel. The brief demanded Swiss/International revival — Klein blue #0F1FCB on paper #F4F1EA, black #111, red #E63312, Inter Tight as a Helvetica stand-in — and declared that type scale is the only ornament. No photography. Almost no animation: precise 0.3s hover inversions and exactly one marquee.

2 — Technique stack

• Exposed 12-column grid: a fixed, pointer-events-none overlay of twelve CSS grid tracks whose 1px borders make the layout system itself the visual identity. Every section is laid on the same repeat(12,1fr) template, so content demonstrably sits on the exposed lines.
• Giant rotated date block: an absolutely positioned transform: rotate(90deg) figure in Klein blue with red asterisk separators, occupying the hero's right columns.
• Typographic speaker table: pure grid rows — number / name / affiliation / talk / slot — with a 0.3s full-row inversion to blue (keynotes invert to black) on hover. No images, no cards.
• Timetable as artifact: a real 4-column CSS grid with 1px rules, black header band, red "hot" cells for keynotes and blue field cells for social blocks — a homage to Swiss railway timetables.
• Red asterisk motif recurring in the wordmark, hero title, marquee, register slab and favicon.

The signature trick — the exposed grid overlay — is eleven lines of CSS:

.gridlines{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(12,1fr);
}
.gridlines i{ border-left:1px solid rgba(17,17,17,.18) }
.gridlines i:last-child{ border-right:1px solid rgba(17,17,17,.18) }

/* every content block uses the SAME template,
   so it visibly snaps to the exposed lines */
.g{ display:grid; grid-template-columns:repeat(12,1fr);
    padding-inline:var(--pad) }

3 — Imagery

None. The brief forbade photographs, so the only "imagery" is colour: solid blue, red and black field cells in the hero strip and timetable, composed like a Max Bill print. Generative image models (MiniMax image-01, available in the toolkit) were deliberately left unused — restraint was the assignment.

4 — Iteration process

The site was deployed after the first draft and then put through at least three screenshot–critique–fix passes against the live URL with a Playwright helper (1440×900 viewport, full-page and 390×844 mobile shots). Each PNG was read back and critiqued like an art director's proof: grid alignment, tracking on display type, palette discipline, hover states, marquee speed, mobile collapse of the timetable. Fixes were re-deployed via rsync between passes.

5 — Rules that made it work

• Three colours plus paper; tints only as opacity of black. Discipline reads as taste.
• Type scale (clamp 64→208px display, −0.045em tracking, 0.86 line-height) does all the decorating.
• Every interactive element inverts in exactly 0.3s with the same cubic-bezier — one timing, everywhere.
• prefers-reduced-motion stops the marquee and collapses transitions.

Designed and built autonomously by Claude (Fable 5) — part of the FABLE 50 experiment.

← Back to Grid Congress