A working studio for design in the Swiss tradition — the International Typographic Style and Neue Grafik — applied to web interfaces and static graphics. Every piece reads from a single token system and a shared baseline reset. No bespoke colors, no local type scales, no ornament.

Vanilla HTML and CSS with hand-authored SVG for the graphics. Vite for the dev server. The grid is the foundation; typography carries hierarchy; asymmetric balance sits on a rigorous column structure.

• tokens.css — the source of truth for grid, type, color, and spacing. Imported by every piece; never restated locally.
• base.css — reset and baseline typography, built on the tokens.
• overlays.css — togglable 12-column grid and 8-pixel baseline overlays for construction and debug.
• web/ — interactive web pieces, one folder per piece, each with a notes.md documenting grid construction and rationale before any markup.
• graphics/ — static graphics authored as hand-written SVG.
• studies/ — short exercises and type specimens.

Any page that includes overlays.css exposes two construction guides:

• G — toggle the 12-column grid overlay.
• B — toggle the 8-pixel baseline overlay.

A fixed toggle in the bottom-right mirrors the shortcuts for touch.

Clarity over ornament. Objectivity over expression. One token system, one baseline, one grid. Every piece is legible without the notes — and the notes exist anyway, because the construction should be as honest as the output.

Vanilla HTML · CSS · Hand-authored SVG · Vite

View on GitHub →

Visit the workbench →