What existed
A JavaScript PWA with light/dark CSS variables, shared UI helpers, a component catalogue, accent/shape/surface presets and tests for visual configuration.
PB.fit Design System / a chapter of the product case
Built for the moment
of training.
An existing PWA, a portable token model and a React study of the patterns that keep a workout moving.
01 / SOURCE AUDIT
Start from the product.
A session mixes planning, repetition, rest and recovery. The interface has to change emphasis without changing its visual or interaction language.
What needed structure
Theme values and product styles existed, but there was no portable primitive → semantic → component JSON contract connecting the documentation examples.
What this chapter adds
An extracted token foundation, fourteen React demonstrations and composed workout examples. The PWA remains JavaScript; this is not a retroactive React migration.
PB.fit light/dark colors are extracted from the existing product. Control borders and the documented type/spacing scales are consolidation choices. The React library is used by this portfolio, not installed in the production PWA.
02 / ARCHITECTURE
Make decisions
reusable.
A semantic layer keeps brand choices separate from component behavior. Product patterns compose primitives, and the consuming application owns its data and rules.
Separate role from value
Klein blue is a primitive. Action fill, link text and focus are distinct semantic roles. In dark mode they can resolve differently without inventing another Button API.
Control the variation
Primary, secondary and danger are supported action intents. Loading and disabled are states, not new visual variants. The original accent/shape/surface preset API stays outside this bounded React study.
Compose around the set
WorkoutCard, ExerciseRow and SetStepper compose the same primitives. They keep planning and execution consistent while leaving session rules in the application.
Brand values → semantic roles → component tokens → product patterns 4px spacing base · 12 / 14 / 16 / 24 / 40px type roles 44px control targets · explicit light and dark alias sets
03 / LIVE DOCUMENTATION
Inspect the system.
Try the contract.
Select a component to inspect its properties, variants and states. Switch to Tokens to trace aliases, or Application to see the same library composed across screen sizes.
Loading the interactive component catalogue…
04 / IMPLEMENTATION & HANDOFF
A system needs
an adoption path.
The portfolio’s existing PWA embed now consumes these roles through a CSS adapter. It retains the original markup and session controls. A production migration would start with one reviewed screen, not a wholesale rewrite.
One contract, explicit responsibility.
Import the component and compiled tokens. Scope the brand and mode at the root of the product surface. Pass controlled state from the application, rather than letting a component talk to storage or infer permissions.
<div data-ds-brand="pbfit" data-ds-mode="dark">
<SetStepper
value={load}
onChange={setLoad}
min={0} max={100}
label="Load" unit="kg"
/>
</div>Review before adoption.
- Choose a representative product screen.
- Compare the existing styles with the semantic adapter.
- Verify contrast, labels, focus, disabled states and responsive behavior.
- Document intentional visual differences and migrate incrementally.
No Figma library is required. A future MCP integration is documented as a mapping proposal; no Figma connection or automated synchronization is claimed.