← All work

Publication + gear calculator

Single Speed Society

One cog. No excuses.

Role
Brand kit, Editorial design, Front-end, Maths
Year
2026
Status
Live
Site
singlespeedsociety.com ↗
Single Speed Society homepage: the headline "Pick a gear. Live with it." beside a sample setup reading 46.9 gear inches.
The problem

Singlespeed riders choose one gear and live with it, so the choice matters: the ratio, the chain length, and whether the wheel sits right in the dropouts with no tensioner. That deserves a proper tool, and a publication with some personality.

What I built
  • A brand kit covering colour, type, components and voice, with Coggy the mascot, and a site built strictly from it
  • A calculator for gear inches, ratio, development, gain ratio, skid patches and chain length, comparing up to three setups
  • A magic gear finder: every cog that sits a whole even number of links taut on your chainstay, within ±0.5 mm
  • Every setup is a URL you can paste into a forum argument
  • An MDX publishing system for field journals, bike checks with spec tables, and gear, with figure, full-bleed, pair and pull-quote components
Stack
  • Astro 7
  • React 19 island
  • MDX
  • Vitest
  • Vercel
Decisions worth mentioning
  1. 01

    I found a bug in the brief

    The chain-length formula in the spec had a factor-of-two error in its last term. The calculator uses exact pitch-circle geometry instead (tangent spans plus the links wrapped on each sprocket) and is unit-tested against the corrected textbook formula.

  2. 02

    Zero JavaScript on articles

    The site is static Astro. Only the calculator hydrates, as a single React island. Reading a ride report costs nothing but the photos.

  3. 03

    The brand kit is the source of truth

    Tokens live in one stylesheet and components never hard-code a colour. Two grounds per screen, radius no more than 2px, every number in DM Mono. The rules are written down so the next person can keep them.