sjgwebdev.Component Library
Cards, forms and motion, built on one token contract, so anything here drops into a new build and picks up its palette, corner radius and typeface without being rewritten.
- Tokens, not hexes. Nothing hard-codes a colour. One change to theme.ts re-skins the lot.
- Light and dark, both measured. Every fill has an ink with a contrast figure against it, checked rather than eyeballed.
- Motion that can be switched off. Under reduced motion nothing travels. That rule is not configurable.
What this is, and what it is not
The source always wins
Each component names where it came from, and that source is the live one. A library that quietly drifts from the code it was drawn out of would be worse than no library, so the provenance sits on every component rather than in a footnote.
Neutral on purpose
The palette is a flat grey ramp with one blue accent. A beautiful theme here would sell you the colours instead of the component, and every one of these patterns is meant to take on the palette of whatever site it lands in.
Portability is the test
Every pattern reads the same theme. One that renders correctly here is portable by construction. One that needs a token this site does not define is coupled to where it came from, which is worth knowing before you paste it, not after.