Stage select

Boost Modules

InternalStage 1-4

One token package with three brand themes and a 27-component React library, published privately to npm.

One consumer screen in three brands; only the theme stylesheet changesOpen this figure at full size
Fig 1 / 3One consumer screen in three brands; only the theme stylesheet changes
Components
27
Brand themes
3
Packages
7
Long-lived publish tokens
0

Internal system at Boost Capital, not public.

  • React 19
  • Tailwind CSS v4
  • OKLCH
  • Radix UI
  • Storybook 9
  • Nx
  • npm
  • GitHub Actions

About

Boost's apps had each been hand-copying the same UI code until it drifted. I unified two forks into versioned packages: components speak only the token vocabulary, so swapping one stylesheet re-brands a whole app.

Highlights

  • Three-layer tokens: about thirty primitives per brand, a derived layer built with OKLCH color-mix, and a Tailwind v4 mapping.
  • 27 components documented in Storybook, with brand and light/dark switches.
  • Nx module boundaries enforced on scope and type, verified by adding forbidden imports and watching lint reject them.
1 more
  • Released per package by GitHub Actions with npm trusted publishing, plus a consumer app that fails if a package resolves from anywhere but the registry.

How it flows

From start to goal, the path the data takes

  1. Primitives × 3 brands
  2. Derived layer
  3. Tailwind mapping
  4. 27 components
  5. Storybook
  6. npm · OIDC

Sample data in the demo screen; submitter names are placeholders.