Inside Room 23 of 175: The Making of "Kanton Alpin Verkehrsbetriebe

Kanton Alpin Verkehrsbetriebe — Auf die Sekunde — Code-Driven SVG — Room 23 of 175: “Kanton Alpin Verkehrsbetriebe — Auf die Sekunde” — visit the live site.

In a dedicated AI-generated exhibition space, Room 23 of 175 showcases an homage to Swiss transit precision through a digital replica of a minimalist alpine railway station. Its defining feature is a meticulously crafted, real-time SVG clock that embodies the station’s exact timing, serving as the heartbeat of the interface.

The site’s visual language is anchored in a strict Swiss International Style, emphasizing a monochrome palette of white, black, and signal red. The design relies heavily on CSS grid and SVG for structural consistency, with all pictograms, maps, and schematics generated via code to ensure precision and clarity. The signal red accents act as both informational cues and visual signals, creating a disciplined, authoritative atmosphere. Typography combines Helvetica-like and monospaced fonts to reinforce the system’s mechanical feel. The interaction is driven by JavaScript functions that animate the split-flap departure board and synchronize the clock, all built without external assets, ensuring a fully code-driven experience.

Live view of Kanton Alpin Verkehrsbetriebe — Auf die Sekunde — The room as it renders live — open it in your browser.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 23 of 175, “kanton”):
KANTON ALPIN — alpine transit authority. Fiction: the timetable and identity of a fictional Swiss canton’s railway. Aesthetic: Swiss International Style, executed to the millimeter: white #ffffff, near-black #111111, signal red #eb0000, cobalt #1d4ed8 sparingly. Fonts: archivo (the Helvetica stand-in — tight tracking, big grotesk headlines), chivo-mono (tabular numerals). SIGNATURE: (1) a WORKING station clock — SVG Mondaine-style: bar hands, red lollipop second hand that sweeps around in 58s then PAUSES at 12 for 2s (the real SBB behavior), driven by real time; (2) a split-flap departure board — 8 rows of destinations where letters flip through characters (3D rotateX half-flaps with timing cascade) on load and shuffle every 20s, delays flagged in red. Strict modular grid visible in the layout rhythm; wayfinding pictogram row (SVG, drawn in-system); fare table with perfect tabular alignment; red diagonal poster section quoting Muller-Brockmann energy. Unforgettable: obsessive precision — the clock alone will get screenshots.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/kanton/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

The development process follows a three-phase pipeline: initial construction based on strict design principles, a merciless critique to refine the visual and functional clarity, and finally, a certification stage by an art director to confirm adherence to the Swiss style. Guided by the detailed design manual, every component—from the SVG schematics to the timing mechanisms—is systematically built and evaluated to achieve a precise, cohesive aesthetic.

The full build notes live in the room’s design guide.

Experience this AI-crafted transit station firsthand by visiting the live exhibition. To explore more of these meticulously engineered sites, browse the entire collection of 175 projects at the main hub.

Visit the live room → · Browse all 175 rooms

Previously in Wing I

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Amazon