Skip to content
Leadersheet

Colophon

How it’s built

A static site: open source tools, a small design system, and a lot of checking.

Source code

The design system

Brand presets
Name, logo, colors and emphasis style live in one folder. Swap the folder and the whole site reskins.
Two inks
Paper and ink carry the page. A lime highlighter marks one phrase per view; hot pink marks the one thing to look at in a model.
Sheets
Each big idea is a numbered sheet with a title block, like a set of drawings.
Study and Play
One switch changes emphasis, never content: Play mode leads with the games.
Class mode
The public site is timeless. People taking the class switch on dates and what is due, once.

Framework

  • Next.js16.3App Router, statically exported. Every page is plain HTML, no server.
  • React19.2Components and state for the labs, quizzes and games.
  • TypeScript5.9Typed content, labs and brand config.

Interface

  • Tailwind CSS4.3Styling from design tokens.
  • shadcn/uiComponent recipes, restyled from the brand tokens.
  • Radix UI1.6Accessible primitives: dialog, tabs, slider, toggle group, checkbox.
  • cmdk1.1The ⌘K search across sheets, frameworks and games.
  • next-themes0.4Light and dark mode that follows your system.
  • LucideIcons.

Motion

  • Remotion Player4.0The hero film and the 16 second recap on every sheet, generated from the content in the browser.
  • Motion13.5Spring layout animations: the sliding nav underline, the phone tab bar, the Study and Play pill and the lab toggles.
  • NumberFlow0.6Scores, timers and counts that roll digit by digit.
  • CSS scroll timelinesSections rise in as they scroll into view, with no JavaScript; the highlighter swipe and the celebration burst are CSS too. All of it turns off with reduced motion.

Type

Quality

  • axe-coreAutomated WCAG 2.1 AA checks on every page, in light and dark, including game and result screens.
  • Chrome DevTools ProtocolScripted screenshots at phone and desktop sizes, and overflow checks at 375 px.
  • Contrast checksEvery color pair in the palette measured against WCAG ratios before it shipped.

Hosting

  • VercelBuilds the site from GitHub and serves it from the edge. Web Analytics counts page views and a few anonymous actions (a check finished, a game played, a share) with no cookies.
  • GitHubSource code and history.