What it is
The other half of a shared design system: components that are actually built, that consume the tokens, and that behave the same across whatever frameworks the product teams use.
How I approach it
I build on the platform first — semantic HTML, modern CSS (custom properties, logical properties, nesting, layers) and just enough JavaScript. For shared libraries I prefer web components with Lit, so one implementation drops into React, Vue, Astro or plain HTML without a rewrite. For app code I work in React, and I reach for zero-runtime CSS (Panda CSS, vanilla-extract) when a team wants typed, token-bound styles without shipping a styling runtime.
Every value traces back to a token. There are no stray hex codes or magic numbers in the components I hand over.
Common problems I solve
- Component libraries locked to one framework that the next team can’t use.
- CSS that has drifted from the design tokens into one-off values.
- Heavy styling runtimes shipped to users who don’t need them.
- Markup that looks fine but isn’t accessible or semantic underneath.
- A finished design that needs to become a real, well-structured build — a marketing site with a CMS, or an interactive touchscreen kiosk running offline on the hardware.
This site is the small example: static Astro, layered hand-written CSS and a token pipeline, with JavaScript kept to the few places that genuinely need it.