Behind the scene

Helvetic Congress is a fictional design conference built as a working homage to the International Typographic Style — with its skeleton left deliberately visible. One file, one typeface, two colours plus red.

01 — The grid is not a metaphor press G on the main page

Most sites have a grid; this one shows it. A fixed 12-column overlay (12 divs with hairline borders) sits under the content, and every element on the page is placed with explicit grid-column coordinates on the same tracks. Press G and you can verify that nothing — not one headline, not one price — sits off-grid. The overlay isn't a dev tool left on; it's the thesis of the design.

.spk-n { grid-column: 2/8; }   /* name: columns 2–8 */
.spk-t { grid-column: 8/12; }  /* talk: columns 8–12 */

02 — Constraint inventory

• One typeface — Inter Tight, weights 300–900 doing all hierarchy work. No second voice.
• One unit — every padding and height derives from an 8px base (--u), halved to 6px on mobile.
• Two colours + red — off-white, near-black, and #E30613 used only where it must scream.
• Zero border-radius, zero shadows, zero gradients. Flat by conviction, not by default.

03 — Motion in the Swiss idiom

Swiss design predates easing curves, so motion here is either mechanical or instant:

• The headline word (DIE / ALIGN / OBEY / REPEAT) hard-swaps every 1.4s — no fade, like a split-flap departure board.
• Speaker rows flood red left-to-right on a steep cubic-bezier(.7,0,.3,1) while the name snaps from weight 300 to 900 — hierarchy itself as the hover state.
• The facts rail is a constant-velocity marquee. The red dot breathes on a 4s cycle — the single organic gesture on the page, which is why it works.

04 — Typography details that carry it

The giant GRID OR DIE sets line two as stroke-only text (-webkit-text-stroke) so the page has a "printed vs. embossed" contrast with zero extra colours. Schedule times use font-variant-numeric: tabular-nums so colons align down the column — the kind of detail nobody notices and everybody feels.

05 — Reproduce it

Define the grid first, content second. Render your grid as a visible overlay while building (then dare to ship it). Allow yourself one accent colour and make every use of it justify itself. When in doubt, remove the animation — in this idiom restraint reads as confidence.