biketools.cc

Colophon

Typography

Two families, both open-source, self-hosted via Fontsource (woff2 files bundled at build time and served from this origin).

  • IBM Plex Mono by Mike Abbink and Bold Monday — the voice of the site. Every numeric value, unit, label, dimension, and annotation is set in it, tabular figures on.
  • IBM Plex Sans — headings, body prose, and control labels. There is no display serif; the contrast comes from scale, not style.

Tech

Built on Vite + React + React Router, TypeScript strict, vanilla CSS with CSS Modules, hand-built layout primitives inspired by Every Layout. Every route prerenders to static HTML at build time — no server runtime. State stays in React's built-ins; shareable tool state goes in the URL via a custom hook. The command palette uses cmdk and Radix Dialog. MDX powers the content pages. Charts and drawings are raw SVG. Testing is Vitest and Playwright. Lint and format are Biome. Hosting is Cloudflare Pages.

Runtime dependencies are locked to five. Adding one requires a new architectural decision record.

Inspirations

The work biketools.cc tries to be in the same room as:

  • Dieter Rams — Ten principles for good design
  • Vitsoe — what good documentation looks like
  • Edward Tufte — The Visual Display of Quantitative Information
  • Apple's early Aperture and Final Cut Pro — dense, professional, trusted
  • Linear — what keyboard-first product surface looks like in 2026
  • Rapha — for the typography and restraint
  • Park Tool — methodology transparency and longevity
  • Sheldon Brown — the original well-made cycling reference

Source

The codebase is part of the design. It's open and readable at github.com/etienneservant/biketools.

License

MIT. © Etienne Servant.