Make sure all the interactive components actually make changes and provide live updates. The grid scaling works but shadows/scale/colors,fonts don't update
I want you to generate for me a site that will allow me to design, and preview, a robust design token system using TailwindCSS 4. Included in this design system should be a comprehensive preview using a mock ui that live updates to changes in the design tokens. The principal of a grid design system should be used, so that if the user alters the grid spacing from 8 to 12 then all aspects of padding, margins, etc are changed also to be relative to this change. Use sensible, battle-tested defaults for the design token implementation so that it works out of the box but can be tweaked as the user needs.
