A system with a product attached as proof of load
Most design system case studies show the system. A smaller number show a product. Very few show both, from the same hand, where the product exists specifically to prove the system holds weight.
Heures is the second kind. The token architecture came first; the calendar is what proves it survives contact with real interface problems — dense month grids, overlapping event blocks, a now-indicator that has to stay legible against twelve different accent sets and four seasonal grounds.
The system, specifically
Theming systems break in predictable places. Heures is built around the four places they break most often.
Two-slot accent architecture. Most systems fail because one accent has to serve every role, so a color that reads well on a “today” marker is wrong on an event block. Heures splits accent into two slots — primary for the today marker, FAB, and now-indicator; secondary for event blocks and calendar pips. Components consume secondary through a fallback chain that degrades to primary when unset. Themes swap both slots atomically.
Deep and pastel pairs, hand-tuned. Each calendar carries both a deep primary and a hand-tuned pastel. A fill and a border derived algorithmically from one hex will always be wrong at one end of the scale, so the tokens encode the pair rather than computing it.
Seasonal surfaces as their own collection. Surface tokens vary independently of accent, so a seasonal ground change never touches accent logic. Two axes, no cross-product of components.
Graceful token fallthrough. Five accent themes were cut and replaced mid-build. Users who had already selected a removed theme fell through silently to the season default instead of erroring. Deprecation is a design system problem, and most systems handle it by breaking.
The part that only shows up in production
Every store returns a cached snapshot rebuilt only on mutation. The first version returned a fresh object per call and put React into an infinite render loop.
That bug is in the case study on purpose. Systems get sold on architecture diagrams and get judged on whether someone can debug them at 11pm. Referential stability in the store layer is not a design decision or an engineering decision, it is the seam between them, and it is exactly the seam where handoff-only design work falls apart.
The velocity argument
Solo. Nights and weekends. Alongside a full-time job.
Next.js 16, React 19, TypeScript, Tailwind 4, Google Calendar OAuth sync, a virtualized month/week/day/year view set, recurring-event expansion with per-instance exceptions, command-K fuzzy search, and a full onboarding and empty-state suite.
Built with the same stack SteelForge installs: Claude Code, Figma Dev Mode MCP, filesystem and Gmail MCP servers, design-to-code round-tripping. This is not a claim that AI makes teams faster in the abstract. It is a shipped product and a Figma file that agree with each other, which is the only version of that claim worth anything.
Why it's on this page
Heures is the product SteelForge built for itself. The system underneath it is the same one installed for clients. The difference is that here every decision had to be lived with.