biketools.cc

Colophon

Typography

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

  • Fraunces by Undercase Type — the serif used for headlines and tool names. The ss01 stylistic alternates are on.
  • Inter by Rasmus Andersson — the sans used for body, UI, and labels. cv11 and ss03 are on.
  • JetBrains Mono by JetBrains — the monospace used for every numeric value in every tool. Tabular figures are always on for data.

Tech

Built on Next.js 15, TypeScript strict, vanilla CSS with CSS Modules, hand-built layout primitives inspired by Every Layout. 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. Testing is Vitest and Playwright. Lint and format are Biome. Hosting is Vercel.

Runtime dependencies are locked to seven. 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.